feat: add e2e

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')
+})

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')
+})

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') })]),
+  )
+})

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')
+})

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/)
+})

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/)
+})

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)
+})

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(''),
+  )
+})