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.

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: [POM] Migrate onboarding infura call privacy e2e tests #28079

Open
wants to merge 27 commits into
base: develop
Choose a base branch
from

Conversation

devin-ai-integration[bot]
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Oct 24, 2024

Description

  • Migrate onboarding infura call privacy e2e tests to TypeScript and Page Object Model (POM) pattern.
  • Improve onboarding related page object modals implementation.
  • Improve switch network page object modals implementation.
  • Handle mmi build in openAccountOptionMenu method to reduce flakiness
  • Objective of this PR is to improve test stability and maintainability, it also reduced flakiness.

Open in GitHub Codespaces

Related issues

Fixes: #28080

Manual testing steps

Check code readability, make sure tests pass.

Screenshots/Recordings

Before

After

Pre-merge author checklist

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.

devin-ai-integration bot and others added 21 commits October 18, 2024 09:57
Removed test files that were migrated to TypeScript:
- test/e2e/tests/privacy/basic-functionality.spec.js
- test/e2e/tests/privacy/onboarding-privacy.spec.js
…k/metamask-extension into chloe-migrate-onboarding

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
@devin-ai-integration devin-ai-integration bot requested a review from a team as a code owner October 24, 2024 16:00
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions github-actions bot added the team-ai AI team (for the Devin AI bot) label Oct 24, 2024
@chloeYue chloeYue marked this pull request as draft October 24, 2024 16:01
@chloeYue chloeYue self-assigned this Oct 24, 2024
@chloeYue chloeYue changed the title chore: Convert privacy test files to TypeScript test: Convert privacy test files to TypeScript Oct 24, 2024
@chloeYue chloeYue changed the title test: Convert privacy test files to TypeScript test: [POM] Migrate onboarding infura call privacy e2e tests Oct 24, 2024
@chloeYue chloeYue marked this pull request as ready for review October 24, 2024 16:32
@metamaskbot
Copy link
Collaborator

