Add vitest for JavaScript unit testing

Set up vitest with jsdom environment for testing JavaScript modules.
Add unit tests for Configuration class and EditorConfiguration.
Update GitHub Actions and local CI to run JS tests.

Author: zachasme

.github/workflows/ci.yml

@@ -55,7 +55,19 @@ jobs:
           ruby-version: ruby-3.3.7
           bundler-cache: true
 
-      - name: Run tests
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install JavaScript dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run JavaScript tests
+        run: yarn test
+
+      - name: Run Rails tests
         env:
           RAILS_ENV: test
           # REDIS_URL: redis://localhost:6379/0

config/ci.rb

@@ -4,8 +4,9 @@
   step "Style: Ruby", "bin/rubocop -f github"
   step "Style: JavaScript", "yarn lint"
 
-  step "Tests: prepare", "env RAILS_ENV=test bin/rails db:test:prepare"
-  step "Tests: run", "env RAILS_ENV=test bin/rails test:all -d"
+  step "Tests: JavaScript", "yarn test"
+  step "Tests: Rails (prepare)", "env RAILS_ENV=test bin/rails db:test:prepare"
+  step "Tests: Rails (run)", "env RAILS_ENV=test bin/rails test:all -d"
 
   unless success?
     failure "Signoff: CI failed.", "Fix the issues and try again."

package.json

@@ -18,15 +18,18 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "eslint": "^9.15.0",
+    "jsdom": "^27.3.0",
     "rollup": "^4.44.1",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-gzip": "^4.1.1"
+    "rollup-plugin-gzip": "^4.1.1",
+    "vitest": "^4.0.16"
   },
   "scripts": {
     "build": "rollup -c",
     "build:npm": "rollup -c rollup.config.npm.mjs",
     "watch": "rollup -wc --watch.onEnd=\"rails restart\"",
     "lint": "eslint",
+    "test": "vitest --environment=jsdom",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish"
   },

test/javascript/config/configuration.test.js

@@ -0,0 +1,30 @@
+import { expect, test } from "vitest"
+import Configuration from "../../../src/config/configuration"
+
+const config = new Configuration({
+  default: { richText: true },
+})
+
+test("gets path", () => {
+  expect(config.get("default.richText")).toBe(true)
+})
+
+test("returns undefined for missing option", () => {
+  expect(config.get("default.missing")).toBe(undefined)
+})
+
+test("overwrites bool with hash", () => {
+  const config = new Configuration(
+    { toolbar: false },
+    { toolbar: { bold: true } }
+  )
+  expect(config.get("toolbar.bold")).toBe(true)
+})
+
+test("ovewrites hash with bool", () => {
+  const config = new Configuration(
+    { toolbar: { bold: true } },
+    { toolbar: false }
+  )
+  expect(config.get("toolbar")).toBe(false)
+})

test/javascript/editor/configuration.test.js

@@ -0,0 +1,38 @@
+import { expect, test } from "vitest"
+import { createElement } from "../helpers/dom_helper"
+import EditorConfiguration from "../../../src/editor/configuration"
+import { configure } from "../../../src/index"
+
+configure({
+  default: {
+    richText: true,
+    attachments: true
+  },
+  simple: {
+    richText: false
+  }
+})
+
+test("uses defaults", () => {
+  const element = createElement("<lexxy-editor></lexxy-editor>")
+  const config = new EditorConfiguration(element)
+  expect(config.get("attachments")).toBe(true)
+})
+
+test("uses preset", () => {
+  const element = createElement("<lexxy-editor preset='simple'></lexxy-editor>")
+  const config = new EditorConfiguration(element)
+  expect(config.get("richText")).toBe(false)
+})
+
+test("preset fallbacks to default", () => {
+  const element = createElement("<lexxy-editor preset='simple'></lexxy-editor>")
+  const config = new EditorConfiguration(element)
+  expect(config.get("attachments")).toBe(true)
+})
+
+test("overrides defaults", () => {
+  const element = createElement("<lexxy-editor rich-text='false'></lexxy-editor>")
+  const config = new EditorConfiguration(element)
+  expect(config.get("richText")).toBe(false)
+})

test/javascript/helpers/dom_helper.js

@@ -0,0 +1,5 @@
+export function createElement(html) {
+  const element = document.createElement("div")
+  element.innerHTML = html
+  return element.firstChild;
+}