One
\nTwo bold it u x2 H2O
"), + "One
\nTwo bold it u x2 H2O
"); +}); + +test("b and i become strong and em", () => { + assert.equal(clean("b i
"), "b i
"); +}); + +test("scripts, styles and frames are dropped with their contents", () => { + assert.equal(clean("ab
"), "ab
"); +}); + +test("event handlers and unknown attributes are dropped", () => { + assert.equal(clean('a
a
"); +}); + +test("unknown tags keep their contents", () => { + assert.equal(clean("red plain
"), "red plain
"); +}); + +test("headings become paragraphs", () => { + assert.equal(clean("Title
"); +}); + +test("only safe links are kept", () => { + assert.equal(clean(''), + ''); + assert.equal(clean(''), + ''); + assert.equal(clean(''), ""); + assert.equal(clean(''), ""); + assert.equal(clean(''), ""); +}); + +test("only alignment and indent styles are kept", () => { + assert.equal(clean('c
'), 'c
'); + assert.equal(clean('i
'), 'i
'); + assert.equal(clean('x
'), "x
"); + assert.equal(clean('x
'), "x
"); + assert.equal(clean('x
'), 'x
'); +}); + +test("the align attribute is kept only with a real alignment", () => { + assert.equal(clean('c
'), 'c
'); + assert.equal(clean('c
'), "c
"); +}); + +test("text is escaped", () => { + assert.equal(clean("a < b & c > d \"q\"
"), "a < b & c > d \"q\"
"); +}); + +test("line breaks, rules and no-break spaces are written as TinyMCE wrote them", () => { + assert.equal(clean("one
two
a b
"), "one
two
a b
"); +}); + +test("an empty paragraph is written as ", () => { + assert.equal(clean("a
b
"), "a
\n\n
\n
b
"); +}); + +test("a trailing line break in a block is dropped", () => { + assert.equal(clean("a
a
"); +}); + +test("an editor with no words gives an empty story", () => { + assert.equal(clean(""), ""); + assert.equal(clean("
"), ""); + assert.equal(clean(""), "q
\n"); + assert.equal(clean("q
\n
a
\n\nb
"), "a
\nb
"); +}); + +test("parse does not run anything", () => { + window.hacked = false; + parse('Hello
"); + const wrapper = env.document.querySelector("#textparent > .xed"); + assert.ok(wrapper); + assert.equal(env.textarea.parentNode, wrapper); + assert.equal(env.textarea.hidden, true); + assert.equal(env.textarea.style.display, "none"); + assert.equal(env.textarea.form.id, "form"); + assert.equal(env.box.contentEditable, "true"); + assert.equal(env.box.getAttribute("aria-label"), "Story:"); + assert.equal(env.box.innerHTML, "Hello
"); +}); + +test("the toolbar has the TinyMCE buttons, in order", () => { + const env = editorWindow(); + const labels = Array.from(env.document.querySelectorAll(".xed-btn"), (b) => b.getAttribute("aria-label")); + assert.deepEqual(labels, ["Bold", "Italic", "Align left", "Align center", "Align right", "Justify", "Blockquote", + "Decrease indent", "Increase indent", "Insert/edit link", "Remove link", "Special character", "Source code"]); + assert.equal(button(env.document, "Bold").title, "Bold (Ctrl+B)"); + assert.equal(button(env.document, "Insert/edit link").title, "Insert/edit link (Ctrl+K)"); + assert.equal(env.document.querySelectorAll(".xed-group").length, 6); + for (const b of env.document.querySelectorAll(".xed-btn")) { + assert.equal(b.type, "button"); + assert.ok(b.querySelector("svg[aria-hidden=true] path")); + } +}); + +test("the story in the textarea is cleaned when the editor starts", () => { + const env = editorWindow('a
loose text'); + assert.equal(env.textarea.value, "a
\nloose text
"); + assert.equal(env.editor.getContent(), env.textarea.value); +}); + +test("an empty story starts with an empty paragraph", () => { + const env = editorWindow(""); + assert.equal(env.box.innerHTML, "Some words
"); + assert.equal(env.textarea.value, "Some words
"); + assert.equal(inputs, 1); + type(env, "Some words
"); + assert.equal(inputs, 1, "no event when nothing changed"); +}); + +test("text typed outside a paragraph is put in one", () => { + const env = editorWindow(); + type(env, "loose textpara
more"); + assert.equal(env.textarea.value, "loose text
\npara
\nmore
"); +}); + +test("deleting everything starts again with a plain paragraph", () => { + const env = editorWindow("bold
"); + type(env, "new story
"); + assert.equal(env.editor.getContent(), "new story
"); + assert.equal(env.textarea.value, "new story
"); +}); + +test("the form sends the editor's content", () => { + const env = editorWindow("a
"); + env.box.innerHTML = "changed without an input event
"; + env.textarea.form.dispatchEvent(new env.window.Event("submit", { cancelable: true })); + assert.equal(env.textarea.value, "changed without an input event
"); +}); + +test("bold and italic use the browser's commands", () => { + const env = editorWindow("word
"); + selectText(env.window, env.box.querySelector("p")); + button(env.document, "Bold").click(); + button(env.document, "Italic").click(); + assert.deepEqual(env.window.commands.filter((c) => c[0] !== "styleWithCSS" && c[0] !== "defaultParagraphSeparator"), + [["bold", null], ["italic", null]]); +}); + +test("the alignment buttons set and clear text-align", () => { + const env = editorWindow("one
two
"); + const [one, two] = env.box.querySelectorAll("p"); + select(env.window, one.firstChild, 0, two.firstChild, 3); + button(env.document, "Align center").click(); + assert.equal(env.textarea.value, 'one
\ntwo
'); + button(env.document, "Align right").click(); + assert.equal(env.textarea.value, 'one
\ntwo
'); + button(env.document, "Align right").click(); + assert.equal(env.textarea.value, "one
\ntwo
"); +}); + +test("an old align attribute is replaced", () => { + const env = editorWindow('x
'); + select(env.window, env.box.querySelector("p").firstChild, 0); + button(env.document, "Justify").click(); + assert.equal(env.textarea.value, 'x
'); +}); + +test("indent steps by 30 pixels and never goes below zero", () => { + const env = editorWindow("x
"); + select(env.window, env.box.querySelector("p").firstChild, 0); + button(env.document, "Increase indent").click(); + button(env.document, "Increase indent").click(); + assert.equal(env.textarea.value, 'x
'); + button(env.document, "Decrease indent").click(); + assert.equal(env.textarea.value, 'x
'); + button(env.document, "Decrease indent").click(); + button(env.document, "Decrease indent").click(); + assert.equal(env.textarea.value, "x
"); +}); + +test("indent in a list uses the browser's command", () => { + const env = editorWindow("one
two
three
"); + const ps = env.box.querySelectorAll("p"); + select(env.window, ps[0].firstChild, 1, ps[1].firstChild, 1); + button(env.document, "Blockquote").click(); + assert.equal(env.textarea.value, "\n\none
\ntwo
\n
three
"); + select(env.window, ps[0].firstChild, 1); + button(env.document, "Blockquote").click(); + assert.equal(env.textarea.value, "one
\ntwo
\nthree
"); +}); + +test("the link dialog adds a link", () => { + const env = editorWindow("go here
"); + const text = env.box.querySelector("p").firstChild; + select(env.window, text, 3, text, 7); + button(env.document, "Insert/edit link").click(); + const dialog = env.document.querySelector(".xed-window[role=dialog]"); + assert.ok(dialog); + assert.equal(dialog.querySelector(".xed-title").textContent, "Insert link"); + const inputs = dialog.querySelectorAll("input"); + assert.equal(inputs.length, 3); + assert.equal(inputs[1].value, "here"); + assert.equal(env.document.activeElement, inputs[0]); + inputs[0].value = "www.example.org"; + inputs[1].value = "there"; + inputs[2].value = "A title"; + dialog.querySelector(".xed-primary").click(); + assert.equal(env.document.querySelector(".xed-window"), null); + assert.equal(env.textarea.value, 'go there
'); +}); + +test("the link dialog makes email addresses into mailto links", () => { + const env = editorWindow("x
"); + select(env.window, env.box.querySelector("p").firstChild, 1); + button(env.document, "Insert/edit link").click(); + const inputs = env.document.querySelectorAll(".xed-window input"); + inputs[0].value = "ed@example.org"; + key(env.window, inputs[0], "Enter"); + assert.equal(env.textarea.value, ''); +}); + +test("the link dialog refuses unsafe links", () => { + const env = editorWindow("x
"); + select(env.window, env.box.querySelector("p").firstChild, 1); + button(env.document, "Insert/edit link").click(); + env.document.querySelector(".xed-window input").value = "javascript:alert(1)"; + env.document.querySelector(".xed-primary").click(); + assert.equal(env.textarea.value, "x
"); +}); + +test("the link dialog edits and removes a link", () => { + const env = editorWindow(''); + select(env.window, env.box.querySelector("a").firstChild, 1); + button(env.document, "Insert/edit link").click(); + let inputs = env.document.querySelectorAll(".xed-window input"); + assert.equal(inputs[0].value, "https://old.example/"); + inputs[0].value = "https://new.example/"; + env.document.querySelector(".xed-primary").click(); + assert.equal(env.textarea.value, ''); + + select(env.window, env.box.querySelector("a").firstChild, 1); + button(env.document, "Insert/edit link").click(); + env.document.querySelector(".xed-window input").value = ""; + env.document.querySelector(".xed-primary").click(); + assert.equal(env.textarea.value, "old
"); +}); + +test("Escape and Cancel close a dialog without a change", () => { + const env = editorWindow("x
"); + select(env.window, env.box.querySelector("p").firstChild, 1); + button(env.document, "Insert/edit link").click(); + key(env.window, env.document.querySelector(".xed-window input"), "Escape"); + assert.equal(env.document.querySelector(".xed-window"), null); + assert.equal(env.document.querySelector(".xed-modal-block"), null); + button(env.document, "Insert/edit link").click(); + env.document.querySelector(".xed-window input").value = "https://example.org/"; + Array.from(env.document.querySelectorAll(".xed-button")).find((b) => b.textContent === "Cancel").click(); + assert.equal(env.document.querySelector(".xed-window"), null); + assert.equal(env.textarea.value, "x
"); +}); + +test("a click beside the link dialog does not close it", () => { + const env = editorWindow("x
"); + button(env.document, "Insert/edit link").click(); + env.document.querySelector(".xed-modal-block").click(); + assert.ok(env.document.querySelector(".xed-window")); +}); + +test("remove link unwraps the link at the caret", () => { + const env = editorWindow('a link b
'); + select(env.window, env.box.querySelector("a").firstChild, 2); + button(env.document, "Remove link").click(); + assert.equal(env.textarea.value, "a link b
"); +}); + +test("the special character window inserts a character", () => { + const env = editorWindow("x
"); + select(env.window, env.box.querySelector("p").firstChild, 1); + button(env.document, "Special character").click(); + const cells = env.document.querySelectorAll(".xed-charmap td"); + assert.equal(cells.length, 250); + assert.equal(env.document.querySelectorAll(".xed-charmap tr").length, 10); + const euro = Array.from(cells).find((c) => c.title === "euro sign"); + euro.dispatchEvent(new env.window.MouseEvent("mouseover")); + assert.equal(env.document.querySelector(".xed-charmap-char").textContent, "€"); + assert.equal(env.document.querySelector(".xed-charmap-name").textContent, "euro sign"); + euro.click(); + assert.equal(env.document.querySelector(".xed-window"), null); + assert.deepEqual(env.window.commands.at(-1), ["insertText", "€"]); +}); + +test("the special character window answers the keyboard", () => { + const env = editorWindow("x
"); + button(env.document, "Special character").click(); + const cell = env.document.querySelector(".xed-charmap td"); + assert.equal(cell.tabIndex, 0); + key(env.window, cell, "Enter"); + assert.deepEqual(env.window.commands.at(-1), ["insertText", " "]); +}); + +test("a click outside the special character window closes it", () => { + const env = editorWindow("x
"); + button(env.document, "Special character").click(); + const backdrop = env.document.querySelector(".xed-modal-block"); + assert.ok(backdrop.classList.contains("xed-modal-light")); + backdrop.click(); + assert.equal(env.document.querySelector(".xed-window"), null); + assert.equal(env.document.querySelector(".xed-modal-block"), null); + assert.equal(env.window.commands.filter((c) => c[0] === "insertText").length, 0); +}); + +test("the source button swaps the editor for the textarea and back", () => { + const env = editorWindow("a
"); + const code = button(env.document, "Source code"); + code.click(); + assert.equal(env.textarea.hidden, false); + assert.equal(env.textarea.style.display, ""); + assert.equal(env.box.hidden, true); + assert.equal(code.getAttribute("aria-pressed"), "true"); + assert.ok(code.classList.contains("xed-active")); + for (const b of env.document.querySelectorAll(".xed-btn")) + assert.equal(b.disabled, b !== code); + assert.equal(env.document.querySelector(".xed-window"), null, "no source window"); + + env.textarea.value = 'edited
'; + assert.equal(env.editor.getContent(), env.textarea.value, "the textarea is the story in source mode"); + code.click(); + assert.equal(env.box.hidden, false); + assert.equal(env.textarea.hidden, true); + assert.equal(code.getAttribute("aria-pressed"), "false"); + assert.ok(Array.from(env.document.querySelectorAll(".xed-btn")).every((b) => !b.disabled)); + assert.equal(env.textarea.value, "edited
"); +}); + +test("setContent leaves source mode", () => { + const env = editorWindow("a
"); + button(env.document, "Source code").click(); + env.editor.setContent("b
"); + assert.equal(env.box.hidden, false); + assert.equal(env.editor.getContent(), "b
"); +}); + +test("undo and redo, with the keys", () => { + const env = editorWindow("x
"); + select(env.window, env.box.querySelector("p").firstChild, 0); + button(env.document, "Align center").click(); + assert.equal(env.textarea.value, 'x
'); + assert.ok(key(env.window, env.box, "z", { ctrlKey: true }).defaultPrevented); + assert.equal(env.textarea.value, "x
"); + key(env.window, env.box, "y", { ctrlKey: true }); + assert.equal(env.textarea.value, 'x
'); + key(env.window, env.box, "z", { metaKey: true }); + key(env.window, env.box, "Z", { ctrlKey: true, shiftKey: true }); + assert.equal(env.textarea.value, 'x
'); +}); + +test("undo keeps a run of typing as one step", () => { + const env = editorWindow("a
"); + type(env, "ab
"); + type(env, "abc
"); + key(env.window, env.box, "z", { ctrlKey: true }); + assert.equal(env.textarea.value, "a
"); +}); + +test("undo from the browser's history input", () => { + const env = editorWindow("a
"); + type(env, "b
"); + const event = new env.window.InputEvent("beforeinput", { inputType: "historyUndo", bubbles: true, cancelable: true }); + env.box.dispatchEvent(event); + assert.ok(event.defaultPrevented); + assert.equal(env.textarea.value, "a
"); +}); + +test("the shortcut keys run the toolbar commands", () => { + const env = editorWindow("x
"); + selectText(env.window, env.box.querySelector("p")); + assert.ok(key(env.window, env.box, "b", { ctrlKey: true }).defaultPrevented); + assert.deepEqual(env.window.commands.at(-1), ["bold", null]); + key(env.window, env.box, "i", { metaKey: true }); + assert.deepEqual(env.window.commands.at(-1), ["italic", null]); + key(env.window, env.box, "k", { ctrlKey: true }); + assert.ok(env.document.querySelector(".xed-window")); +}); + +test("other keys are left to the browser", () => { + const env = editorWindow("x
"); + assert.equal(key(env.window, env.box, "b").defaultPrevented, false); + assert.equal(key(env.window, env.box, "b", { ctrlKey: true, altKey: true }).defaultPrevented, false); + assert.equal(key(env.window, env.box, "c", { ctrlKey: true }).defaultPrevented, false); +}); + +test("pasted HTML is cleaned first", () => { + const env = editorWindow("x
"); + const event = paste(env, { "text/html": 'Bold
' }); + assert.ok(event.defaultPrevented); + assert.deepEqual(env.window.commands.at(-1), ["insertHTML", "Bold
"]); +}); + +test("pasted text keeps its paragraphs and line breaks", () => { + const env = editorWindow("x
"); + env.window.commands.length = 0; + paste(env, { "text/plain": "one\r\ntwo\n\nthree" }); + assert.deepEqual(env.window.commands, [["insertText", "one"], ["insertLineBreak", null], ["insertText", "two"], + ["insertParagraph", null], ["insertText", "three"]]); +}); diff --git a/tests/js/helpers.js b/tests/js/helpers.js new file mode 100644 index 0000000..ea0e7c4 --- /dev/null +++ b/tests/js/helpers.js @@ -0,0 +1,89 @@ +/* + * Load the site's JavaScript into a jsdom window. jsdom has no editing + * commands, so document.execCommand records its calls in window.commands + * (and does nothing else), and queryCommandState throws, as it does in + * some browsers. + */ +"use strict"; + +const fs = require("node:fs"); +const path = require("node:path"); +const { JSDOM } = require("jsdom"); + +const ROOT = path.resolve(__dirname, "..", ".."); + +// The story field of publish/write.inc.php, in a form +const STORY_FORM = ` + `; + +function load(scripts, body, story) { + const dom = new JSDOM(`${body}`, { + runScripts: "outside-only", + url: "https://xxx.org.za/publish/", + pretendToBeVisual: true, + }); + const window = dom.window; + window.commands = []; + window.document.execCommand = function (command, ui, value) { + window.commands.push([command, value]); + return true; + }; + window.document.queryCommandState = function () { + throw new Error("not supported"); + }; + if (story !== undefined) window.document.getElementById("story").value = story; + for (const script of scripts) window.eval(fs.readFileSync(path.join(ROOT, script), "utf8")); + return window; +} + +// A window with the story form and publish/editor.js, and the editor attached +function editorWindow(story = "") { + const window = load(["publish/editor.js"], STORY_FORM, story); + const textarea = window.document.getElementById("story"); + const editor = window.XxxEditor.attach(textarea); + const box = window.document.querySelector(".xed-area"); + return { window, document: window.document, textarea, editor, box }; +} + +// Select from (node, offset) to (endNode, endOffset), or put the caret there +function select(window, node, offset, endNode = node, endOffset = offset) { + const range = window.document.createRange(); + range.setStart(node, offset); + range.setEnd(endNode, endOffset); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + return range; +} + +// Select all the text of an element +function selectText(window, element) { + const range = window.document.createRange(); + range.selectNodeContents(element); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + return range; +} + +function button(document, label) { + const found = document.querySelector(`.xed-btn[aria-label="${label}"]`); + if (!found) throw new Error(`No button "${label}"`); + return found; +} + +function key(window, target, key, options = {}) { + const event = new window.KeyboardEvent("keydown", Object.assign({ key, bubbles: true, cancelable: true }, options)); + target.dispatchEvent(event); + return event; +} + +module.exports = { ROOT, STORY_FORM, load, editorWindow, select, selectText, button, key }; diff --git a/tests/js/utilities.test.js b/tests/js/utilities.test.js new file mode 100644 index 0000000..16cd2be --- /dev/null +++ b/tests/js/utilities.test.js @@ -0,0 +1,177 @@ +// publish/utilities.js (word count, tabs, form checks) and utilities.js (the phone menu) +"use strict"; + +const test = require("node:test"); +const assert = require("node:assert/strict"); +const { load, STORY_FORM } = require("./helpers"); + +const FORM = STORY_FORM + ` + +
`;
+
+function publishWindow(story = "") {
+ const window = load(["publish/utilities.js"], FORM, story);
+ window.alerts = [];
+ window.confirms = [];
+ window.confirmAnswer = true;
+ window.alert = (message) => window.alerts.push(message);
+ window.confirm = (message) => {
+ window.confirms.push(message);
+ return window.confirmAnswer;
+ };
+ return window;
+}
+
+const window = publishWindow();
+
+test("wc counts words", () => {
+ assert.equal(window.wc(""), 0);
+ assert.equal(window.wc(" "), 0);
+ assert.equal(window.wc("one"), 1);
+ assert.equal(window.wc("one two three"), 3);
+ assert.equal(window.wc(" padded words "), 2);
+});
+
+test("wc leaves out the HTML", () => {
+ assert.equal(window.wc("one two
\nthree
"), 3); + assert.equal(window.wc("one"), 0); + assert.equal(window.wc('link'), 1); +}); + +test("wc counts the words around a dash as two", () => { + assert.equal(window.wc("left--right"), 2); + assert.equal(window.wc("left — right"), 2); + assert.equal(window.wc("left–right"), 2); + assert.equal(window.wc("well-known"), 1); +}); + +test("wc does not count punctuation on its own", () => { + assert.equal(window.wc("one - two ... three"), 3); +}); + +test("wc counts one hundred words", () => { + assert.equal(window.wc("
" + "word ".repeat(100) + "
"), 100); +}); + +test("the word counter shows the count and whether it is 100", () => { + const w = publishWindow(); + const story = w.document.getElementById("story"); + const counter = w.document.getElementById("wordcounter"); + story.value = "one"; + assert.equal(w.updateWordCount(), true); + assert.equal(counter.innerHTML, "1 word"); + assert.equal(counter.className, "counter"); + story.value = "word ".repeat(100); + w.updateWordCount(); + assert.equal(counter.innerHTML, "100 words"); + assert.equal(counter.className, "counter yes"); + story.value = "word ".repeat(101); + w.updateWordCount(); + assert.equal(counter.className, "counter no"); +}); + +test("the word counter does nothing without its elements", () => { + const w = load(["publish/utilities.js"], ""); + assert.equal(w.updateWordCount(), true); +}); + +test("showHide switches between the text and the image tabs", () => { + const w = publishWindow(); + const $ = (id) => w.document.getElementById(id); + let focused = 0; + w.storyEditor = { focus: () => focused++ }; + assert.equal(w.showHide("upload"), true); + assert.deepEqual([$("textparent").style.display, $("uploadparent").style.display, $("wordcounter").style.display], + ["none", "block", "none"]); + assert.equal(w.showHide("text"), true); + assert.deepEqual([$("textparent").style.display, $("uploadparent").style.display, $("wordcounter").style.display], + ["block", "none", "block"]); + assert.equal(focused, 1); + assert.equal(w.showHide("other"), false); +}); + +test("review asks for a title, then an author", () => { + const w = publishWindow("words
"); + assert.equal(w.review(), false); + assert.match(w.alerts[0], /add a title/); + w.document.getElementById("title").value = "T"; + assert.equal(w.review(), false); + assert.match(w.alerts[1], /haven't added an author/); +}); + +test("review asks about a missing email address", () => { + const w = publishWindow("word ".repeat(100)); + w.document.getElementById("title").value = "T"; + w.document.getElementById("author").value = "A"; + w.confirmAnswer = false; + assert.equal(w.review(), false); + assert.match(w.confirms[0], /haven't added an email address/); + w.confirmAnswer = true; + assert.equal(w.review(), true); +}); + +test("review stops an empty story and warns about the length", () => { + const w = publishWindow(""); + for (const [id, value] of [["title", "T"], ["author", "A"], ["email", "a@example.org"]]) + w.document.getElementById(id).value = value; + assert.equal(w.review(), false); + assert.match(w.alerts[0], /haven't submitted anything/); + + w.document.getElementById("story").value = "only a few words
"; + w.confirmAnswer = false; + assert.equal(w.review(), false); + assert.match(w.confirms[0], /doesn't appear to be 100 words long/); + w.confirmAnswer = true; + assert.equal(w.review(), true); + + w.confirms.length = 0; + w.document.getElementById("story").value = "word ".repeat(100); + assert.equal(w.review(), true); + assert.deepEqual(w.confirms, []); +}); + +test("delete asks first, and then skips the review", () => { + const w = publishWindow(""); + w.confirmAnswer = false; + assert.equal(w.do_delete(), false); + assert.equal(w.eval("is_delete"), 0); + w.confirmAnswer = true; + assert.equal(w.do_delete(), true); + assert.equal(w.review(), true); + assert.deepEqual(w.alerts, []); +}); + +test("toggle_remove marks the image for removal and back", () => { + const w = publishWindow(); + const flag = w.document.getElementById("remove_img"); + const icon = w.document.getElementById("remove_img_icon"); + w.toggle_remove(); + assert.equal(flag.value, "1"); + assert.equal(icon.getAttribute("src"), "/graphics/trashcan-open.png"); + assert.equal(icon.title, "Image is marked for removal."); + w.toggle_remove(); + assert.equal(flag.value, "0"); + assert.equal(icon.getAttribute("src"), "/graphics/trashcan.png"); + assert.equal(icon.title, "Image has been restored; it will not be removed."); +}); + +test("the phone menu closes on Escape and on a click outside it", () => { + const w = load(["utilities.js"], ` + +