Skip to content

Commit 6e6be31

Browse files
PatrykLuckaPatrykLucka
authored
test: add wallet details e2e tests (#34276)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> This PR adds e2e tests for new wallet details page, added as part of multichain accounts initiative. ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: Jita ticket: https://consensyssoftware.atlassian.net/browse/MUL-280 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
1 parent f2104e9 commit 6e6be31

File tree

4 files changed

+204
-0
lines changed

4 files changed

+204
-0
lines changed

‎test/e2e/page-objects/pages/account-list-page.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -652,6 +652,13 @@ class AccountListPage {
652652
await this.driver.waitForSelector(this.walletDetailsButton);
653653
}
654654

655+
// TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
656+
// eslint-disable-next-line @typescript-eslint/naming-convention
657+
async clickWalletDetailsButton(): Promise<void> {
658+
console.log('Click wallet details button');
659+
await this.driver.clickElement(this.walletDetailsButton);
660+
}
661+
655662
// TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
656663
// eslint-disable-next-line @typescript-eslint/naming-convention
657664
async check_accountNotDisplayedInAccountList(

‎test/e2e/page-objects/pages/wallet-details-page.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { Driver } from '../../webdriver/driver';
2+
3+
class WalletDetailsPage {
4+
private readonly driver: Driver;
5+
6+
private readonly walletDetailsPage = '.wallet-details-page';
7+
8+
private readonly addAccountButton =
9+
'.wallet-details-page__add-account-button';
10+
11+
private readonly accountTypeModal = '.multichain-account-menu-popover';
12+
13+
private readonly ethereumAccountOption = {
14+
text: 'Ethereum account',
15+
tag: 'button',
16+
};
17+
18+
private readonly solanaAccountOption = {
19+
text: 'Solana account',
20+
tag: 'button',
21+
};
22+
23+
private readonly accountItems =
24+
'[data-testid^="wallet-details-account-item-"]';
25+
26+
constructor(driver: Driver) {
27+
this.driver = driver;
28+
}
29+
30+
async checkPageIsLoaded(): Promise<void> {
31+
console.log('Check wallet details page is loaded');
32+
await this.driver.waitForSelector(this.walletDetailsPage);
33+
}
34+
35+
async checkWalletNameIsDisplayed(walletName: string): Promise<void> {
36+
console.log(`Check wallet name "${walletName}" is displayed`);
37+
await this.driver.waitForSelector({
38+
text: walletName,
39+
tag: 'p',
40+
});
41+
}
42+
43+
async checkBalanceIsDisplayed(balance: string): Promise<void> {
44+
console.log(`Check balance "${balance}" is displayed`);
45+
await this.driver.waitForSelector({
46+
text: balance,
47+
tag: 'span',
48+
});
49+
}
50+
51+
async checkAccountIsDisplayed(accountName: string): Promise<void> {
52+
console.log(`Check account "${accountName}" is displayed`);
53+
await this.driver.waitForSelector({
54+
text: accountName,
55+
tag: 'p',
56+
});
57+
}
58+
59+
async checkAddAccountButtonIsDisplayed(): Promise<void> {
60+
console.log('Check add account button is displayed');
61+
await this.driver.waitForSelector(this.addAccountButton);
62+
}
63+
64+
async clickAddAccountButton(): Promise<void> {
65+
console.log('Click add account button');
66+
await this.driver.clickElement(this.addAccountButton);
67+
}
68+
69+
async checkAccountTypeModalIsDisplayed(): Promise<void> {
70+
console.log('Check account type selection modal is displayed');
71+
await this.driver.waitForSelector(this.accountTypeModal);
72+
}
73+
74+
async checkEthereumAccountOptionIsDisplayed(): Promise<void> {
75+
console.log('Check Ethereum account option is displayed');
76+
await this.driver.waitForSelector(this.ethereumAccountOption);
77+
}
78+
79+
async checkSolanaAccountOptionIsDisplayed(): Promise<void> {
80+
console.log('Check Solana account option is displayed');
81+
await this.driver.waitForSelector(this.solanaAccountOption);
82+
}
83+
84+
async clickEthereumAccountOption(): Promise<void> {
85+
console.log('Click Ethereum account option');
86+
await this.driver.clickElement(this.ethereumAccountOption);
87+
}
88+
89+
async checkNumberOfAccountsDisplayed(expectedCount: number): Promise<void> {
90+
console.log(`Check ${expectedCount} accounts are displayed`);
91+
92+
await this.driver.wait(async () => {
93+
const accountItemElements = await this.driver.findElements(
94+
this.accountItems,
95+
);
96+
const isValid = accountItemElements.length === expectedCount;
97+
console.log(
98+
`Number of accounts: ${accountItemElements.length} is equal to ${expectedCount}? ${isValid}`,
99+
);
100+
return isValid;
101+
}, 10000);
102+
103+
const accountItemElements = await this.driver.findElements(
104+
this.accountItems,
105+
);
106+
if (accountItemElements.length !== expectedCount) {
107+
throw new Error(
108+
`Expected ${expectedCount} accounts, but found ${accountItemElements.length}`,
109+
);
110+
}
111+
}
112+
}
113+
114+
export default WalletDetailsPage;

‎test/e2e/tests/multichain-accounts/multichain-wallet-details.spec.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Suite } from 'mocha';
2+
import { Mockttp } from 'mockttp';
3+
import AccountListPage from '../../page-objects/pages/account-list-page';
4+
import WalletDetailsPage from '../../page-objects/pages/wallet-details-page';
5+
import { Driver } from '../../webdriver/driver';
6+
import HeaderNavbar from '../../page-objects/pages/header-navbar';
7+
import { withSolanaAccountSnap } from '../solana/common-solana';
8+
import { mockMultichainAccountsFeatureFlag } from './common';
9+
10+
describe('Multichain Accounts - Wallet Details', function (this: Suite) {
11+
it('should view wallet details with one Ethereum and one Solana account and show SRP backup reminder', async function () {
12+
await withSolanaAccountSnap(
13+
{
14+
title: this.test?.fullTitle(),
15+
numberOfAccounts: 1,
16+
withFixtureBuilder: (builder) =>
17+
builder.withKeyringControllerMultiSRP().withPreferencesController({
18+
dismissSeedBackUpReminder: false,
19+
}),
20+
withCustomMocks: async (mockServer: Mockttp) => {
21+
return mockMultichainAccountsFeatureFlag(mockServer);
22+
},
23+
},
24+
async (driver: Driver) => {
25+
const headerNavbar = new HeaderNavbar(driver);
26+
await headerNavbar.openAccountMenu();
27+
28+
const accountListPage = new AccountListPage(driver);
29+
await accountListPage.check_pageIsLoaded();
30+
31+
await accountListPage.check_walletDetailsButtonIsDisplayed();
32+
await accountListPage.clickWalletDetailsButton();
33+
34+
const walletDetailsPage = new WalletDetailsPage(driver);
35+
await walletDetailsPage.checkPageIsLoaded();
36+
37+
await walletDetailsPage.checkWalletNameIsDisplayed('Wallet 1');
38+
await walletDetailsPage.checkBalanceIsDisplayed('$5,643.50');
39+
await walletDetailsPage.checkAccountIsDisplayed('Account 1');
40+
await walletDetailsPage.checkAccountIsDisplayed('Solana 1');
41+
},
42+
);
43+
});
44+
45+
it('should add new Ethereum account from wallet details', async function () {
46+
await withSolanaAccountSnap(
47+
{
48+
title: this.test?.fullTitle(),
49+
numberOfAccounts: 1,
50+
withFixtureBuilder: (builder) =>
51+
builder.withKeyringControllerMultiSRP(),
52+
withCustomMocks: async (mockServer: Mockttp) => {
53+
return mockMultichainAccountsFeatureFlag(mockServer);
54+
},
55+
},
56+
async (driver: Driver) => {
57+
const headerNavbar = new HeaderNavbar(driver);
58+
await headerNavbar.openAccountMenu();
59+
60+
const accountListPage = new AccountListPage(driver);
61+
await accountListPage.check_pageIsLoaded();
62+
63+
await accountListPage.check_walletDetailsButtonIsDisplayed();
64+
await accountListPage.clickWalletDetailsButton();
65+
66+
const walletDetailsPage = new WalletDetailsPage(driver);
67+
await walletDetailsPage.checkPageIsLoaded();
68+
69+
await walletDetailsPage.checkAddAccountButtonIsDisplayed();
70+
await walletDetailsPage.clickAddAccountButton();
71+
72+
await walletDetailsPage.checkAccountTypeModalIsDisplayed();
73+
await walletDetailsPage.checkEthereumAccountOptionIsDisplayed();
74+
await walletDetailsPage.checkSolanaAccountOptionIsDisplayed();
75+
76+
await walletDetailsPage.clickEthereumAccountOption();
77+
78+
await walletDetailsPage.checkNumberOfAccountsDisplayed(3);
79+
},
80+
);
81+
});
82+
});

‎ui/components/multichain/multichain-accounts/wallet-details-account-item/wallet-details-account-item.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const WalletDetailsAccountItem = ({
5757
padding={4}
5858
marginBottom={1}
5959
style={{ cursor: 'pointer', border: 'none' }}
60+
data-testid={`wallet-details-account-item-${account.id}`}
6061
{...rowStylesProps}
6162
>
6263
<Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>

0 commit comments

Comments
 (0)