Skip to content

Commit c281ad1

Browse files
wuyiping0628wuyiping0628
authored
feat: add e2e (#472)
1 parent c7f8992 commit c281ad1

8 files changed

Lines changed: 204 additions & 0 deletions

‎packages/docs/fluent-editor/demos/counter-count.spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('has toolbar and custom max character counter', async ({ page }) => {
4+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/counter')
5+
6+
const toolbar = page.locator('.ql-toolbar').nth(1)
7+
const editor = page.locator('.ql-editor').nth(1)
8+
const counter = page.locator('.ql-counter').nth(1)
9+
10+
await expect(toolbar).toBeVisible()
11+
await expect(editor).toBeVisible()
12+
await expect(counter).toBeVisible()
13+
await expect(counter).toHaveText('0/2000 characters')
14+
15+
await editor.click()
16+
await page.keyboard.type('abc')
17+
await expect(counter).toHaveText('3/2000 characters')
18+
})

‎packages/docs/fluent-editor/demos/counter.spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('has toolbar and default max character counter', async ({ page }) => {
4+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/counter')
5+
6+
const toolbar = page.locator('.ql-toolbar').first()
7+
const editor = page.locator('.ql-editor').first()
8+
const counter = page.locator('.ql-counter').first()
9+
10+
await expect(toolbar).toBeVisible()
11+
await expect(editor).toBeVisible()
12+
await expect(counter).toBeVisible()
13+
await expect(counter).toHaveText('0/500 characters')
14+
15+
await editor.click()
16+
await page.keyboard.type('abc')
17+
await expect(counter).toHaveText('3/500 characters')
18+
})

‎packages/docs/fluent-editor/demos/get-content-delta.spec.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('has toolbar and syncs Delta preview on text change', async ({ page }) => {
4+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/get-content')
5+
6+
const block = page.locator('.vp-raw').filter({ has: page.locator('#editor-get-content-delta') })
7+
const toolbar = block.locator('.ql-toolbar').first()
8+
const editor = page.locator('#editor-get-content-delta .ql-editor')
9+
const preview = block.locator('.article.ql-editor')
10+
11+
await expect(toolbar).toBeVisible({ timeout: 30_000 })
12+
await expect(editor).toBeVisible({ timeout: 30_000 })
13+
await expect(preview).toBeVisible({ timeout: 30_000 })
14+
await expect(editor).toContainText('Hello')
15+
await expect(editor).toContainText('TinyEditor')
16+
17+
const initialDelta = JSON.parse(await preview.innerText())
18+
expect(initialDelta.ops).toEqual(
19+
expect.arrayContaining([
20+
expect.objectContaining({ insert: 'Hello ' }),
21+
expect.objectContaining({ insert: 'TinyEditor', attributes: { bold: true } }),
22+
expect.objectContaining({ insert: '!\n' }),
23+
]),
24+
)
25+
26+
await editor.click()
27+
await page.keyboard.type(' More')
28+
await expect(preview).toContainText('More')
29+
30+
const updatedDelta = JSON.parse(await preview.innerText())
31+
expect(updatedDelta.ops).toEqual(
32+
expect.arrayContaining([expect.objectContaining({ insert: expect.stringContaining('More') })]),
33+
)
34+
})

‎packages/docs/fluent-editor/demos/get-content-html.spec.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
const initialHtml = [
4+
'<p>',
5+
'Hello ',
6+
'<strong>TinyEditor</strong>',
7+
'!',
8+
'</p>',
9+
].join('')
10+
11+
test('has toolbar and syncs HTML preview on text change', async ({ page }) => {
12+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/get-content')
13+
14+
const block = page.locator('.vp-raw').filter({ has: page.locator('#editor-get-content-html') })
15+
const toolbar = block.locator('.ql-toolbar').first()
16+
const editor = page.locator('#editor-get-content-html .ql-editor')
17+
const preview = block.locator('.article.ql-editor')
18+
19+
await expect(toolbar).toBeVisible({ timeout: 30_000 })
20+
await expect(editor).toBeVisible({ timeout: 30_000 })
21+
await expect(preview).toBeVisible({ timeout: 30_000 })
22+
await expect(await editor.innerHTML()).toEqual(initialHtml)
23+
await expect(await preview.innerHTML()).toEqual(initialHtml)
24+
25+
await editor.click()
26+
await page.keyboard.type(' More')
27+
await expect(await preview.innerHTML()).toEqual(await editor.innerHTML())
28+
await expect(preview).toContainText('More')
29+
})

‎packages/docs/fluent-editor/demos/header-list-container.spec.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('has toolbar, headings and header list with scroll container config', async ({ page }) => {
4+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/header-list')
5+
6+
const block = page.locator('.vp-raw').nth(1)
7+
const toolbar = block.locator('.ql-toolbar').first()
8+
const editor = block.locator('.ql-editor').first()
9+
const headerList = page.locator('.header-list').nth(1)
10+
const headerListBtn = toolbar.locator('.ql-header-list')
11+
12+
await expect(toolbar).toBeVisible({ timeout: 30_000 })
13+
await expect(editor).toBeVisible({ timeout: 30_000 })
14+
await expect(headerListBtn).toBeVisible()
15+
await expect(editor.locator('h1').first()).toHaveText('header 1')
16+
await expect(headerList).toHaveClass(/is-hidden/)
17+
18+
await headerListBtn.click()
19+
await expect(headerList).not.toHaveClass(/is-hidden/)
20+
await expect(headerList).toContainText('header 1')
21+
await expect(headerList).toContainText('header 2.1.1')
22+
await expect(headerList).toContainText('header 6')
23+
24+
await headerListBtn.click()
25+
await expect(headerList).toHaveClass(/is-hidden/)
26+
})

‎packages/docs/fluent-editor/demos/header-list.spec.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('has toolbar, headings and toggles header list panel', async ({ page }) => {
4+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/header-list')
5+
6+
const block = page.locator('.vp-raw').nth(0)
7+
const toolbar = block.locator('.ql-toolbar').first()
8+
const editor = block.locator('.ql-editor').first()
9+
const headerList = page.locator('.header-list').nth(0)
10+
const headerListBtn = toolbar.locator('.ql-header-list')
11+
12+
await expect(toolbar).toBeVisible({ timeout: 30_000 })
13+
await expect(editor).toBeVisible({ timeout: 30_000 })
14+
await expect(headerListBtn).toBeVisible()
15+
await expect(editor.locator('h1').first()).toHaveText('header 1')
16+
await expect(headerList).toHaveClass(/is-hidden/)
17+
18+
await headerListBtn.click()
19+
await expect(headerList).not.toHaveClass(/is-hidden/)
20+
await expect(headerList).toContainText('header 1')
21+
await expect(headerList).toContainText('header 1.1')
22+
await expect(headerList).toContainText('header 2')
23+
24+
await headerListBtn.click()
25+
await expect(headerList).toHaveClass(/is-hidden/)
26+
})

‎packages/docs/fluent-editor/demos/readonly.spec.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
const initialHtml = [
4+
'<p>',
5+
'Hello ',
6+
'<strong>TinyEditor</strong>',
7+
'!',
8+
'</p>',
9+
'<p>',
10+
'官网: ',
11+
'<a class="ql-normal-link" href="https://opentiny.github.io/tiny-editor" target="_blank">https://opentiny.github.io/tiny-editor</a>',
12+
'</p>',
13+
'<p>',
14+
'GitHub: ',
15+
'<a class="ql-normal-link" href="https://github.com/opentiny/tiny-editor" target="_blank">https://github.com/opentiny/tiny-editor</a>',
16+
'</p>',
17+
].join('')
18+
19+
test('renders readonly editor without toolbar', async ({ page }) => {
20+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/readonly')
21+
22+
const block = page.locator('.vp-raw').first()
23+
const editor = page.locator('#editor-readonly .ql-editor')
24+
25+
await expect(block.locator('.ql-toolbar')).toHaveCount(0)
26+
await expect(editor).toBeVisible({ timeout: 30_000 })
27+
await expect(editor).toHaveAttribute('contenteditable', 'false')
28+
await expect(await editor.innerHTML()).toEqual(initialHtml)
29+
30+
await editor.click()
31+
await page.keyboard.type('test')
32+
await expect(await editor.innerHTML()).toEqual(initialHtml)
33+
})

‎packages/docs/fluent-editor/demos/set-content-delta.spec.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('should initialize editor with Delta content', async ({ page }) => {
4+
await page.goto('http://localhost:5173/tiny-editor/docs/demo/set-content')
5+
6+
const toolbar = page.locator('.ql-toolbar').nth(1)
7+
const editor = page.locator('#editor-set-content-delta .ql-editor')
8+
9+
await expect(toolbar).toBeVisible({ timeout: 30_000 })
10+
await expect(editor).toBeVisible({ timeout: 30_000 })
11+
await expect(await editor.innerHTML()).toEqual(
12+
[
13+
'<p>',
14+
'Hello ',
15+
'<strong>TinyEditor</strong>',
16+
'!',
17+
'</p>',
18+
].join(''),
19+
)
20+
})

0 commit comments

Comments
 (0)