Test/231 paginate blocks page tests (#460)

* test: for infinity scroll - also initial wait improvement

- also initial wait improvement

* test: accepting linting suggestions

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

Co-authored-by: Joe Tsang <30622993+jtsang586@users.noreply.github.com>

* test: update to infinite scroll test

wait for the server response and additional 5 milliseconds to give css.height a chance to re-render

* test: linting changes

linting

* test: increase static wait time from 5 to 20 ms

* test: fix typescript

* test: improve test flake

* test: adapt intercept to wildcard to cope with capsule

* test: linting

* test: adjust test to cope with capsule low blocks

Co-authored-by: Joe Tsang <30622993+jtsang586@users.noreply.github.com>

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

@@ -28,3 +28,9 @@ Feature: Blocks Page
     And jump to first block
     Then previous button is disabled
     And I am on the second block when I click next
+
+  Scenario: Infinite scroll shows at least 300 new blocks
+    Given I am on the homepage
+    When I navigate to the blocks page
+    And I scroll down to the last block on the page
+    Then I can expect to see at least 100 blocks if i scroll 7 times

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

@@ -14,10 +14,10 @@ export default class BlocksPage extends BasePage {
   nextBlockBtn = 'next-block';
   jumpToBlockInput = 'block-input';
   jumpToBlockSubmit = 'go-submit';
+  infiniteScrollWrapper = 'infinite-scroll-wrapper';
 
   private waitForBlocksResponse() {
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(1000);
+    cy.contains('Loading...').should('not.exist', { timeout: 18000 });
   }
 
   validateBlocksPageDisplayed() {
@@ -37,8 +37,6 @@ export default class BlocksPage extends BasePage {
   validateBlockValidatorPage() {
     cy.getByTestId(this.minedByValidator).should('not.be.empty');
     cy.getByTestId(this.blockTime).should('not.be.empty');
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(1000); // Wait for transactions to load if there are any
     cy.get('body').then(($body) => {
       if ($body.find(`[data-testid=${this.transactionsRow}] > td`).length) {
         cy.get(`[data-testid=${this.transactionsRow}] > td`).each(($cell) => {
@@ -85,6 +83,50 @@ export default class BlocksPage extends BasePage {
       });
   }
 
+  navigateToLastBlockOnPage() {
+    this.waitForBlocksResponse();
+    cy.getByTestId(this.infiniteScrollWrapper).children().scrollTo('bottom');
+  }
+
+  navigateToOlderBlocksWithInfiniteScroll(
+    expectedBlocks: number,
+    scrollAttempts: number
+  ) {
+    cy.intercept('*blockchain?maxHeight*').as('blockchain_load');
+
+    cy.getByTestId(this.blockHeight)
+      .last()
+      .invoke('text')
+      .then(($initialLastBlockHeight) => {
+        for (let index = 0; index < scrollAttempts; index++) {
+          cy.getByTestId(this.infiniteScrollWrapper)
+            .children()
+            .children()
+            .invoke('css', 'height')
+            .then((scrollTarget) => {
+              cy.getByTestId(this.infiniteScrollWrapper)
+                .children()
+                .scrollTo(0, scrollTarget.toString(), { easing: 'linear' })
+                .wait('@blockchain_load');
+
+              // eslint-disable-next-line cypress/no-unnecessary-waiting
+              cy.wait(50); // Need this as although network response has arrived it takes a few millisecs for the css height to expand
+            });
+        }
+
+        cy.getByTestId(this.blockHeight)
+          .last()
+          .invoke('text')
+          .then(($lastBlockHeight) => {
+            const totalBlocksLoadedSinceScrollBegan =
+              parseInt($initialLastBlockHeight) - parseInt($lastBlockHeight);
+            expect(totalBlocksLoadedSinceScrollBegan).to.be.at.least(
+              expectedBlocks
+            );
+          });
+      });
+  }
+
   clickPreviousBlock() {
     cy.getByTestId(this.previousBlockBtn).click();
   }

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

@@ -34,3 +34,17 @@ Then('previous button is disabled', () => {
 Then('I am on the second block when I click next', () => {
   blocksPage.navigateToNextBlock();
 });
+
+Then('I scroll down to the last block on the page', () => {
+  blocksPage.navigateToLastBlockOnPage();
+});
+
+Then(
+  'I can expect to see at least {int} blocks if i scroll {int} times',
+  (expectedBlocks, scrollAttempts) => {
+    blocksPage.navigateToOlderBlocksWithInfiniteScroll(
+      expectedBlocks,
+      scrollAttempts
+    );
+  }
+);