Base page and few more

apps/explorer-e2e/src/support/commands.ts

@@ -13,6 +13,7 @@ declare namespace Cypress {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
     login(email: string, password: string): void;
+    getByTestId(selector: string): Chainable<JQuery<HTMLElement>>;
   }
 }
 //
@@ -31,3 +32,6 @@ Cypress.Commands.add('login', (email, password) => {
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+Cypress.Commands.add('getByTestId', (selector, ...args) => {
+  return cy.get(`[data-testid=${selector}]`, ...args);
+});

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

@@ -0,0 +1,11 @@
+export default class BasePage {
+  transactionsUrl = '/tsx';
+  blocksUrl = '/blocks';
+  partiesUrl = '/parties';
+  assetsUrl = '/assets';
+  genesisUrl = '/genesis';
+  governanceUrl = '/governance';
+  marketsUrl = '/markets';
+  networkParametersUrl = '/network-parameters';
+  validatorsUrl = '/validators';
+}

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

@@ -0,0 +1,25 @@
+import BasePage from './base-page';
+
+export default class BlocksPage extends BasePage {
+  blocksFrmHeader = 'blocks-frm-header';
+  blocksStreamedHeader = 'blocks-streamed-header';
+  blockHeight = 'block-height';
+  blockchainBlocks = 'blockchain-blocks';
+  streamedBlocks = 'streamed-blocks';
+
+  validateBlocksPageDisplayed() {
+    cy.getByTestId(this.blocksFrmHeader).should(
+      'have.text',
+      'Blocks from blockchain'
+    );
+    cy.getByTestId(this.blocksStreamedHeader).should(
+      'have.text',
+      'Blocks streamed in'
+    );
+    cy.getByTestId(this.blockHeight)
+      .should('contain.text', 'Height: ')
+      .and('have.length.greaterThan', 10);
+    cy.getByTestId(this.blockchainBlocks).should('not.be.empty');
+    cy.getByTestId(this.streamedBlocks).should('not.be.empty');
+  }
+}

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

@@ -0,0 +1,3 @@
+import BasePage from './base-page';
+
+export default class HomePage extends BasePage {}

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

@@ -0,0 +1,11 @@
+import BasePage from './base-page';
+
+export default class TransactionsPage extends BasePage {
+  unconfirmedTransactions = 'unconfirmed-txs';
+
+  validateUnconfirmedTxsNumDisplayed() {
+    cy.getByTestId(this.unconfirmedTransactions)
+      .should('contain.text', 'Number: ')
+      .and('have.length.above', 8);
+  }
+}

apps/explorer/src/app/components/search/index.tsx

@@ -91,10 +91,15 @@ const Search = () => {
   const { search, onChange } = useGuess();
   return (
     <section>
-      <h1>Vega Block Explorer</h1>
+      <h1 data-testid="explorer-header">Vega Block Explorer</h1>
       <fieldset>
         <label htmlFor="search">Search: </label>
-        <input name="search" value={search} onChange={(e) => onChange(e)} />
+        <input
+          data-testid="search-field"
+          name="search"
+          value={search}
+          onChange={(e) => onChange(e)}
+        />
       </fieldset>
     </section>
   );