e2e test

slab · Jul 22, 2024 · e133777 · e133777
1 parent 7742b1c
commit e133777
Show file tree

Hide file tree

Showing 7 changed files with 386 additions and 226 deletions.
diff --git a/packages/quill/test/e2e/__dev_server__/iframe.html b/packages/quill/test/e2e/__dev_server__/iframe.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
+    <title>Quill E2E Tests - Iframe</title>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <link href="/quill.core.css" rel="stylesheet" />
+    <link href="/quill.snow.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <iframe style="width: 100%; height: 100%"></iframe>
+    <script>
+      const iframe = document.querySelector('iframe');
+      console.log(iframe.contentDocument.readyState);
+
+      if (iframe.contentDocument.readyState === 'complete') {
+        init();
+      } else {
+        iframe.onload = init;
+      }
+
+      function init() {
+        const doc = iframe.contentDocument;
+        doc.head.innerHTML += `<link href="/quill.core.css" rel="stylesheet" />
+    <link href="/quill.snow.css" rel="stylesheet" />`;
+        doc.body.innerHTML = `<div id="root">
+      <div id="standalone-container">
+        <div id="toolbar-container">
+          <span class="ql-formats">
+            <select class="ql-font"></select>
+            <select class="ql-size"></select>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-bold"></button>
+            <button class="ql-italic"></button>
+            <button class="ql-underline"></button>
+            <button class="ql-strike"></button>
+          </span>
+          <span class="ql-formats">
+            <select class="ql-color"></select>
+            <select class="ql-background"></select>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-script" value="sub"></button>
+            <button class="ql-script" value="super"></button>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-header" value="1"></button>
+            <button class="ql-header" value="2"></button>
+            <button class="ql-blockquote"></button>
+            <button class="ql-code-block"></button>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-list" value="ordered"></button>
+            <button class="ql-list" value="bullet"></button>
+            <button class="ql-indent" value="-1"></button>
+            <button class="ql-indent" value="+1"></button>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-direction" value="rtl"></button>
+            <select class="ql-align"></select>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-link"></button>
+            <button class="ql-image"></button>
+            <button class="ql-video"></button>
+            <button class="ql-formula"></button>
+          </span>
+          <span class="ql-formats">
+            <button class="ql-clean"></button>
+          </span>
+        </div>
+        <div id="editor" style="height: 350px"></div>
+      </div>
+    </div>`;
+
+        const loaded = document.createElement('div');
+        loaded.className = 'loaded';
+        document.body.appendChild(loaded);
+
+        window.quill = new Quill(doc.getElementById('editor'), {
+          modules: { syntax: true, toolbar: '#toolbar-container' },
+          placeholder: 'Compose an epic...',
+          theme: 'snow',
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/quill/test/e2e/__dev_server__/webpack.config.cjs b/packages/quill/test/e2e/__dev_server__/webpack.config.cjs
@@ -6,8 +6,9 @@ const common = require('../../../webpack.common.cjs');
 const { merge } = require('webpack-merge');
 require('webpack-dev-server');
 
-module.exports = (env) =>
-  merge(common, {
+module.exports = (env) => {
+  console.log(env);
+  return merge(common, {
     plugins: [
       new HtmlWebpackPlugin({
         publicPath: '/',
@@ -17,6 +18,14 @@ module.exports = (env) =>
         inject: 'head',
         scriptLoading: 'blocking',
       }),
+      new HtmlWebpackPlugin({
+        publicPath: '/',
+        filename: 'iframe.html',
+        template: path.resolve(__dirname, 'iframe.html'),
+        chunks: ['quill'],
+        inject: 'head',
+        scriptLoading: 'blocking',
+      }),
     ],
     devServer: {
       port: env.port,
@@ -30,3 +39,4 @@ module.exports = (env) =>
       webSocketServer: false,
     },
   });
+};
diff --git a/packages/quill/test/e2e/fixtures/index.ts b/packages/quill/test/e2e/fixtures/index.ts
@@ -4,32 +4,36 @@ import Composition from './Composition.js';
 import Locker from './utils/Locker.js';
 import Clipboard from './Clipboard.js';
 
-export const test = base.extend<{
-  editorPage: EditorPage;
-  clipboard: Clipboard;
-  composition: Composition;
-}>({
-  editorPage: ({ page }, use) => {
-    use(new EditorPage(page));
-  },
-  composition: ({ page, browserName }, use) => {
-    test.fail(
-      browserName !== 'chromium',
-      'CDPSession is only available in Chromium',
-    );
+export const testWithMode = function (mode: 'regular' | 'iframe') {
+  return base.extend<{
+    editorPage: EditorPage;
+    clipboard: Clipboard;
+    composition: Composition;
+  }>({
+    editorPage: ({ page }, use) => {
+      use(new EditorPage(page, mode));
+    },
+    composition: ({ page, browserName }, use) => {
+      test.fail(
+        browserName !== 'chromium',
+        'CDPSession is only available in Chromium',
+      );
 
-    use(new Composition(page, browserName));
-  },
-  clipboard: [
-    async ({ page }, use) => {
-      const locker = new Locker('clipboard');
-      await locker.lock();
-      await use(new Clipboard(page));
-      await locker.release();
+      use(new Composition(page, browserName));
     },
-    { timeout: 30000 },
-  ],
-});
+    clipboard: [
+      async ({ page }, use) => {
+        const locker = new Locker('clipboard');
+        await locker.lock();
+        await use(new Clipboard(page));
+        await locker.release();
+      },
+      { timeout: 30000 },
+    ],
+  });
+};
+
+export const test = testWithMode('regular');
 
 export const CHAPTER = 'Chapter 1. Loomings.';
 export const P1 =