zzxming · zzxming · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -28,8 +28,14 @@ jobs:
       - name: Install
         run: pnpm i
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
       - name: Build
         run: pnpm build
 
-      - name: Typecheck
-        run: pnpm test
+      - name: Unit Tests
+        run: pnpm test:unit
+
+      - name: Run Playwright tests
+        run: npx playwright test
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,9 @@ coverage
 
 docs/*.css
 docs/*umd.js
-docs/*umd.js.map
+docs/*umd.js.map
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/docs/test.html b/docs/test.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Quill Table Module Demo</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+      integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
+      crossorigin="anonymous"
+    />
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
+      integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
+    <script type="module" src="./index.umd.js"></script>
+    <link href="./index.css" rel="stylesheet" />
+    <link href="./table-creator.css" rel="stylesheet" />
+    <style>
+      .ql-editor {
+        line-height: 1.4;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div style="display: flex; flex-direction: column; max-width: 1200px; margin: auto">
+      <div id="container1">
+        <button id="btn1">console</button>
+        <div id="editor1" style="height: 600px"></div>
+        <div id="output1"></div>
+      </div>
+      <div id="container2">
+        <button id="btn2">console</button>
+        <div id="editor2" style="height: 600px"></div>
+        <div id="output2"></div>
+      </div>
+      <div id="container3">
+        <button id="btn3">console</button>
+        <div id="editor3" style="height: 600px"></div>
+        <div id="output3"></div>
+      </div>
+      <div id="container4">
+        <button id="btn4">console</button>
+        <div id="editor4" style="height: 600px"></div>
+        <div id="output4"></div>
+      </div>
+    </div>
+    <script type="module" src="./test.js"></script>
+  </body>
+</html>
diff --git a/docs/test.js b/docs/test.js
@@ -0,0 +1,127 @@
+/* eslint-disable no-undef */
+const Quill = window.Quill;
+const {
+  default: TableUp,
+  TableAlign,
+  TableVirtualScrollbar,
+  TableResizeLine,
+  TableResizeBox,
+  TableMenuContextmenu,
+  TableMenuSelect,
+  TableResizeScale,
+  defaultCustomSelect,
+  TableSelection,
+} = window.TableUp;
+
+Quill.register({
+  [`modules/${TableUp.moduleName}`]: TableUp,
+}, true);
+
+const toolbarConfig = [
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block', 'code'],
+  ['link', 'image', 'video', 'formula'],
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  [{ script: 'sub' }, { script: 'super' }],
+  [{ indent: '-1' }, { indent: '+1' }],
+  [{ direction: 'rtl' }],
+  [{ size: ['small', false, 'large', 'huge'] }],
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  [{ color: [] }, { background: [] }],
+  [{ font: [] }],
+  [{ align: [] }],
+  [{ [TableUp.toolName]: [] }],
+  ['clean'],
+];
+
+const quills = [
+  {
+    full: false,
+    scrollbar: TableVirtualScrollbar,
+    align: TableAlign,
+    resize: TableResizeLine,
+    resizeScale: TableResizeScale,
+    customSelect: defaultCustomSelect,
+    customBtn: true,
+    selection: TableSelection,
+    selectionOptions: {
+      tableMenu: TableMenuContextmenu,
+    },
+  },
+  {
+    full: false,
+    scrollbar: TableVirtualScrollbar,
+    align: TableAlign,
+    resize: TableResizeBox,
+    resizeScale: TableResizeScale,
+    customSelect: defaultCustomSelect,
+    customBtn: true,
+    selection: TableSelection,
+    selectionOptions: {
+      tableMenu: TableMenuSelect,
+    },
+  },
+  {
+    full: true,
+    scrollbar: TableVirtualScrollbar,
+    align: TableAlign,
+    resize: TableResizeLine,
+    resizeScale: TableResizeScale,
+    customSelect: defaultCustomSelect,
+    customBtn: true,
+    selection: TableSelection,
+    selectionOptions: {
+      tableMenu: TableMenuContextmenu,
+    },
+  },
+  {
+    full: true,
+    scrollbar: TableVirtualScrollbar,
+    align: TableAlign,
+    resize: TableResizeBox,
+    resizeScale: TableResizeScale,
+    customSelect: defaultCustomSelect,
+    customBtn: true,
+    selection: TableSelection,
+    selectionOptions: {
+      tableMenu: TableMenuSelect,
+    },
+  },
+].map((ops, i) => {
+  return new Quill(`#editor${i + 1}`, {
+    // debug: 'info',
+    theme: 'snow',
+    modules: {
+      toolbar: toolbarConfig,
+      [TableUp.moduleName]: ops,
+    },
+  });
+});
+
+window.quills = quills;
+
+const output = [
+  output1,
+  output2,
+  output3,
+  output4,
+];
+
+for (const [i, btn] of [
+  btn1,
+  btn2,
+  btn3,
+  btn4,
+].entries()) {
+  btn.addEventListener('click', () => {
+    const content = quills[i].getContents();
+    console.log(content);
+    output[i].innerHTML = '';
+    // eslint-disable-next-line unicorn/no-array-for-each
+    content.forEach((content) => {
+      const item = document.createElement('li');
+      item.textContent = `${JSON.stringify(content)},`;
+      output[i].appendChild(item);
+    });
+  });
+}
diff --git a/package.json b/package.json
@@ -33,9 +33,11 @@
     "lint:fix": "eslint . --fix",
     "build": "gulp --require @esbuild-kit/cjs-loader",
     "dev": "gulp --require @esbuild-kit/cjs-loader dev",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:cover": "vitest --coverage"
+    "server": "node ./server.js",
+    "test:unit": "vitest",
+    "test:unit-ui": "vitest --ui",
+    "test:e2e": "playwright test",
+    "test:e2e-ui": "playwright test --ui"
   },
   "peerDependencies": {
     "quill": "^2.0.0"
@@ -45,6 +47,7 @@
   },
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.4",
+    "@playwright/test": "^1.49.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,56 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './src/__tests__/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+  webServer: {
+    command: 'npm run server',
+    port: 5500,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml