perf(e2e): ⚡️ Migrate to Playwright
This commit is contained in:
Baptiste Arnaud
113
apps/builder/playwright/tests/bubbles/image.spec.ts
Normal file
113
apps/builder/playwright/tests/bubbles/image.spec.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import test, { expect } from '@playwright/test'
|
||||
import {
|
||||
createTypebots,
|
||||
parseDefaultBlockWithStep,
|
||||
} from '../../services/database'
|
||||
import { BubbleStepType, defaultImageBubbleContent } from 'models'
|
||||
import { typebotViewer } from '../../services/selectorUtils'
|
||||
import path from 'path'
|
||||
|
||||
const unsplashImageSrc =
|
||||
'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
|
||||
|
||||
test.describe.parallel('Image bubble step', () => {
|
||||
test.describe('Content settings', () => {
|
||||
test('should upload image file correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-image-upload'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.IMAGE,
|
||||
content: defaultImageBubbleContent,
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
|
||||
await page.click('text=Click to edit...')
|
||||
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/typebots/${typebotId}/avatar.jpg`,
|
||||
'gm'
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
test('should import image link correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-image-link'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.IMAGE,
|
||||
content: defaultImageBubbleContent,
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
|
||||
await page.click('text=Click to edit...')
|
||||
await page.click('text=Embed link')
|
||||
await page.fill(
|
||||
'input[placeholder="Paste the image link..."]',
|
||||
unsplashImageSrc
|
||||
)
|
||||
await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
|
||||
})
|
||||
|
||||
test('should import gifs correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-gifs'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.IMAGE,
|
||||
content: defaultImageBubbleContent,
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
|
||||
await page.click('text=Click to edit...')
|
||||
await page.click('text=Giphy')
|
||||
await page.click('img >> nth=3')
|
||||
await expect(page.locator('img[alt="Step image"]')).toHaveAttribute(
|
||||
'src',
|
||||
new RegExp('giphy.com/media', 'gm')
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Preview', () => {
|
||||
test('should display correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-preview'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.IMAGE,
|
||||
content: {
|
||||
url: unsplashImageSrc,
|
||||
},
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
await page.click('text=Preview')
|
||||
await expect(typebotViewer(page).locator('img')).toHaveAttribute(
|
||||
'src',
|
||||
unsplashImageSrc
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
55
apps/builder/playwright/tests/bubbles/text.spec.ts
Normal file
55
apps/builder/playwright/tests/bubbles/text.spec.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import test, { expect } from '@playwright/test'
|
||||
import {
|
||||
createTypebots,
|
||||
parseDefaultBlockWithStep,
|
||||
} from '../../services/database'
|
||||
import { BubbleStepType, defaultTextBubbleContent } from 'models'
|
||||
import { typebotViewer } from '../../services/selectorUtils'
|
||||
|
||||
const typebotId = 'text-bubble-step'
|
||||
|
||||
test.describe('Text bubble step', () => {
|
||||
test('rich text features should work', async ({ page }) => {
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.TEXT,
|
||||
content: defaultTextBubbleContent,
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
|
||||
await page.click('[data-testid="bold-button"]')
|
||||
await page.type('div[role="textbox"]', 'Bold text')
|
||||
await page.press('div[role="textbox"]', '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.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.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.click('text=Preview')
|
||||
await expect(
|
||||
typebotViewer(page).locator('span.slate-bold >> nth=0')
|
||||
).toHaveText('Bold text')
|
||||
await expect(
|
||||
typebotViewer(page).locator('span.slate-italic >> nth=0')
|
||||
).toHaveText('Italic text')
|
||||
await expect(
|
||||
typebotViewer(page).locator('span.slate-underline >> nth=0')
|
||||
).toHaveText('Underlined text')
|
||||
})
|
||||
})
|
||||
114
apps/builder/playwright/tests/bubbles/video.spec.ts
Normal file
114
apps/builder/playwright/tests/bubbles/video.spec.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import test, { expect } from '@playwright/test'
|
||||
import {
|
||||
createTypebots,
|
||||
parseDefaultBlockWithStep,
|
||||
} from '../../services/database'
|
||||
import {
|
||||
BubbleStepType,
|
||||
defaultVideoBubbleContent,
|
||||
VideoBubbleContentType,
|
||||
} from 'models'
|
||||
import { typebotViewer } from '../../services/selectorUtils'
|
||||
|
||||
const videoSrc =
|
||||
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
|
||||
const youtubeVideoSrc = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
|
||||
const vimeoVideoSrc = 'https://vimeo.com/649301125'
|
||||
|
||||
test.describe.parallel('Video bubble step', () => {
|
||||
test.describe('Content settings', () => {
|
||||
test('should import video url correctly', async ({ page }) => {
|
||||
const typebotId = 'video-bubble-step-link'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.VIDEO,
|
||||
content: defaultVideoBubbleContent,
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
|
||||
await page.click('text=Click to edit...')
|
||||
await page.fill('input[placeholder="Paste the video link..."]', videoSrc)
|
||||
await expect(page.locator('video > source')).toHaveAttribute(
|
||||
'src',
|
||||
videoSrc
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Preview', () => {
|
||||
test('should display video correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-preview-video'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.VIDEO,
|
||||
content: {
|
||||
type: VideoBubbleContentType.URL,
|
||||
url: videoSrc,
|
||||
},
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
await page.click('text=Preview')
|
||||
await expect(
|
||||
typebotViewer(page).locator('video > source')
|
||||
).toHaveAttribute('src', videoSrc)
|
||||
})
|
||||
|
||||
test('should display youtube video correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-preview-youtube'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.VIDEO,
|
||||
content: {
|
||||
type: VideoBubbleContentType.YOUTUBE,
|
||||
url: youtubeVideoSrc,
|
||||
id: 'dQw4w9WgXcQ',
|
||||
},
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
await page.click('text=Preview')
|
||||
await expect(typebotViewer(page).locator('iframe')).toHaveAttribute(
|
||||
'src',
|
||||
'https://www.youtube.com/embed/dQw4w9WgXcQ'
|
||||
)
|
||||
})
|
||||
|
||||
test('should display vimeo video correctly', async ({ page }) => {
|
||||
const typebotId = 'image-bubble-step-preview-vimeo'
|
||||
await createTypebots([
|
||||
{
|
||||
id: typebotId,
|
||||
...parseDefaultBlockWithStep({
|
||||
type: BubbleStepType.VIDEO,
|
||||
content: {
|
||||
type: VideoBubbleContentType.VIMEO,
|
||||
url: vimeoVideoSrc,
|
||||
id: '649301125',
|
||||
},
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
await page.goto(`/typebots/${typebotId}/edit`)
|
||||
await page.click('text=Preview')
|
||||
await expect(typebotViewer(page).locator('iframe')).toHaveAttribute(
|
||||
'src',
|
||||
'https://player.vimeo.com/video/649301125'
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user