Test/block page (#91)

* Added block page and validator test

* Transaction details and network param test added

* Add test id for styling change

* Changed test id names

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

@@ -4,3 +4,9 @@ Scenario: Navigate to blocks page
   Given I am on the homepage
   When I navigate to the blocks page
   Then blocks page is correctly displayed
+
+Scenario: Navigate to block validator page
+  Given I am on the homepage
+  When I navigate to the blocks page
+  And I click on first block
+  Then validator block page is correctly displayed

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

@@ -1,6 +1,6 @@
 Feature: Network parameters Page
 
-Scenario: Navigate to network parameters page
+  Scenario: Navigate to network parameters page
-  Given I am on the homepage
+    Given I am on the homepage
-  When I navigate to the transactions page
+    When I navigate to network parameters page
-  Then transactions page is correctly displayed
+    Then network parameters page is correctly displayed

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

@@ -1,6 +1,12 @@
 Feature: Transactions Page
 
-Scenario: Navigate to transactions page
+  Scenario: Navigate to transactions page
-  Given I am on the homepage
+    Given I am on the homepage
-  When I navigate to the transactions page
+    When I navigate to the transactions page
-  Then transactions page is correctly displayed
+    Then transactions page is correctly displayed
+
+  Scenario: Navigate to transaction details page
+    Given I am on the homepage
+    When I navigate to the transactions page
+    And I click on the top transaction
+    Then transaction details are displayed

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

@@ -0,0 +1,34 @@
+import BasePage from './base-page';
+
+export default class BlocksPage extends BasePage {
+  blockRow = 'block-row';
+  transactionsRow = 'transaction-row';
+  blockHeight = 'block-height';
+  numberOfTransactions = 'num-txs';
+  validatorLink = 'validator-link';
+  blockTime = 'block-time';
+  refreshBtn = 'refresh';
+  minedByValidator = 'block-validator';
+
+  validateBlocksPageDisplayed() {
+    cy.getByTestId(this.blockRow).should('have.length.above', 1);
+    cy.getByTestId(this.blockHeight).first().should('not.be.empty');
+    cy.getByTestId(this.numberOfTransactions).first().should('not.be.empty');
+    cy.getByTestId(this.validatorLink).first().should('not.be.empty');
+    cy.getByTestId(this.blockTime).first().should('not.be.empty');
+  }
+
+  clickOnTopBlockHeight() {
+    cy.getByTestId(this.blockHeight).first().click();
+  }
+
+  validateBlockValidatorPage() {
+    cy.getByTestId(this.minedByValidator).should('not.be.empty');
+    cy.getByTestId(this.blockTime).should('not.be.empty');
+    cy.get(`[data-testid=${this.transactionsRow}] > td`)
+      .should('have.length.above', 0)
+      .each(($cell) => {
+        cy.wrap($cell).should('not.be.empty');
+      });
+  }
+}

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

@@ -1,21 +1,33 @@
 import BasePage from './base-page';
 
 export default class TransactionsPage extends BasePage {
-  blockRow = 'block-row';
+  transactionsList = 'transactions-list';
+  transactionRow = 'transaction-row';
   blockHeight = 'block-height';
   numberOfTransactions = 'num-txs';
   validatorLink = 'validator-link';
   blockTime = 'block-time';
   refreshBtn = 'refresh';
+  txHash = 'hash';
+  txSubmittedBy = 'submitted-by';
+  txBlock = 'block';
+  txEncodedTnx = 'encoded-tnx';
+  txType = 'tx-type';
 
   validateTransactionsPagedisplayed() {
-    cy.getByTestId(this.blockRow).should('have.length.above', 1);
+    cy.getByTestId(this.transactionsList).should('have.length.above', 1);
     cy.getByTestId(this.blockHeight).first().should('not.be.empty');
     cy.getByTestId(this.numberOfTransactions).first().should('not.be.empty');
     cy.getByTestId(this.validatorLink).first().should('not.be.empty');
     cy.getByTestId(this.blockTime).first().should('not.be.empty');
   }
 
+  verifyAllBlockRowsAreNotEmpty() {
+    cy.get(`[data-testid=${this.transactionRow}] > td`).each(($cell) => {
+      cy.wrap($cell).should('not.be.empty');
+    });
+  }
+
   validateRefreshBtn() {
     cy.getByTestId(this.blockHeight)
       .first()
@@ -34,4 +46,37 @@ export default class TransactionsPage extends BasePage {
       });
     cy.getByTestId(this.blockTime).first();
   }
+
+  validateTxDetailsAreDisplayed() {
+    cy.getByTestId(this.txHash).invoke('text').should('have.length', 64);
+    cy.getByTestId(this.txSubmittedBy)
+      .find('a')
+      .then(($address) => {
+        cy.wrap($address).should('have.attr', 'href');
+        cy.wrap($address).invoke('text').should('have.length', 66);
+      });
+    cy.getByTestId(this.txBlock).should('not.be.empty');
+    cy.getByTestId(this.txEncodedTnx).should('not.be.empty');
+    cy.getByTestId(this.txType)
+      .should('not.be.empty')
+      .invoke('text')
+      .then((txTypeTxt) => {
+        if (txTypeTxt == 'Order Submission') {
+          cy.get('.hljs-attr')
+            .should('have.length.at.least', 8)
+            .each(($propertyName) => {
+              cy.wrap($propertyName).should('not.be.empty');
+            });
+          cy.get('span[style*="color"]')
+            .should('have.length.at.least', 8)
+            .each(($propertyValue) => {
+              cy.wrap($propertyValue).should('not.be.empty');
+            });
+        }
+      });
+  }
+
+  clickOnTopTransaction() {
+    cy.getByTestId(this.transactionRow).first().find('a').click();
+  }
 }

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

