Skip to content

Commit c22fc9a

Browse files
authored
22542 add e2e test for update network (#22762)
## **Description** This PR adds test coverage for update network which is critical flow in the extension. ## **Related issues** Fixes: ## **Manual testing steps** Run the tests locally yarn yarn start:test yarn test:e2e:single test/e2e/tests/network/update-network.spec.ts --browser=chrome --debug --leave-running yarn test:e2e:single test/e2e/tests/network/update-network.spec.ts --browser=firefox --debug --leave-running ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [x] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] 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/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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 38fcd39 commit c22fc9a

File tree

3 files changed

+121
-0
lines changed

3 files changed

+121
-0
lines changed
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { strict as assert } from 'assert';
2+
import { Suite } from 'mocha';
3+
import FixtureBuilder from '../../fixture-builder';
4+
import {
5+
defaultGanacheOptions,
6+
unlockWallet,
7+
withFixtures,
8+
} from '../../helpers';
9+
import { Driver } from '../../webdriver/driver';
10+
11+
const selectors = {
12+
accountOptionsMenuButton: '[data-testid="account-options-menu-button"]',
13+
informationSymbol: '[data-testid="info-tooltip"]',
14+
settingsOption: { text: 'Settings', tag: 'div' },
15+
networkOption: { text: 'Networks', tag: 'div' },
16+
generalOption: { text: 'General', tag: 'div' },
17+
ethereumNetwork: { text: 'Ethereum Mainnet', tag: 'div' },
18+
deleteButton: { text: 'Delete', tag: 'button' },
19+
cancelButton: { text: 'Cancel', tag: 'button' },
20+
saveButton: { text: 'Save', tag: 'button' },
21+
updatedNetworkDropDown: { tag: 'span', text: 'Update Network' },
22+
errorMessageInvalidUrl: {
23+
tag: 'h6',
24+
text: 'URLs require the appropriate HTTP/HTTPS prefix.',
25+
},
26+
networkNameInputField: '[data-testid="network-form-network-name"]',
27+
rpcUrlInputField: '[data-testid="network-form-rpc-url"]',
28+
chainIdInputField: '[data-testid="network-form-chain-id"]',
29+
errorContainer: '.settings-tab__error',
30+
};
31+
32+
const inputData = {
33+
networkName: 'Update Network',
34+
rpcUrl: 'test',
35+
chainId: '0x539',
36+
};
37+
38+
async function navigateToEditNetwork(driver: Driver) {
39+
await driver.clickElement(selectors.accountOptionsMenuButton);
40+
await driver.clickElement(selectors.settingsOption);
41+
await driver.clickElement(selectors.networkOption);
42+
}
43+
describe('Update Network:', function (this: Suite) {
44+
it('update network details and validate the ui elements', async function () {
45+
await withFixtures(
46+
{
47+
fixtures: new FixtureBuilder().build(),
48+
ganacheOptions: defaultGanacheOptions,
49+
title: this.test?.fullTitle(),
50+
},
51+
52+
async ({ driver }: { driver: Driver }) => {
53+
await unlockWallet(driver);
54+
await navigateToEditNetwork(driver);
55+
await driver.fill(
56+
selectors.networkNameInputField,
57+
inputData.networkName,
58+
);
59+
await driver.fill(selectors.chainIdInputField, inputData.chainId);
60+
await driver.clickElement(selectors.saveButton);
61+
62+
// Validate the error does not appear for updating the network name and chain id
63+
await driver.clickElement(selectors.generalOption);
64+
await driver.assertElementNotPresent(selectors.errorContainer);
65+
66+
// Validate the network name is updated
67+
const updatedNetworkNamePresent = await driver.isElementPresent(
68+
selectors.updatedNetworkDropDown,
69+
);
70+
assert.equal(
71+
updatedNetworkNamePresent,
72+
true,
73+
'Network name is not updated',
74+
);
75+
76+
await navigateToEditNetwork(driver);
77+
await driver.fill(selectors.rpcUrlInputField, inputData.rpcUrl);
78+
79+
// Validate the error message that appears for the invalid url format
80+
const errorMessage = await driver.isElementPresent(
81+
selectors.errorMessageInvalidUrl,
82+
);
83+
assert.equal(
84+
errorMessage,
85+
true,
86+
'Error message for the invalid url did not appear',
87+
);
88+
89+
// Validate the Save button is disabled for the invalid url format
90+
const saveButton = await driver.findElement(selectors.saveButton);
91+
const saveButtonEnabled = await saveButton.isEnabled();
92+
assert.equal(saveButtonEnabled, false, 'Save button is enabled');
93+
94+
// Validate the information symbol appears for chain id
95+
const informationSymbolAppears = await driver.isElementPresent(
96+
selectors.informationSymbol,
97+
);
98+
assert.equal(
99+
informationSymbolAppears,
100+
true,
101+
'Information symbol did not appear for chain id',
102+
);
103+
104+
await driver.clickElement(selectors.ethereumNetwork);
105+
106+
// Validate the Save,Cancel Delete button is not present for the default network
107+
await driver.assertElementNotPresent(selectors.deleteButton);
108+
await driver.assertElementNotPresent(selectors.cancelButton);
109+
await driver.assertElementNotPresent(selectors.saveButton);
110+
},
111+
);
112+
});
113+
});

ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ exports[`Add Network Modal should render 1`] = `
6060
</div>
6161
<input
6262
class="form-field__input"
63+
data-testid="network-form-network-name"
6364
type="text"
6465
value=""
6566
/>
@@ -90,6 +91,7 @@ exports[`Add Network Modal should render 1`] = `
9091
</div>
9192
<input
9293
class="form-field__input"
94+
data-testid="network-form-rpc-url"
9395
type="text"
9496
value=""
9597
/>
@@ -144,6 +146,7 @@ exports[`Add Network Modal should render 1`] = `
144146
</div>
145147
<input
146148
class="form-field__input"
149+
data-testid="network-form-chain-id"
147150
type="text"
148151
value=""
149152
/>
@@ -201,6 +204,7 @@ exports[`Add Network Modal should render 1`] = `
201204
</div>
202205
<input
203206
class="form-field__input"
207+
data-testid="network-form-block-explorer-url"
204208
type="text"
205209
value=""
206210
/>

ui/pages/settings/networks-tab/networks-form/networks-form.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -709,6 +709,7 @@ const NetworksForm = ({
709709
titleText={t('networkName')}
710710
value={networkName}
711711
disabled={viewOnly}
712+
dataTestId="network-form-network-name"
712713
/>
713714
<FormField
714715
error={errors.rpcUrl?.msg || ''}
@@ -723,6 +724,7 @@ const NetworksForm = ({
723724
: rpcUrl
724725
}
725726
disabled={viewOnly}
727+
dataTestId="network-form-rpc-url"
726728
/>
727729
<FormField
728730
warning={warnings.chainId?.msg || ''}
@@ -736,6 +738,7 @@ const NetworksForm = ({
736738
value={chainId}
737739
disabled={viewOnly}
738740
tooltipText={viewOnly ? null : t('networkSettingsChainIdDescription')}
741+
dataTestId="network-form-chain-id"
739742
/>
740743
<FormTextField
741744
data-testid="network-form-ticker"
@@ -802,6 +805,7 @@ const NetworksForm = ({
802805
value={blockExplorerUrl}
803806
disabled={viewOnly}
804807
autoFocus={window.location.hash.split('#')[2] === 'blockExplorerUrl'}
808+
dataTestId="network-form-block-explorer-url"
805809
/>
806810
</div>
807811
<div

0 commit comments

Comments
 (0)