chore(react): Port over some missing pieces of signup functional tests

Because:
* We want to transfer relevant tests to React signup

This commit:
* Adds a couple missing web channel message checks in our React signup tests, ports content-server's saveEventForTests
* Changes the desktop v3 UA to our likely min supported version, tests for web channel events sent by the browser instead of sending a custom list since we respond to the first event received, which the browser sends automatically
* Adjusts oauth web channel to waitForURL before checking for the web channel event

fixes FXA-8854

packages/functional-tests/lib/query-params.ts

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // This file contains query params that don't reflect states that can be reached from 123done.
+import uaStrings from './ua-strings';
 
 export const syncMobileOAuthQueryParams = new URLSearchParams({
   client_id: '1b1a3e44c54fbb58', // Firefox for iOS
@@ -17,3 +18,11 @@ export const syncMobileOAuthQueryParams = new URLSearchParams({
   context: 'oauth_webchannel_v1',
   automatedBrowser: 'true',
 });
+
+export const syncDesktopV3QueryParams = new URLSearchParams({
+  context: 'fx_desktop_v3',
+  service: 'sync',
+  action: 'email',
+  automatedBrowser: 'true',
+  forceUA: uaStrings['desktop_firefox_79'],
+});

packages/functional-tests/tests/react-conversion/signup.spec.ts

@@ -5,13 +5,23 @@
 import { expect, newPagesForSync, test } from '../../lib/fixtures/standard';
 import { EmailHeader, EmailType } from '../../lib/email';
 import { createCustomEventDetail, FirefoxCommand } from '../../lib/channels';
-import { syncMobileOAuthQueryParams } from '../../lib/query-params';
+import {
+  syncDesktopV3QueryParams,
+  syncMobileOAuthQueryParams,
+} from '../../lib/query-params';
 
 const PASSWORD = 'passwordzxcv';
 
 let email;
 let skipCleanup = false;
 
+const eventDetailLinkAccount = createCustomEventDetail(
+  FirefoxCommand.LinkAccount,
+  {
+    ok: true,
+  }
+);
+
 test.beforeEach(async ({ pages: { configPage, login } }) => {
   test.slow();
   // Ensure that the feature flag is enabled
@@ -162,6 +172,7 @@ test.describe('severity-1 #smoke', () => {
         waitUntil: 'load',
       });
       await page.waitForSelector('#root');
+      // We must wait for the page to render before sending a web channel message
       expect(page.getByText('Set your password')).toBeVisible();
 
       await signupReact.sendWebChannelMessage(customEventDetail);
@@ -171,7 +182,6 @@ test.describe('severity-1 #smoke', () => {
       // Only engines provided via web channel for Sync mobile are displayed
       expect(await login.isCWTSEngineCreditCards()).toBe(false);
 
-      await signupReact.listenToWebChannelMessages();
       await signupReact.fillOutSignupForm(PASSWORD);
 
       const code = await target.email.waitForEmail(
@@ -181,29 +191,38 @@ test.describe('severity-1 #smoke', () => {
       );
 
       await signupReact.fillOutCodeForm(code);
+      await page.waitForURL(/connect_another_device/);
       await signupReact.checkWebChannelMessage(FirefoxCommand.OAuthLogin);
     });
 
-    test('signup sync', async ({ target }) => {
+    test('signup sync desktop v3, verify account', async ({ target }) => {
       test.slow();
       const syncBrowserPages = await newPagesForSync(target);
-      const { page, signupReact } = syncBrowserPages;
-
-      await signupReact.goto(
-        '/',
-        new URLSearchParams({
-          context: 'fx_desktop_v3',
-          service: 'sync',
-          action: 'email',
-          automatedBrowser: 'true',
-        })
-      );
+      const { page, signupReact, login } = syncBrowserPages;
 
+      await signupReact.goto('/', syncDesktopV3QueryParams);
       await signupReact.fillOutEmailFirst(email);
       await page.waitForURL(/signup/);
       await page.waitForSelector('#root');
+      // Wait for page to render
+      expect(page.getByText('Set your password')).toBeVisible();
+
+      await signupReact.respondToWebChannelMessage(eventDetailLinkAccount);
+      await signupReact.checkWebChannelMessage(FirefoxCommand.FxAStatus);
+      await login.checkWebChannelMessage(FirefoxCommand.LinkAccount);
+
+      // Sync desktop v3 includes "default" engines plus the ones provided via web channel
+      // See sync-engines.ts comments
+      await login.isCWTSEngineBookmarks();
+      await login.isCWTSEngineHistory();
+      await login.isCWTSEnginePasswords();
+      await login.isCWTSEngineTabs();
+      await login.isCWTSEnginePrefs();
+      await login.isCWTSEngineCreditCards();
+      expect(await login.isCWTSEngineAddresses()).toBe(false);
 
       await signupReact.fillOutSignupForm(PASSWORD);
+      await login.checkWebChannelMessage(FirefoxCommand.Login);
 
       const code = await target.email.waitForEmail(
         email,
@@ -213,7 +232,6 @@ test.describe('severity-1 #smoke', () => {
 
       await signupReact.fillOutCodeForm(code);
 
-      // See note in `firefox.ts` about an event listener hack needed for this test
       await page.waitForURL(/connect_another_device/);
       await expect(page.getByText('You’re signed into Firefox')).toBeVisible();
 

packages/fxa-settings/src/lib/channels/firefox.ts

@@ -201,6 +201,33 @@ export class Firefox extends EventTarget {
     return JSON.stringify(detail);
   }
 
+  /**
+   * Save the name of the event into sessionStorage, used for testing.
+   *
+   * @param {String} command
+   * @private
+   */
+  private saveEventForTests(command: FirefoxCommand, data: any) {
+    const agent = navigator.userAgent;
+    const isWebDriver = navigator.webdriver;
+    if (!isWebDriver && agent.indexOf('FxATester') === -1) {
+      // not running in automated tests, no reason to store this info.
+      return;
+    }
+
+    let storedEvents;
+    try {
+      storedEvents =
+        JSON.parse(sessionStorage.getItem('webChannelEvents') || '') || [];
+    } catch (e) {
+      storedEvents = [];
+    }
+    storedEvents.push({ command, data });
+    try {
+      sessionStorage.setItem('webChannelEvents', JSON.stringify(storedEvents));
+    } catch (e) {}
+  }
+
   // send a message to the browser chrome
   send(command: FirefoxCommand, data: any, messageId?: string) {
     const detail = this.formatEventDetail(command, data, messageId);
@@ -209,6 +236,7 @@ export class Firefox extends EventTarget {
         detail,
       })
     );
+    this.saveEventForTests(command, data);
   }
 
   // broadcast a message to other tabs