refactor(tests): ⚡️ Add msw and mock authentication

apps/builder/playwright/.env.example

@@ -1,8 +1,6 @@
-PLAYWRIGHT_BUILDER_TEST_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_AUTH_MOCKING=enabled
 
-# For auth
-GITHUB_EMAIL=
-GITHUB_PASSWORD=
+PLAYWRIGHT_BUILDER_TEST_BASE_URL=http://localhost:3000
 
 # SMTP Credentials (Generated on https://ethereal.email/)
 SMTP_HOST=smtp.ethereal.email

apps/builder/playwright/freeUser.json

@@ -0,0 +1,14 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:3000",
+      "localStorage": [
+        {
+          "name": "authenticatedUser",
+          "value": "{\"id\":\"freeUser\",\"name\":\"John Smith\",\"email\":\"john@smith.fr\",\"emailVerified\":null,\"image\":\"https://avatars.githubusercontent.com/u/16015833?v=4\",\"plan\":\"FREE\",\"stripeId\":null}"
+        }
+      ]
+    }
+  ]
+}

apps/builder/playwright/global-setup.ts

@@ -1,10 +1,5 @@
-import { chromium, FullConfig, Page } from '@playwright/test'
-import { existsSync } from 'fs'
-import {
-  getSignedInUser,
-  setupDatabase,
-  teardownDatabase,
-} from './services/database'
+import { FullConfig } from '@playwright/test'
+import { setupDatabase, teardownDatabase } from './services/database'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 require('dotenv').config({ path: '.env' })
@@ -12,43 +7,8 @@ require('dotenv').config({ path: '.env' })
 async function globalSetup(config: FullConfig) {
   const { baseURL } = config.projects[0].use
   if (!baseURL) throw new Error('baseURL is missing')
-  if (!process.env.GITHUB_EMAIL || !process.env.GITHUB_PASSWORD)
-    throw new Error(
-      'GITHUB_EMAIL or GITHUB_PASSWORD are missing in the environment. They are required to log in.'
-    )
-
   await teardownDatabase()
-
-  const signedInUser = await getSignedInUser(process.env.GITHUB_EMAIL as string)
-  if (!signedInUser || !existsSync('./playwright/authenticatedState.json')) {
-    const browser = await chromium.launch()
-    const page = await browser.newPage()
-    await signIn(page)
-    await page.context().storageState({
-      path: './playwright/authenticatedState.json',
-    })
-  }
-
-  await setupDatabase(process.env.GITHUB_EMAIL as string)
-}
-
-const signIn = async (page: Page) => {
-  await page.goto(`${process.env.PLAYWRIGHT_BUILDER_TEST_BASE_URL}/signin`)
-  await page.click('text=Continue with GitHub')
-  await page.fill('input[name="login"]', process.env.GITHUB_EMAIL as string)
-  await page.fill(
-    'input[name="password"]',
-    process.env.GITHUB_PASSWORD as string
-  )
-  await page.press('input[name="password"]', 'Enter')
-  try {
-    await page.locator('text=Authorize baptisteArno').click({ timeout: 3000 })
-  } catch {
-    return
-  }
-  await page.waitForNavigation({
-    url: `${process.env.PLAYWRIGHT_BUILDER_TEST_BASE_URL}/typebots`,
-  })
+  await setupDatabase()
 }
 
 export default globalSetup

apps/builder/playwright/proUser.json

@@ -0,0 +1,14 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:3000",
+      "localStorage": [
+        {
+          "name": "authenticatedUser",
+          "value": "{\"id\":\"proUser\",\"name\":\"John Smith\",\"email\":\"john@smith.com\",\"emailVerified\":null,\"image\":\"https://avatars.githubusercontent.com/u/16015833?v=4\",\"plan\":\"PRO\",\"stripeId\":null}"
+        }
+      ]
+    }
+  ]
+}

apps/builder/playwright/services/database.ts

@@ -15,18 +15,25 @@ import { encrypt } from 'utils'
 const prisma = new PrismaClient()
 
 export const teardownDatabase = async () => {
+  await prisma.user.deleteMany()
   await prisma.credentials.deleteMany()
   await prisma.dashboardFolder.deleteMany()
   return prisma.typebot.deleteMany()
 }
 
