fix(tests): Update sms functional tests to run in stage/prod

Author: vbudhram

package.json

@@ -211,6 +211,7 @@
     "@types/react-test-renderer": "^18",
     "@types/set-value": "^4",
     "@types/superagent": "4.1.11",
+    "@types/twilio": "^3.19.3",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^7.1.1",

packages/functional-tests/lib/sms.ts

@@ -2,34 +2,102 @@
  * 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 TwilioSDK from 'twilio';
 import Redis from 'ioredis';
 import type { Redis as RedisType } from 'ioredis';
 
 function wait() {
   return new Promise((r) => setTimeout(r, 500));
 }
 
+const accountSid = process.env.RECOVERY_PHONE__TWILIO__ACCOUNT_SID;
+const authToken = process.env.RECOVERY_PHONE__TWILIO__AUTH_TOKEN;
+const testPhoneNumber = process.env.RECOVERY_PHONE__TWILIO__TEST_NUMBER;
+
 export class SmsClient {
-  private client: RedisType;
+  private twilioClient?: TwilioSDK.Twilio;
+  private redisClient?: RedisType;
   private uidCodes: Map<string, string>;
-  private isConnected = false;
-  private hasLoggedConnectionError = false;
+  private lastCode: string | undefined;
+  private redisClientConnected = false;
+  private hasLoggedRedisConnectionError = false;
 
   constructor() {
-    this.client = new Redis();
+    if (accountSid && authToken && testPhoneNumber) {
+      this.twilioClient = new TwilioSDK.Twilio(accountSid, authToken);
+    } else {
+      this.redisClient = new Redis();
+      this.redisClient.on('ready', () => {
+        this.redisClientConnected = true;
+        this.hasLoggedRedisConnectionError = false;
+      });
+
+      this.redisClient.on('error', (err: Error) => {
+        if (!this.hasLoggedRedisConnectionError) {
+          this.hasLoggedRedisConnectionError = true;
+        }
+        this.redisClientConnected = false;
+      });
+    }
     this.uidCodes = new Map();
+  }
 
-    this.client.on('ready', () => {
-      this.isConnected = true;
-      this.hasLoggedConnectionError = false;
-    });
+  isTwilioEnabled() {
+    return !!this.twilioClient;
+  }
 
-    this.client.on('error', (err: Error) => {
-      if (!this.hasLoggedConnectionError) {
-        this.hasLoggedConnectionError = true;
+  async getCode(recipientNumber: string, uid: string, timeout = 10000) {
+    if (this.isTwilioEnabled()) {
+      return this._getCodeTwilio(recipientNumber);
+    } else {
+      return this._getCodeLocal(uid, timeout);
+    }
+  }
+
+  async _getCodeTwilio(
+    recipientNumber: string,
+    limit = 1,
+    codeRegex = /\b\d{6}\b/,
+    timeout = 10000,
+    startTime = Date.now() - 1000
+  ): Promise<string> {
+    if (!this.twilioClient) {
+      throw new Error('Twilio API not enabled');
+    }
+
+    const expires = Date.now() + timeout;
+
+    while (Date.now() < expires) {
+      const messages = await this.twilioClient.messages.list({
+        to: recipientNumber,
+        dateSentAfter: new Date(startTime),
+        limit,
+      });
+
+      if (!messages.length) {
+        await wait();
+        continue;
       }
-      this.isConnected = false;
-    });
+
+      const lastMessage = messages[0];
+      const match = lastMessage.body.match(codeRegex);
+
+      if (!match) {
+        await wait();
+        continue;
+      }
+
+      const code = match[0];
+      if (code === this.lastCode) {
+        await wait();
+        continue;
+      }
+
+      this.lastCode = code;
+      return code;
+    }
+
+    throw new Error('Timeout: No new code found within the specified time');
   }
 
   /**
@@ -38,8 +106,11 @@ export class SmsClient {
    * @param uid
    * @param timeout
    */
-  async getCode(uid: string, timeout = 10000): Promise<string> {
-    if (!this.isConnected) {
+  async _getCodeLocal(uid: string, timeout = 10000): Promise<string> {
+    if (!this.redisClient) {
+      throw new Error('Not connected to Redis');
+    }
+    if (!this.redisClientConnected) {
       throw new Error('Not connected to Redis');
     }
 
@@ -52,19 +123,29 @@ export class SmsClient {
       let newestCreatedAt = -1;
 
       do {
-        const [newCursor, keys] = await this.client.scan(
+        const [newCursor, keys] = await this.redisClient.scan(
           cursor,
           'MATCH',
           redisKeyPattern
         );
         cursor = newCursor;
 
         for (const key of keys) {
-          const valueRaw = await this.client.get(key);
-          if (!valueRaw) {
+          const valueRaw = await this.redisClient.get(key);
+
+          if (valueRaw === null) continue;
+          let value;
+          try {
+            value = JSON.parse(valueRaw);
+          } catch (err) {
             continue;
           }
-          const value = JSON.parse(valueRaw);
+          if (
+            typeof value !== 'object' ||
+            value === null ||
+            typeof value.createdAt !== 'number'
+          )
+            continue;
 
           if (!newestKey || value.createdAt > newestCreatedAt) {
             newestKey = key;

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

@@ -16,14 +16,45 @@ import { FirefoxCommand } from '../../lib/channels';
 import { syncDesktopOAuthQueryParams } from '../../lib/query-params';
 import { getCode } from 'fxa-settings/src/lib/totp';
 
+const realTestPhoneNumber = process.env.RECOVERY_PHONE__TWILIO__TEST_NUMBER;
+
+function getPhoneNumber(env: string) {
+  if (env !== 'local' && realTestPhoneNumber) {
+    return realTestPhoneNumber;
+  }
+  // See Twilio test credentials phone numbers: https://www.twilio.com/docs/iam/test-credentials
+  return '4159929960';
+}
+
 test.describe('severity-1 #smoke', () => {
   test.describe('recovery phone', () => {
-    test.beforeEach(async ({ pages: { configPage } }, { project }) => {
+    // Run these tests sequentially when using the Twilio API because they rely on the same test phone number.
+    // When using the Twilio API, we cannot determine the order in which the messages were received.
+    if (realTestPhoneNumber) {
+      test.describe.configure({ mode: 'serial' });
+    } else {
+      test.describe.configure({ mode: 'parallel' });
+    }
+
+    test.beforeEach(async ({ pages: { configPage }, target }) => {
       // Ensure that the feature flag is enabled
       const config = await configPage.getConfig();
-      test.fixme(project.name !== 'local', 'FXA-11159');
       test.skip(config.featureFlags.enableAdding2FABackupPhone !== true);
       test.skip(config.featureFlags.enableUsing2FABackupPhone !== true);
+
+      // Twilio does not allow you to fetch messages when using test credentials.
+      // Therefore, we fallback to peeking at Redis to get confirmation codes.
+      if (target.name === 'local') {
+        expect(
+          target.smsClient.isTwilioEnabled(),
+          'Local env found, use redis and Twilio test creds'
+        ).toBeFalsy();
+      } else {
+        expect(
+          target.smsClient.isTwilioEnabled(),
+          'Stage/Prod env, use Twilio API'
+        ).toBeTruthy();
+      }
     });
 
     test('setup fails with invalid number', async ({
@@ -68,12 +99,15 @@ test.describe('severity-1 #smoke', () => {
 
       await expect(recoveryPhone.addHeader()).toBeVisible();
 
-      await recoveryPhone.enterPhoneNumber('4159929960');
+      await recoveryPhone.enterPhoneNumber(getPhoneNumber(target.name));
       await recoveryPhone.clickSendCode();
 
       await expect(recoveryPhone.confirmHeader).toBeVisible();
 
-      const code = await target.smsClient.getCode(credentials.uid);
+      const code = await target.smsClient.getCode(
+        getPhoneNumber(target.name),
+        credentials.uid
+      );
 
       // Invalid code
       await recoveryPhone.enterCode('123456');
@@ -84,7 +118,10 @@ test.describe('severity-1 #smoke', () => {
 
       // Sends a new code
       await recoveryPhone.clickResendCode();
-      const nextCode = await target.smsClient.getCode(credentials.uid);
+      const nextCode = await target.smsClient.getCode(
+        getPhoneNumber(target.name),
+        credentials.uid
+      );
 
       expect(code).not.toEqual(nextCode);
 
@@ -332,13 +369,19 @@ test.describe('severity-1 #smoke', () => {
         page.getByText('Invalid or expired confirmation code')
       ).toBeVisible();
 
-      const originalCode = await target.smsClient.getCode(credentials.uid);
+      const originalCode = await target.smsClient.getCode(
+        getPhoneNumber(target.name),
+        credentials.uid
+      );
 
       // Sends a new code
       await signinRecoveryPhone.clickResendCode();
       await expect(page.getByText('Code sent')).toBeVisible();
 
-      const nextCode = await target.smsClient.getCode(credentials.uid);
+      const nextCode = await target.smsClient.getCode(
+        getPhoneNumber(target.name),
+        credentials.uid
+      );
 
       expect(originalCode).not.toEqual(nextCode);
 
@@ -590,14 +633,17 @@ async function setupRecoveryPhone({
 
   await expect(recoveryPhone.addHeader()).toBeVisible();
 
-  await recoveryPhone.enterPhoneNumber('4159929960');
+  await recoveryPhone.enterPhoneNumber(getPhoneNumber(target.name));
   await recoveryPhone.clickSendCode();
 
   await expect(recoveryPhone.confirmHeader).toBeVisible();
 
-  const registerCode = await target.smsClient.getCode(credentials.uid);
+  const code = await target.smsClient.getCode(
+    getPhoneNumber(target.name),
+    credentials.uid
+  );
 
-  await recoveryPhone.enterCode(registerCode);
+  await recoveryPhone.enterCode(code);
   await recoveryPhone.clickConfirm();
 
   await page.waitForURL(/settings/);
@@ -645,13 +691,19 @@ async function fillOutRecoveryPhoneFromEmailFirst({
     page.getByText('Invalid or expired confirmation code')
   ).toBeVisible();
 
-  const originalCode = await target.smsClient.getCode(credentials.uid);
+  const originalCode = await target.smsClient.getCode(
+    getPhoneNumber(target.name),
+    credentials.uid
+  );
 
   // Sends a new code
   await signinRecoveryPhone.clickResendCode();
   await expect(page.getByText('Code sent')).toBeVisible();
 
-  const nextCode = await target.smsClient.getCode(credentials.uid);
+  const nextCode = await target.smsClient.getCode(
+    getPhoneNumber(target.name),
+    credentials.uid
+  );
 
   expect(originalCode).not.toEqual(nextCode);
 

yarn.lock

@@ -26436,6 +26436,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/twilio@npm:^3.19.3":
+  version: 3.19.3
+  resolution: "@types/twilio@npm:3.19.3"
+  dependencies:
+    twilio: "*"
+  checksum: f9fcd6485a003bef55baa91b99e1af62645a653da3b8a2d7cc2c390eb6b09fb6e1f3d72cae78e9a88d23baa13c5e02ccf27070da59fd709db6f1e401da5c14f3
+  languageName: node
+  linkType: hard
+
 "@types/ua-parser-js@npm:^0.7.36":
   version: 0.7.39
   resolution: "@types/ua-parser-js@npm:0.7.39"
@@ -29684,6 +29693,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.7.8":
+  version: 1.7.9
+  resolution: "axios@npm:1.7.9"
+  dependencies:
+    follow-redirects: ^1.15.6
+    form-data: ^4.0.0
+    proxy-from-env: ^1.1.0
+  checksum: cb8ce291818effda09240cb60f114d5625909b345e10f389a945320e06acf0bc949d0f8422d25720f5dd421362abee302c99f5e97edec4c156c8939814b23d19
+  languageName: node
+  linkType: hard
+
 "axios@npm:~0.21.1":
   version: 0.21.4
   resolution: "axios@npm:0.21.4"
@@ -42738,6 +42758,7 @@ fsevents@~2.1.1:
     "@types/react-test-renderer": ^18
     "@types/set-value": ^4
     "@types/superagent": 4.1.11
+    "@types/twilio": ^3.19.3
     "@types/uuid": ^10.0.0
     "@typescript-eslint/eslint-plugin": ^5.59.1
     "@typescript-eslint/parser": ^7.1.1
@@ -68607,6 +68628,21 @@ [email protected]:
   languageName: node
   linkType: hard
 
+"twilio@npm:*":
+  version: 5.4.5
+  resolution: "twilio@npm:5.4.5"
+  dependencies:
+    axios: ^1.7.8
+    dayjs: ^1.11.9
+    https-proxy-agent: ^5.0.0
+    jsonwebtoken: ^9.0.2
+    qs: ^6.9.4
+    scmp: ^2.1.0
+    xmlbuilder: ^13.0.2
+  checksum: 11074d4789adfb94518ebce8a1162ed308925af44bb54cb3f86aa2f85d72cad6b7c55d248278ccc1f67e1040751ac0e718b736df0c3f6925b4b9432bdbd97506
+  languageName: node
+  linkType: hard
+
 "twilio@npm:^5.3.5":
   version: 5.3.5
   resolution: "twilio@npm:5.3.5"