[User functionality] Small PR focused on tests for user functionality

common/src/choices.ts

@@ -213,7 +213,7 @@ export const MBTI_CHOICES = {
   ESTP: 'estp',
   ESFJ: 'esfj',
   ESFP: 'esfp',
-}
+} as const
 
 // MBTI type name mapping
 export const MBTI_TYPE_NAMES: Record<string, string> = {

tests/e2e/utils/contextManager.ts

@@ -0,0 +1,33 @@
+import {Browser} from '@playwright/test'
+
+import {App} from '../web/pages/app'
+
+export class ContextManager {
+  private contexts: Map<string, App> = new Map()
+
+  constructor(private browser: Browser) {}
+
+  async createContext(customName?: string): Promise<App> {
+    const name = customName ?? crypto.randomUUID().slice(0, 6)
+    const existing = this.contexts.get(name)
+    // Return the existing one instead of closing it?
+    if (existing) await existing.page.context().close()
+
+    const context = await this.browser.newContext()
+    const page = await context.newPage()
+    const app = new App(page)
+    this.contexts.set(name, app)
+    return app
+  }
+
+  getContext(name: string): App | undefined {
+    return this.contexts.get(name)
+  }
+
+  async closeAll(): Promise<void> {
+    for (const app of this.contexts.values()) {
+      await app.page.context().close()
+    }
+    this.contexts.clear()
+  }
+}

tests/e2e/utils/firebaseUtils.ts

@@ -37,6 +37,36 @@ export async function findUser(idToken: string) {
   }
 }
 
