Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create text descriptions for e2e tests - Closes #1516 #1523

Merged
merged 7 commits into from
Dec 4, 2018
Merged

Create text descriptions for e2e tests - Closes #1516 #1523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6a5fb9e
:white_check_mark: work on TODOs
Nov 22, 2018
8702531
update cypress version
Nov 22, 2018
b1ec74d
:white_check_mark: textual descriptions and selectors extraction
Nov 27, 2018
5087823
:white_check_mark: some comments edit
Dec 4, 2018
ee46342
Merge branches '1.8.0' and '1516-create-text-descriptions' of github.…
Dec 4, 2018
389ce57
:white_check_mark: update package-lock.json
Dec 4, 2018
91dbcad
:white_check_mark: skipping header updates
Dec 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12,576 changes: 6,300 additions & 6,276 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
"cpx": "=1.5.0",
"css-hot-loader": "=1.3.1",
"css-loader": "0.28.7",
"cypress": "3.1.1",
"cypress": "3.1.2",
"del-cli": "1.1.0",
"electron": "1.8.8",
"electron-builder": "19.32.2",
Expand Down
132 changes: 132 additions & 0 deletions test/constants/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
const ss = {
app: '#app',
transactoinsTable: '.transaction-results',
transactionRow: '.transactions-row',
seeAllTxsBtn: '.seeAllLink',
txDetailsBackButton: '.transaction-details-back-button',
recipientInput: '.recipient input',
accountInfoTab: '.account-info',
delegateStatisticsTab: '.delegate-statistics ',
votedAddress: '.votes .voter-address',
voterAdress: '.voters .voter-address',
delegateName: '.delegate-name',
accountAddress: '.copy-title',
searchInput: '#autosuggest-input',
showMoreVotesBtn: '.show-votes',
leftBlockAccountExplorer: '.explorer-account-left-block',
amountInput: '.amount input',
bookmarkInput: '#bookmark-input',
bookmarkList: '.bookmarkList',
nextTransferBtn: '.send-next-button',
sendBtn: '.send-button',
transactionAddress: '.transaction-address span',
chooseDelegateName: '.choose-name',
delegateNameInput: '.delegate-name input',
submitDelagateNameBtn: '.submit-delegate-name',
successText: '.success-description',
goToDashboardAfterDelegateReg: '.registration-success',
confirmDelegateRegBtn: '.confirm-delegate-registration',
spinner: '.spinner',
transactionReference: '.transaction-reference',
transactionAmount: '.transactionAmount span',
transactionAmountPlaceholder: '.transactionAmount',
delegateDuplicateNameError: '.error-name-duplicate',
headerBalance: '.balance span',
nextBtn: '.next',
txHeader: '.tx-header',
txSenderAddress: '.sender-address',
txRecipientAddress: '.receiver-address',
txDatePlaceholder: '.tx-date',
txDate: '.tx-date .date',
txTime: '.tx-time .time',
txAddedVotes: '.tx-added-votes .voter-address',
txRemovedVotes: '.tx-removed-votes .voter-address',
txAmount: '.tx-amount .transactionAmount',
txFee: '.tx-fee span',
txConfirmations: '.tx-confirmation',
txId: '.tx-id .copy-title',
txReference: '.tx-reference',
delegateResults: '.delegates-result',
transactionResults: '.transactions-result',
recentSearches: '.addresses-result',
idResults: '.addresses-result',
closeSearchBtn: '.autosuggest-btn-close',
accountBalance: '.balance span',
transactionId: '.transaction-id .copy-title',
logoutBtn: '.logout',
dialogButtons: '.ok-button',
emptyResultsMessage: '.empty-message',
revealCheckbox: '.reveal-checkbox',
passphraseTextarea: 'textarea.passphrase',
itsSafeBtn: '.yes-its-safe-button',
passphraseWordHolder: '.passphrase-holder label',
getToDashboardBtn: '.get-to-your-dashboard-button',
confirmCheckbox: '.confirm-checkbox',
sidebarMenuSettingsBtn: '#settings',
registerSecondPassphraseBtn: '.register-second-passphrase',
secondPassphraseIsRegisteredLabel: '.second-passphrase-registered',
currencyUSDBtn: '.currency-USD',
currencyEURBtn: '.currency-EUR',
autoLogoutTrigger: '.autoLog',
switchNetworksTrigger: '.showNetwork',
delegateFeaturesTrigger: '.advancedMode',
messageInput: 'textarea',
resulteBtn: '.result',
sidebarMenuWalletBtn: '#transactions',
referenceInput: '.reference input',
convertorElement: '.convertor',
convertedPrice: '.converted-price',
secondPassphraseInput: '.second-passphrase input',
secondPassphraseNextBtn: '.second-passphrase-next',
resultMessage: '.result-box-message',
okayBtn: '.okay-button',
accountInitializationMsg: '.account-initialization',
accountInitializationBtn: '.account-init-button',
sidebarMenuDelegatesBtn: '#delegates',
becomeDelegateLink: '.register-delegate',
votesConfirmSidebar: '.confirm-votes',
confirmBtn: '.confirm',
delegateRow: '.delegate-row',
delegateList: '.delegate-list',
delegateRank: '.delegate-rank',
delegateId: '.delegate-id',
delegateProductivity: '.delegate-productivity',
searchDelegateInput: 'input.search',
voteCheckbox: '.vote-checkbox',
voteResultHeader: '.result-box-header',
clearSearchBtn: '.clean-icon',
votesPreselection: '.upvotes-message',
unvotesPreselection: '.unvotes-message',
alreadyVotedPreselection: '.alreadyVoted-message',
addFollowerAccountButton: '.add-account-button',
addressInput: '.address input',
followedAccountItem: '.followed-account',
titleInput: '.account-title input',
followedAccountBalance: '.followed-account-balance',
sidebarMenuHelpBtn: '#help',
startOnBoardingLink: '.help-onboarding',
onBoardingTooltipPrimaryBtn: '.joyride-tooltip__button--primary',
onBoardingSkipBtn: '.joyride-tooltip__button--skip',
onBoardingHeader: '.joyride-tooltip__header',
createLiskIdBtn: '.new-account-button',
passphraseInput: '.passphrase input',
loginBtn: '.login-button',
networkDropdown: '.network',
headerAddress: '.copy-title',
nodeAddress: '.peer',
networkStatus: '.network-status',
errorPopup: '.toast',
newsBlock: '.news-item',
editNewsFeed: '.settingsButton',
settingsNewsFeedBlock: '.settingsNewsFeed',
getPassphraseButton: '.get-passphrase-button',
iUnderstandCheckbox: '.i-understand-checkbox',
editFollowingAccounts: '.edit-accounts',
removeFollowingAccount: '.remove-account',
followedAccount: '.followed-account',
followedAccountTitle: '.account-title input',
takeTutorial: '.help-onboarding',
tutorialTooltip: '.joyride-tooltip__header',
};

