-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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.
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
test: Added e2e for switch network #27967
Changes from 10 commits
e858389
ded3689
f043170
c100552
185abee
99c53aa
351de0b
6a2c882
aa5f232
2caa271
88d5179
9e3b662
70b9cd1
c08dbca
2318c32
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,19 @@ | ||||||||||
import { Driver } from '../../../webdriver/driver'; | ||||||||||
|
||||||||||
class Notification { | ||||||||||
private driver: Driver; | ||||||||||
|
||||||||||
private submitButton: string; | ||||||||||
|
||||||||||
constructor(driver: Driver) { | ||||||||||
this.driver = driver; | ||||||||||
this.submitButton = '[data-testid="confirmation-submit-button"]'; | ||||||||||
} | ||||||||||
|
||||||||||
async clickApproveButton(): Promise<void> { | ||||||||||
console.log('Click Approve Button'); | ||||||||||
await this.driver.clickElement(this.submitButton); | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. to avoid race conditions:
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I actually tried using There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok I have updated |
||||||||||
} | ||||||||||
} | ||||||||||
|
||||||||||
export default Notification; |
Original file line number | Diff line number | Diff line change | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,59 @@ | ||||||||||
import { Driver } from '../../../webdriver/driver'; | ||||||||||
|
||||||||||
class SelectNetwork { | ||||||||||
private driver: Driver; | ||||||||||
|
||||||||||
private networkName: string | undefined; | ||||||||||
|
||||||||||
private addNetworkButton: object; | ||||||||||
|
||||||||||
private closeButton: string; | ||||||||||
|
||||||||||
private toggleButton: string; | ||||||||||
|
||||||||||
private searchInput: string; | ||||||||||
|
||||||||||
constructor(driver: Driver) { | ||||||||||
this.driver = driver; | ||||||||||
this.addNetworkButton = { | ||||||||||
tag: 'button', | ||||||||||
text: 'Add a custom network', | ||||||||||
}; | ||||||||||
this.closeButton = 'button[aria-label="Close"]'; | ||||||||||
this.toggleButton = '.toggle-button > div'; | ||||||||||
this.searchInput = '[data-testid="network-redesign-modal-search-input"]'; | ||||||||||
} | ||||||||||
|
||||||||||
async clickNetworkName(networkName: string): Promise<void> { | ||||||||||
console.log(`Click ${networkName}`); | ||||||||||
this.networkName = `[data-testid="${networkName}"]`; | ||||||||||
await this.driver.clickElement(this.networkName); | ||||||||||
} | ||||||||||
|
||||||||||
async addNewNetwork(): Promise<void> { | ||||||||||
console.log('Click Add network'); | ||||||||||
await this.driver.clickElement(this.addNetworkButton); | ||||||||||
} | ||||||||||
|
||||||||||
async clickCloseButton(): Promise<void> { | ||||||||||
console.log('Click Close Button'); | ||||||||||
await this.driver.clickElement(this.closeButton); | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have updated this change. |
||||||||||
} | ||||||||||
|
||||||||||
async clickToggleButton(): Promise<void> { | ||||||||||
console.log('Click Toggle Button'); | ||||||||||
await this.driver.clickElement(this.toggleButton); | ||||||||||
} | ||||||||||
|
||||||||||
async fillNetworkSearchInput(networkName: string): Promise<void> { | ||||||||||
console.log(`Fill network search input with ${networkName}`); | ||||||||||
await this.driver.fill(this.searchInput, networkName); | ||||||||||
} | ||||||||||
|
||||||||||
async clickAddButton(): Promise<void> { | ||||||||||
console.log('Click Add Button'); | ||||||||||
await this.driver.clickElement('[data-testid="test-add-button"]'); | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have updated this change. |
||||||||||
} | ||||||||||
} | ||||||||||
|
||||||||||
export default SelectNetwork; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { Suite } from 'mocha'; | ||
import { Driver } from '../../webdriver/driver'; | ||
import { withFixtures, defaultGanacheOptions } from '../../helpers'; | ||
import FixtureBuilder from '../../fixture-builder'; | ||
import { Ganache } from '../../seeder/ganache'; | ||
import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; | ||
import HomePage from '../../page-objects/pages/homepage'; | ||
import Notification from '../../page-objects/pages/dialog/notification'; | ||
import HeaderNavbar from '../../page-objects/pages/header-navbar'; | ||
import SelectNetwork from '../../page-objects/pages/dialog/select-network'; | ||
|
||
describe('Switch network - ', function (this: Suite) { | ||
it('Ethereum Mainnet and Sepolia', async function () { | ||
await withFixtures( | ||
{ | ||
fixtures: new FixtureBuilder().build(), | ||
ganacheOptions: defaultGanacheOptions, | ||
title: this.test?.fullTitle(), | ||
}, | ||
async ({ | ||
driver, | ||
ganacheServer, | ||
}: { | ||
driver: Driver; | ||
ganacheServer?: Ganache; | ||
}) => { | ||
await loginWithBalanceValidation(driver, ganacheServer); | ||
const homePage = new HomePage(driver); | ||
const headerNavbar = new HeaderNavbar(driver); | ||
const selectNetwork = new SelectNetwork(driver); | ||
const notification = new Notification(driver); | ||
|
||
// Validate the default network is Localhost 8545 | ||
await headerNavbar.check_currentSelectedNetwork('Localhost 8545'); | ||
|
||
// Validate the switch network functionality to Ethereum Mainnet | ||
await headerNavbar.clickSwitchNetworkDropDown(); | ||
await selectNetwork.clickNetworkName('Ethereum Mainnet'); | ||
await homePage.check_expectedBalanceIsDisplayed('25'); | ||
await headerNavbar.check_currentSelectedNetwork('Ethereum Mainnet'); | ||
// Validate the switch network functionality to test network | ||
await headerNavbar.clickSwitchNetworkDropDown(); | ||
await selectNetwork.clickToggleButton(); | ||
await selectNetwork.clickNetworkName('Localhost 8545'); | ||
await homePage.check_expectedBalanceIsDisplayed('25'); | ||
await headerNavbar.check_currentSelectedNetwork('Localhost 8545'); | ||
|
||
// Add Aribtrum network and perform the switch network functionality | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Typo: The test is called: There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good catch, I will change this.. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @seaona, I believe this test scenario is a simple one, so I have simplified the test name and provided comments. This should be sufficient. Please let me know if anything else needs to be updated |
||
await headerNavbar.clickSwitchNetworkDropDown(); | ||
await selectNetwork.fillNetworkSearchInput('Arbitrum One'); | ||
await selectNetwork.clickAddButton(); | ||
await notification.clickApproveButton(); | ||
await headerNavbar.clickSwitchNetworkDropDown(); | ||
await selectNetwork.clickNetworkName('Arbitrum One'); | ||
await homePage.check_expectedBalanceIsDisplayed('25'); | ||
await headerNavbar.check_currentSelectedNetwork('Arbitrum One'); | ||
|
||
// Validate the switch network functionality back to Ethereum Mainnet | ||
await headerNavbar.clickSwitchNetworkDropDown(); | ||
await selectNetwork.clickNetworkName('Ethereum Mainnet'); | ||
await homePage.check_expectedBalanceIsDisplayed('25'); | ||
await headerNavbar.check_currentSelectedNetwork('Ethereum Mainnet'); | ||
}, | ||
); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, the test looks good 🔥 Just added a couple of suggestions.
I would suggest some naming changes:
notification.ts
seems quite a vague name -> this component represents the Network Confirmations modal for switching networks, so I would name something likenetwork-switch-modal-confirmation
or similar, so it's easier to know what it refers to (see pic)dialog/...
I think the folder name is again quite vague -> here both components refer to the network picker and modal, so we could have some folder name more explicitWhat do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @seaona for the detailed and valuable feedback.
Name Change
notification.ts
is generic and a more accurate name as you suggested, will benetwork-switch-modal-confirmation
and will make the change.