blsmedia/bot
2
0
Fork 0
Code Activity

chore(editor): ♻️ Revert tables to arrays

Browse Source 
Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉
This commit is contained in:
Baptiste Arnaud
2022-02-04 19:00:08 +01:00
parent 8a350eee6c
commit 524ef0812c
123 changed files with 2998 additions and 3112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/builder/playwright/tests/account.spec.ts
View File

@@ -6,7 +6,11 @@ import { updateUser } from '../services/database'
test.describe('Account page', () => {
test('should edit user info properly', async ({ page }) => {
await updateUser({ name: 'Default Name' })
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()

8
apps/builder/playwright/tests/bubbles/text.spec.ts
View File

@@ -24,22 +24,22 @@ test.describe('Text bubble step', () => {
await page.click('[data-testid="bold-button"]')
await page.type('div[role="textbox"]', 'Bold text')
await page.press('div[role="textbox"]', 'Enter')
await page.press('div[role="textbox"]', 'Shift+Enter')
await page.click('[data-testid="bold-button"]')
await page.click('[data-testid="italic-button"]')
await page.type('div[role="textbox"]', 'Italic text')
await page.press('div[role="textbox"]', 'Enter')
await page.press('div[role="textbox"]', 'Shift+Enter')
await page.click('[data-testid="underline-button"]')
await page.click('[data-testid="italic-button"]')
await page.type('div[role="textbox"]', 'Underlined text')
await page.press('div[role="textbox"]', 'Enter')
await page.press('div[role="textbox"]', 'Shift+Enter')
await page.click('[data-testid="bold-button"]')
await page.click('[data-testid="italic-button"]')
await page.type('div[role="textbox"]', 'Everything text')
await page.press('div[role="textbox"]', 'Enter')
await page.press('div[role="textbox"]', 'Shift+Enter')
await page.click('text=Preview')
await expect(

94
apps/builder/playwright/tests/editor.spec.ts
View File

@@ -1,9 +1,97 @@
import test, { expect } from '@playwright/test'
import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
import test, { expect, Page } from '@playwright/test'
import {
createTypebots,
importTypebotInDatabase,
parseDefaultBlockWithStep,
} from '../services/database'
import { defaultTextInputOptions, InputStepType } from 'models'
import { generate } from 'short-uuid'
import path from 'path'
test.describe('Editor', () => {
test.describe.parallel('Editor', () => {
test('Edges connection should work', async ({ page }) => {
const typebotId = generate()
await createTypebots([
{
id: typebotId,
},
])
await page.goto(`/typebots/${typebotId}/edit`)
await page.dragAndDrop('text=Button', '#editor-container', {
targetPosition: { x: 800, y: 400 },
})
await page.dragAndDrop(
'text=Text >> nth=0',
'[data-testid="block"] >> nth=1',
{
targetPosition: { x: 100, y: 50 },
}
)
await page.dragAndDrop(
'[data-testid="endpoint"]',
'[data-testid="block"] >> nth=1',
{ targetPosition: { x: 100, y: 10 } }
)
await expect(page.locator('[data-testid="edge"]')).toBeVisible()
await page.dragAndDrop(
'[data-testid="endpoint"]',
'[data-testid="step"] >> nth=1'
)
await expect(page.locator('[data-testid="edge"]')).toBeVisible()
await page.dragAndDrop('text=Date', '#editor-container', {
targetPosition: { x: 1000, y: 800 },
})
await page.dragAndDrop(
'[data-testid="endpoint"] >> nth=2',
'[data-testid="block"] >> nth=2',
{
targetPosition: { x: 100, y: 10 },
}
)
await expect(page.locator('[data-testid="edge"] >> nth=0')).toBeVisible()
await expect(page.locator('[data-testid="edge"] >> nth=1')).toBeVisible()
})
test('Drag and drop steps and items should work', async ({ page }) => {
const typebotId = generate()
await importTypebotInDatabase(
path.join(__dirname, '../fixtures/typebots/editor/buttonsDnd.json'),
{
id: typebotId,
}
)
// Steps dnd
await page.goto(`/typebots/${typebotId}/edit`)
await expect(page.locator('[data-testid="step"] >> nth=1')).toHaveText(
'Hello!'
)
await page.dragAndDrop('text=Hello', 'text=Item 1')
await expect(page.locator('[data-testid="step"] >> nth=2')).toHaveText(
'Hello!'
)
await page.dragAndDrop('text=Hello', '[data-testid="step"] >> text=Start')
await expect(page.locator('text=Block #4')).toBeVisible()
await page.dragAndDrop('text=Hello', 'text=Block #2')
await expect(page.locator('[data-testid="step"] >> nth=3')).toHaveText(
'Hello!'
)
// Items dnd
await expect(page.locator('[data-testid="item"] >> nth=0')).toHaveText(
'Item 1'
)
await page.dragAndDrop('text=Item 1', 'text=Item 3')
await expect(page.locator('[data-testid="item"] >> nth=2')).toHaveText(
'Item 1'
)
await expect(page.locator('[data-testid="item"] >> nth=1')).toHaveText(
'Item 3'
)
await page.dragAndDrop('text=Item 3', 'text=Item 2-3')
await expect(page.locator('[data-testid="item"] >> nth=6')).toHaveText(
'Item 3'
)
})
test('Undo / Redo buttons should work', async ({ page }) => {
const typebotId = generate()
await createTypebots([

16
apps/builder/playwright/tests/inputs/buttons.spec.ts
View File

@@ -3,7 +3,7 @@ import {
createTypebots,
parseDefaultBlockWithStep,
} from '../../services/database'
import { defaultChoiceInputOptions, InputStepType } from 'models'
import { defaultChoiceInputOptions, InputStepType, ItemType } from 'models'
import { typebotViewer } from '../../services/selectorUtils'
import { generate } from 'short-uuid'
@@ -15,7 +15,14 @@ test.describe.parallel('Buttons input step', () => {
id: typebotId,
...parseDefaultBlockWithStep({
type: InputStepType.CHOICE,
options: { ...defaultChoiceInputOptions, itemIds: ['choice1'] },
items: [
{
id: 'choice1',
stepId: 'step1',
type: ItemType.BUTTON,
},
],
options: { ...defaultChoiceInputOptions },
}),
},
])
@@ -23,14 +30,11 @@ test.describe.parallel('Buttons input step', () => {
await page.goto(`/typebots/${typebotId}/edit`)
await page.fill('input[value="Click to edit"]', 'Item 1')
await page.press('input[value="Item 1"]', 'Enter')
await page.locator('text=Item 1').hover()
await page.click('[aria-label="Add item"]')
await page.fill('input[value="Click to edit"]', 'Item 2')
await page.press('input[value="Item 2"]', 'Enter')
await page.locator('text=Item 2').hover()
await page.click('[aria-label="Add item"]')
await page.fill('input[value="Click to edit"]', 'Item 3')
await page.press('input[value="Item 3"]', 'Enter')
await page.press('input[value="Click to edit"]', 'Escape')
await page.click('text=Item 2', { button: 'right' })
await page.click('text=Delete')
await expect(page.locator('text=Item 2')).toBeHidden()

2
apps/builder/playwright/tests/integrations/googleSheets.spec.ts
View File

@@ -145,7 +145,7 @@ test.describe.parallel('Google sheets integration', () => {
.press('Enter')
await expect(
typebotViewer(page).locator('text=Your name is: John Smith')
).toBeVisible()
).toBeVisible({ timeout: 30000 })
})
})

12
apps/builder/playwright/tests/logic/condition.spec.ts
View File

@@ -16,8 +16,7 @@ test.describe('Condition step', () => {
)
await page.goto(`/typebots/${typebotId}/edit`)
await page.click('text=Configure...')
await page.click('button:has-text("Add a comparison")')
await page.click('text=Configure... >> nth=0', { force: true })
await page.fill(
'input[placeholder="Search for a variable"] >> nth=-1',
'Age'
@@ -41,8 +40,7 @@ test.describe('Condition step', () => {
'100'
)
await page.click('text=Configure...')
await page.click('button:has-text("Add a comparison")')
await page.click('text=Configure...', { force: true })
await page.fill(
'input[placeholder="Search for a variable"] >> nth=-1',
'Age'
@@ -54,7 +52,7 @@ test.describe('Condition step', () => {
await page.click('text=Preview')
await typebotViewer(page)
.locator('input[placeholder="Type your answer..."]')
.locator('input[placeholder="Type a number..."]')
.fill('15')
await typebotViewer(page).locator('text=Send').click()
await expect(
@@ -63,7 +61,7 @@ test.describe('Condition step', () => {
await page.click('text=Restart')
await typebotViewer(page)
.locator('input[placeholder="Type your answer..."]')
.locator('input[placeholder="Type a number..."]')
.fill('45')
await typebotViewer(page).locator('text=Send').click()
await expect(
@@ -72,7 +70,7 @@ test.describe('Condition step', () => {
await page.click('text=Restart')
await typebotViewer(page)
.locator('input[placeholder="Type your answer..."]')
.locator('input[placeholder="Type a number..."]')
.fill('90')
await typebotViewer(page).locator('text=Send').click()
await expect(

50
apps/builder/playwright/tests/theme.spec.ts
View File

@@ -31,7 +31,7 @@ test.describe.parallel('Theme page', () => {
)
await page.click('text=Color')
await page.click('[aria-label="Pick a color"]')
await page.fill('[aria-label="Color value"]', '#2a9d8f')
await page.fill('[aria-label="Color value"] >> nth=-1', '#2a9d8f')
await expect(chatContainer).toHaveCSS(
'background-color',
'rgb(42, 157, 143)'
@@ -56,10 +56,14 @@ test.describe.parallel('Theme page', () => {
await page.waitForTimeout(300)
// Host bubbles
await page.click(':nth-match([aria-label="Pick a color"], 1)')
await page.fill('[aria-label="Color value"]', '#2a9d8f')
await page.click(':nth-match([aria-label="Pick a color"], 2)')
await page.fill('[aria-label="Color value"]', '#ffffff')
await page.click(
'[data-testid="host-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=0'
)
await page.fill('input[value="#F7F8FF"]', '#2a9d8f')
await page.click(
'[data-testid="host-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=1'
)
await page.fill('input[value="#303235"]', '#ffffff')
const hostBubble = typebotViewer(page).locator(
'[data-testid="host-bubble"]'
)
@@ -70,19 +74,27 @@ test.describe.parallel('Theme page', () => {
await expect(hostBubble).toHaveCSS('color', 'rgb(255, 255, 255)')
// Buttons
await page.click(':nth-match([aria-label="Pick a color"], 5)')
await page.fill('[aria-label="Color value"]', '#7209b7')
await page.click(':nth-match([aria-label="Pick a color"], 6)')
await page.fill('[aria-label="Color value"]', '#e9c46a')
await page.click(
'[data-testid="buttons-theme"] >> [aria-label="Pick a color"] >> nth=0'
)
await page.fill('input[value="#0042DA"]', '#7209b7')
await page.click(
'[data-testid="buttons-theme"] >> [aria-label="Pick a color"] >> nth=1'
)
await page.fill('input[value="#FFFFFF"]', '#e9c46a')
const button = typebotViewer(page).locator('[data-testid="button"]')
await expect(button).toHaveCSS('background-color', 'rgb(114, 9, 183)')
await expect(button).toHaveCSS('color', 'rgb(233, 196, 106)')
// Guest bubbles
await page.click(':nth-match([aria-label="Pick a color"], 3)')
await page.fill('[aria-label="Color value"]', '#d8f3dc')
await page.click(':nth-match([aria-label="Pick a color"], 4)')
await page.fill('[aria-label="Color value"]', '#264653')
await page.click(
'[data-testid="guest-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=0'
)
await page.fill('input[value="#FF8E21"]', '#d8f3dc')
await page.click(
'[data-testid="guest-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=1'
)
await page.fill('input[value="#FFFFFF"]', '#264653')
await typebotViewer(page).locator('text=Go').click()
const guestBubble = typebotViewer(page).locator(
'[data-testid="guest-bubble"]'
@@ -94,10 +106,14 @@ test.describe.parallel('Theme page', () => {
await expect(guestBubble).toHaveCSS('color', 'rgb(38, 70, 83)')
// Input
await page.click(':nth-match([aria-label="Pick a color"], 7)')
await page.fill('[aria-label="Color value"]', '#ffe8d6')
await page.click(':nth-match([aria-label="Pick a color"], 8)')
await page.fill('[aria-label="Color value"]', '#023e8a')
await page.click(
'[data-testid="inputs-theme"] >> [aria-label="Pick a color"] >> nth=0'
)
await page.fill('input[value="#FFFFFF"]', '#ffe8d6')
await page.click(
'[data-testid="inputs-theme"] >> [aria-label="Pick a color"] >> nth=1'
)
await page.fill('input[value="#303235"]', '#023e8a')
await typebotViewer(page).locator('text=Go').click()
const input = typebotViewer(page).locator('.typebot-input')
await expect(input).toHaveCSS('background-color', 'rgb(255, 232, 214)')