From 34959075c2d2988e21b966ddeafa1cec27bd8695 Mon Sep 17 00:00:00 2001 From: Joe Tsang <30622993+jtsang586@users.noreply.github.com> Date: Mon, 21 Mar 2022 13:01:51 +0000 Subject: [PATCH] Test/block page (#91) * Added block page and validator test * Transaction details and network param test added * Add test id for styling change * Changed test id names --- .../src/integration/blocks-page.feature | 6 +++ .../src/integration/network-page.feature | 8 +-- .../src/integration/transactions-page.feature | 14 ++++-- .../src/support/pages/blocks-page.js | 34 +++++++++++++ ...ork-parameters-page.js => network-page.js} | 0 .../src/support/pages/transactions-page.js | 49 ++++++++++++++++++- .../step_definitions/blocks-page.step.js | 20 ++++++++ .../step_definitions/network-page.step.js | 11 +++++ .../step_definitions/transaction-page.step.js | 9 ++++ .../src/app/components/blocks/blocks-data.tsx | 2 +- .../components/txs/home/block-txs-data.tsx | 2 +- .../components/txs/tx-order-type/index.tsx | 2 +- .../components/txs/txs-per-block/index.tsx | 2 +- .../src/app/routes/blocks/id/index.tsx | 8 ++- 14 files changed, 151 insertions(+), 16 deletions(-) create mode 100644 apps/explorer-e2e/src/support/pages/blocks-page.js rename apps/explorer-e2e/src/support/pages/{network-parameters-page.js => network-page.js} (100%) create mode 100644 apps/explorer-e2e/src/support/step_definitions/blocks-page.step.js create mode 100644 apps/explorer-e2e/src/support/step_definitions/network-page.step.js diff --git a/apps/explorer-e2e/src/integration/blocks-page.feature b/apps/explorer-e2e/src/integration/blocks-page.feature index 53b8e74b4..72be20347 100644 --- a/apps/explorer-e2e/src/integration/blocks-page.feature +++ b/apps/explorer-e2e/src/integration/blocks-page.feature @@ -4,3 +4,9 @@ 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 diff --git a/apps/explorer-e2e/src/integration/network-page.feature b/apps/explorer-e2e/src/integration/network-page.feature index 7e96fd86f..3f84e1e5b 100644 --- a/apps/explorer-e2e/src/integration/network-page.feature +++ b/apps/explorer-e2e/src/integration/network-page.feature @@ -1,6 +1,6 @@ Feature: Network parameters Page -Scenario: Navigate to network parameters page - Given I am on the homepage - When I navigate to the transactions page - Then transactions page is correctly displayed + Scenario: Navigate to network parameters page + Given I am on the homepage + When I navigate to network parameters page + Then network parameters page is correctly displayed diff --git a/apps/explorer-e2e/src/integration/transactions-page.feature b/apps/explorer-e2e/src/integration/transactions-page.feature index 31c3cf0bf..f453c366f 100644 --- a/apps/explorer-e2e/src/integration/transactions-page.feature +++ b/apps/explorer-e2e/src/integration/transactions-page.feature @@ -1,6 +1,12 @@ 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 + Scenario: Navigate to transactions page + Given I am on the homepage + When I navigate to the transactions page + Then transactions page is correctly displayed + + Scenario: Navigate to transaction details page + Given I am on the homepage + When I navigate to the transactions page + And I click on the top transaction + Then transaction details are displayed diff --git a/apps/explorer-e2e/src/support/pages/blocks-page.js b/apps/explorer-e2e/src/support/pages/blocks-page.js new file mode 100644 index 000000000..8acecce98 --- /dev/null +++ b/apps/explorer-e2e/src/support/pages/blocks-page.js @@ -0,0 +1,34 @@ +import BasePage from './base-page'; + +export default class BlocksPage extends BasePage { + blockRow = 'block-row'; + transactionsRow = 'transaction-row'; + blockHeight = 'block-height'; + numberOfTransactions = 'num-txs'; + validatorLink = 'validator-link'; + blockTime = 'block-time'; + refreshBtn = 'refresh'; + minedByValidator = 'block-validator'; + + validateBlocksPageDisplayed() { + 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'); + } + + clickOnTopBlockHeight() { + cy.getByTestId(this.blockHeight).first().click(); + } + + validateBlockValidatorPage() { + cy.getByTestId(this.minedByValidator).should('not.be.empty'); + cy.getByTestId(this.blockTime).should('not.be.empty'); + cy.get(`[data-testid=${this.transactionsRow}] > td`) + .should('have.length.above', 0) + .each(($cell) => { + cy.wrap($cell).should('not.be.empty'); + }); + } +} diff --git a/apps/explorer-e2e/src/support/pages/network-parameters-page.js b/apps/explorer-e2e/src/support/pages/network-page.js similarity index 100% rename from apps/explorer-e2e/src/support/pages/network-parameters-page.js rename to apps/explorer-e2e/src/support/pages/network-page.js diff --git a/apps/explorer-e2e/src/support/pages/transactions-page.js b/apps/explorer-e2e/src/support/pages/transactions-page.js index 0efc0d367..c7187c364 100644 --- a/apps/explorer-e2e/src/support/pages/transactions-page.js +++ b/apps/explorer-e2e/src/support/pages/transactions-page.js @@ -1,21 +1,33 @@ import BasePage from './base-page'; export default class TransactionsPage extends BasePage { - blockRow = 'block-row'; + transactionsList = 'transactions-list'; + transactionRow = 'transaction-row'; blockHeight = 'block-height'; numberOfTransactions = 'num-txs'; validatorLink = 'validator-link'; blockTime = 'block-time'; refreshBtn = 'refresh'; + txHash = 'hash'; + txSubmittedBy = 'submitted-by'; + txBlock = 'block'; + txEncodedTnx = 'encoded-tnx'; + txType = 'tx-type'; validateTransactionsPagedisplayed() { - cy.getByTestId(this.blockRow).should('have.length.above', 1); + cy.getByTestId(this.transactionsList).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'); } + verifyAllBlockRowsAreNotEmpty() { + cy.get(`[data-testid=${this.transactionRow}] > td`).each(($cell) => { + cy.wrap($cell).should('not.be.empty'); + }); + } + validateRefreshBtn() { cy.getByTestId(this.blockHeight) .first() @@ -34,4 +46,37 @@ export default class TransactionsPage extends BasePage { }); cy.getByTestId(this.blockTime).first(); } + + validateTxDetailsAreDisplayed() { + cy.getByTestId(this.txHash).invoke('text').should('have.length', 64); + cy.getByTestId(this.txSubmittedBy) + .find('a') + .then(($address) => { + cy.wrap($address).should('have.attr', 'href'); + cy.wrap($address).invoke('text').should('have.length', 66); + }); + cy.getByTestId(this.txBlock).should('not.be.empty'); + cy.getByTestId(this.txEncodedTnx).should('not.be.empty'); + cy.getByTestId(this.txType) + .should('not.be.empty') + .invoke('text') + .then((txTypeTxt) => { + if (txTypeTxt == 'Order Submission') { + cy.get('.hljs-attr') + .should('have.length.at.least', 8) + .each(($propertyName) => { + cy.wrap($propertyName).should('not.be.empty'); + }); + cy.get('span[style*="color"]') + .should('have.length.at.least', 8) + .each(($propertyValue) => { + cy.wrap($propertyValue).should('not.be.empty'); + }); + } + }); + } + + clickOnTopTransaction() { + cy.getByTestId(this.transactionRow).first().find('a').click(); + } } 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 new file mode 100644 index 000000000..8d97ff08a --- /dev/null +++ b/apps/explorer-e2e/src/support/step_definitions/blocks-page.step.js @@ -0,0 +1,20 @@ +import { Then, When } from 'cypress-cucumber-preprocessor/steps'; + +import BlocksPage from '../pages/blocks-page'; +const blocksPage = new BlocksPage(); + +When('I navigate to the blocks page', () => { + blocksPage.navigateToBlocks(); +}); + +When('I click on first block', () => { + blocksPage.clickOnTopBlockHeight(); +}); + +Then('blocks page is correctly displayed', () => { + blocksPage.validateBlocksPageDisplayed(); +}); + +Then('validator block page is correctly displayed', () => { + blocksPage.validateBlockValidatorPage(); +}); diff --git a/apps/explorer-e2e/src/support/step_definitions/network-page.step.js b/apps/explorer-e2e/src/support/step_definitions/network-page.step.js new file mode 100644 index 000000000..42ae9a063 --- /dev/null +++ b/apps/explorer-e2e/src/support/step_definitions/network-page.step.js @@ -0,0 +1,11 @@ +import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps'; +import NetworkPage from '../pages/network-page'; +const networkPage = new NetworkPage(); + +When('I navigate to network parameters page', () => { + networkPage.navigateToNetworkParameters(); +}); + +Then('network parameters page is correctly displayed', () => { + networkPage.verifyNetworkParametersDisplayed(); +}); 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 index 35f60ae78..284a3ffee 100644 --- a/apps/explorer-e2e/src/support/step_definitions/transaction-page.step.js +++ b/apps/explorer-e2e/src/support/step_definitions/transaction-page.step.js @@ -11,8 +11,13 @@ When('I navigate to the blocks page', () => { transactionsPage.navigateToBlocks(); }); +When('I click on the top transaction', () => { + transactionsPage.clickOnTopTransaction(); +}); + Then('transactions page is correctly displayed', () => { transactionsPage.validateTransactionsPagedisplayed(); + transactionsPage.verifyAllBlockRowsAreNotEmpty(); transactionsPage.validateRefreshBtn(); }); @@ -20,3 +25,7 @@ Then('blocks page is correctly displayed', () => { transactionsPage.validateTransactionsPagedisplayed(); transactionsPage.validateRefreshBtn(); }); + +Then('transaction details are displayed', () => { + transactionsPage.validateTxDetailsAreDisplayed(); +}); diff --git a/apps/explorer/src/app/components/blocks/blocks-data.tsx b/apps/explorer/src/app/components/blocks/blocks-data.tsx index 1111235c2..66d1301e1 100644 --- a/apps/explorer/src/app/components/blocks/blocks-data.tsx +++ b/apps/explorer/src/app/components/blocks/blocks-data.tsx @@ -19,7 +19,7 @@ export const BlocksData = ({ data, className }: BlocksProps) => { > {data.result?.block_metas?.map((block, index) => { return ( -
  • +
    • ); diff --git a/apps/explorer/src/app/components/txs/home/block-txs-data.tsx b/apps/explorer/src/app/components/txs/home/block-txs-data.tsx index d728bd34d..54bf39782 100644 --- a/apps/explorer/src/app/components/txs/home/block-txs-data.tsx +++ b/apps/explorer/src/app/components/txs/home/block-txs-data.tsx @@ -23,7 +23,7 @@ export const BlockTxsData = ({ data, className }: TxsProps) => { > {data.result?.block_metas?.map((block, index) => { return ( -
  • +
    • diff --git a/apps/explorer/src/app/components/txs/tx-order-type/index.tsx b/apps/explorer/src/app/components/txs/tx-order-type/index.tsx index 4df94080a..d99b0cc25 100644 --- a/apps/explorer/src/app/components/txs/tx-order-type/index.tsx +++ b/apps/explorer/src/app/components/txs/tx-order-type/index.tsx @@ -36,7 +36,7 @@ const displayString: StringMap = { export const TxOrderType = ({ orderType, className }: TxOrderTypeProps) => { return ( - + {displayString[orderType] || orderType} ); diff --git a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx b/apps/explorer/src/app/components/txs/txs-per-block/index.tsx index d4e4b5555..03043d5f9 100644 --- a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx +++ b/apps/explorer/src/app/components/txs/txs-per-block/index.tsx @@ -44,7 +44,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => { {decodedBlockData && decodedBlockData.map(({ TxHash, PubKey, Type }) => { return ( - + { Mined by - + {header.proposer_address} @@ -42,7 +46,7 @@ const Block = () => { Time - +