Main pages created

apps/explorer-e2e/src/integration/asset-page.feature

@@ -0,0 +1,6 @@
+Feature: Asset Page
+
+Scenario: Navigate to Asset Page
+  Given I am on the homepage
+  When I navigate to the asset page
+  Then asset page is correctly displayed

apps/explorer-e2e/src/support/pages/assets-page.js

@@ -0,0 +1,9 @@
+import BasePage from './base-page';
+
+export default class AssetsPage extends BasePage {
+  assetHeader = 'asset-header';
+
+  validateAssetsDisplayed() {
+    this.validateBlockDataDisplayed(this.assetHeader);
+  }
+}

apps/explorer-e2e/src/support/pages/base-page.js

@@ -8,4 +8,72 @@ export default class BasePage {
   marketsUrl = '/markets';
   networkParametersUrl = '/network-parameters';
   validatorsUrl = '/validators';
+  blockExplorerHeader = 'explorer-header';
+  searchField = 'search-input';
+
+  navigateToTxs() {
+    cy.get(`a[href='${this.transactionsUrl}']`).click();
+  }
+
+  navigateToBlocks() {
+    cy.get(`a[href='${this.blocksUrl}']`).click();
+  }
+
+  navigateToParties() {
+    cy.get(`a[href='${this.partiesUrl}']`).click();
+  }
+
+  navigateToAssets() {
+    cy.get(`a[href*='${this.assetsUrl}']`).click();
+  }
+
+  navigateToGenesis() {
+    cy.get(`a[href='${this.genesisUrl}']`).click();
+  }
+
+  navigateToGovernance() {
+    cy.get(`a[href='${this.governanceUrl}']`).click();
+  }
+
+  navigateToMarkets() {
+    cy.get(`a[href='${this.marketsUrl}']`).click();
+  }
+
+  navigateToNetworkParameters() {
+    cy.get(`a[href='${this.networkParametersUrl}']`).click();
+  }
+
+  navigateToValidators() {
+    cy.get(`a[href='${this.validatorsUrl}']`).click();
+  }
+
+  search(searchText) {
+    cy.getByTestId(this.searchField).type(searchText);
+  }
+
+  validateSearchDisplayed() {
+    cy.getByTestId(this.blockExplorerHeader).should(
+      'have.text',
+      'Vega Block Explorer'
+    );
+    cy.getByTestId(this.searchField).should('be.visible');
+  }
+
+  validateBlockDataDisplayed(headerTestId) {
+    cy.getByTestId(headerTestId).then(($assetHeaders) => {
+      const headersAmount = parseInt($assetHeaders.length);
+
+      cy.wrap($assetHeaders).each(($header) => {
+        expect($header).to.not.be.empty;
+      });
+
+      cy.get('.language-json')
+        .each(($asset, index, $list) => {
+          expect($asset).to.not.be.empty;
+        })
+        .then(($list) => {
+          expect($list).to.have.length(headersAmount);
+        });
+    });
+  }
 }

apps/explorer-e2e/src/support/pages/genesis-page.js

@@ -0,0 +1,9 @@
+import BasePage from './base-page';
+
+export default class GenesisPage extends BasePage {
+  GenesisHeader = 'genesis-header';
+
+  genesisFieldsDisplayed() {
+    this.validateBlockDataDisplayed(this.GenesisHeader);
+  }
+}

apps/explorer-e2e/src/support/pages/markets-page.js

@@ -0,0 +1,9 @@
+import BasePage from './base-page';
+
+export default class MarketsPage extends BasePage {
+  marketHeaders = 'markets-header';
+
+  validateMarketDataDisplayed() {
+    this.validateBlockDataDisplayed(this.marketHeaders);
+  }
+}

apps/explorer-e2e/src/support/pages/network-parameters-page.js

@@ -0,0 +1,14 @@
+import BasePage from './base-page';
+
+export default class NetworkParametersPage extends BasePage {
+  networkParametersHeader = 'network-param-header';
+  parameters = 'parameters';
+
+  verifyNetworkParametersDisplayed() {
+    cy.getByTestId(this.networkParametersHeader).should(
+      'have.text',
+      'NetworkParameters'
+    );
+    cy.getByTestId(this.parameters).should('not.be.empty');
+  }
+}

apps/explorer-e2e/src/support/pages/validators-page.js

