Test added for stats page (#199)

* Test added for stats page

* Removed implicit waits

* Switch to use Cypress env

* Fix lint error
This commit is contained in:
Joe Tsang 2022-04-13 09:31:23 +01:00 committed by GitHub
parent 49169e5755
commit 7aea742677
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 99 additions and 23 deletions

View File

@ -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"
}

View File

@ -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>'

View File

@ -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);
});
});
}
}

View File

@ -23,22 +23,9 @@ export default class TransactionsPage extends BasePage {
}
validateRefreshBtn() {
cy.getByTestId(this.blockHeight)
.first()
.invoke('text')
.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();
cy.intercept('GET', '**/blockchain').as('get-blockchain');
cy.getByTestId(this.refreshBtn).click();
cy.wait('@get-blockchain').its('response.statusCode').should('eq', 200);
}
validateTxDetailsAreDisplayed() {

View File

@ -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();
});

View File

@ -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>

View File

@ -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>

View File

@ -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 className="py-4 px-8 text-right">
<td data-testid="stats-title" className="py-4 px-8">
{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">