export default ss;
1 change: 1 addition & 0 deletions test/constants/urls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const urls = {
secondPassphrase: '/second-passphrase',
registerDelegate: '/register-delegate',
delegates: '/delegates',
delegatesVote: '/delegates/vote',
signMessage: '/sign-message',
};

Expand Down
130 changes: 77 additions & 53 deletions test/cypress/e2e/activity.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,8 @@
import accounts from '../../constants/accounts';
import networks from '../../constants/networks';
import ss from '../../constants/selectors';
import urls from '../../constants/urls';

const ss = {
transactoinsTable: '.transaction-results',
transactionRow: '.transactions-row',
seeAllBtn: '.seeAllLink',
transactionDetailBackButton: '.transaction-details-back-button',
recipientInput: '.recipient input',
accountInfoTab: '.account-info',
delegateStatisticsTab: '.delegate-statistics ',
votedAdress: '.votes .voter-address',
voterAdress: '.voters .voter-address',
delegateName: '.delegate-name',
accountAddress: '.copy-title',
searchInput: '#autosuggest-input',
showMoreVotesBtn: '.show-votes',
explorerAccountLeftBlock: '.explorer-account-left-block',
};

/**
* To remove the effect of activating the All tab back after full load
Expand All @@ -29,22 +14,36 @@ describe('Dashboard Activity', () => {
beforeEach(() => {
cy.autologin(accounts.genesis.passphrase, networks.devnet.node);
});
/**
* 5 transaction are shown in the latest activity component
* @expect 5 transactions
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plase try write something more easy to understand like display 5 transaction in the last activity page or component, it is ok but something easy to understand will be better

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like Andrei's description form, but agree it could say latest activity component/module

it('5 tx are shown', () => {
cy.visit(urls.dashboard);
cy.get(ss.transactionRow).should('have.length', 5);
});

/**
* Click on transaction row leads to tx details page
* @expect url
* @expect some specific to page element is present on it
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, like go to details page when a row is being click in this page or component

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think both descriptions (Andrei's and Osvaldo's) are the same clear.

it('Click leads to tx details', () => {
cy.visit(urls.dashboard);
cy.get(ss.transactionRow).eq(0).click();
cy.url().should('contain', 'wallet?id=');
cy.get(ss.transactionDetailBackButton);
cy.url().should('contain', `${urls.wallet}?id=`);
cy.get(ss.txDetailsBackButton);
});

/**
* 'See all transactions' link leads to wallet page
* @expect url
* @expect some specific to page element is present on it
*/
it('See all leads to wallet activity', () => {
cy.visit(urls.dashboard);
cy.get(ss.seeAllBtn).click();
cy.url().should('contain', 'wallet');
cy.get(ss.seeAllTxsBtn).click();
cy.url().should('contain', `${urls.wallet}`);
cy.get(ss.recipientInput);
});
});
Expand All @@ -65,44 +64,58 @@ describe('Dashboard Activity', () => {
beforeEach(() => {
cy.autologin(accounts.genesis.passphrase, networks.devnet.node);
});
/**
* Scrolling down triggers loading another portion of txs
* @expect more txs are present
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here like, load more transactions when scroll is placed in the bottom of the page.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, same amount of clearness to me.

it('25 tx are shown, scrolling loads another 25', () => {
testSet.open();
cy.get(ss.transactionRow).should('have.length', 25);
cy.get('.transaction-results').scrollTo('bottom');
cy.get('.transactions-row').should('have.length', 50);
cy.get(ss.transactoinsTable).scrollTo('bottom');
cy.get(ss.transactionRow).should('have.length', 50);
});

/**
* Click on transaction row leads to tx details page
* @expect url
* @expect some specific to page element is present on it
*/
it('Click leads to tx details', () => {
testSet.open();
cy.get(ss.transactionRow).eq(0).click();
cy.url().should('contain', '?id=');
cy.get(ss.transactionDetailBackButton);
cy.get(ss.txDetailsBackButton);
});

describe('Account info tabs', () => {
beforeEach(() => {
cy.autologin(accounts.genesis.passphrase, networks.devnet.node);
});
it('Shows 101 votes', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.accountInfoTab).click();
});
/**
* Maximum possible number of voted accounts is shown
* @expect 101 are shown
*/
it('Shows 101 votes', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too, like Display the maximum amount of voted delegates (101)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too :-) Andrei's passive tense is fine.

cy.get(ss.showMoreVotesBtn).click();
cy.get(ss.votedAdress).should('have.length', 101);
cy.get(ss.votedAddress).should('have.length', 101);
});