Builds ready [390d5be]
Page Load Metrics (2066 ± 98 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint170426292078221106
domContentLoaded16912407202419091
load17022493206620498
domInteractive218150157
backgroundConnect999372713
firstReactRender492061123517
getState5115303115
initialActions01000
loadScripts12311744151514871
setupStore107225209
uiStartup190730542328282135
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [5622dd4]
Page Load Metrics (2100 ± 88 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint38325812004412198
domContentLoaded17762554206817785
load18202576210018488
domInteractive179242189
backgroundConnect10112282512
firstReactRender683491317837
getState589372814
initialActions01000
loadScripts12421919151914971
setupStore15106413014
uiStartup197532522405301144
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [9ffb554]
Page Load Metrics (2018 ± 106 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint171626252028225108
domContentLoaded16892487198319996
load169925692018221106
domInteractive2385542110
backgroundConnect8155363617
firstReactRender642981244924
getState585222412
initialActions01000
loadScripts12102011147217584
setupStore117425209
uiStartup190330512278275132
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [7d7e571]
Page Load Metrics (2094 ± 179 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint26929832023545262
domContentLoaded165228822062361173
load170829832094372179
domInteractive18216584120
backgroundConnect7101302512
firstReactRender533331135928
getState576332311
initialActions01000
loadScripts119422131550296142
setupStore1278352311
uiStartup186436632360459220
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

export const importSRPOnboardingFlow = async (driver: Driver) => {
console.log('start import srp onboarding flow ');
export const createNewWalletOnboardingFlow = async (driver: Driver) => {
console.log('start creat new wallet onboarding flow ');
Copy link
Contributor

Choose a reason for hiding this comment

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

minor nit

Suggested change
console.log('start creat new wallet onboarding flow ');
console.log("Starting the creation of a new wallet onboarding flow");

export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
console.log('start to complete create new wallet onboarding flow ');
export const importSRPOnboardingFlow = async (driver: Driver) => {
console.log('start import srp onboarding flow ');
Copy link
Contributor

Choose a reason for hiding this comment

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

minor nit

Suggested change
console.log('start import srp onboarding flow ');
console.log("Starting the import of SRP onboarding flow");

async clickToggleButton(): Promise<void> {
console.log('Click Toggle Button');
async toggleShowTestNetwork(): Promise<void> {
console.log('Toggle show test network in select network dialog');
Copy link
Contributor

Choose a reason for hiding this comment

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

thanks for correcting. Nice job

export const switchToNetworkFlow = async (
driver: Driver,
networkName: string,
toogleShowTestNetwork: boolean = false,
Copy link
Contributor

Choose a reason for hiding this comment

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

minor nit - typo here

Suggested change
toogleShowTestNetwork: boolean = false,
toggleShowTestNetwork: boolean = false,

*
* @param driver
* @param networkName - The name of the network to switch to.
* @param toogleShowTestNetwork - A boolean indicating whether to toggle the display of test networks. Defaults to false.
Copy link
Contributor

Choose a reason for hiding this comment

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

minor typo

Suggested change
* @param toogleShowTestNetwork - A boolean indicating whether to toggle the display of test networks. Defaults to false.
* @param toggleShowTestNetwork - A boolean indicating whether to toggle the display of test networks. Defaults to false.


const selectNetworkDialog = new SelectNetwork(driver);
await selectNetworkDialog.check_pageIsLoaded();
if (toogleShowTestNetwork) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
if (toogleShowTestNetwork) {
if (toggleShowTestNetwork) {

@@ -16,4 +36,4 @@ class networkSwitchModalConfirmation {
}
}

export default networkSwitchModalConfirmation;
export default NetworkSwitchModalConfirmation;
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks @chloeYue for correcting and adding the page check that I missed.


export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
console.log('start to complete create new wallet onboarding flow ');
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
console.log('start to complete create new wallet onboarding flow ');
console.log('Starting to complete the new wallet onboarding flow');

@hjetpoluru
Copy link
Contributor

@chloeYue, Everything is looking good, just some minor typos. Logging has improved a lot which helps when fixing the flaky tests. Great effort!

await this.driver.clickElement(this.lockMetaMaskButton);
}

async openAccountMenu(): Promise<void> {
await this.driver.clickElement(this.accountMenuButton);
}

async openAccountOptionMenu(): Promise<void> {
console.log('Open account options menu');
await this.driver.clickElement(this.accountOptionMenu);
Copy link
Contributor

Choose a reason for hiding this comment

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

accountOptionMenu is slightly confusing as there is also accountMenuButton.The main issue is that the data-testid that was defined is itself incorrectly named, as shown below. Correcting this would be a huge amount of work.

private readonly accountMenuButton = '[data-testid="account-menu-icon"]';

  private readonly accountOptionMenu =
    '[data-testid="account-options-menu-button"]';

I am thinking that adding toggleThreeDotMenu, openThreeDotMenu, or showThreeDotMenu would be easier, but I leave it to you to decide as you have worked on this more.


// Validate the default network is Localhost 8545
await headerNavbar.check_currentSelectedNetwork('Localhost 8545');
await new HeaderNavbar(driver).check_currentSelectedNetwork(
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you explain the reason for changing this line? It's currently used only once, but if someone needs it for reference and there are more calls, it could be easily missed. This brings up the question of whether clean code practices are needed. I will leave it to you to decide.

@@ -18,7 +18,7 @@ import SnapSimpleKeyringPage from '../../page-objects/pages/snap-simple-keyring-
import TestDapp from '../../page-objects/pages/test-dapp';

describe('Snap Account Signatures @no-mmi', function (this: Suite) {
this.timeout(150000); // This test is very long, so we need an unusually high timeout
this.timeout(200000); // This test is very long, so we need an unusually high timeout
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you explain why this timeout is needed in general? I see that this is a multiple test scenario in a single test, and it being flaky irrespective of the timeout itself. Could we enhance this in another way, or should it be addressed in a separate ticket then incase then this change made not be needed is my thought.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
team-ai AI team (for the Devin AI bot) team-extension-platform
Projects
Status: Needs dev review
Development

Successfully merging this pull request may close these issues.

[POM] Migrate onboarding infura call privacy e2e tests to page object modal and typescript
3 participants