From de80be7196e2011661ae17d479473c1b1a546494 Mon Sep 17 00:00:00 2001
From: Joe <joe@vega.xyz>
Date: Mon, 7 Mar 2022 11:49:05 +0000
Subject: [PATCH] Rebase and test for txs page

---
 .../src/integration/transactions-page.feature |  6 ++++
 .../src/support/pages/base-page.js            |  2 +-
 .../src/support/pages/transactions-page.js    | 34 ++++++++++++++++---
 .../step_definitions/transaction-page.step.js | 13 +++++++
 .../components/blocks/home/blocks-table.tsx   | 10 +++---
 .../src/app/routes/blocks/home/index.tsx      |  4 ++-
 .../src/app/routes/txs/home/index.tsx         |  4 ++-
 7 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 apps/explorer-e2e/src/integration/transactions-page.feature
 create mode 100644 apps/explorer-e2e/src/support/step_definitions/transaction-page.step.js

diff --git a/apps/explorer-e2e/src/integration/transactions-page.feature b/apps/explorer-e2e/src/integration/transactions-page.feature
new file mode 100644
index 000000000..31c3cf0bf
--- /dev/null
+++ b/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
diff --git a/apps/explorer-e2e/src/support/pages/base-page.js b/apps/explorer-e2e/src/support/pages/base-page.js
index 134ee2a05..75fa90c98 100644
--- a/apps/explorer-e2e/src/support/pages/base-page.js
+++ b/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';
diff --git a/apps/explorer-e2e/src/support/pages/transactions-page.js b/apps/explorer-e2e/src/support/pages/transactions-page.js
index 0b03e9baf..2db75ef58 100644
--- a/apps/explorer-e2e/src/support/pages/transactions-page.js
+++ b/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();
   }
 }
diff --git a/apps/explorer-e2e/src/support/step_definitions/transaction-page.step.js b/apps/explorer-e2e/src/support/step_definitions/transaction-page.step.js
new file mode 100644
index 000000000..aa4065c49
--- /dev/null
+++ b/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();
+});
diff --git a/apps/explorer/src/app/components/blocks/home/blocks-table.tsx b/apps/explorer/src/app/components/blocks/home/blocks-table.tsx
index a9cd3b333..0d393224c 100644
--- a/apps/explorer/src/app/components/blocks/home/blocks-table.tsx
+++ b/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>
diff --git a/apps/explorer/src/app/routes/blocks/home/index.tsx b/apps/explorer/src/app/routes/blocks/home/index.tsx
index 4088a1ef3..884cdf70a 100644
--- a/apps/explorer/src/app/routes/blocks/home/index.tsx
+++ b/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>
 
diff --git a/apps/explorer/src/app/routes/txs/home/index.tsx b/apps/explorer/src/app/routes/txs/home/index.tsx
index 1209a312c..e2e6292e9 100644
--- a/apps/explorer/src/app/routes/txs/home/index.tsx
+++ b/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>