+export async function sendVerificationEmail(idToken: string) {
+  await axios.post(`${config.FIREBASE_URL.BASE}${config.FIREBASE_URL.SEND_EMAIL_VERIFICATION}`, {
+    requestType: 'VERIFY_EMAIL',
+    idToken,
+  })
+}
+export async function getOobCode(oobCodes: any[], email: string) {
+  return oobCodes.find((item) => item.email.toLowerCase() === email.toLowerCase())?.oobCode
+}
+
+export async function verifyEmail(email: string, password: string) {
+  try {
+    const loginInfo = await firebaseLoginEmailPassword(email, password)
+    await sendVerificationEmail(loginInfo.data.idToken)
+    const oobResponse = await axios.get(`${config.FIREBASE_URL.FIREBASE_EMULATOR_API}`)
+    const oobCode = await getOobCode(oobResponse.data.oobCodes, email)
+    if (!oobCode) throw new Error(`No verification OOB code found for email: ${email}`)
+
+    const response = await axios.post(
+      `${config.FIREBASE_URL.BASE}${config.FIREBASE_URL.CONFIRM_EMAIL_VERIFICATION}`,
+      {
+        oobCode,
+      },
+    )
+  } catch (err: any) {
+    console.log(err)
+    throw err
+  }
+}
+
 export async function firebaseSignUp(email: string, password: string) {
   try {
     const response = await axios.post(`${config.FIREBASE_URL.BASE}${config.FIREBASE_URL.SIGNUP}`, {

tests/e2e/utils/seed-test-data.ts

@@ -3,7 +3,13 @@ import {createSomeNotifications} from 'shared/create-notification'
 import {createSupabaseDirectClient} from 'shared/supabase/init'
 import {insert} from 'shared/supabase/utils'
 
-import {seedUser} from './seedDatabase'
+import {
+  seedUser,
+  TEST_USER_DISPLAY_NAME,
+  TEST_USER_EMAIL,
+  TEST_USER_PASSWORD,
+  TEST_USER_USERNAME,
+} from './seedDatabase'
 
 async function seedCompatibilityPrompts(userId: string | null = null) {
   // Need some prompts to prevent the onboarding from stopping once it reaches them (just after profile creation)
@@ -59,6 +65,15 @@ type ProfileType = 'basic' | 'medium' | 'full'
     }
   }
 
+  // Used in some tests that require interaction with a permanent user
+  await seedUser(
+    TEST_USER_EMAIL,
+    TEST_USER_PASSWORD,
+    'full',
+    TEST_USER_DISPLAY_NAME,
+    TEST_USER_USERNAME,
+  )
+
   await seedCompatibilityPrompts()
   await seedNotifications()
 

tests/e2e/utils/seedDatabase.ts

@@ -9,7 +9,12 @@ import {insert} from 'shared/supabase/utils'
 import {getUser} from 'shared/utils'
 
 import UserAccountInformationForSeeding from '../backend/utils/userInformation'
-import {firebaseSignUp} from './firebaseUtils'
+import {firebaseSignUp, verifyEmail} from './firebaseUtils'
+
+export const TEST_USER_EMAIL = 'user@compass.test'
+export const TEST_USER_PASSWORD = 'pass'
+export const TEST_USER_DISPLAY_NAME = 'Test User'
+export const TEST_USER_USERNAME = 'TestUser'
 
 /**
  * Function used to populate the database with profiles.
@@ -151,6 +156,7 @@ export async function seedUser(
   profileType?: string | undefined,
   displayName?: string | undefined,
   userName?: string | undefined,
+  verifyUserEmail?: boolean,
 ) {
   const userInfo = new UserAccountInformationForSeeding()
   if (email) userInfo.email = email
@@ -162,4 +168,5 @@ export async function seedUser(
   // Fall back to the pre-generated faker id when Firebase is unreachable
   const created = await seedDbUser(userInfo, profileType ?? 'full')
   if (created) debug('User created in Supabase:', userInfo.email)
+  if (verifyUserEmail) await verifyEmail(userInfo.email, userInfo.password)
 }

tests/e2e/web/SPEC_CONFIG.ts

@@ -2,10 +2,13 @@ export const config = {
   BASE_URL: 'http://localhost:3000',
   FIREBASE_URL: {
     BASE: 'http://localhost:9099/identitytoolkit.googleapis.com/v1',
+    FIREBASE_EMULATOR_API: 'http://localhost:9099/emulator/v1/projects/compass-57c3c/oobCodes',
     SIGNUP: '/accounts:signUp?key=fake-api-key',
     SIGN_IN_PASSWORD: '/accounts:signInWithPassword?key=fake-api-key',
     ACCOUNT_LOOKUP: '/accounts:lookup?key=fake-api-key',
     DELETE: '/accounts:delete?key=fake-api-key',
+    SEND_EMAIL_VERIFICATION: '/accounts:sendOobCode?key=fake-api-key',
+    CONFIRM_EMAIL_VERIFICATION: '/accounts:update?key=fake-api-key',
   },
   USERS: {
     DEV_1: {

tests/e2e/web/fixtures/signInFixture.ts

@@ -7,7 +7,9 @@ import {deleteUser} from '../utils/deleteUser'
 
 export const test = base.extend<{
   app: App
-  dev_one_account: UserAccountInformation
+  devOneAccount: UserAccountInformation
+  devTwoAccount: UserAccountInformation
+  specAccount: UserAccountInformation
   fakerAccount: UserAccountInformation
   googleAccountOne: UserAccountInformation
   googleAccountTwo: UserAccountInformation
@@ -17,6 +19,7 @@ export const test = base.extend<{
   app: async ({page}, use) => {
     const appPage = new App(page)
     await use(appPage)
+    await appPage.contextManager?.closeAll()
   },
   signedInAccount: async ({app}: {app: App}, use) => {
     const account = testAccounts.faker_account()
@@ -26,6 +29,7 @@ export const test = base.extend<{
       undefined,
       account.display_name,
       account.username,
+      true,
     )
     await app.signinWithEmail(account)
     await use(account)
@@ -39,6 +43,46 @@ export const test = base.extend<{
       undefined,
       account.display_name,
       account.username,
+      true,
+    )
+    await use(account)
+    await deleteUser('Email/Password', account)
+  },
+  devOneAccount: async ({}, use) => {
+    const account = testAccounts.dev_one_account()
+    await seedUser(
+      account.email,
+      account.password,
+      undefined,
+      account.display_name,
+      account.username,
+      true,
+    )
+    await use(account)
+    await deleteUser('Email/Password', account)
+  },
+  devTwoAccount: async ({}, use) => {
+    const account = testAccounts.dev_two_account()
+    await seedUser(
+      account.email,
+      account.password,
+      undefined,
+      account.display_name,
+      account.username,
+      true,
+    )
+    await use(account)
+    await deleteUser('Email/Password', account)
+  },
+  specAccount: async ({}, use) => {
+    const account = testAccounts.spec_account()
+    await seedUser(
+      account.email,
+      account.password,
+      undefined,
+      account.display_name,
+      account.username,
+      true,
     )
     await use(account)
     await deleteUser('Email/Password', account)

tests/e2e/web/pages/app.ts

@@ -1,17 +1,19 @@
-import {Page} from '@playwright/test'
+import {BrowserContext, Page} from '@playwright/test'
 
+import {ContextManager} from '../../utils/contextManager'
 import {UserAccountInformation} from '../utils/accountInformation'
 import {AuthPage} from './authPage'
 import {CompatibilityPage} from './compatibilityPage'
 import {HomePage} from './homePage'
+import {MessagesPage} from './messagesPage'
+import {NotificationPage} from './notificationsPage'
 import {OnboardingPage} from './onboardingPage'
 import {OrganizationPage} from './organizationPage'
+import {PeoplePage} from './peoplePage'
 import {ProfilePage} from './profilePage'
 import {SettingsPage} from './settingsPage'
 import {SignUpPage} from './signUpPage'
 import {SocialPage} from './socialPage'
-import {PeoplePage} from './peoplePage'
-import {NotificationPage} from './notificationsPage'
 
 export class App {
   readonly auth: AuthPage
@@ -25,6 +27,9 @@ export class App {
   readonly social: SocialPage
   readonly people: PeoplePage
   readonly notifs: NotificationPage
+  readonly messages: MessagesPage
+  readonly contextManager: ContextManager
+  readonly context: BrowserContext
 
   constructor(public readonly page: Page) {
     this.auth = new AuthPage(page)
@@ -38,6 +43,12 @@ export class App {
     this.social = new SocialPage(page)
     this.people = new PeoplePage(page)
     this.notifs = new NotificationPage(page)
+    this.messages = new MessagesPage(page)
+    this.context = page.context()
+
+    const browser = page.context().browser()
+    if (!browser) throw new Error('Could not get Browser from page.context().browser()')
+    this.contextManager = new ContextManager(browser)
   }
 
   async deleteProfileFromSettings() {

tests/e2e/web/pages/messagesPage.ts

@@ -0,0 +1,108 @@
+import {expect, Locator, Page} from '@playwright/test'
+import {sleep} from 'common/util/time'
+
+export class MessagesPage {
+  private readonly messagesPageHeader: Locator
+  private readonly messagesTable: Locator
+  private readonly messagesRow: Locator
+  private readonly messagesUsername: Locator
+  private readonly messagesTimestamp: Locator
+  private readonly newMessageButton: Locator
+  private readonly newMessageSearchUsers: Locator
+  private readonly newMessageSearchResults: Locator
+  private readonly newMessageSearchCreateButton: Locator
+  private readonly newMessageStart: Locator
+  private readonly messageInput: Locator
+  private readonly messageSubmit: Locator
+  private readonly conversation: Locator
+  private readonly conversationMessage: Locator
+
+  constructor(public readonly page: Page) {
+    this.messagesPageHeader = page.getByRole('heading', {name: 'Messages'})
+    this.messagesTable = page.getByTestId('messages-table')
+    this.messagesRow = page.getByTestId('messages-row')
+    this.messagesUsername = page.getByTestId('messages-username')
+    this.messagesTimestamp = page.getByTestId('messages-timestamp')
+    this.newMessageButton = page.getByRole('button', {name: 'New Message'})
+    this.newMessageSearchUsers = page.getByRole('textbox', {name: 'Search users...'})
+    this.newMessageSearchResults = page.getByTestId('search-results')
+    this.newMessageSearchCreateButton = page.getByRole('button', {name: 'Create'})
+    this.newMessageStart = page.getByText('No messages yet.', {exact: true})
+    this.messageInput = page.locator('.tiptap')
+    this.messageSubmit = page.getByTestId('conversation-message-submit')
+    this.conversation = page.getByTestId('conversation')
+    this.conversationMessage = page.getByTestId('conversation-message')
+  }
+
+  async verifyMessagesPage() {
+    await expect(this.messagesPageHeader).toBeVisible()
+  }
+
+  async createNewMessage(username: string[]) {
+    await expect(this.newMessageButton).toBeVisible()
+    await this.newMessageButton.click()
+    await expect(this.newMessageSearchUsers).toBeVisible()
+    for (let i = 0; i < username.length; i++) {
+      await this.newMessageSearchUsers.fill(username[i])
+      await sleep(1000)
+      await expect(this.newMessageSearchResults).toBeVisible()
+      const results = await this.newMessageSearchResults
+        .getByTestId('search-results-username')
+        .all()
+      const targetUser = username[i].toLowerCase()
+      for (let j = 0; j < results.length; j++) {
+        const usernameResults = (await results[j].textContent())?.toLowerCase()
+        if (usernameResults === targetUser) {
+          await results[j].click()
+          break
+        }
+      }
+    }
+
+    await expect(this.newMessageSearchCreateButton).toBeVisible()
+    await this.newMessageSearchCreateButton.click()
+  }
+
+  async sendMessage(message: string) {
+    await expect(this.messageInput).toBeVisible()
+    await this.messageInput.fill(message)
+    await expect(this.messageSubmit).toBeVisible()
+    await this.messageSubmit.click()
+    const verified = await this.verifyMessage(message)
+    if (!verified)
+      throw new Error(`Message "${message}" was not found in conversation after sending`)
+  }
+
+  async findMessageConversation(displayName: string) {
+    await expect(this.messagesTable).toBeVisible()
+    await this.page.waitForTimeout(1000)
+    const doMessagesExist = (await this.messagesRow.count()) > 0
+    if (doMessagesExist) {
+      const messages = await this.messagesRow.getByTestId('messages-username').all()
+
+      for (let i = 0; i < messages.length; i++) {
+        await expect(messages[i]).toBeVisible()
+        const messageFromUser = await messages[i].textContent()
+        if (messageFromUser?.toLowerCase() === displayName.toLowerCase()) await messages[i].click()
+      }
+    } else {
+      throw new Error('There are no messages on this account')
+    }
+  }
+
+  async verifyMessage(messageContent: string) {
+    await expect(this.conversation).toBeVisible()
+    await sleep(1000)
+    const messageCount = (await this.conversationMessage.count()) > 0
+    if (messageCount) {
+      const messages = await this.conversationMessage.all()
+      for (let i = 0; i < messages.length; i++) {
+        const message = await messages[i].textContent()
+        if (message?.toLowerCase() === messageContent.toLowerCase()) return true
+      }
+      return false
+    } else {
+      throw new Error('There are no messages in this conversation')
+    }
+  }
+}