@@ -0,0 +1,20 @@
+import { Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+import BlocksPage from '../pages/blocks-page';
+const blocksPage = new BlocksPage();
+
+When('I navigate to the blocks page', () => {
+  blocksPage.navigateToBlocks();
+});
+
+When('I click on first block', () => {
+  blocksPage.clickOnTopBlockHeight();
+});
+
+Then('blocks page is correctly displayed', () => {
+  blocksPage.validateBlocksPageDisplayed();
+});
+
+Then('validator block page is correctly displayed', () => {
+  blocksPage.validateBlockValidatorPage();
+});

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

@@ -0,0 +1,11 @@
+import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import NetworkPage from '../pages/network-page';
+const networkPage = new NetworkPage();
+
+When('I navigate to network parameters page', () => {
+  networkPage.navigateToNetworkParameters();
+});
+
+Then('network parameters page is correctly displayed', () => {
+  networkPage.verifyNetworkParametersDisplayed();
+});

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

@@ -11,8 +11,13 @@ When('I navigate to the blocks page', () => {
   transactionsPage.navigateToBlocks();
 });
 
+When('I click on the top transaction', () => {
+  transactionsPage.clickOnTopTransaction();
+});
+
 Then('transactions page is correctly displayed', () => {
   transactionsPage.validateTransactionsPagedisplayed();
+  transactionsPage.verifyAllBlockRowsAreNotEmpty();
   transactionsPage.validateRefreshBtn();
 });
 
@@ -20,3 +25,7 @@ Then('blocks page is correctly displayed', () => {
   transactionsPage.validateTransactionsPagedisplayed();
   transactionsPage.validateRefreshBtn();
 });
+
+Then('transaction details are displayed', () => {
+  transactionsPage.validateTxDetailsAreDisplayed();
+});

apps/explorer/src/app/components/blocks/blocks-data.tsx

@@ -19,7 +19,7 @@ export const BlocksData = ({ data, className }: BlocksProps) => {
     >
       {data.result?.block_metas?.map((block, index) => {
         return (
-          <li key={index} data-testid="block-row">
+          <li key={index}>
             <BlockData block={block} />
           </li>
         );

apps/explorer/src/app/components/txs/home/block-txs-data.tsx

@@ -23,7 +23,7 @@ export const BlockTxsData = ({ data, className }: TxsProps) => {
     >
       {data.result?.block_metas?.map((block, index) => {
         return (
-          <li key={index} data-testid="block-row">
+          <li key={index} data-testid="transactions-list">
             <BlockData block={block} className="mb-12" />
             <TxsPerBlock blockHeight={block.header.height} />
           </li>

apps/explorer/src/app/components/txs/tx-order-type/index.tsx

@@ -36,7 +36,7 @@ const displayString: StringMap = {
 
 export const TxOrderType = ({ orderType, className }: TxOrderTypeProps) => {
   return (
-    <Lozenge className={className}>
+    <Lozenge data-testid="tx-type" className={className}>
       {displayString[orderType] || orderType}
     </Lozenge>
   );

apps/explorer/src/app/components/txs/txs-per-block/index.tsx

@@ -44,7 +44,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
             {decodedBlockData &&
               decodedBlockData.map(({ TxHash, PubKey, Type }) => {
                 return (
-                  <tr key={TxHash}>
+                  <tr data-testid="transaction-row" key={TxHash}>
                     <td>
                       <Link to={`/${Routes.TX}/${TxHash}`}>
                         <TruncateInline

apps/explorer/src/app/routes/blocks/id/index.tsx

@@ -34,7 +34,11 @@ const Block = () => {
         <TableRow modifier="bordered">
           <TableHeader scope="row">Mined by</TableHeader>
           <TableCell modifier="bordered">
-            <Link className="text-vega-yellow" to={'/validators'}>
+            <Link
+              data-testid="block-validator"
+              className="text-vega-yellow"
+              to={'/validators'}
+            >
               {header.proposer_address}
             </Link>
           </TableCell>
@@ -42,7 +46,7 @@ const Block = () => {
         <TableRow modifier="bordered">
           <TableHeader scope="row">Time</TableHeader>
           <TableCell modifier="bordered">
-            <SecondsAgo date={header.time} />
+            <SecondsAgo data-testid="block-time" date={header.time} />
           </TableCell>
         </TableRow>
       </Table>