Test/622 node switcher tests (#852)

* test: passing validation tests

* test: update .env

* test: mock network response

* chore: remove this. from before each hook

* chore: changed test ids and removed force true

* fix: add timeout to node error

apps/explorer-e2e/.env

@@ -4,6 +4,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 NX_VEGA_URL=http://localhost:3028/query
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_REST=http://localhost:3029
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/capsule-network.json
 
 CYPRESS_VEGA_TENDERMINT_URL=http://localhost:26617
 

apps/explorer-e2e/src/integration/node-switcher.cy.js

@@ -0,0 +1,84 @@
+const nodeErrorType = 'node-error-type';
+const nodeErrorMsg = 'node-error-message';
+const nodeId = 'node-url-0';
+const customNodeBtn = 'custom-node';
+const closeDialogBtn = 'dialog-close';
+
+context('Node switcher', function () {
+  before('visit home page', function () {
+    cy.intercept('GET', 'https://static.vega.xyz/assets/capsule-network.json', {
+      hosts: ['http://localhost:3028/query'],
+    }).as('nodeData');
+    cy.visit('/');
+    cy.wait('@nodeData');
+  });
+
+  describe('form validations and responses', function () {
+    beforeEach('open node selector', function () {
+      cy.getByTestId('git-network-data').within(() => {
+        cy.getByTestId('link').click();
+      });
+    });
+    it('node data is displayed', function () {
+      cy.getByTestId('node-row').should('have.length.at.least', 1);
+
+      cy.getByTestId('node-row')
+        .eq(0)
+        .within(() => {
+          cy.getByTestId(nodeId)
+            .should('exist')
+            .and('have.attr', 'aria-checked', 'true');
+          cy.get('label').should('have.text', Cypress.env('networkQueryUrl'));
+          cy.getByTestId('response-time-cell')
+            .should('not.be.empty')
+            .and('contain.text', 'ms');
+          cy.getByTestId('block-cell').should('not.be.empty');
+          cy.getByTestId('ssl-cell').should('have.text', 'Yes');
+        });
+    });
+
+    it('Incorrect network displayed', function () {
+      const errorTypeTxt = 'Error: incorrect network';
+      const nodeErrorTxt = 'This node is not on the CUSTOM network.';
+
+      validateNodeError(errorTypeTxt, nodeErrorTxt);
+    });
+
+    it('cannot connect to network using invalid url', function () {
+      const errorTypeTxt = 'Error: invalid url';
+      const nodeErrorTxt = 'fakeUrl is not a valid url.';
+
+      cy.getByTestId('node-url-custom').click();
+
+      cy.getByTestId(customNodeBtn).within(() => {
+        cy.get('input').clear().type('fakeUrl');
+        cy.getByTestId('link').click();
+      });
+      validateNodeError(errorTypeTxt, nodeErrorTxt);
+    });
+
+    it('Cannot connect to network from different chain ID', function () {
+      const errorTypeTxt = 'Error: incorrect network';
+      const nodeErrorTxt = 'This node is not on the CUSTOM network.';
+
+      cy.getByTestId('node-url-custom').click();
+
+      cy.getByTestId(customNodeBtn).within(() => {
+        cy.get('input').clear().type('https://n04.d.vega.xyz/query');
+        cy.getByTestId('link').click();
+      });
+      validateNodeError(errorTypeTxt, nodeErrorTxt);
+    });
+
+    afterEach('Close node switcher', function () {
+      cy.getByTestId(closeDialogBtn).click();
+    });
+
+    function validateNodeError(errortype, errorMsg) {
+      cy.getByTestId(nodeErrorType).should('have.text', errortype, {
+        timeout: 1000,
+      });
+      cy.getByTestId(nodeErrorMsg).should('have.text', errorMsg);
+    }
+  });
+});

libs/environment/src/components/node-switcher/layout-cell.tsx

@@ -7,6 +7,7 @@ type LayoutCellProps = {
   hasError?: boolean;
   isLoading?: boolean;
   children?: ReactNode;
+  dataTestId?: string;
 };
 
 export const LayoutCell = ({
@@ -14,6 +15,7 @@ export const LayoutCell = ({
   label,
   isLoading,
   children,
+  dataTestId,
 }: LayoutCellProps) => {
   const classes = [
     'px-8 lg:text-right flex justify-between lg:block',
@@ -25,6 +27,7 @@ export const LayoutCell = ({
     <div className={classnames(classes)}>
       {label && <span className="lg:hidden">{label}</span>}
       <span
+        data-testid={dataTestId}
         className={classnames('font-mono', {
           'text-danger': !isLoading && hasError,
           'text-white-60 dark:text-black-60': isLoading,

libs/environment/src/components/node-switcher/layout-row.tsx

@@ -2,11 +2,15 @@ import type { ReactNode } from 'react';
 
 type LayoutRowProps = {
   children?: ReactNode;
+  dataTestId?: string;
 };
 
-export const LayoutRow = ({ children }: LayoutRowProps) => {
+export const LayoutRow = ({ children, dataTestId }: LayoutRowProps) => {
   return (
-    <div className="lg:grid lg:gap-4 py-8 w-full lg:h-[42px] lg:grid-cols-[minmax(200px,_1fr),_150px_125px_100px]">
+    <div
+      data-testid={dataTestId}
+      className="lg:grid lg:gap-4 py-8 w-full lg:h-[42px] lg:grid-cols-[minmax(200px,_1fr),_150px_125px_100px]"
+    >
       {children}
     </div>
   );

libs/environment/src/components/node-switcher/node-error.tsx

@@ -9,8 +9,10 @@ export const NodeError = ({ headline, message }: NodeErrorProps) => {
   }
   return (
     <div className="p-16 my-16 border border-danger">
-      <p className="font-bold">{headline}</p>
-      <p>{message}</p>
+      <p data-testid="node-error-type" className="font-bold">
+        {headline}
+      </p>
+      <p data-testid="node-error-message">{message}</p>
     </div>
   );
 };

libs/environment/src/components/node-switcher/node-stats.tsx

@@ -12,6 +12,7 @@ type NodeStatsContentProps = {
   highestBlock: number;
   setBlock: (value: number) => void;
   children?: ReactNode;
+  dataTestId?: string;
 };
 
 const getResponseTimeDisplayValue = (
@@ -55,14 +56,16 @@ const NodeStatsContent = ({
   highestBlock,
   setBlock,
   children,
+  dataTestId,
 }: NodeStatsContentProps) => {
   return (
-    <LayoutRow>
+    <LayoutRow dataTestId={dataTestId}>
       {children}
       <LayoutCell
         label={t('Response time')}
         isLoading={data.responseTime?.isLoading}
         hasError={data.responseTime?.hasError}
+        dataTestId="response-time-cell"
       >
         {getResponseTimeDisplayValue(data.responseTime)}
       </LayoutCell>
@@ -73,6 +76,7 @@ const NodeStatsContent = ({
           data.block?.hasError ||
           (!!data.block?.value && highestBlock > data.block.value)
         }
+        dataTestId="block-cell"
       >
         {getBlockDisplayValue(data.block, setBlock)}
       </LayoutCell>
@@ -80,6 +84,7 @@ const NodeStatsContent = ({
         label={t('SSL')}
         isLoading={data.ssl?.isLoading}
         hasError={data.ssl?.hasError}
+        dataTestId="ssl-cell"
       >
         {getSslDisplayValue(data.ssl)}
       </LayoutCell>
@@ -121,6 +126,7 @@ export const NodeStats = ({
         data={data}
         highestBlock={highestBlock}
         setBlock={setBlock}
+        dataTestId="node-row"
       >
         {children}
       </NodeStatsContent>

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

@@ -152,7 +152,10 @@ export const NodeSwitcher = ({
                     }
                   />
                   {(customNodeText || nodeRadio === CUSTOM_NODE_KEY) && (
-                    <div className="flex w-full gap-8">
+                    <div
+                      data-testid="custom-node"
+                      className="flex w-full gap-8"
+                    >
                       <Input
                         placeholder="https://"
                         value={customNodeText}
@@ -188,6 +191,7 @@ export const NodeSwitcher = ({
           className="w-full mt-16"
           disabled={isSubmitDisabled}
           type="submit"
+          data-testid="connect"
         >
           {t('Connect')}
         </Button>