Rebase and test for txs page

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

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

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

@@ -1,5 +1,5 @@
 export default class BasePage {
-  transactionsUrl = '/tsx';
+  transactionsUrl = '/txs';
   blocksUrl = '/blocks';
   partiesUrl = '/parties';
   assetsUrl = '/assets';

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

@@ -1,11 +1,35 @@
 import BasePage from './base-page';
 
 export default class TransactionsPage extends BasePage {
-  unconfirmedTransactions = 'unconfirmed-txs';
+  blockRow = 'block-row';
+  blockHeight = 'block-height';
+  numberOfTransactions = 'num-txs';
+  validatorLink = 'validator-link';
+  blockTime = 'block-time';
+  refreshBtn = 'refresh';
 
-  validateUnconfirmedTxsNumDisplayed() {
-    cy.getByTestId(this.unconfirmedTransactions)
-      .should('contain.text', 'Number: ')
-      .and('have.length.above', 8);
+  validateTransactionsPagedisplayed() {
+    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');
+  }
+
+  validateRefreshBtn() {
+    cy.getByTestId(this.blockHeight)
+      .first()
+      .invoke('text')
+      .then((blockHeightTxt) => {
+        cy.getByTestId(this.refreshBtn).click();
+
+        cy.getByTestId(this.blockHeight)
+          .first()
+          .invoke('text')
+          .should((newBlockHeightText) => {
+            expect(blockHeightTxt).not.to.eq(newBlockHeightText);
+          });
+      });
+    cy.getByTestId(this.blockTime).first();
   }
 }

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

@@ -0,0 +1,13 @@
+import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+import TransactionsPage from '../pages/transactions-page';
+const transactionsPage = new TransactionsPage();
+
+When('I navigate to the transactions page', () => {
+  transactionsPage.navigateToTxs();
+});
+
+Then('transactions page is correctly displayed', () => {
+  transactionsPage.validateTransactionsPagedisplayed();
+  transactionsPage.validateRefreshBtn();
+});

apps/explorer/src/app/components/blocks/home/blocks-table.tsx

@@ -20,23 +20,23 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
       {data.result?.block_metas?.map((block, index) => {
         return (
           <React.Fragment key={index}>
-            <tr>
-              <td>
+            <tr data-testid="block-row">
+              <td data-testid="block-height">
                 <Link to={`/blocks/${block.header?.height}`}>
                   {block.header?.height}
                 </Link>
               </td>
-              <td>
+              <td data-testid="num-txs">
                 {block.num_txs === '1'
                   ? '1 transaction'
                   : `${block.num_txs} transactions`}
               </td>
-              <td>
+              <td data-testid="validator-link">
                 <Link to={`/validators/${block.header?.proposer_address}`}>
                   {block.header.proposer_address}
                 </Link>
               </td>
-              <td>
+              <td data-testid="block-time">
                 <SecondsAgo date={block.header?.time} />
               </td>
             </tr>

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

@@ -16,7 +16,9 @@ const Blocks = () => {
     <>
       <section>
         <h1>Blocks</h1>
-        <button onClick={() => refetch()}>Refresh to see latest blocks</button>
+        <button data-testid="refresh" onClick={() => refetch()}>
+          Refresh to see latest blocks
+        </button>
         <BlocksTable data={data} />
       </section>
 

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -16,7 +16,9 @@ const Txs = () => {
     <>
       <section>
         <h1>Transactions</h1>
-        <button onClick={() => refetch()}>Refresh to see latest blocks</button>
+        <button data-testid="refresh" onClick={() => refetch()}>
+          Refresh to see latest blocks
+        </button>
         <BlocksTable data={data} showTransactions={true} />
       </section>