test: [POM] Dapp subscribe network switch spec migration

[seaona]

Description

This PR migrates the test/e2e/tests/request-queuing/dapp1-subscribe-network-switch.spec.js spec to use page object model and typescript. It also updates the assertions to test what it's intended.

1. We go to the test dapp and connect
2. We subscribe to the newHeads event

await window.ethereum.request({
 "method": "eth_subscribe",
 "params": [
  "newHeads"
],
});

3. We add an event listener for subscribe messages, and we'll store this into a window variable, so we can access it later

window.ethereum.on('message', (message) => {
  if (message.type === 'eth_subscription' && message.data.subscription === '0x4bc2639eb3ac769db7a90f60a47b33c4') {
    console.log('New block header:', message.data.result);
  }
})

4. We switch networks from MM wide screen
5. We go back to the dapp
6. We mine a block deterministically --> In ganache we have setup auto-mining by default, however this happens every some seconds, by performing a mine ourselves, we know for sure that this happened at least once at the point we want
7. We wait a couple of seconds to see if more event logs appear
8. We assert that we got more events, after switching networks

Related issues

Fixes: #29348

Manual testing steps

1. Check ci continues to pass
2. Run spec manually `yarn test:e2e:single test/e2e/tests/request-queuing/dapp1-subscribe-network-switch.spec.ts --browser=chrome --leave-running=true

Screenshots/Recordings

Messages when we console log them in the spec

This is the flow that happens in the spec, done manually.

subscribe-flow-spec.mp4

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.

[metamaskbot]

Builds ready [5ae20ff]

• 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, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1677 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1493	1856	1676	115	55
		domContentLoaded	1471	1851	1648	111	53
		load	1497	1861	1677	110	53
		domInteractive	23	97	41	22	11
		backgroundConnect	9	77	35	22	10
		firstReactRender	15	75	40	24	12
		getState	4	60	11	12	6
		initialActions	0	1	0	0	0
		loadScripts	1072	1376	1217	91	44
		setupStore	6	51	10	9	5
		uiStartup	1679	2149	1909	127	61

Bundle size diffs

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

[metamaskbot]

Builds ready [38f16f7]

• 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, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1736 ± 96 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	239	2232	1668	389	187
		domContentLoaded	1449	2154	1704	196	94
		load	1462	2234	1736	201	96
		domInteractive	24	76	36	15	7
		backgroundConnect	9	113	32	26	13
		firstReactRender	16	96	47	30	14
		getState	5	80	26	27	13
		initialActions	0	1	0	0	0
		loadScripts	1025	1718	1278	178	85
		setupStore	6	88	19	23	11
		uiStartup	1661	2953	2098	301	145

Bundle size diffs

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

[chloeYue]

LGTM! Thanks for clarifying the scenario!