/**
* Shows voted delegate's nickname, not address
* @expect delegate's nickname shown
*/
it('Shows voted delegate nickname ', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.accountInfoTab).click();
cy.get(ss.votedAdress).eq(0).should('have.text', 'genesis_1 ');
cy.get(ss.votedAddress).eq(0).should('have.text', 'genesis_1 ');
});

/**
* Click on voted delegate leads to account page
* @expect corresponding delegate name is shown on account's page
*/
it('Click on voted delegate leads to account page', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.accountInfoTab).click();
cy.get(ss.votedAdress).eq(0).click();
cy.get(ss.votedAddress).eq(0).click();
cy.get(ss.delegateName).should('have.text', 'genesis_1');
});
});
Expand All @@ -124,44 +137,55 @@ describe('Dashboard Activity', () => {
describe(testSet.name, () => {
beforeEach(() => {
cy.autologin(accounts.delegate.passphrase, networks.devnet.node);
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.delegateStatisticsTab).click();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The testing talk at React Day was talking about not doing this - each it should contain the setup, if it's repetitive like this, create a helper function and call it in it.

});
describe('Delegate statistics tab', () => {
/**
* Shows voted delegate's nickname not addresses
* @expect delegate's nickname shown
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please change this too, for be honest I think I know what you meant to say but dont understand for be honest so, I dont know how should be display

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be better English. What about Shows voted delegate's nickname, not address?

it('Shows voted delegate nickname ', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.delegateStatisticsTab).click();
cy.get(ss.votedAdress).eq(0).should('have.text', 'genesis_17 ');
cy.get(ss.votedAddress).eq(0).should('have.text', 'genesis_17 ');
});

/**
* Click on voted delegate leads to account page
* @expect corresponding delegate name is shown on account's page
*/
it('Click on voted delegate leads to account page', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.delegateStatisticsTab).click();
cy.get(ss.votedAdress).eq(0).click();
cy.get(ss.votedAddress).eq(0).click();
cy.get(ss.delegateName).should('have.text', 'genesis_17');
});


// TODO Fix after corresponding bugfix
/**
* Shows nickname of account on "Who voted for this delegate?"
* list if the account is a delegate
* @expect voters nickname shown
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this comment is hard to understand can you please change it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand what is meant by who-voted-for-this-delegate and why the dashes, but I also get that it's not clear to anyone. What about the following?
Shows nickname of account on "Who voted for this delegate?" list if the account is a delegate

xit('Shows voters nickname if it is delegate', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.delegateStatisticsTab).click();
cy.get(ss.voterAdress).eq(0).should('have.text', 'genesis_1 ');
});

/**
* Shows address of account on "Who voted for this delegate?"
* list if the account is not a delegate
* @expect voters address shown
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as this is a comment you can remove the dash, and maybe if possible put something more descriptive

it('Shows voters address if it is not delegate', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.delegateStatisticsTab).click();
cy.get(ss.voterAdress).eq(1).should('have.text', '16313739661670634666L ');
});

/**
* Click on voter leads to account page
* @expect according delegate name is shown on account's page
*/
it('Click on voter leads to account page', () => {
testSet.open();
waitBeforeChangeTabAfterLoading();
cy.get(ss.delegateStatisticsTab).click();
cy.get(ss.voterAdress).eq(1).click();
cy.get(ss.explorerAccountLeftBlock).find(ss.accountAddress).should('have.text', '16313739661670634666L');
cy.get(ss.leftBlockAccountExplorer).find(ss.accountAddress).should('have.text', '16313739661670634666L');
});
});
});
Expand Down
Loading