-export const setupDatabase = async (userEmail: string) => {
-  const createdUser = await getSignedInUser(userEmail)
-  if (!createdUser) throw new Error("Couldn't find user")
-  process.env.PLAYWRIGHT_USER_ID = createdUser.id
+export const setupDatabase = async () => {
+  await createUsers()
   return createCredentials()
 }
 
+export const createUsers = () =>
+  prisma.user.createMany({
+    data: [
+      { id: 'freeUser', email: 'free-user@email.com', name: 'Free user' },
+      { id: 'proUser', email: 'pro-user@email.com', name: 'Pro user' },
+    ],
+  })
+
 export const getSignedInUser = (email: string) =>
   prisma.user.findFirst({ where: { email } })
 
@@ -44,7 +51,7 @@ export const createTypebots = async (partialTypebots: Partial<Typebot>[]) => {
 export const createFolders = (partialFolders: Partial<DashboardFolder>[]) =>
   prisma.dashboardFolder.createMany({
     data: partialFolders.map((folder) => ({
-      ownerId: process.env.PLAYWRIGHT_USER_ID as string,
+      ownerId: 'proUser',
       name: 'Folder #1',
       ...folder,
     })),
@@ -63,7 +70,7 @@ const createCredentials = () => {
     data: [
       {
         name: 'test2@gmail.com',
-        ownerId: process.env.PLAYWRIGHT_USER_ID as string,
+        ownerId: 'proUser',
         type: CredentialsType.GOOGLE_SHEETS,
         data: encryptedData,
         iv,
@@ -75,10 +82,13 @@ const createCredentials = () => {
 export const updateUser = (data: Partial<User>) =>
   prisma.user.update({
     data,
-    where: { id: process.env.PLAYWRIGHT_USER_ID as string },
+    where: {
+      id: 'proUser',
+    },
   })
 
 export const createResults = async ({ typebotId }: { typebotId: string }) => {
+  await prisma.result.deleteMany()
   await prisma.result.createMany({
     data: [
       ...Array.from(Array(200)).map((_, idx) => {
@@ -137,7 +147,7 @@ const parseTestTypebot = (partialTypebot: Partial<Typebot>): Typebot => ({
   id: partialTypebot.id ?? 'typebot',
   folderId: null,
   name: 'My typebot',
-  ownerId: process.env.PLAYWRIGHT_USER_ID as string,
+  ownerId: 'proUser',
   theme: defaultTheme,
   settings: defaultSettings,
   createdAt: new Date(),
@@ -198,7 +208,7 @@ export const importTypebotInDatabase = (
   const typebot: any = {
     ...JSON.parse(readFileSync(path).toString()),
     ...updates,
-    ownerId: process.env.PLAYWRIGHT_USER_ID,
+    ownerId: 'proUser',
   }
   return prisma.typebot.create({
     data: typebot,

apps/builder/playwright/tests/account.spec.ts

@@ -1,52 +0,0 @@
-import test, { expect } from '@playwright/test'
-import { refreshUser } from '../services/browser'
-import { Plan } from 'db'
-import path from 'path'
-import { updateUser } from '../services/database'
-
-test.describe('Account page', () => {
-  test('should edit user info properly', async ({ page }) => {
-    await updateUser({
-      name: 'Default Name',
-      image:
-        'https://images.unsplash.com/photo-1521119989659-a83eee488004?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1323&q=80',
-    })
-    await page.goto('/account')
-    const saveButton = page.locator('button:has-text("Save")')
-    await expect(saveButton).toBeHidden()
-    await expect(
-      page.locator('input[type="email"]').getAttribute('disabled')
-    ).toBeDefined()
-    await page.fill('#name', 'John Doe')
-    expect(saveButton).toBeVisible()
-    await page.setInputFiles(
-      'input[type="file"]',
-      path.join(__dirname, '../fixtures/avatar.jpg')
-    )
-    await expect(page.locator('img')).toHaveAttribute(
-      'src',
-      new RegExp(
-        `https://s3.eu-west-3.amazonaws.com/typebot/users/${process.env.PLAYWRIGHT_USER_ID}/avatar`,
-        'gm'
-      )
-    )
-    await saveButton.click()
-    await expect(saveButton).toBeHidden()
-  })
-
-  test('should display valid plans', async ({ page }) => {
-    await updateUser({ plan: Plan.FREE, stripeId: null })
-    await page.goto('/account')
-    await expect(page.locator('text=Free plan')).toBeVisible()
-    await page.evaluate(refreshUser)
-    await page.reload()
-    const manageSubscriptionButton = page.locator(
-      'a:has-text("Manage my subscription")'
-    )
-    await expect(manageSubscriptionButton).toBeHidden()
-    await updateUser({ plan: Plan.PRO, stripeId: 'stripeId' })
-    await page.reload()
-    await expect(page.locator('text=Pro plan')).toBeVisible()
-    await expect(manageSubscriptionButton).toBeVisible()
-  })
-})

apps/builder/playwright/tests/results.spec.ts

@@ -30,7 +30,7 @@ test.describe('Results page', () => {
     await deleteButtonInConfirmDialog(page).click()
     await expect(page.locator('text=content199')).toBeHidden()
     await expect(page.locator('text=content198')).toBeHidden()
-    await page.check(':nth-match(input[type="checkbox"], 1)', { force: true })
+    await page.click('[data-testid="checkbox"] >> nth=0')
     await page.click('button:has-text("Delete198")')
     await deleteButtonInConfirmDialog(page).click()
     await expect(page.locator(':nth-match(tr, 2)')).toBeHidden()
@@ -75,7 +75,7 @@ test.describe('Results page', () => {
     const { data } = parse(file)
     validateExportSelection(data)
 
-    await page.check(':nth-match(input[type="checkbox"], 1)', { force: true })
+    await page.click('[data-testid="checkbox"] >> nth=0')
     const [downloadAll] = await Promise.all([
       page.waitForEvent('download'),
       page.locator('button:has-text("Export200")').click(),
@@ -101,6 +101,6 @@ const validateExportAll = (data: unknown[]) => {
 }
 
 const selectFirstResults = async (page: Page) => {
-  await page.check(':nth-match(input[type="checkbox"], 2)', { force: true })
-  return page.check(':nth-match(input[type="checkbox"], 3)', { force: true })
+  await page.click('[data-testid="checkbox"] >> nth=1')
+  return page.click('[data-testid="checkbox"] >> nth=2')
 }