CI setup

.github/workflows/ci.yml

@@ -8,8 +8,13 @@ on:
 
 jobs:
   build:
-    name: Browser tests
+    name: "Browser tests (ElementInternals: ${{ matrix.elementInternals }})"
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        elementInternals: [false, true]
+    env:
+      EDITOR_ELEMENT_INTERNALS: "${{ matrix.elementInternals }}"
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

karma.conf.js

@@ -3,7 +3,7 @@ const config = {
   frameworks: [ "qunit" ],
   files: [
     { pattern: "dist/test.js", watched: false },
-    { pattern: "src/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
+    { pattern: "src/test/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
   ],
   proxies: {
     "/test_helpers/fixtures/": "/base/src/test_helpers/fixtures/"
@@ -25,7 +25,6 @@ const config = {
   browserDisconnectTimeout: 240000,
   browserDisconnectTolerance: 3,
   browserNoActivityTimeout: 300000,
-  editorElementInternals: process.env.EDITOR_ELEMENT_INTERNALS === "true",
 }
 
 /* eslint camelcase: "off",  */
@@ -102,6 +101,10 @@ if (process.env.SAUCE_ACCESS_KEY) {
   }
 }
 
+if (process.env.EDITOR_ELEMENT_INTERNALS === "true") {
+  config.files.push({ pattern: "src/test/test_helpers/fixtures/editor_config_element_internals.js", watched: false, included: true })
+}
+
 function buildId() {
   const { GITHUB_WORKFLOW, GITHUB_RUN_NUMBER, GITHUB_RUN_ID } = process.env
   return GITHUB_WORKFLOW && GITHUB_RUN_NUMBER && GITHUB_RUN_ID

src/test/system/custom_element_test.js

@@ -1,3 +1,4 @@
+import * as config from "trix/config"
 import { rangesAreEqual } from "trix/core/helpers"
 
 import {
@@ -13,6 +14,7 @@ import {
   test,
   testGroup,
   testIf,
+  testUnless,
   triggerEvent,
   typeCharacters,
   typeInToolbarDialog,
@@ -499,26 +501,35 @@ testGroup("HTML sanitization", { template: "editor_html" }, () => {
 })
 
 testGroup("<label> support", { template: "editor_with_labels" }, () => {
-  test("associates all label elements", () => {
+  testUnless(config.editor.elementInternals, "associates all label elements", () => {
     const labels = [ document.getElementById("label-1"), document.getElementById("label-3") ]
-    assert.deepEqual(getEditorElement().labels, labels)
+    assert.deepEqual(document.getElementById("editor-1").labels, labels)
   })
 
-  test("focuses when <label> clicked", () => {
+  testUnless(config.editor.elementInternals, "focuses when <label> clicked", () => {
     document.getElementById("label-1").click()
-    assert.equal(getEditorElement(), document.activeElement)
+    assert.equal(document.getElementById("editor-1"), document.activeElement)
   })
 
-  test("focuses when <label> descendant clicked", () => {
+  testUnless(config.editor.elementInternals, "focuses when <label> descendant clicked", () => {
     document.getElementById("label-1").querySelector("span").click()
-    assert.equal(getEditorElement(), document.activeElement)
+    assert.equal(document.getElementById("editor-1"), document.activeElement)
   })
 
-  test("does not focus when <label> controls another element", () => {
+  testUnless(config.editor.elementInternals, "does not focus when <label> controls another element", () => {
     const label = document.getElementById("label-2")
-    assert.notEqual(getEditorElement(), label.control)
+    assert.notEqual(document.getElementById("editor-1"), label.control)
     label.click()
-    assert.notEqual(getEditorElement(), document.activeElement)
+    assert.notEqual(document.getElementById("editor-1"), document.activeElement)
+  })
+
+  testIf(config.editor.elementInternals, "associates all label elements through a <form>", () => {
+    const element = document.getElementById("editor-2")
+    const labels = Array.from(element.labels)
+    const controls = labels.map((label) => label.control)
+
+    assert.deepEqual(labels, [ document.getElementById("label-4"), document.getElementById("label-5") ])
+    assert.deepEqual(controls, [ element, element ])
   })
 })
 
@@ -529,7 +540,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.form, form)
   })
 
-  test("transitively accesses its related <input> element's <form>", () => {
+  test("accesses its related <form>", () => {
     const form = document.getElementById("input-form")
     const editor = document.getElementById("editor-with-input-form")
     assert.equal(editor.form, form)

src/test/test_helper.js

@@ -31,11 +31,3 @@ document.head.insertAdjacentHTML(
     #qunit { position: relative !important; }
   </style>`
 )
-
-if (window.__karma__.config.editorElementInternals) {
-  document.head.insertAdjacentHTML(
-    "beforeend",
-    `<meta name="trix-config-editor-element-internals" content="true">
-    `
-  )
-}

src/test/test_helpers/fixtures/editor_config_element_internals.js

@@ -0,0 +1 @@
+Trix.config.editor.elementInternals = true

src/test/test_helpers/fixtures/editor_with_labels.js

@@ -1,7 +1,14 @@
 export default () =>
-  `<label id="label-1" for="editor"><span>Label 1</span></label>
+  `<label id="label-1" for="editor-1"><span>Label 1</span></label>
   <label id="label-2">
     Label 2
-    <trix-editor id="editor"></trix-editor>
+    <trix-editor id="editor-1"></trix-editor>
   </label>
-  <label id="label-3" for="editor">Label 3</label>`
+  <label id="label-3" for="editor-1">Label 3</label>
+  <form id="form-1">
+    <label id="label-4">
+      Label 4
+      <trix-editor id="editor-2"></trix-editor>
+    </label>
+    <label for="editor-2">Label 5</label>
+  </form>`

src/test/test_helpers/test_helpers.js

@@ -56,6 +56,10 @@ export const testIf = function (condition, ...args) {
   }
 }
 
+export const testUnless = function(condition, ...args) {
+  testIf(!condition, ...args)
+}
+
 export const { skip, test } = QUnit
 
 const waitForTrixInit = async () => {