✨ Introduce bot v2 in builder (#328)

Also, the new engine is the default for updated typebots for viewer

Closes #211

apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts

@@ -6,7 +6,6 @@ import {
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultChoiceInputOptions, InputBlockType, ItemType } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { getTestAsset } from '@/test/utils/playwright'
 
 test.describe.parallel('Buttons input block', () => {
@@ -42,10 +41,10 @@ test.describe.parallel('Buttons input block', () => {
     await expect(page.locator('text=Item 2')).toBeHidden()
 
     await page.click('text=Preview')
-    const item3Button = typebotViewer(page).locator('button >> text=Item 3')
+    const item3Button = page.locator('button >> text=Item 3')
     await item3Button.click()
     await expect(item3Button).toBeHidden()
-    await expect(typebotViewer(page).locator('text=Item 3')).toBeVisible()
+    await expect(page.getByTestId('guest-bubble')).toHaveText('Item 3')
     await page.click('button[aria-label="Close"]')
 
     await page.click('[data-testid="block2-icon"]')
@@ -64,13 +63,11 @@ test.describe.parallel('Buttons input block', () => {
 
     await page.click('text=Preview')
 
-    await typebotViewer(page).locator('button >> text="Item 3"').click()
-    await typebotViewer(page).locator('button >> text="Item 1"').click()
-    await typebotViewer(page).locator('text=Go').click()
+    await page.locator('button >> text="Item 3"').click()
+    await page.locator('button >> text="Item 1"').click()
+    await page.locator('text=Go').click()
 
-    await expect(
-      typebotViewer(page).locator('text="Item 3, Item 1"')
-    ).toBeVisible()
+    await expect(page.locator('text="Item 3, Item 1"')).toBeVisible()
   })
 })
 
@@ -85,18 +82,18 @@ test('Variable buttons should work', async ({ page }) => {
 
   await page.goto(`/typebots/${typebotId}/edit`)
   await page.click('text=Preview')
-  await typebotViewer(page).locator('text=Variable item').click()
-  await expect(typebotViewer(page).locator('text=Variable item')).toBeVisible()
-  await expect(typebotViewer(page).locator('text=Ok great!')).toBeVisible()
+  await page.getByRole('button', { name: 'Variable item' }).click()
+  await expect(page.getByTestId('guest-bubble')).toHaveText('Variable item')
+  await expect(page.locator('text=Ok great!')).toBeVisible()
   await page.click('text="Item 1"')
   await page.fill('input[value="Item 1"]', '{{Item 2}}')
   await page.click('[data-testid="block1-icon"]')
   await page.click('text=Multiple choice?')
   await page.click('text="Restart"')
-  await typebotViewer(page).locator('text="Variable item" >> nth=0').click()
-  await typebotViewer(page).locator('text="Variable item" >> nth=1').click()
-  await typebotViewer(page).locator('text="Send"').click()
+  await page.getByTestId('button').first().click()
+  await page.getByTestId('button').nth(1).click()
+  await page.locator('text="Send"').click()
   await expect(
-    typebotViewer(page).locator('text="Variable item, Variable item"')
+    page.locator('text="Variable item, Variable item"')
   ).toBeVisible()
 })

apps/builder/src/features/blocks/inputs/date/date.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultDateInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 test.describe('Date input block', () => {
@@ -21,15 +20,14 @@ test.describe('Date input block', () => {
     await page.goto(`/typebots/${typebotId}/edit`)
 
     await page.click('text=Preview')
-    await expect(
-      typebotViewer(page).locator('[data-testid="from-date"]')
-    ).toHaveAttribute('type', 'date')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
-    await typebotViewer(page)
-      .locator('[data-testid="from-date"]')
-      .fill('2021-01-01')
-    await typebotViewer(page).locator(`button`).click()
-    await expect(typebotViewer(page).locator('text="01/01/2021"')).toBeVisible()
+    await expect(page.locator('[data-testid="from-date"]')).toHaveAttribute(
+      'type',
+      'date'
+    )
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
+    await page.locator('[data-testid="from-date"]').fill('2021-01-01')
+    await page.getByRole('button', { name: 'Send' }).click()
+    await expect(page.locator('text="01/01/2021"')).toBeVisible()
 
     await page.click(`text=Pick a date...`)
     await page.click('text=Is range?')
@@ -39,23 +37,19 @@ test.describe('Date input block', () => {
     await page.fill('#button', 'Go')
 
     await page.click('text=Restart')
+    await expect(page.locator(`[data-testid="from-date"]`)).toHaveAttribute(
+      'type',
+      'datetime-local'
+    )
+    await expect(page.locator(`[data-testid="to-date"]`)).toHaveAttribute(
+      'type',
+      'datetime-local'
+    )
+    await page.locator('[data-testid="from-date"]').fill('2021-01-01T11:00')
+    await page.locator('[data-testid="to-date"]').fill('2022-01-01T09:00')
+    await page.getByRole('button', { name: 'Go' }).click()
     await expect(
-      typebotViewer(page).locator(`[data-testid="from-date"]`)
-    ).toHaveAttribute('type', 'datetime-local')
-    await expect(
-      typebotViewer(page).locator(`[data-testid="to-date"]`)
-    ).toHaveAttribute('type', 'datetime-local')
-    await typebotViewer(page)
-      .locator('[data-testid="from-date"]')
-      .fill('2021-01-01T11:00')
-    await typebotViewer(page)
-      .locator('[data-testid="to-date"]')
-      .fill('2022-01-01T09:00')
-    await typebotViewer(page).locator(`button`).click()
-    await expect(
-      typebotViewer(page).locator(
-        'text="01/01/2021, 11:00 AM to 01/01/2022, 09:00 AM"'
-      )
+      page.locator('text="01/01/2021, 11:00 AM to 01/01/2022, 09:00 AM"')
     ).toBeVisible()
   })
 })

apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultEmailInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 test.describe('Email input block', () => {
@@ -22,11 +21,11 @@ test.describe('Email input block', () => {
 
     await page.click('text=Preview')
     await expect(
-      typebotViewer(page).locator(
+      page.locator(
         `input[placeholder="${defaultEmailInputOptions.labels.placeholder}"]`
       )
     ).toHaveAttribute('type', 'email')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
 
     await page.click(`text=${defaultEmailInputOptions.labels.placeholder}`)
     await page.fill(
@@ -41,19 +40,13 @@ test.describe('Email input block', () => {
     )
 
     await page.click('text=Restart')
-    await typebotViewer(page)
-      .locator(`input[placeholder="Your email..."]`)
-      .fill('test@test')
-    await typebotViewer(page).locator('text=Go').click()
-    await expect(
-      typebotViewer(page).locator('text=Try again bro')
-    ).toBeVisible()
-    await typebotViewer(page)
+    await page.locator(`input[placeholder="Your email..."]`).fill('test@test')
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(page.locator('text=Try again bro')).toBeVisible()
+    await page
       .locator(`input[placeholder="Your email..."]`)
       .fill('test@test.com')
-    await typebotViewer(page).locator('text=Go').click()
-    await expect(
-      typebotViewer(page).locator('text=test@test.com')
-    ).toBeVisible()
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(page.locator('text=test@test.com')).toBeVisible()
   })
 })

apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx

@@ -63,7 +63,7 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
         <CodeEditor
           lang="html"
           onChange={handlePlaceholderLabelChange}
-          value={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           height={'100px'}
           withVariableButton={false}
         />

apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultFileInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 import { freeWorkspaceId } from 'utils/playwright/databaseSetup'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -24,14 +23,12 @@ test('options should work', async ({ page }) => {
   await page.goto(`/typebots/${typebotId}/edit`)
 
   await page.click('text=Preview')
-  await expect(
-    typebotViewer(page).locator(`text=Click to upload`)
-  ).toBeVisible()
-  await expect(typebotViewer(page).locator(`text="Skip"`)).toBeHidden()
-  await typebotViewer(page)
+  await expect(page.locator(`text=Click to upload`)).toBeVisible()
+  await expect(page.locator(`text="Skip"`)).toBeHidden()
+  await page
     .locator(`input[type="file"]`)
     .setInputFiles([getTestAsset('avatar.jpg')])
-  await expect(typebotViewer(page).locator(`text=File uploaded`)).toBeVisible()
+  await expect(page.locator(`text=File uploaded`)).toBeVisible()
   await page.click('text="Collect file"')
   await page.click('text="Required?"')
   await page.click('text="Allow multiple files?"')
@@ -41,20 +38,18 @@ test('options should work', async ({ page }) => {
   await page.fill('[value="Skip"]', 'Pass')
   await page.fill('input[value="10"]', '20')
   await page.click('text="Restart"')
-  await expect(typebotViewer(page).locator(`text="Pass"`)).toBeVisible()
-  await expect(typebotViewer(page).locator(`text="Upload now!!"`)).toBeVisible()
-  await typebotViewer(page)
+  await expect(page.locator(`text="Pass"`)).toBeVisible()
+  await expect(page.locator(`text="Upload now!!"`)).toBeVisible()
+  await page
     .locator(`input[type="file"]`)
     .setInputFiles([
       getTestAsset('avatar.jpg'),
       getTestAsset('avatar.jpg'),
       getTestAsset('avatar.jpg'),
     ])
-  await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
-  await typebotViewer(page).locator('text="Go"').click()
-  await expect(
-    typebotViewer(page).locator(`text="3 files uploaded"`)
-  ).toBeVisible()
+  await expect(page.locator(`text="3"`)).toBeVisible()
+  await page.locator('text="Go"').click()
+  await expect(page.locator(`text="3 files uploaded"`)).toBeVisible()
 })
 
 test.describe('Free workspace', () => {

apps/builder/src/features/blocks/inputs/number/number.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultNumberInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 test.describe('Number input block', () => {
@@ -22,11 +21,11 @@ test.describe('Number input block', () => {
 
     await page.click('text=Preview')
     await expect(
-      typebotViewer(page).locator(
+      page.locator(
         `input[placeholder="${defaultNumberInputOptions.labels.placeholder}"]`
       )
     ).toHaveAttribute('type', 'number')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
 
     await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`)
     await page.fill('#placeholder', 'Your number...')
@@ -37,15 +36,13 @@ test.describe('Number input block', () => {
     await page.fill('[role="spinbutton"] >> nth=2', '10')
 
     await page.click('text=Restart')
-    const input = typebotViewer(page).locator(
-      `input[placeholder="Your number..."]`
-    )
+    const input = page.locator(`input[placeholder="Your number..."]`)
     await input.fill('-1')
     await input.press('Enter')
     await input.fill('150')
     await input.press('Enter')
     await input.fill('50')
     await input.press('Enter')
-    await expect(typebotViewer(page).locator('text=50')).toBeVisible()
+    await expect(page.locator('text=50')).toBeVisible()
   })
 })

apps/builder/src/features/blocks/inputs/payment/payment.spec.ts

@@ -3,7 +3,6 @@ import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultPaymentInputOptions, InputBlockType } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { stripePaymentForm } from '@/test/utils/selectorUtils'
 
 test.describe('Payment input block', () => {
@@ -59,9 +58,9 @@ test.describe('Payment input block', () => {
       .locator(`[placeholder="MM / YY"]`)
       .fill('12 / 25')
     await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill('240')
-    await typebotViewer(page).locator(`text="Pay 30€"`).click()
+    await page.locator(`text="Pay 30€"`).click()
     await expect(
-      typebotViewer(page).locator(`text="Your card has been declined."`)
+      page.locator(`text="Your card has been declined."`)
     ).toBeVisible()
     await stripePaymentForm(page)
       .locator(`[placeholder="1234 1234 1234 1234"]`)
@@ -69,7 +68,7 @@ test.describe('Payment input block', () => {
     const zipInput = stripePaymentForm(page).getByPlaceholder('90210')
     const isZipInputVisible = await zipInput.isVisible()
     if (isZipInputVisible) await zipInput.fill('12345')
-    await typebotViewer(page).locator(`text="Pay 30€"`).click()
-    await expect(typebotViewer(page).locator(`text="Success"`)).toBeVisible()
+    await page.locator(`text="Pay 30€"`).click()
+    await expect(page.locator(`text="Success"`)).toBeVisible()
   })
 })

apps/builder/src/features/blocks/inputs/phone/phone.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultPhoneInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 test.describe('Phone input block', () => {
@@ -22,11 +21,11 @@ test.describe('Phone input block', () => {
 
     await page.click('text=Preview')
     await expect(
-      typebotViewer(page).locator(
+      page.locator(
         `input[placeholder="${defaultPhoneInputOptions.labels.placeholder}"]`
       )
     ).toHaveAttribute('type', 'tel')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
 
     await page.click(`text=${defaultPhoneInputOptions.labels.placeholder}`)
     await page.fill('#placeholder', '+33 XX XX XX XX')
@@ -37,21 +36,14 @@ test.describe('Phone input block', () => {
     )
 
     await page.click('text=Restart')
-    await typebotViewer(page)
-      .locator(`input[placeholder="+33 XX XX XX XX"]`)
-      .fill('+33 6 73')
-    await expect(typebotViewer(page).locator(`img`)).toHaveAttribute(
-      'alt',
-      'France'
-    )
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(
-      typebotViewer(page).locator('text=Try again bro')
-    ).toBeVisible()
-    await typebotViewer(page)
+    await page.locator(`input[placeholder="+33 XX XX XX XX"]`).type('+33 6 73')
+    await expect(page.getByRole('combobox')).toHaveText(/🇫🇷.+/)
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=Try again bro')).toBeVisible()
+    await page
       .locator(`input[placeholder="+33 XX XX XX XX"]`)
       .fill('+33 6 73 54 45 67')
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(typebotViewer(page).locator('text=+33673544567')).toBeVisible()
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=+33 6 73 54 45 67')).toBeVisible()
   })
 })

apps/builder/src/features/blocks/inputs/rating/rating.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultRatingInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 const boxSvg = `<svg
@@ -33,10 +32,10 @@ test('options should work', async ({ page }) => {
   await page.goto(`/typebots/${typebotId}/edit`)
 
   await page.click('text=Preview')
-  await expect(typebotViewer(page).locator(`text=Send`)).toBeHidden()
-  await typebotViewer(page).locator(`text=8`).click()
-  await typebotViewer(page).locator(`text=Send`).click()
-  await expect(typebotViewer(page).locator(`text=8`)).toBeVisible()
+  await expect(page.locator(`text=Send`)).toBeHidden()
+  await page.locator(`text=8`).click()
+  await page.locator(`text=Send`).click()
+  await expect(page.locator(`text=8`)).toBeVisible()
   await page.click('text=Rate from 0 to 10')
   await page.click('text="10"')
   await page.click('text="5"')
@@ -48,14 +47,10 @@ test('options should work', async ({ page }) => {
   await page.fill('[placeholder="Not likely at all"]', 'Not likely at all')
   await page.fill('[placeholder="Extremely likely"]', 'Extremely likely')
   await page.click('text="Restart"')
-  await expect(typebotViewer(page).locator(`text=8`)).toBeHidden()
-  await expect(typebotViewer(page).locator(`text=4`)).toBeHidden()
-  await expect(
-    typebotViewer(page).locator(`text=Not likely at all`)
-  ).toBeVisible()
-  await expect(
-    typebotViewer(page).locator(`text=Extremely likely`)
-  ).toBeVisible()
-  await typebotViewer(page).locator(`svg >> nth=4`).click()
-  await expect(typebotViewer(page).locator(`text=5`)).toBeVisible()
+  await expect(page.locator(`text=8`)).toBeHidden()
+  await expect(page.locator(`text=4`)).toBeHidden()
+  await expect(page.locator(`text=Not likely at all`)).toBeVisible()
+  await expect(page.locator(`text=Extremely likely`)).toBeVisible()
+  await page.locator(`svg >> nth=4`).click()
+  await expect(page.locator(`text=5`)).toBeVisible()
 })

apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultTextInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 test.describe.parallel('Text input block', () => {
@@ -22,11 +21,11 @@ test.describe.parallel('Text input block', () => {
 
     await page.click('text=Preview')
     await expect(
-      typebotViewer(page).locator(
+      page.locator(
         `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`
       )
     ).toHaveAttribute('type', 'text')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
 
     await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
     await page.fill('#placeholder', 'Your name...')
@@ -35,8 +34,8 @@ test.describe.parallel('Text input block', () => {
 
     await page.click('text=Restart')
     await expect(
-      typebotViewer(page).locator(`textarea[placeholder="Your name..."]`)
+      page.locator(`textarea[placeholder="Your name..."]`)
     ).toBeVisible()
-    await expect(typebotViewer(page).locator(`text=Go`)).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
   })
 })

apps/builder/src/features/blocks/inputs/url/url.spec.ts

@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultUrlInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 
 test.describe('Url input block', () => {
@@ -22,11 +21,13 @@ test.describe('Url input block', () => {
 
     await page.click('text=Preview')
     await expect(
-      typebotViewer(page).locator(
+      page.locator(
         `input[placeholder="${defaultUrlInputOptions.labels.placeholder}"]`
       )
     ).toHaveAttribute('type', 'url')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(
+      page.locator('typebot-standard').locator(`button`)
+    ).toBeDisabled()
 
     await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`)
     await page.fill('#placeholder', 'Your URL...')
@@ -38,19 +39,15 @@ test.describe('Url input block', () => {
     )
 
     await page.click('text=Restart')
-    await typebotViewer(page)
+    await page
       .locator(`input[placeholder="Your URL..."]`)
       .fill('https://https://test')
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(
-      typebotViewer(page).locator('text=Try again bro')
-    ).toBeVisible()
-    await typebotViewer(page)
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=Try again bro')).toBeVisible()
+    await page
       .locator(`input[placeholder="Your URL..."]`)
       .fill('https://website.com')
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(
-      typebotViewer(page).locator('text=https://website.com')
-    ).toBeVisible()
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=https://website.com')).toBeVisible()
   })
 })