From fa00a86a19e42118abba3c07ce0205a9fff947a9 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Thu, 21 May 2026 20:10:14 -0700
Subject: [PATCH] feat: add e2e

---
 .../fluent-editor/demos/counter-count.spec.ts | 18 ++++++++++
 .../docs/fluent-editor/demos/counter.spec.ts  | 18 ++++++++++
 .../demos/get-content-delta.spec.ts           | 34 +++++++++++++++++++
 .../demos/get-content-html.spec.ts            | 29 ++++++++++++++++
 .../demos/header-list-container.spec.ts       | 26 ++++++++++++++
 .../fluent-editor/demos/header-list.spec.ts   | 26 ++++++++++++++
 .../docs/fluent-editor/demos/readonly.spec.ts | 33 ++++++++++++++++++
 .../demos/set-content-delta.spec.ts           | 20 +++++++++++
 8 files changed, 204 insertions(+)
 create mode 100644 packages/docs/fluent-editor/demos/counter-count.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/counter.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/get-content-delta.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/get-content-html.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/header-list-container.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/header-list.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/readonly.spec.ts
 create mode 100644 packages/docs/fluent-editor/demos/set-content-delta.spec.ts

diff --git a/packages/docs/fluent-editor/demos/counter-count.spec.ts b/packages/docs/fluent-editor/demos/counter-count.spec.ts
new file mode 100644
index 00000000..da8ba12c
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/counter-count.spec.ts
@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar and custom max character counter', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/counter')
+
+  const toolbar = page.locator('.ql-toolbar').nth(1)
+  const editor = page.locator('.ql-editor').nth(1)
+  const counter = page.locator('.ql-counter').nth(1)
+
+  await expect(toolbar).toBeVisible()
+  await expect(editor).toBeVisible()
+  await expect(counter).toBeVisible()
+  await expect(counter).toHaveText('0/2000 characters')
+
+  await editor.click()
+  await page.keyboard.type('abc')
+  await expect(counter).toHaveText('3/2000 characters')
+})
diff --git a/packages/docs/fluent-editor/demos/counter.spec.ts b/packages/docs/fluent-editor/demos/counter.spec.ts
new file mode 100644
index 00000000..68728a12
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/counter.spec.ts
@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar and default max character counter', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/counter')
+
+  const toolbar = page.locator('.ql-toolbar').first()
+  const editor = page.locator('.ql-editor').first()
+  const counter = page.locator('.ql-counter').first()
+
+  await expect(toolbar).toBeVisible()
+  await expect(editor).toBeVisible()
+  await expect(counter).toBeVisible()
+  await expect(counter).toHaveText('0/500 characters')
+
+  await editor.click()
+  await page.keyboard.type('abc')
+  await expect(counter).toHaveText('3/500 characters')
+})
diff --git a/packages/docs/fluent-editor/demos/get-content-delta.spec.ts b/packages/docs/fluent-editor/demos/get-content-delta.spec.ts
new file mode 100644
index 00000000..728d3a86
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/get-content-delta.spec.ts
@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar and syncs Delta preview on text change', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/get-content')
+
+  const block = page.locator('.vp-raw').filter({ has: page.locator('#editor-get-content-delta') })
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = page.locator('#editor-get-content-delta .ql-editor')
+  const preview = block.locator('.article.ql-editor')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(preview).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toContainText('Hello')
+  await expect(editor).toContainText('TinyEditor')
+
+  const initialDelta = JSON.parse(await preview.innerText())
+  expect(initialDelta.ops).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({ insert: 'Hello ' }),
+      expect.objectContaining({ insert: 'TinyEditor', attributes: { bold: true } }),
+      expect.objectContaining({ insert: '!\n' }),
+    ]),
+  )
+
+  await editor.click()
+  await page.keyboard.type(' More')
+  await expect(preview).toContainText('More')
+
+  const updatedDelta = JSON.parse(await preview.innerText())
+  expect(updatedDelta.ops).toEqual(
+    expect.arrayContaining([expect.objectContaining({ insert: expect.stringContaining('More') })]),
+  )
+})
diff --git a/packages/docs/fluent-editor/demos/get-content-html.spec.ts b/packages/docs/fluent-editor/demos/get-content-html.spec.ts
new file mode 100644
index 00000000..7adec3b4
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/get-content-html.spec.ts
@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+const initialHtml = [
+  '<p>',
+  'Hello ',
+  '<strong>TinyEditor</strong>',
+  '!',
+  '</p>',
+].join('')
+
+test('has toolbar and syncs HTML preview on text change', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/get-content')
+
+  const block = page.locator('.vp-raw').filter({ has: page.locator('#editor-get-content-html') })
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = page.locator('#editor-get-content-html .ql-editor')
+  const preview = block.locator('.article.ql-editor')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(preview).toBeVisible({ timeout: 30_000 })
+  await expect(await editor.innerHTML()).toEqual(initialHtml)
+  await expect(await preview.innerHTML()).toEqual(initialHtml)
+
+  await editor.click()
+  await page.keyboard.type(' More')
+  await expect(await preview.innerHTML()).toEqual(await editor.innerHTML())
+  await expect(preview).toContainText('More')
+})
diff --git a/packages/docs/fluent-editor/demos/header-list-container.spec.ts b/packages/docs/fluent-editor/demos/header-list-container.spec.ts
new file mode 100644
index 00000000..42a84639
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/header-list-container.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar, headings and header list with scroll container config', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/header-list')
+
+  const block = page.locator('.vp-raw').nth(1)
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+  const headerList = page.locator('.header-list').nth(1)
+  const headerListBtn = toolbar.locator('.ql-header-list')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(headerListBtn).toBeVisible()
+  await expect(editor.locator('h1').first()).toHaveText('header 1')
+  await expect(headerList).toHaveClass(/is-hidden/)
+
+  await headerListBtn.click()
+  await expect(headerList).not.toHaveClass(/is-hidden/)
+  await expect(headerList).toContainText('header 1')
+  await expect(headerList).toContainText('header 2.1.1')
+  await expect(headerList).toContainText('header 6')
+
+  await headerListBtn.click()
+  await expect(headerList).toHaveClass(/is-hidden/)
+})
diff --git a/packages/docs/fluent-editor/demos/header-list.spec.ts b/packages/docs/fluent-editor/demos/header-list.spec.ts
new file mode 100644
index 00000000..611b21b5
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/header-list.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar, headings and toggles header list panel', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/header-list')
+
+  const block = page.locator('.vp-raw').nth(0)
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+  const headerList = page.locator('.header-list').nth(0)
+  const headerListBtn = toolbar.locator('.ql-header-list')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(headerListBtn).toBeVisible()
+  await expect(editor.locator('h1').first()).toHaveText('header 1')
+  await expect(headerList).toHaveClass(/is-hidden/)
+
+  await headerListBtn.click()
+  await expect(headerList).not.toHaveClass(/is-hidden/)
+  await expect(headerList).toContainText('header 1')
+  await expect(headerList).toContainText('header 1.1')
+  await expect(headerList).toContainText('header 2')
+
+  await headerListBtn.click()
+  await expect(headerList).toHaveClass(/is-hidden/)
+})
diff --git a/packages/docs/fluent-editor/demos/readonly.spec.ts b/packages/docs/fluent-editor/demos/readonly.spec.ts
new file mode 100644
index 00000000..50ee88ba
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/readonly.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+const initialHtml = [
+  '<p>',
+  'Hello ',
+  '<strong>TinyEditor</strong>',
+  '!',
+  '</p>',
+  '<p>',
+  '官网: ',
+  '<a class="ql-normal-link" href="https://opentiny.github.io/tiny-editor" target="_blank">https://opentiny.github.io/tiny-editor</a>',
+  '</p>',
+  '<p>',
+  'GitHub: ',
+  '<a class="ql-normal-link" href="https://github.com/opentiny/tiny-editor" target="_blank">https://github.com/opentiny/tiny-editor</a>',
+  '</p>',
+].join('')
+
+test('renders readonly editor without toolbar', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/readonly')
+
+  const block = page.locator('.vp-raw').first()
+  const editor = page.locator('#editor-readonly .ql-editor')
+
+  await expect(block.locator('.ql-toolbar')).toHaveCount(0)
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toHaveAttribute('contenteditable', 'false')
+  await expect(await editor.innerHTML()).toEqual(initialHtml)
+
+  await editor.click()
+  await page.keyboard.type('test')
+  await expect(await editor.innerHTML()).toEqual(initialHtml)
+})
diff --git a/packages/docs/fluent-editor/demos/set-content-delta.spec.ts b/packages/docs/fluent-editor/demos/set-content-delta.spec.ts
new file mode 100644
index 00000000..15b76967
--- /dev/null
+++ b/packages/docs/fluent-editor/demos/set-content-delta.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+test('should initialize editor with Delta content', async ({ page }) => {
+  await page.goto('http://localhost:5173/tiny-editor/docs/demo/set-content')
+
+  const toolbar = page.locator('.ql-toolbar').nth(1)
+  const editor = page.locator('#editor-set-content-delta .ql-editor')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(await editor.innerHTML()).toEqual(
+    [
+      '<p>',
+      'Hello ',
+      '<strong>TinyEditor</strong>',
+      '!',
+      '</p>',
+    ].join(''),
+  )
+})