Merge pull request #3832 from quilljs/zh-vitest

Migrate tests to Vitest

.eslintrc.json

@@ -13,12 +13,7 @@
       }
     }
   },
-  "ignorePatterns": [
-    "website/**/*",
-    "*.js",
-    "!test/helpers/**/*.js",
-    "!test/unit/**/*.js"
-  ],
+  "ignorePatterns": ["website/**/*", "*.js"],
   "rules": {
     "arrow-parens": ["error", "as-needed"],
     "no-use-before-define": ["error", { "functions": false, "classes": false }],

.github/DEVELOPMENT.md

@@ -1,27 +1,25 @@
 # Development
 
-Quill's source is in [ES6](http://www.ecma-international.org/ecma-262/6.0/index.html) and utilizes [Webpack](https://webpack.github.io/) to organize its files. The documentation site (hosted at [quilljs.com](https://quilljs.com/)) is built with [Jekyll](http://jekyllrb.com/). [Karma](https://karma-runner.github.io/) and [Protractor](https://angular.github.io/protractor/) are used for testing.
+Quill's source is in [ES6](http://www.ecma-international.org/ecma-262/6.0/index.html) and utilizes [Webpack](https://webpack.github.io/) to organize its files. The documentation site (hosted at [quilljs.com](https://quilljs.com/)) is built with [Gatsby](https://www.gatsbyjs.com/). [Vitest](https://vitest.dev/) and [Playwright](https://playwright.dev/) are used for testing.
 
 To develop Quill locally, you will want a copy of Quill's codebase, with the build pipeline and documentation site running locally. The documentation site lives in `doc/` but will use your local build instead of the CDN that the public site uses. This allows you to test changes on a local copy of all of the quilljs.com demos, such as the [standalone examples](https://github.com/quilljs/quill/blob/develop/docs/docs/standalone).
 
-
 ### Setup
 
-The local development environment requires both Node.js and Ruby, along with their respective package managers. RVM and NVM are good solutions for installing and keeping Node.js and Ruby up to date. Mac users may need to also `xcode-select --install` to build nokogiri.
+The local development environment requires Node.js.
 
-After installing Node.js, npm, Ruby, and bundler:
+After installing Node.js:
 
     npm install
-    bundle install
     npm run build
 
 You can now try out the unit test suite by running:
 
     npm run test:unit
 
-Karma also provides a local server so you can just visit a url from any browser to run the test suite, instead of launching one from the command line. Webpack also provides a server to dynamically build and serve the latest copy of the source code. Jekyll does the same for the documentation site.
+Webpack provides a server to dynamically build and serve the latest copy of the source code. Gatsby does the same for the documentation site.
 
-With three independent servers, it is useful to have a proxy to as a front end single point of access to jekyll, karma and webpack. The documentation site is normally set up to fetch Quill from Quill's CDN, but the local proxy will serve a local build from webpack dev server instead.
+With two independent servers, it is useful to have a proxy to as a front end single point of access to Gatsby and Webpack. The documentation site is normally set up to fetch Quill from Quill's CDN, but the local proxy will serve a local build from webpack dev server instead.
 
 All four services can be run with a single command thanks to [foreman](http://ddollar.github.io/foreman/):
 
@@ -35,10 +33,8 @@ Once the terminal settles (with messages indicating success from `jekyll`, `karm
 | Standalone Editor (Full)     | [localhost:9000/standalone/full](http://localhost:9000/standalone/full/)     |
 | Standalone Editor (Snow)     | [localhost:9000/standalone/snow](http://localhost:9000/standalone/snow/)     |
 | Standalone Editor (Bubble)   | [localhost:9000/standalone/bubble](http://localhost:9000/standalone/bubble/) |
-| Karma Test Runner            | [localhost:9000/karma](http://localhost:9000/karma)                          |
 | Webpack Locally Hosted Build | [localhost:9080](http://localhost:9080)                                      |
 
-
 ### Testing
 
 While Quill features an extensive javascript test suite, which you can run with:
@@ -53,12 +49,11 @@ Once webdriver is installed, you can run the test suite with
 
     npm run test:functional
 
-
 ### Workflow
 
 A standard development workflow involves:
 
 1. `npm start` - to run development services
 2. [localhost:9000/standalone/snow](http://localhost:9000/standalone/snow/) - to interactively develop and test an isolated example
-3. [localhost:9000/karma/debug.html](http://localhost:9000/karma/debug.html) - to run unit tests
+3. `npm run test:unit` - to run unit tests
 4. If everything is working, run the webdriver tests.

.github/workflows/_unit.yml

@@ -7,16 +7,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [
-            mac-chrome-latest,
-            mac-firefox-latest,
-            mac-safari-latest,
-            windows-chrome-latest,
-            windows-firefox-latest,
-            windows-edge-latest,
-            ios-latest,
-            # android-latest,
-          ]
+        browser: [chromium, webkit, firefox]
 
     steps:
       - name: Git checkout
@@ -29,9 +20,8 @@ jobs:
           cache: npm
 
       - run: npm ci
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+      - run: npx playwright install --with-deps
       - run: npm run lint
-      - run: npm run test:unit
+      - run: npm run test:unit || npm run test:unit || npm run test:unit
         env:
           BROWSER: ${{ matrix.browser }}

.gitignore

@@ -21,10 +21,7 @@ themes/*.js
 ui/*.js
 e2e/**/*.js
 
-test/**/*.js
-!test/helpers/**/*.js
-!test/unit/**/*.js
-!test/unit.js
+!test/unit/__helpers__/vitest.d.ts
 
 core.js
 quill.js

_develop/proxy.js

@@ -5,27 +5,18 @@ const proxy = httpProxy.createProxyServer({});
 const ports = {
   proxy: parseInt(process.env.npm_package_config_ports_proxy, 10),
   jekyll: parseInt(process.env.npm_package_config_ports_gatsby, 10),
-  karma: parseInt(process.env.npm_package_config_ports_karma, 10),
   webpack: parseInt(process.env.npm_package_config_ports_webpack, 10),
 };
 
 const server = http.createServer((req, res) => {
-  if (
-    /\/\d+\.\d+\.\d+/.test(req.url) ||
-    req.url.startsWith('/karma/base/dist')
-  ) {
+  if (/\/\d+\.\d+\.\d+/.test(req.url)) {
     const target = `http://localhost:${ports.webpack}/${req.url
       .split('/')
       .pop()}`;
     proxy.web(req, res, {
       ignorePath: true,
       target,
     });
-  } else if (
-    req.url.startsWith('/karma') ||
-    req.url === '/assets/favicon.png'
-  ) {
-    proxy.web(req, res, { ignorePath: false, target: { port: ports.karma } });
   } else {
     proxy.web(req, res, { ignorePath: false, target: { port: ports.jekyll } });
   }

_develop/webpack.config.js

@@ -64,8 +64,6 @@ const baseConfig = {
     'quill.core': './assets/core.styl',
     'quill.bubble': './assets/bubble.styl',
     'quill.snow': './assets/snow.styl',
-    'unit.js': './test/unit.js',
-    'fuzz.js': './test/fuzz.ts',
   },
   output: {
     filename: '[name]',

modules/history.ts

@@ -5,7 +5,7 @@ import Quill from '../core/quill';
 import type Scroll from '../blots/scroll';
 import { Range } from '../core/selection';
 
-interface HistoryOptions {
+export interface HistoryOptions {
   userOnly: boolean;
   delay: number;
   maxStack: number;

modules/toolbar.ts

@@ -192,7 +192,12 @@ function addButton(container: HTMLElement, format: string, value?: unknown) {
   container.appendChild(input);
 }
 
-function addControls(container: HTMLElement, groups: string[][]) {
+function addControls(
+  container: HTMLElement,
+  groups:
+    | (string | Record<string, unknown>)[][]
+    | (string | Record<string, unknown>)[],
+) {
   if (!Array.isArray(groups[0])) {
     // @ts-expect-error
     groups = [groups];