Merge pull request #18287 from mozilla/fxa-10378

feat(tests): Add functional tests for sms flows

Author: vbudhram

.circleci/config.yml

@@ -165,6 +165,11 @@ executors:
       REACT_CONVERSION_PAIR_ROUTES: true
       REACT_CONVERSION_POST_VERIFY_OTHER_ROUTES: true
       REACT_CONVERSION_POST_VERIFY_CAD_VIA_QR_ROUTES: true
+      # Recovery phone feature flags
+      FEATURE_FLAGS_ADDING_2FA_BACKUP_PHONE: true
+      FEATURE_FLAGS_USING_2FA_BACKUP_PHONE: true
+      GEODB_LOCATION_OVERRIDE: '{"location": {"countryCode": "US", "postalCode": "85001"}}'
+      RECOVERY_PHONE__ENABLED: true
       CUSTOMS_SERVER_URL: none
       HUSKY_SKIP_INSTALL: 1
       AUTH_CLOUDTASKS_USE_LOCAL_EMULATOR: true

libs/accounts/recovery-phone/src/lib/recovery-phone.manager.ts

@@ -127,6 +127,7 @@ export class RecoveryPhoneManager {
   ): Promise<void> {
     const redisKey = `${this.redisPrefix}:${uid}:${code}`;
     const data = {
+      createdAt: Date.now(),
       phoneNumber,
       isSetup,
       lookupData: lookupData ? JSON.stringify(lookupData) : null,

packages/functional-tests/lib/sms.ts

@@ -0,0 +1,79 @@
+/* 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 Redis from 'ioredis';
+import type { Redis as RedisType } from 'ioredis';
+
+function wait() {
+  return new Promise((r) => setTimeout(r, 500));
+}
+
+export class SmsClient {
+  private client: RedisType;
+  private uidCodes: Map<string, string>;
+
+  constructor() {
+    this.client = new Redis();
+    this.uidCodes = new Map();
+  }
+
+  /**
+   * Get the code stored in redis that was sent to the user via SMS.
+   *
+   * @param uid
+   * @param timeout
+   */
+  async getCode(uid: string, timeout = 10000): Promise<string> {
+    const redisKeyPattern = `recovery-phone:sms-attempt:${uid}:*`;
+    const expires = Date.now() + timeout;
+
+    while (Date.now() < expires) {
+      let cursor = '0';
+      let newestKey: string | null = null;
+      let newestCreatedAt = -1;
+
+      do {
+        const [newCursor, keys] = await this.client.scan(
+          cursor,
+          'MATCH',
+          redisKeyPattern
+        );
+        cursor = newCursor;
+
+        for (const key of keys) {
+          const valueRaw = await this.client.get(key);
+          if (!valueRaw) {
+            continue;
+          }
+          const value = JSON.parse(valueRaw);
+
+          if (!newestKey || value.createdAt > newestCreatedAt) {
+            newestKey = key;
+            newestCreatedAt = value.createdAt;
+          }
+        }
+      } while (cursor !== '0');
+
+      // If no keys are found, wait and try again.
+      if (!newestKey) {
+        await wait();
+        continue;
+      }
+
+      const code = newestKey.split(':')[3];
+      const lastCode = this.uidCodes.get(uid);
+
+      // If the code is the same as the last one, wait and try again.
+      if (lastCode === code) {
+        await wait();
+        continue;
+      }
+
+      this.uidCodes.set(uid, code);
+      return code;
+    }
+
+    throw new Error('KeyTimeout');
+  }
+}

packages/functional-tests/lib/targets/base.ts

@@ -5,6 +5,7 @@
 import { SaltVersion } from '../../../fxa-auth-client/lib/salt';
 import AuthClient from '../../../fxa-auth-client/lib/client';
 import { EmailClient } from '../email';
+import { SmsClient } from '../sms';
 import { TargetName } from './index';
 
 export type Credentials = Awaited<ReturnType<AuthClient['signUp']>> & {
@@ -23,6 +24,7 @@ interface SubConfig {
 export abstract class BaseTarget {
   readonly authClient: AuthClient;
   readonly emailClient: EmailClient;
+  readonly smsClient: SmsClient;
   abstract readonly contentServerUrl: string;
   abstract readonly paymentsServerUrl: string;
   abstract readonly relierUrl: string;
@@ -36,6 +38,7 @@ export abstract class BaseTarget {
     );
     this.authClient = this.createAuthClient(keyStretchVersion);
     this.emailClient = new EmailClient(emailUrl);
+    this.smsClient = new SmsClient();
   }
 
   get baseUrl() {

packages/functional-tests/pages/index.ts

@@ -20,11 +20,14 @@ import { LoginPage } from './login';
 import { PostVerifyPage } from './postVerify';
 import { PrivacyPage } from './privacy';
 import { RecoveryKeyPage } from './settings/recoveryKey';
+import { RecoveryPhoneSetupPage } from './settings/recoveryPhone';
 import { RelierPage } from './relier';
 import { ResetPasswordPage } from './resetPassword';
 import { SecondaryEmailPage } from './settings/secondaryEmail';
 import { SettingsPage } from './settings';
 import { SigninPage } from './signin';
+import { SigninRecoveryChoicePage } from './signinRecoveryChoice';
+import { SigninRecoveryPhonePage } from './signinRecoveryPhone';
 import { SigninRecoveryCodePage } from './signinRecoveryCode';
 import { SigninTokenCodePage } from './signinTokenCode';
 import { SigninTotpCodePage } from './signinTotpCode';
@@ -55,11 +58,14 @@ export function create(page: Page, target: BaseTarget) {
     postVerify: new PostVerifyPage(page, target),
     privacy: new PrivacyPage(page, target),
     recoveryKey: new RecoveryKeyPage(page, target),
+    recoveryPhone: new RecoveryPhoneSetupPage(page, target),
     relier: new RelierPage(page, target),
     resetPassword: new ResetPasswordPage(page, target),
     secondaryEmail: new SecondaryEmailPage(page, target),
     settings: new SettingsPage(page, target),
     signin: new SigninPage(page, target),
+    signinRecoveryChoice: new SigninRecoveryChoicePage(page, target),
+    signinRecoveryPhone: new SigninRecoveryPhonePage(page, target),
     signinRecoveryCode: new SigninRecoveryCodePage(page, target),
     signinTokenCode: new SigninTokenCodePage(page, target),
     signinTotpCode: new SigninTotpCodePage(page, target),

packages/functional-tests/pages/settings/components/unitRow.ts

@@ -96,6 +96,14 @@ export class TotpRow extends UnitRow {
   get changeButton() {
     return this.page.getByRole('button', { name: 'Get new codes' });
   }
+
+  get addRecoveryPhoneButton() {
+    return this.page.getByRole('button', { name: 'Add' });
+  }
+
+  get removeRecoveryPhoneButton() {
+    return this.page.getByRole('button', { name: 'Remove recovery phone' });
+  }
 }
 
 export class ConnectedServicesRow extends UnitRow {

packages/functional-tests/pages/settings/recoveryPhone.ts

@@ -0,0 +1,78 @@
+/* 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 { expect } from '../../lib/fixtures/standard';
+import { SettingsLayout } from './layout';
+
+export class RecoveryPhoneSetupPage extends SettingsLayout {
+  get path(): string {
+    return '';
+  }
+
+  // Methods for AddRecoveryPhone
+  addHeader() {
+    return this.page.locator('h2', { hasText: 'Verify your phone number' });
+  }
+
+  get phoneNumberInput() {
+    return this.page.locator('input[name="phoneNumber"]');
+  }
+
+  get sendCodeButton() {
+    return this.page.locator('button', { hasText: 'Send code' });
+  }
+
+  get addErrorBanner() {
+    return this.page.locator('#flow-setup-phone-submit-number-error');
+  }
+
+  get backButton() {
+    return this.page.locator('button', { hasText: 'Back to settings' });
+  }
+
+  async enterPhoneNumber(phoneNumber: string) {
+    await this.phoneNumberInput.fill(phoneNumber);
+  }
+
+  async clickSendCode() {
+    await this.sendCodeButton.click();
+  }
+
+  async expectAddErrorBanner(message: string) {
+    await expect(this.addErrorBanner).toHaveText(message);
+  }
+
+  // Methods for ConfirmRecoveryPhone
+  get confirmHeader() {
+    return this.page.locator('h2', { hasText: 'Verify your phone number' });
+  }
+
+  get codeInput() {
+    return this.page.locator('input[name="code"]');
+  }
+
+  get confirmButton() {
+    return this.page.locator('button', { hasText: 'Confirm' });
+  }
+
+  get resendCodeButton() {
+    return this.page.locator('button', { hasText: 'Resend code' });
+  }
+
+  get confirmErrorBanner() {
+    return this.page.locator('#flow-setup-phone-confirm-code-error');
+  }
+
+  async enterCode(code: string) {
+    await this.codeInput.fill(code);
+  }
+
+  async clickConfirm() {
+    await this.confirmButton.click();
+  }
+
+  async clickResendCode() {
+    await this.resendCodeButton.click();
+  }
+}

packages/functional-tests/pages/signinRecoveryChoice.ts

@@ -0,0 +1,50 @@
+/* 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 { BaseLayout } from './layout';
+import { expect } from '@playwright/test';
+
+export class SigninRecoveryChoicePage extends BaseLayout {
+  readonly path = '/signin_recovery_choice';
+
+  get heading() {
+    return this.page.getByRole('heading', { name: 'Sign in' });
+  }
+
+  get errorBanner() {
+    return this.page.locator('.banner.error');
+  }
+
+  get phoneChoice() {
+    return this.page.locator('.input-radio-wrapper').first();
+  }
+
+  get codeChoice() {
+    return this.page.locator('.input-radio-wrapper').nth(1);
+  }
+
+  get backButton() {
+    return this.page.getByRole('button', { name: 'Back' });
+  }
+
+  get continueButton() {
+    return this.page.getByRole('button', { name: 'Continue' });
+  }
+
+  async clickChoosePhone() {
+    await this.phoneChoice.click();
+  }
+
+  async clickChooseCode() {
+    await this.codeChoice.click();
+  }
+
+  async clickContinue() {
+    await this.continueButton.click();
+  }
+
+  async clickBack() {
+    await this.backButton.click();
+  }
+}

packages/functional-tests/pages/signinRecoveryPhone.ts

@@ -0,0 +1,52 @@
+/* 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 { BaseTokenCodePage } from './baseTokenCode';
+
+export class SigninRecoveryPhonePage extends BaseTokenCodePage {
+  readonly path = '/signin_recovery_phone';
+
+  get codeInput() {
+    this.checkPath();
+    return this.page
+      .getByLabel('Enter 6-digit code') // React
+      .or(this.page.getByPlaceholder('Enter 6-digit code')); // Backbone
+  }
+
+  get resendCodeButton() {
+    return this.page.getByRole('button', { name: 'Resend code' });
+  }
+
+  get confirmButton() {
+    return this.page.getByRole('button', { name: 'Confirm' });
+  }
+
+  get backButton() {
+    return this.page.getByRole('button', { name: 'Back' });
+  }
+
+  get lockedOutLink() {
+    return this.page.getByRole('link', { name: 'Are you locked out?' });
+  }
+
+  async enterCode(code: string) {
+    await this.codeInput.fill(code);
+  }
+
+  async clickResendCode() {
+    await this.resendCodeButton.click();
+  }
+
+  async clickConfirm() {
+    await this.confirmButton.click();
+  }
+
+  async clickBack() {
+    await this.backButton.click();
+  }
+
+  async clickLockedOutLink() {
+    await this.lockedOutLink.click();
+  }
+}

packages/functional-tests/pages/signinTotpCode.ts

@@ -18,4 +18,13 @@ export class SigninTotpCodePage extends BaseTokenCodePage {
     this.checkPath();
     return this.page.getByRole('link', { name: 'Trouble entering code?' });
   }
+
+  get troubleEnteringCode() {
+    return this.page.getByRole('link', { name: 'Trouble entering code?' });
+  }
+
+  async clickTroubleEnteringCode() {
+    this.checkPath();
+    return this.troubleEnteringCode.click();
+  }
 }