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
This commit is contained in:
Joe Tsang 2022-03-21 13:01:51 +00:00 committed by GitHub
parent 4355907c52
commit 34959075c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 151 additions and 16 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -19,7 +19,7 @@ export const BlocksData = ({ data, className }: BlocksProps) => {
>
{data.result?.block_metas?.map((block, index) => {
return (
<li key={index} data-testid="block-row">
<li key={index}>
<BlockData block={block} />
</li>
);

View File

@ -23,7 +23,7 @@ export const BlockTxsData = ({ data, className }: TxsProps) => {
>
{data.result?.block_metas?.map((block, index) => {
return (
<li key={index} data-testid="block-row">
<li key={index} data-testid="transactions-list">
<BlockData block={block} className="mb-12" />
<TxsPerBlock blockHeight={block.header.height} />
</li>

View File

@ -36,7 +36,7 @@ const displayString: StringMap = {
export const TxOrderType = ({ orderType, className }: TxOrderTypeProps) => {
return (
<Lozenge className={className}>
<Lozenge data-testid="tx-type" className={className}>
{displayString[orderType] || orderType}
</Lozenge>
);

View File

@ -44,7 +44,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
{decodedBlockData &&
decodedBlockData.map(({ TxHash, PubKey, Type }) => {
return (
<tr key={TxHash}>
<tr data-testid="transaction-row" key={TxHash}>
<td>
<Link to={`/${Routes.TX}/${TxHash}`}>
<TruncateInline

View File

@ -34,7 +34,11 @@ const Block = () => {
<TableRow modifier="bordered">
<TableHeader scope="row">Mined by</TableHeader>
<TableCell modifier="bordered">
<Link className="text-vega-yellow" to={'/validators'}>
<Link
data-testid="block-validator"
className="text-vega-yellow"
to={'/validators'}
>
{header.proposer_address}
</Link>
</TableCell>
@ -42,7 +46,7 @@ const Block = () => {
<TableRow modifier="bordered">
<TableHeader scope="row">Time</TableHeader>
<TableCell modifier="bordered">
<SecondsAgo date={header.time} />
<SecondsAgo data-testid="block-time" date={header.time} />
</TableCell>
</TableRow>
</Table>