test(trading): e2e test for select network and nodes - 0006-NETW (#3828)

apps/trading-e2e/src/integration/capsule.cy.ts

@@ -194,6 +194,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
   });
 
   it('shows node health', function () {
+    // 0006-NETW-010
     const market = this.market;
     cy.visit(`/#/markets/${market.id}`);
     cy.getByTestId('node-health')

apps/trading-e2e/src/integration/home-node-network.cy.ts

@@ -0,0 +1,111 @@
+import { closeWelcomeDialog } from '../support/helpers';
+
+const dialogContent = 'dialog-content';
+const nodeHealth = 'node-health';
+
+describe('home', { tags: '@regression' }, () => {
+  before(() => {
+    cy.clearLocalStorage();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/');
+  });
+
+  describe('footer', () => {
+    it('shows current block height', () => {
+      closeWelcomeDialog();
+      // 0006-NETW-004
+      // 0006-NETW-005
+      // 0006-NETW-008
+      // 0006-NETW-009
+      // 0006-NETW-011
+
+      cy.intercept('POST', 'http://localhost:3008/graphql', (req) => {
+        req.on('response', (res) => {
+          res.setDelay(3000);
+        });
+      });
+
+      cy.getByTestId(nodeHealth)
+        .children()
+        .first()
+        .should('contain.text', 'Warning delay ( >3 sec)');
+
+      cy.intercept('POST', 'http://localhost:3008/graphql', (req) => {
+        req.on('response', (res) => {
+          res.setDelay(1);
+        });
+      });
+
+      cy.getByTestId(nodeHealth)
+        .children()
+        .first()
+        .should('contain.text', 'Operational', { timeout: 10000 })
+        .next()
+        .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
+        .next()
+        .should('contain.text', '100'); // all mocked queries have x-block-height header set to 100
+    });
+
+    it('shows node switcher details', () => {
+      // 0006-NETW-012
+      // 0006-NETW-013
+      // 0006-NETW-014
+      // 0006-NETW-015
+      // 0006-NETW-016
+
+      cy.getByTestId(nodeHealth).click();
+      cy.getByTestId(dialogContent).should('contain.text', 'Connected node');
+      cy.getByTestId(dialogContent).should(
+        'contain.text',
+        'This app will only work on CUSTOM. Select a node to connect to.'
+      );
+      cy.getByTestId('node')
+        .first()
+        .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
+        .next()
+        .should('contain.text', 'Response time')
+        .next()
+        .should('contain.text', 'Block')
+        .next()
+        .should('contain.text', 'Subscription');
+      cy.getByTestId('custom-row').should('contain.text', 'Other');
+      cy.getByTestId('dialog-close').click();
+    });
+
+    it('switch to other node', () => {
+      // 0006-NETW-017
+      // 0006-NETW-018
+      // 0006-NETW-019
+      // 0006-NETW-020
+
+      cy.getByTestId(nodeHealth).click();
+      cy.getByTestId('connect').should('be.disabled');
+      cy.getByTestId('node-url-custom').click();
+      cy.getByTestId('connect').should('be.disabled');
+      cy.get("input[placeholder='https://']")
+        .focus()
+        .type(new URL(Cypress.env('VEGA_URL')).origin + '/graphql');
+      cy.getByTestId('connect').click();
+      cy.getByTestId(nodeHealth)
+        .children()
+        .first()
+        .should('contain.text', 'Operational');
+    });
+  });
+  describe('Network switcher', () => {
+    before(() => {
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.visit('/');
+    });
+
+    // 0006-NETW-002
+    // 0006-NETW-003
+    it('switch to fairground network', () => {
+      cy.getByTestId('network-switcher').click();
+      cy.getByTestId('network-item').contains('Fairground testnet').click();
+      cy.get('[aria-haspopup="menu"]').should('contain.text', 'Fairground');
+    });
+  });
+});

apps/trading-e2e/src/integration/home.cy.ts

@@ -4,6 +4,7 @@ import { marketsDataQuery } from '@vegaprotocol/mock';
 import * as Schema from '@vegaprotocol/types';
 
 const selectMarketOverlay = 'select-market-list';
+const dialogContent = 'dialog-content';
 
 const generateProposal = (code: string): ProposalListFieldsFragment => ({
   __typename: 'Proposal',
@@ -288,7 +289,7 @@ describe('home', { tags: '@regression' }, () => {
         cy.visit('/');
         cy.wait('@Markets');
         cy.location('hash').should('equal', '#/markets/market-1');
-        cy.getByTestId('dialog-content').should('not.exist');
+        cy.getByTestId(dialogContent).should('not.exist');
       });
     });
 
@@ -301,22 +302,8 @@ describe('home', { tags: '@regression' }, () => {
         cy.visit('/');
         cy.wait('@Markets');
         cy.location('hash').should('equal', '#/markets/market-not-existing');
-        cy.getByTestId('dialog-content').should('not.exist');
+        cy.getByTestId(dialogContent).should('not.exist');
       });
     });
   });
-
-  describe('footer', () => {
-    it('shows current block height', () => {
-      cy.visit('/');
-      cy.getByTestId('node-health')
-        .children()
-        .first()
-        .should('contain.text', 'Operational')
-        .next()
-        .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
-        .next()
-        .should('contain.text', '100'); // all mocked queries have x-block-height header set to 100
-    });
-  });
 });

libs/environment/src/components/network-switcher/network-switcher.tsx

@@ -107,6 +107,7 @@ export const NetworkSwitcher = ({
       onOpenChange={handleOpen}
       trigger={
         <DropdownMenuTrigger
+          data-testid="network-switcher"
           ref={menuRef}
           className={classNames(
             'flex justify-between items-center text-sm text-vega-dark-600 dark:text-vega-light-600 py-1 px-2 rounded border border-vega-dark-200 whitespace-nowrap dark:hover:bg-vega-dark-500 hover:bg-vega-light-500',