test(legal): write react tests for leagal simple routes

packages/functional-tests/pages/index.ts

@@ -18,6 +18,7 @@ import { SubscribePage } from './products';
 import { TotpPage } from './settings/totp';
 import { SubscriptionManagementPage } from './products/subscriptionManagement';
 import { ResetPasswordPage } from './resetPassword';
+import { LegalPage } from './legal';
 
 export function create(page: Page, target: BaseTarget) {
   return {
@@ -40,5 +41,6 @@ export function create(page: Page, target: BaseTarget) {
     totp: new TotpPage(page, target),
     subscriptionManagement: new SubscriptionManagementPage(page, target),
     resetPassword: new ResetPasswordPage(page, target),
+    legal: new LegalPage(page, target),
   };
 }

packages/functional-tests/pages/legal.ts

@@ -0,0 +1,7 @@
+import { BaseLayout } from './layout';
+
+export const selectors = {};
+
+export class LegalPage extends BaseLayout {
+  readonly path = '';
+}

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

@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { test, expect } from '../../lib/fixtures/standard';
+import { BaseTarget } from '../../lib/targets/base';
+
+function getReactFeatureFlagUrl(target: BaseTarget, path: string) {
+  return `${target.contentServerUrl}${path}?showReactApp=true`;
+}
+
+test.describe('legal', () => {
+  test('start at legal page', async ({ page, target }) => {
+    await page.goto(getReactFeatureFlagUrl(target, '/legal'));
+
+    // Verify react page has been loaded
+    expect(await page.locator('#root').isVisible()).toBeTruthy();
+
+    // Verify legal page is visible
+    expect(
+      await page.locator('.card-header:has-text("Legal")').isVisible()
+    ).toBeTruthy();
+
+    // Verify Terms Of Service link is visible
+    expect(
+      await page.locator('a:has-text("Terms of Service")').isVisible()
+    ).toBeTruthy();
+
+    // Currently Back button on this page is not working,
+    // check https://mozilla-hub.atlassian.net/browse/FXA-6874
+    // await page.locator('a:has-text("Terms of Service")').click();
+    //await page.locator('button:has-text("Back")').click();
+    //expect(await page.locator('.card-header:has-text("Legal")').isVisible()).toBeTruthy();
+
+    // Verify Privacy Notice link is visible
+    expect(
+      await page.locator('a:has-text("Privacy Notice")').isVisible()
+    ).toBeTruthy();
+    await page.locator('a:has-text("Privacy Notice")').click();
+    await page.locator('button:has-text("Back")').click();
+    expect(
+      await page.locator('.card-header:has-text("Legal")').isVisible()
+    ).toBeTruthy();
+  });
+
+  test('start at terms page', async ({ page, target }) => {
+    await page.goto(getReactFeatureFlagUrl(target, '/legal/terms'));
+
+    // Verify react page has been loaded
+    expect(await page.locator('#root').isVisible()).toBeTruthy();
+
+    // Verify legal page is visible
+    expect(
+      await page
+        .locator(
+          '.font-header:has-text("Firefox Cloud Services: Terms of Service")'
+        )
+        .isVisible()
+    ).toBeTruthy();
+  });
+
+  test('start at privacy page', async ({ page, target }) => {
+    await page.goto(getReactFeatureFlagUrl(target, '/legal/privacy'));
+
+    // Verify react page has been loaded
+    expect(await page.locator('#root').isVisible()).toBeTruthy();
+
+    // Verify privacy page is visible
+    await page.waitForTimeout(1000);
+    expect(
+      await page
+        .locator('.privacy-header-policy:has-text("Privacy Notice")')
+        .isVisible()
+    ).toBeTruthy();
+  });
+});

packages/functional-tests/tests/syncV3/syncV3EmailFirst.spec.ts

@@ -31,6 +31,7 @@ test.describe('Firefox Desktop Sync v3 email first', () => {
 
     //Refresh the page
     await page.reload({ waitUntil: 'load' });
+    await page.waitForTimeout(1000);
 
     // refresh sends the user back to the first step
     expect(await login.isEmailHeader()).toBe(true);