test: NOTIFY-1256 - Extending E2E tests for Account Sync

[cmd-ob]

Description

• Starts using Page Object Model for accounts syncing tests
• Adds new tests

Related issues

Fixes:

Manual testing steps

1. All e2e tests should run and pass on the CI

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

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.

[javiergarciavera]

just out of curiosity, why do we have one method for "isNotDisplayed" and one method for "isDisplayed"? can not be implemented in a single method where it handles the exception in case it is not displayed and returns false?

[cmd-ob]

This is a good point actually. I just used the method as it was implemented. Also, from a lot of the other tests I have seen, it looks like the check_ methods are quite explicit.

@chloeYue might have some insight?

[chloeYue]

Yes we try to make check_ methods explicit and easy to use, so we can call the check_ methods directly, and we don't need to assert in test body like assert.equal(accountListPage.check_accountIsDisplayedInAccountList(xxx), false);

[Joj501]

Approved

[metamaskbot]

Builds ready [b22c776]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2039 ± 130 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	336	3061	1962	462	222
		domContentLoaded	1718	2961	1996	257	123
		load	1733	3050	2039	270	130
		domInteractive	16	290	60	57	27
		backgroundConnect	8	95	40	27	13
		firstReactRender	50	300	105	48	23
		getState	5	73	20	22	11
		initialActions	0	1	0	0	0
		loadScripts	1233	2406	1488	238	114
		setupStore	11	88	31	25	12
		uiStartup	1943	3299	2272	293	141

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 69 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [49e678d]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1935 ± 69 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1696	2212	1936	145	70
		domContentLoaded	1687	2200	1900	129	62
		load	1696	2215	1935	144	69
		domInteractive	17	170	46	33	16
		backgroundConnect	10	113	40	31	15
		firstReactRender	48	150	89	29	14
		getState	5	84	18	22	10
		initialActions	0	1	0	0	0
		loadScripts	1241	1715	1418	116	56
		setupStore	11	70	39	24	11
		uiStartup	1901	2662	2164	188	90

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 69 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[mathieuartu]

I'd love to ditch these magic strings and use something like

import { SDK } from '@metamask/profile-sync-controller';

const decryptedAccountNames = await Promise.all(
      accountsSyncMockResponse.map(async (response) => {
        const decryptedAccountName = await SDK.Encryption.decryptString(
          response.Data,
          NOTIFICATIONS_TEAM_STORAGE_KEY,
        );
        return JSON.parse(decryptedAccountName).n;
      }),
    );
    
    ...
    
    for (const accountName of decryptedAccountNames) {
      await accountListPage.check_accountDisplayedInAccountList(
        accountName,
      );
    }

[mathieuartu]

This would apply to all other occurences of magic strings in this PR. Wdyt?

I just did this for mobile and it works great. Something to be wary of, we'll be adding some decryption workload to our CI by doing that. I'm just not sure how much. Let's discuss!