@@ -0,0 +1,18 @@
+import BasePage from './base-page';
+
+export default class ValidatorPage extends BasePage {
+  tendermintHeader = 'tendermint-header';
+  vegaHeader = 'vega-header';
+  tendermintData = 'tendermint-data';
+  vegaData = 'vega-data';
+
+  validateValidatorsDisplayed() {
+    cy.getByTestId(this.tendermintHeader).should(
+      'have.text',
+      'Tendermint data'
+    );
+    cy.getByTestId(this.tendermintData).should('not.be.empty');
+    cy.getByTestId(this.vegaHeader).should('have.text', 'Vega data');
+    cy.getByTestId(this.vegaData).should('not.be.empty');
+  }
+}

apps/explorer-e2e/src/support/step_definitions/asset-page-step.js

@@ -0,0 +1,12 @@
+import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+import AssetsPage from '../pages/assets-page';
+const assetPage = new AssetsPage();
+
+When('I navigate to the asset page', () => {
+  assetPage.navigateToAssets();
+});
+
+Then('asset page is correctly displayed', () => {
+  assetPage.validateAssetsDisplayed();
+});

apps/explorer-e2e/src/support/step_definitions/common.step.js

@@ -0,0 +1,5 @@
+import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+Given('I am on the homepage', () => {
+  cy.visit('/');
+});

apps/explorer-e2e/src/support/step_definitions/home-page.step.js

@@ -1,5 +1 @@
 import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-Given('I go to the homepage', () => {
-  cy.visit('/');
-});

apps/explorer/src/app/contexts/websocket/tendermint-websocket-context.ts

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react';
-import { WebSocketHook } from "react-use-websocket/dist/lib/types";
+import { WebSocketHook } from 'react-use-websocket/dist/lib/types';
 
 export type WebsocketContextShape = WebSocketHook;
 
@@ -9,7 +9,7 @@ export const TendermintWebsocketContext =
 export function useTendermintWebsocketContext() {
   const context = React.useContext(TendermintWebsocketContext);
   if (context === null) {
-    throw new Error("useWebsocket must be used within WebsocketContext");
+    throw new Error('useWebsocket must be used within WebsocketContext');
   }
   return context;
 }

apps/explorer/src/app/routes/assets/index.tsx

@@ -39,7 +39,7 @@ const Assets = () => {
       <h1>Assets</h1>
       {data?.assets.map((a) => (
         <React.Fragment key={a.id}>
-          <h2>
+          <h2 data-testid="asset-header">
             {a.name} ({a.symbol})
           </h2>
           <SyntaxHighlighter data={a} />

apps/explorer/src/app/routes/genesis/index.tsx

@@ -12,7 +12,7 @@ const Genesis = () => {
   if (!genesis?.result.genesis) return null;
   return (
     <section>
-      <h1>Genesis</h1>
+      <h1 data-testid="genesis-header">Genesis</h1>
       <SyntaxHighlighter data={genesis?.result.genesis} />
     </section>
   );

apps/explorer/src/app/routes/markets/index.tsx

@@ -153,7 +153,7 @@ const Markets = () => {
       <h1>Markets</h1>
       {data.markets.map((m) => (
         <React.Fragment key={m.id}>
-          <h2>{m.name}</h2>
+          <h2 data-testid="markets-header">{m.name}</h2>
           <SyntaxHighlighter data={m} />
         </React.Fragment>
       ))}

apps/explorer/src/app/routes/network-parameters/index.tsx

@@ -1,5 +1,5 @@
-import { gql, useQuery } from "@apollo/client";
+import { gql, useQuery } from '@apollo/client';
-import { NetworkParametersQuery } from "./__generated__/NetworkParametersQuery";
+import { NetworkParametersQuery } from './__generated__/NetworkParametersQuery';
 
 export const NETWORK_PARAMETERS_QUERY = gql`
   query NetworkParametersQuery {
@@ -14,8 +14,8 @@ const NetworkParameters = () => {
   const { data } = useQuery<NetworkParametersQuery>(NETWORK_PARAMETERS_QUERY);
   return (
     <section>
-      <h1>NetworkParameters</h1>
+      <h1 data-testid="network-param-header">NetworkParameters</h1>
-      <pre>{JSON.stringify(data, null, "  ")}</pre>
+      <pre data-testid="parameters">{JSON.stringify(data, null, '  ')}</pre>
     </section>
   );
 };