Test added for stats page (#199)

* Test added for stats page

* Removed implicit waits

* Switch to use Cypress env

* Fix lint error

apps/explorer-e2e/cypress.json

@@ -14,6 +14,7 @@
   "screenshotsFolder": "../../dist/cypress/apps/explorer-e2e/screenshots",
   "chromeWebSecurity": false,
   "env": {
+    "environment": "testnet",
     "tsConfig": "tsconfig.json",
     "TAGS": "not @todo and not @ignore and not @manual"
   }

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

@@ -1,6 +1,10 @@
 Feature: Home page
 
-  Scenario Outline: Successful search for specific id by <IdType>
+  Scenario: Stats page displayed correctly
+    Given I am on the homepage
+    Then the stats for deployed environment are correctly displayed
+
+  Scenario Outline: Succesfful search for specific id by <IdType>
     Given I am on the homepage
     When I search for '<Id>'
     Then I am redirected to page containing id '<Id>'

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

@@ -1,3 +1,69 @@
 import BasePage from './base-page';
+export default class HomePage extends BasePage {
+  statsEnvironmentTitle = 'stats-environment';
+  statsTitle = 'stats-title';
+  statsValue = 'stats-value';
 
-export default class HomePage extends BasePage {}
+  verifyStatsEnvironment() {
+    const deployedEnv = Cypress.env('environment').toUpperCase();
+    cy.getByTestId(this.statsEnvironmentTitle).should(
+      'have.text',
+      `/ ${deployedEnv}`
+    );
+  }
+
+  verifyStatsTitlesDisplayed() {
+    const statTitles = [
+      'Status',
+      'Height',
+      'Validating nodes',
+      'Uptime',
+      'Total nodes',
+      'Inactive nodes',
+      'Total staked',
+      'Backlog',
+      'Trades / second',
+      'Orders / block',
+      'Orders / second',
+      'Transactions / block',
+      'Block time',
+      'Time',
+      'App',
+      'Tendermint',
+      'Up since',
+      'Chain ID',
+    ];
+
+    cy.getByTestId(this.statsTitle)
+      .each(($title, index) => {
+        cy.wrap($title).should('have.text', statTitles[index]);
+      })
+      .then(($list) => {
+        cy.wrap($list).should('have.length', 18);
+      });
+  }
+
+  verifyStatsValuesdisplayed() {
+    cy.getByTestId(this.statsValue)
+      .each(($value) => {
+        cy.wrap($value).should('not.be.empty');
+      })
+      .then(($list) => {
+        cy.wrap($list).should('have.length', 18);
+      });
+  }
+
+  verifyStatsBlockHeightUpdating() {
+    cy.getByTestId(this.statsValue)
+      .eq(1)
+      .invoke('text')
+      .then((blockHeightTxt) => {
+        cy.getByTestId(this.statsValue)
+          .eq(1)
+          .invoke('text')
+          .should((newBlockHeightTxt) => {
+            expect(blockHeightTxt).not.to.eq(newBlockHeightTxt);
+          });
+      });
+  }
+}

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

@@ -23,22 +23,9 @@ export default class TransactionsPage extends BasePage {
   }
 
   validateRefreshBtn() {
-    cy.getByTestId(this.blockHeight)
+    cy.intercept('GET', '**/blockchain').as('get-blockchain');
-      .first()
+    cy.getByTestId(this.refreshBtn).click();
-      .invoke('text')
+    cy.wait('@get-blockchain').its('response.statusCode').should('eq', 200);
-      .then((blockHeightTxt) => {
-        cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
-        //Wait needed to allow blocks to change
-        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();
   }
 
   validateTxDetailsAreDisplayed() {

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

@@ -0,0 +1,11 @@
+import { Then } from 'cypress-cucumber-preprocessor/steps';
+
+import HomePage from '../pages/home-page';
+const homePage = new HomePage();
+
+Then('the stats for deployed environment are correctly displayed', () => {
+  homePage.verifyStatsEnvironment();
+  homePage.verifyStatsTitlesDisplayed();
+  homePage.verifyStatsValuesdisplayed();
+  homePage.verifyStatsBlockHeightUpdating();
+});

libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx

@@ -10,6 +10,7 @@ export const PromotedStatsItem = ({
   goodThreshold,
   value,
   description,
+  ...props
 }: StatFields) => {
   const variant = useMemo(
     () =>
@@ -25,9 +26,9 @@ export const PromotedStatsItem = ({
       <Card>
         <div className="uppercase text-[0.9375rem]">
           <Indicator variant={variant} />
-          <span>{title}</span>
+          <span data-testid="stats-title">{title}</span>
         </div>
-        <div className="mt-4 text-h4 leading-none">
+        <div data-testid="stats-value" className="mt-4 text-h4 leading-none">
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </div>
       </Card>

libs/network-stats/src/components/stats-manager/stats-manager.tsx

@@ -86,7 +86,10 @@ export const StatsManager = ({
 
   return (
     <div className={classes}>
-      <h3 className="font-alpha uppercase text-h3 pb-16 col-span-full">
+      <h3
+        data-testid="stats-environment"
+        className="font-alpha uppercase text-h3 pb-16 col-span-full"
+      >
         {(error && `/ ${error}`) || (data ? `/ ${envName}` : '/ Connecting...')}
       </h3>
 

libs/network-stats/src/components/table-row/table-row.tsx

@@ -12,6 +12,7 @@ export const TableRow = ({
   goodThreshold,
   value,
   description,
+  ...props
 }: StatFields) => {
   const variant = useMemo(
     () =>
@@ -25,8 +26,10 @@ export const TableRow = ({
   return (
     <Tooltip description={description} align="start">
       <tr className="border">
-        <td className="py-4 px-8">{title}</td>
+        <td data-testid="stats-title" className="py-4 px-8">
-        <td className="py-4 px-8 text-right">
+          {title}
+        </td>
+        <td data-testid="stats-value" className="py-4 px-8 text-right">
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </td>
         <td className="py-4 px-8">