feat: add e2e

packages/docs/fluent-editor/demos/add-toolbar-item.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('AddToolbarItem.vue', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:5173/tiny-editor/docs/demo/add-toolbar-item')
+    await page.goto('/tiny-editor/docs/demo/add-toolbar-item')
   })
 
   test('should render the editor', async ({ page }) => {
@@ -36,8 +36,9 @@ test.describe('AddToolbarItem.vue', () => {
     await page.keyboard.type(' Bad')
 
     const editorHtml = await editor.innerHTML()
-    expect(editorHtml).toContain('<span style="color: rgb(92, 179, 0);"> Good</span>')
-    expect(editorHtml).toContain('<span style="color: rgb(242, 48, 48);"> Bad</span>')
+    // Quill stores a leading space in inline formats as &nbsp;
+    expect(editorHtml).toContain('<span style="color: rgb(92, 179, 0);">&nbsp;Good</span>')
+    expect(editorHtml).toContain('<span style="color: rgb(242, 48, 48);">&nbsp;Bad</span>')
   })
 
   // 添加更多测试用例

packages/docs/fluent-editor/demos/ai.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar AI button and opens AI input dialog', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/ai')
+
+  const toolbar = page.locator('.ql-toolbar').first()
+  const editor = page.locator('#editor-add-toolbar-item .ql-editor')
+  const aiBtn = toolbar.locator('.ql-ai')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toContainText('我曾经跨过山和大海')
+  await expect(aiBtn).toBeVisible()
+
+  await editor.click()
+  await aiBtn.click()
+  await expect(page.locator('.ql-ai-dialog')).toBeVisible()
+  await expect(page.locator('.ql-ai-input')).toBeVisible()
+})

packages/docs/fluent-editor/demos/basic-usage.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test('has toolbar', async ({ page }) => {
   // page.on('pageerror', exception => expect(exception).toBeNull())
-  await page.goto('http://localhost:5173/tiny-editor/docs/demo/basic-usage')
+  await page.goto('/tiny-editor/docs/demo/basic-usage')
 
   const toolbar = page.locator('.ql-toolbar')
   const editor = page.locator('.ql-editor')

packages/docs/fluent-editor/demos/code-block-highlight.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar, code-block button and golang language option', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/code-block-highlight')
+
+  const toolbar = page.locator('.ql-toolbar').first()
+  const editor = page.locator('#editor .ql-editor')
+  const codeBlockBtn = toolbar.locator('.ql-code-block')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(codeBlockBtn).toBeVisible()
+
+  await editor.click()
+  await codeBlockBtn.click()
+
+  const codeBlock = editor.locator('.ql-code-block-container').first()
+  await expect(codeBlock).toBeVisible()
+  await expect(codeBlock.locator('option[value="go"]')).toHaveText('Golang')
+
+  await editor.locator('.ql-code-block').first().click()
+  await page.keyboard.type('func main() {}')
+  await expect(editor.locator('.ql-code-block').first()).toContainText('func main() {}')
+})

packages/docs/fluent-editor/demos/collaborative-editing.spec.ts

@@ -1,12 +1,21 @@
-import { type Browser, chromium, expect, firefox, type Page, test } from '@playwright/test'
-
-const DEMO_URL = 'http://localhost:5173/tiny-editor/docs/demo/collaborative-editing'
+import { type Browser, chromium, expect, type Page, test } from '@playwright/test'
 
 test.describe.configure({ mode: 'serial' })
 
