From 5cd35704ffa5d4a74c4fedc39db8ef1dbb75963b Mon Sep 17 00:00:00 2001
From: Joe Tsang <30622993+jtsang586@users.noreply.github.com>
Date: Wed, 6 Apr 2022 16:03:22 +0100
Subject: [PATCH] Tests for next/previous block feature (#209)

---
 .../src/integration/blocks-page.feature       | 31 +++++++---
 .../src/support/pages/blocks-page.js          | 56 +++++++++++++++++++
 .../step_definitions/blocks-page.step.js      | 18 +++++-
 .../src/app/components/jump-to/index.tsx      |  3 +-
 4 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/apps/explorer-e2e/src/integration/blocks-page.feature b/apps/explorer-e2e/src/integration/blocks-page.feature
index 72be20347..f71a03b91 100644
--- a/apps/explorer-e2e/src/integration/blocks-page.feature
+++ b/apps/explorer-e2e/src/integration/blocks-page.feature
@@ -1,12 +1,25 @@
 Feature: Blocks Page
 
-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 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
+  Scenario: Navigate to block validator page
+    Given I am on the homepage
+    When I navigate to the blocks page
+    And I click on top block
+    Then validator block page is correctly displayed
+
+  Scenario: Navigate to previous block
+    Given I am on the homepage
+    When I navigate to the blocks page
+    And I click on top block
+    Then I am on the previous block when I click previous
+
+  Scenario: Previous button disabled on first block
+    Given I am on the homepage
+    When I navigate to the blocks page
+    And jump to first block
+    Then previous button is disabled
+    And I am on the second block when I click next
diff --git a/apps/explorer-e2e/src/support/pages/blocks-page.js b/apps/explorer-e2e/src/support/pages/blocks-page.js
index a324418c2..7472a3010 100644
--- a/apps/explorer-e2e/src/support/pages/blocks-page.js
+++ b/apps/explorer-e2e/src/support/pages/blocks-page.js
@@ -8,7 +8,12 @@ export default class BlocksPage extends BasePage {
   validatorLink = 'validator-link';
   blockTime = 'block-time';
   refreshBtn = 'refresh';
+  blockHeader = 'block-header';
   minedByValidator = 'block-validator';
+  previousBlockBtn = 'previous-block';
+  nextBlockBtn = 'next-block';
+  jumpToBlockInput = 'block-input';
+  jumpToBlockSubmit = 'go-submit';
 
   validateBlocksPageDisplayed() {
     cy.getByTestId(this.blockRow).should('have.length.above', 1);
@@ -38,4 +43,55 @@ export default class BlocksPage extends BasePage {
       }
     });
   }
+
+  navigateToPreviousBlock() {
+    cy.getByTestId(this.blockHeader)
+      .invoke('text')
+      .then(($blockHeaderTxt) => {
+        const blockHeight = parseInt($blockHeaderTxt.replace('BLOCK ', ''));
+        this.clickPreviousBlock();
+        cy.getByTestId(this.blockHeader)
+          .invoke('text')
+          .then(($newBlockHeaderTxt) => {
+            const newBlockHeight = parseInt(
+              $newBlockHeaderTxt.replace('BLOCK ', '')
+            );
+            expect(newBlockHeight).to.be.lessThan(blockHeight);
+          });
+      });
+  }
+
+  navigateToNextBlock() {
+    cy.getByTestId(this.blockHeader)
+      .invoke('text')
+      .then(($blockHeaderTxt) => {
+        const blockHeight = parseInt($blockHeaderTxt.replace('BLOCK ', ''));
+        this.clickNextBlock();
+        cy.getByTestId(this.blockHeader)
+          .invoke('text')
+          .then(($newBlockHeaderTxt) => {
+            const newBlockHeight = parseInt(
+              $newBlockHeaderTxt.replace('BLOCK ', '')
+            );
+            expect(newBlockHeight).to.be.greaterThan(blockHeight);
+          });
+      });
+  }
+
+  clickPreviousBlock() {
+    cy.getByTestId(this.previousBlockBtn).click();
+  }
+
+  clickNextBlock() {
+    cy.getByTestId(this.nextBlockBtn).click();
+  }
+
+  jumpToBlock(blockNumber) {
+    cy.getByTestId(this.jumpToBlockInput).type(blockNumber);
+    cy.getByTestId(this.jumpToBlockSubmit).click();
+  }
+
+  verifyPreviousBtnDisabled() {
+    cy.getByTestId(this.previousBlockBtn).find('button').should('be.disabled');
+  }
 }
diff --git a/apps/explorer-e2e/src/support/step_definitions/blocks-page.step.js b/apps/explorer-e2e/src/support/step_definitions/blocks-page.step.js
index 8d97ff08a..bd40e908b 100644
--- a/apps/explorer-e2e/src/support/step_definitions/blocks-page.step.js
+++ b/apps/explorer-e2e/src/support/step_definitions/blocks-page.step.js
@@ -7,10 +7,14 @@ When('I navigate to the blocks page', () => {
   blocksPage.navigateToBlocks();
 });
 
-When('I click on first block', () => {
+When('I click on top block', () => {
   blocksPage.clickOnTopBlockHeight();
 });
 
+When('jump to first block', () => {
+  blocksPage.jumpToBlock('1');
+});
+
 Then('blocks page is correctly displayed', () => {
   blocksPage.validateBlocksPageDisplayed();
 });
@@ -18,3 +22,15 @@ Then('blocks page is correctly displayed', () => {
 Then('validator block page is correctly displayed', () => {
   blocksPage.validateBlockValidatorPage();
 });
+
+Then('I am on the previous block when I click previous', () => {
+  blocksPage.navigateToPreviousBlock();
+});
+
+Then('previous button is disabled', () => {
+  blocksPage.verifyPreviousBtnDisabled();
+});
+
+Then('I am on the second block when I click next', () => {
+  blocksPage.navigateToNextBlock();
+});
diff --git a/apps/explorer/src/app/components/jump-to/index.tsx b/apps/explorer/src/app/components/jump-to/index.tsx
index 385538f39..c1807a9e3 100644
--- a/apps/explorer/src/app/components/jump-to/index.tsx
+++ b/apps/explorer/src/app/components/jump-to/index.tsx
@@ -29,13 +29,14 @@ export const JumpTo = ({
       </label>
       <div className="flex">
         <Input
+          data-testid={inputId}
           id={inputId}
           type={inputType}
           name={inputName}
           placeholder={placeholder}
           className="max-w-[200px]"
         />
-        <Button variant="secondary" type="submit">
+        <Button data-testid="go-submit" variant="secondary" type="submit">
           {t('Go')}
         </Button>
       </div>