-async function openTwoPages(): Promise<[Page, Page, Browser, Browser]> {
+let DEMO_URL = ''
+let collabWsReachable = false
+
+// Must match collaborative-editing.vue: serverUrl + roomName
+const COLLAB_WS_URL = 'wss://ai.opentiny.design/tiny-editor/tiny-editor-document-demo-roomName'
+
+function collabUrl(baseURL: string): string {
+  return `${baseURL.replace(/\/$/, '')}/tiny-editor/docs/demo/collaborative-editing`
+}
+
+async function openTwoPages(baseURL: string): Promise<[Page, Page, Browser, Browser]> {
+  DEMO_URL = collabUrl(baseURL)
   const browser1 = await chromium.launch()
-  const browser2 = await firefox.launch()
+  const browser2 = await chromium.launch()
 
   const page1 = await browser1.newPage()
   const page2 = await browser2.newPage()
@@ -17,15 +26,17 @@ async function openTwoPages(): Promise<[Page, Page, Browser, Browser]> {
   ])
   const editor1 = page1.locator('.ql-editor')
   const editor2 = page2.locator('.ql-editor')
-  await expect(editor1).toBeVisible()
-  await expect(editor2).toBeVisible()
+  await expect(editor1).toBeVisible({ timeout: 30_000 })
+  await expect(editor2).toBeVisible({ timeout: 30_000 })
   return [page1, page2, browser1, browser2]
 }
 
 async function typeSync(page1: Page, page2: Page, text: string): Promise<void> {
   await page1.locator('.ql-editor').click()
   await page1.keyboard.type(text)
-  await expect.poll(async () => (await page2.locator('.ql-editor').textContent() || '').includes(text)).toBeTruthy()
+  await expect.poll(async () => (await page2.locator('.ql-editor').textContent() || '').includes(text), {
+    timeout: 15_000,
+  }).toBeTruthy()
 }
 
 async function selectAll(page: Page): Promise<void> {
@@ -34,24 +45,62 @@ async function selectAll(page: Page): Promise<void> {
 
 let p1: Page, p2: Page, b1: Browser, b2: Browser
 
-test.beforeEach(async () => {
-  [p1, p2, b1, b2] = await openTwoPages()
+test.beforeAll(async ({ browser }) => {
+  const page = await browser.newPage()
+  try {
+    collabWsReachable = await page.evaluate((wsUrl) => new Promise<boolean>((resolve) => {
+      const ws = new WebSocket(wsUrl)
+      const timer = window.setTimeout(() => {
+        ws.close()
+        resolve(false)
+      }, 5000)
+      ws.addEventListener('open', () => {
+        window.clearTimeout(timer)
+        ws.close()
+        resolve(true)
+      })
+      ws.addEventListener('error', () => {
+        window.clearTimeout(timer)
+        resolve(false)
+      })
+    }), COLLAB_WS_URL)
+  }
+  finally {
+    await page.close()
+  }
+})
+
+test.beforeEach(async ({ baseURL }, testInfo) => {
+  const needsSync = testInfo.title !== 'startup collaborative-editing test'
+  if (needsSync && !collabWsReachable)
+    test.skip(true, 'remote collaborative websocket is not reachable')
+
+  ;[p1, p2, b1, b2] = await openTwoPages(baseURL!)
 })
 
 test.afterEach(async () => {
   for (const page of [p1, p2]) {
-    if (!page) continue
-    const editor = page.locator('.ql-editor')
-    if (await editor.count()) {
-      await editor.first().click({ timeout: 2000 }).catch(() => {})
-      await selectAll(page)
-      await page.keyboard.press('Delete').catch(() => {})
+    if (!page || page.isClosed()) continue
+    try {
+      const editor = page.locator('.ql-editor')
+      if (await editor.count()) {
+        await editor.first().click({ timeout: 2000 }).catch(() => {})
+        await selectAll(page)
+        await page.keyboard.press('Delete').catch(() => {})
+      }
+    }
+    catch {
+      // page may already be closed when a test is skipped
     }
   }
   await Promise.all([
     b1?.close().catch(() => {}),
     b2?.close().catch(() => {}),
   ])
+  p1 = undefined as unknown as Page
+  p2 = undefined as unknown as Page
+  b1 = undefined as unknown as Browser
+  b2 = undefined as unknown as Browser
 })
 
 test('startup collaborative-editing test', async () => {

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

@@ -1,7 +1,7 @@
 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')
+  await page.goto('/tiny-editor/docs/demo/counter')
 
   const toolbar = page.locator('.ql-toolbar').nth(1)
   const editor = page.locator('.ql-editor').nth(1)

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

@@ -1,7 +1,7 @@
 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')
+  await page.goto('/tiny-editor/docs/demo/counter')
 
   const toolbar = page.locator('.ql-toolbar').first()
   const editor = page.locator('.ql-editor').first()

packages/docs/fluent-editor/demos/custom-toolbar.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('renders full custom toolbar with extra tools and placeholder', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/custom-toolbar')
+
+  const block = page.locator('.vp-raw').first()
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toHaveAttribute('data-placeholder', '请输入内容...')
+  await expect(toolbar.locator('.ql-undo')).toBeVisible()
+  await expect(toolbar.locator('.ql-redo')).toBeVisible()
+  await expect(toolbar.locator('.ql-emoji')).toBeVisible()
+  await expect(toolbar.locator('.ql-screenshot')).toBeVisible()
+  await expect(toolbar.locator('.ql-format-painter')).toBeVisible()
+  await expect(toolbar.locator('.ql-picker.ql-font')).toBeVisible()
+})

packages/docs/fluent-editor/demos/emoji.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+test('has toolbar emoji button and opens emoji picker', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/emoji')
+
+  const toolbar = page.locator('.ql-toolbar').first()
+  const editor = page.locator('#editor .ql-editor')
+  const emojiBtn = toolbar.locator('.ql-emoji')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(emojiBtn).toBeVisible()
+
+  await editor.click()
+  await emojiBtn.click()
+  await expect(page.locator('#emoji-picker')).toBeVisible()
+})

packages/docs/fluent-editor/demos/file-upload-handle.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test'
+
+const pngBuffer = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+  'base64',
+)
+
+test('uploads image and uses fail handler placeholder', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/file-upload')
+
+  const block = page.locator('.vp-raw').nth(1)
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(toolbar.getByLabel('image')).toBeVisible()
+  await expect(toolbar.getByLabel('video')).toBeVisible()
+  await expect(toolbar.getByLabel('file')).toBeVisible()
+
+  await toolbar.getByLabel('image').click()
+  await toolbar.locator('input.ql-image').setInputFiles({
+    name: 'a.png',
+    mimeType: 'image/png',
+    buffer: pngBuffer,
+  })
+
+  const image = editor.getByRole('img').first()
+  await expect(image).toBeVisible({ timeout: 10_000 })
+  await expect(image).toHaveAttribute('src', /edge/)
+})

packages/docs/fluent-editor/demos/file-upload.spec.ts

@@ -7,7 +7,7 @@ const currentDirectory = path.dirname(__filename)
 const baseUrl = path.dirname(currentDirectory)
 
 test('image-upload', async ({ page }) => {
-  await page.goto('http://localhost:5173/tiny-editor/docs/demo/file-upload')
+  await page.goto('/tiny-editor/docs/demo/file-upload')
 
   // upload
   await page.getByLabel('image').first().click()

packages/docs/fluent-editor/demos/flow-chart-background.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test'
+
+test('renders flow chart background demo with initial nodes', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/flow-chart')
+
+  const block = page.locator('.vp-raw').nth(2)
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+  const chart = editor.locator('.ql-flow-chart-item')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(toolbar.locator('.ql-flow-chart')).toBeVisible()
+  await expect(chart).toBeVisible({ timeout: 30_000 })
+  await expect(editor.locator('.lf-node')).toHaveCount(2)
+  await expect(editor.locator('.lf-edge')).toHaveCount(1)
+})

packages/docs/fluent-editor/demos/flow-chart-grid.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+
+test('renders flow chart grid demo with initial nodes', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/flow-chart')
+
+  const block = page.locator('.vp-raw').nth(1)
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(toolbar.locator('.ql-flow-chart')).toBeVisible()
+  await expect(editor.locator('.ql-flow-chart-item')).toBeVisible({ timeout: 30_000 })
+  await expect(editor.locator('.lf-node')).toHaveCount(2)
+  await expect(editor.locator('.lf-edge')).toHaveCount(1)
+})

packages/docs/fluent-editor/demos/flow-chart-resize.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+
+test('renders flow chart with resize handles', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/flow-chart')
+
+  const block = page.locator('.vp-raw').nth(3)
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = block.locator('.ql-editor').first()
+  const chart = editor.locator('.ql-flow-chart-item')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(toolbar.locator('.ql-flow-chart')).toBeVisible()
+  await expect(chart).toBeVisible({ timeout: 30_000 })
+  await expect(chart.locator('.ql-flow-chart-resize-handle')).toHaveCount(4)
+})

packages/docs/fluent-editor/demos/flow-chart.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('FlowChart.vue', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:5173/tiny-editor/docs/demo/flow-chart')
+    await page.goto('/tiny-editor/docs/demo/flow-chart')
   })
 
   test('should render the editor', async ({ page }) => {

packages/docs/fluent-editor/demos/format-painter.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test'
+
+test('copies bold format with format painter', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/format-painter')
+
+  const toolbar = page.locator('.ql-toolbar').first()
+  const editor = page.locator('#editor .ql-editor')
+  const painterBtn = toolbar.locator('.ql-format-painter')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(painterBtn).toBeVisible()
+
+  await editor.click()
+  await toolbar.locator('.ql-bold').click()
+  await page.keyboard.type('Bold')
+  await page.keyboard.press('ControlOrMeta+a')
+  await painterBtn.click()
+  await expect(painterBtn).toHaveClass(/ql-active/)
+
+  await page.keyboard.press('End')
+  await page.keyboard.type(' Text')
+  await expect(editor.locator('strong')).toContainText('Bold')
+  await expect(editor.locator('strong')).toContainText('Text')
+})

packages/docs/fluent-editor/demos/formula-chemistry.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+
+test('inserts chemistry formula with mhchem', async ({ page }) => {
+  await page.goto('/tiny-editor/docs/demo/formula')
+
+  const block = page.locator('.vp-raw').filter({ has: page.locator('#chemistry-editor') })
+  const toolbar = block.locator('.ql-toolbar').first()
+  const editor = page.locator('#chemistry-editor .ql-editor')
+  const formulaBtn = toolbar.locator('.ql-formula')
+
+  await expect(toolbar).toBeVisible({ timeout: 30_000 })
+  await expect(editor).toBeVisible({ timeout: 30_000 })
+  await expect(formulaBtn).toBeVisible()
+
+  await editor.click()
+  await formulaBtn.click()
+  const input = page.locator('.ql-tooltip[data-mode="formula"] input[data-formula]')
+  await expect(input).toBeVisible()
+  await input.fill('\\ce{H2O}')
+  await input.blur()
+  await expect(editor.locator('.katex')).toBeVisible()
+})