@webcoder49/code-input 2.1.0 → 2.2.1

package/tests/tester.js

@@ -0,0 +1,529 @@
+/* This file contains the main code to test the code-input library with Prism.js and highlight.js. */
+
+/* --- Test running functions --- */
+var testsFailed = false;
+
+/* Add data to the tests list under a specific group and test description (usually the plugin name then the functionality description) */
+function testData(group, test, data) {
+    let resultElem = document.getElementById("test-results");
+    let groupElem = resultElem.querySelector("#test-"+group);
+    if(groupElem == undefined) {
+        groupElem = document.createElement("span");
+        groupElem.innerHTML = `Group <b>${group}</b>:\n`
+        groupElem.id = "test-" + group;
+        resultElem.append(groupElem);
+    }
+    groupElem.innerHTML += `\t${test}: ${data}\n`;
+}
+
+/* Add a test to the tests list, saying if it has passed (passed parameter), and if it has failed giving a message (messageIfFailed parameter) */
+function testAssertion(group, test, passed, messageIfFailed) {
+    let resultElem = document.getElementById("test-results");
+    let groupElem = resultElem.querySelector("#test-"+group);
+    if(groupElem == undefined) {
+        groupElem = document.createElement("span");
+        groupElem.innerHTML = `Group <b>${group}</b>:\n`
+        groupElem.id = "test-" + group;
+        resultElem.append(groupElem);
+    }
+    groupElem.innerHTML += `\t${test}: ${passed ? '<b style="color: darkgreen;">passed</b>' : '<b style="color: red;">failed</b> ('+messageIfFailed+')' }\n`;
+
+    if(!passed) testsFailed = true;
+}
+
+/* Run a test that passes if the givenOutput == correctOutput */
+function assertEqual(group, test, givenOutput, correctOutput) {
+    let equal = givenOutput == correctOutput;
+    testAssertion(group, test, equal, "see console output");
+    if(!equal) {
+        console.error(group, test, givenOutput, "should be", correctOutput);
+    }
+}
+
+/* Test whether adding text to the textarea (with keyboard events emitted, therefore interacting with plugins) gives the correct output and selection start/end. */
+function testAddingText(group, textarea, action, correctOutput, correctLengthToSelectionStart, correctLengthToSelectionEnd) {
+    let origSelectionStart = textarea.selectionStart;
+    let origValueBefore = textarea.value.substring(0, textarea.selectionStart);
+    let origValueAfter = textarea.value.substring(textarea.selectionEnd);
+    action(textarea);
+
+    let correctOutputValue = origValueBefore+correctOutput+origValueAfter;
+    assertEqual(group, "Text Output", textarea.value, correctOutputValue);
+    assertEqual(group, "Code-Input Value JS Property Output", textarea.parentElement.value, correctOutputValue);
+    assertEqual(group, "Selection Start", textarea.selectionStart, origSelectionStart+correctLengthToSelectionStart);
+    assertEqual(group, "Selection End", textarea.selectionEnd, origSelectionStart+correctLengthToSelectionEnd);
+}
+
+/* --- Test helper functions --- */
+
+/* Assuming the textarea is focused, add the given text to it, emitting 'input' and 'beforeinput' keyboard events (and 'keydown'/'keyup' Enter on newlines, if enterEvents is true) which plugins can handle */
+function addText(textarea, text, enterEvents=false) {
+    for(let i = 0; i < text.length; i++) {
+        if(enterEvents && text[i] == "\n") {
+            textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
+            textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
+        } else {
+            let beforeInputEvt = new InputEvent("beforeinput", { "cancelable": true, "data": text[i] });
+            textarea.dispatchEvent(beforeInputEvt);
+            if(!beforeInputEvt.defaultPrevented) {
+                textarea.dispatchEvent(new InputEvent("input", { "data": text[i] }));
+            }
+        }
+    }
+}
+
+/* Emit the necessary events to simulate a backspace keypress in the textarea. */
+function backspace(textarea) {
+    let keydownEvt = new KeyboardEvent("keydown", { "cancelable": true, "key": "Backspace" });
+    textarea.dispatchEvent(keydownEvt);
+    let keyupEvt = new KeyboardEvent("keyup", { "cancelable": true, "key": "Backspace" });
+    textarea.dispatchEvent(keyupEvt);
+    if(!keydownEvt.defaultPrevented) {
+        if(textarea.selectionEnd == textarea.selectionStart) {
+            textarea.selectionEnd = textarea.selectionStart;
+            textarea.selectionStart--;
+        }
+        document.execCommand("delete", false, null);
+    }
+}
+
+/* Move the caret numMovesRight characters to the right, in the textarea. */
+function move(textarea, numMovesRight) {
+    textarea.selectionStart += numMovesRight;
+    textarea.selectionEnd = textarea.selectionStart;
+}
+
+/* Wait in an asynchronous function for a specified number of milliseconds by using `await waitAsync(milliseconds)`. */
+function waitAsync(milliseconds) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, milliseconds);
+    });
+}
+
+/* --- Running the tests --- */
+
+/* Start the test, for Prism.js if isHLJS is false, or for highlight.js if isHLJS is true. */
+function beginTest(isHLJS) {
+    let codeInputElem = document.querySelector("code-input");
+    if(isHLJS) {
+        codeInput.registerTemplate("code-editor", codeInput.templates.hljs(hljs, [
+            new codeInput.plugins.AutoCloseBrackets(), 
+            new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
+                if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
+                    // Show popup
+                    popupElem.style.display = "block";
+                    popupElem.innerHTML = "Here's your popup!";
+                } else {
+                    popupElem.style.display = "none";
+                }
+            }),
+            new codeInput.plugins.Autodetect(),
+            new codeInput.plugins.FindAndReplace(),
+            new codeInput.plugins.GoToLine(),
+            new codeInput.plugins.Indent(true, 2),
+            new codeInput.plugins.SpecialChars(true),
+        ]));
+    } else {
+        codeInput.registerTemplate("code-editor", codeInput.templates.prism(Prism, [
+            new codeInput.plugins.AutoCloseBrackets(), 
+            new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
+                if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
+                    // Show popup
+                    popupElem.style.display = "block";
+                    popupElem.innerHTML = "Here's your popup!";
+                } else {
+                    popupElem.style.display = "none";
+                }
+            }),
+            new codeInput.plugins.FindAndReplace(),
+            new codeInput.plugins.GoToLine(),
+            new codeInput.plugins.Indent(true, 2),
+            new codeInput.plugins.SpecialChars(true),
+        ]));
+    }
+    startLoad(codeInputElem, isHLJS);
+}
+
+/* Start loading the tests, using the codeInput load time as one of the tests. */
+function startLoad(codeInputElem, isHLJS) {
+    let textarea;
+    let timeToLoad = 0;
+    let interval = window.setInterval(() => {
+        textarea = codeInputElem.querySelector("textarea");
+        if(textarea != null) window.clearInterval(interval);
+        timeToLoad += 10;
+        testData("TimeTaken", "Textarea Appears", timeToLoad+"ms (nearest 10)");
+        startTests(textarea, isHLJS);
+    }, 10);
+}
+
+/* Make input events work and be trusted in the inputElement - thanks for this SO answer: https://stackoverflow.com/a/49519772/21785620 */
+function allowInputEvents(inputElement) {
+    inputElement.addEventListener('input', function(e){
+        if(!e.isTrusted){
+            e.preventDefault();
+            // Manually trigger
+            document.execCommand("insertText", false, e.data);
+        }
+    }, false);
+}
+
+/* Start the tests using the textarea inside the code-input element and whether highlight.js is being used (as the Autodetect plugin only works with highlight.js, for example) */
+async function startTests(textarea, isHLJS) {
+    textarea.focus();
+    allowInputEvents(textarea);
+
+    codeInputElement = textarea.parentElement;
+
+    /*--- Tests for core functionality ---*/
+
+    // Textarea's initial value should be correct.
+    assertEqual("Core", "Initial Textarea Value", textarea.value, `console.log("Hello, World!");
+// A second line
+// A third line with <html> tags`);
+    // Code element's displayed value, ignoring appearance with HTML tags, should be the initial value but HTML-escaped
+    let renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
+    assertEqual("Core", "Initial Rendered Value", renderedValue, `console.log("Hello, World!");
+// A second line
+// A third line with &lt;html&gt; tags`);
+
+
+    // Update code-input value with JavaScript, new value and num events should be correct.
+    codeInputElement.value += `
+console.log("I've got another line!", 2 < 3, "should be true.");`;
+
+    await waitAsync(50); // Wait for rendered value to update
+
+    // Textarea's value once updated with JavaScript should be correct.
+    assertEqual("Core", "JS-updated Textarea Value", textarea.value, `console.log("Hello, World!");
+// A second line
+// A third line with <html> tags
+console.log("I've got another line!", 2 < 3, "should be true.");`);
+    // Code element's displayed value, ignoring appearance with HTML tags, should be the initial value but HTML-escaped
+    renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
+    assertEqual("Core", "JS-updated Rendered Value", renderedValue, `console.log("Hello, World!");
+// A second line
+// A third line with &lt;html&gt; tags
+console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
+
+    // Event Tests
+    let numTimesInputCalled = 0;
+    let numTimesChangeCalled = 0;
+    codeInputElement.addEventListener("input", (evt) => {
+        if(!evt.isTrusted) { // To prevent duplicate calling due to allowInputEvents hack
+            numTimesInputCalled++;
+        }
+    });
+    codeInputElement.addEventListener("change", () => {
+        numTimesChangeCalled++;
+    });
+
+    let inputDeletedListenerCalled = false;
+    let deletedListener = () => {
+        inputDeletedListenerCalled = true;
+    };
+    codeInputElement.addEventListener("input", deletedListener);
+    codeInputElement.removeEventListener("input", deletedListener);
+
+    // Make listeners be called
+    textarea.focus(); // Focus textarea
+    addText(textarea, " // Hi");
+    textarea.blur(); // Unfocus textarea - calls change event
+    textarea.focus();
+
+    assertEqual("Core", "Input Event Listener Called Right Number of Times", numTimesInputCalled, 6);
+    assertEqual("Core", "Change Event Listener Called Right Number of Times", numTimesChangeCalled, 1);
+    testAssertion("Core", "Input Event Removed Listener Not Called", !inputDeletedListenerCalled, "(code-input element).removeEventListener did not work.");
+    
+    // Changing language should be correct
+    if(!isHLJS) {
+        // Highlight.js has autodetect plugin that should make this fail, so don't run these tests with it.
+        testAssertion("Core", "Language attribute Initial value", 
+            codeInputElement.codeElement.classList.contains("language-javascript")
+            && !codeInputElement.codeElement.classList.contains("language-html"), 
+            `Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`);
+
+        codeInputElement.setAttribute("language", "HTML");
+    
+        await waitAsync(50); // Wait for attribute change to be handled
+
+        testAssertion("Core", "Language attribute Changed value 1", 
+            codeInputElement.codeElement.classList.contains("language-html")
+            && !codeInputElement.codeElement.classList.contains("language-javascript"), 
+            `Language set to HTML but code element's class name is ${codeInputElement.codeElement.className}.`);
+        
+        codeInputElement.setAttribute("language", "JavaScript");
+
+        await waitAsync(50); // Wait for attribute change to be handled
+
+        testAssertion("Core", "Language attribute Changed value 2", 
+            codeInputElement.codeElement.classList.contains("language-javascript")
+            && !codeInputElement.codeElement.classList.contains("language-html"), 
+            `Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`);
+    }
+
+    let formElement = codeInputElement.parentElement;
+    formElement.reset();
+    
+    await waitAsync(50); // Wait for rendered value to update
+    
+    assertEqual("Core", "Form Reset resets Code-Input Value", codeInputElement.value, `console.log("Hello, World!");
+// A second line
+// A third line with <html> tags`);
+    assertEqual("Core", "Form Reset resets Textarea Value", textarea.value, `console.log("Hello, World!");
+// A second line
+// A third line with <html> tags`);
+    renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
+    assertEqual("Core", "Form Reset resets Rendered Value", renderedValue, `console.log("Hello, World!");
+// A second line
+// A third line with &lt;html&gt; tags`);
+
+    /*--- Tests for plugins ---*/
+    // AutoCloseBrackets
+    testAddingText("AutoCloseBrackets", textarea, function(textarea) {
+        addText(textarea, `\nconsole.log("A test message`);
+        move(textarea, 2);
+        addText(textarea, `;\nconsole.log("Another test message");\n{[{[]}(([[`);
+        backspace(textarea);
+        backspace(textarea);
+        backspace(textarea);
+        addText(textarea, `)`);
+    }, '\nconsole.log("A test message");\nconsole.log("Another test message");\n{[{[]}()]}', 77, 77);
+    
+    // Autocomplete
+    addText(textarea, "popup");
+    
+    await waitAsync(50); // Wait for popup to be rendered
+        
+    testAssertion("Autocomplete", "Popup Shows", confirm("Does the autocomplete popup display correctly? (OK=Yes)"), "user-judged");
+    backspace(textarea);
+    
+    await waitAsync(50); // Wait for popup disappearance to be rendered
+    
+    testAssertion("Autocomplete", "Popup Disappears", confirm("Has the popup disappeared? (OK=Yes)"), "user-judged");
+    backspace(textarea);
+    backspace(textarea);
+    backspace(textarea);
+    backspace(textarea);
+
+    // Autodetect - these tests have been made so the programming language is very obvious
+    //  - the efficacy of autodetection is highlight.js' responsibility.
+    if(isHLJS) {
+        // Check detects XML - Replace all code with XML
+        textarea.selectionStart = 0;
+        textarea.selectionEnd = textarea.value.length;
+        backspace(textarea);
+        addText(textarea, 'console.log("Hello, World!");\nfunction sayHello(name) {\n  console.log("Hello, " + name + "!");\n}\nsayHello("code-input");');
+        await waitAsync(50); // Wait for highlighting so language attribute updates
+        assertEqual("Autodetect", "Detects JavaScript", codeInputElement.getAttribute("language"), "javascript");
+    
+        // Check detects Python - Replace all code with Python
+        textarea.selectionStart = 0;
+        textarea.selectionEnd = textarea.value.length;
+        backspace(textarea);
+        addText(textarea, '#!/usr/bin/python\nprint("Hello, World!")\nfor i in range(5):\n  print(i)');
+        await waitAsync(50); // Wait for highlighting so language attribute updates
+        assertEqual("Autodetect", "Detects Python", codeInputElement.getAttribute("language"), "python");
+
+        // Check detects CSS - Replace all code with CSS
+        textarea.selectionStart = 0;
+        textarea.selectionEnd = textarea.value.length;
+        backspace(textarea);
+        addText(textarea, "body, html {\n  height: 100%;\n  background-color: blue;\n  color: red;\n}");
+        await waitAsync(50); // Wait for highlighting so language attribute updates
+        assertEqual("Autodetect", "Detects CSS", codeInputElement.getAttribute("language"), "css");
+    }
+
+    // FindAndReplace
+    // Replace all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+    addText(textarea, "// hello /\\S/g\nhe('llo', /\\s/g);\nhello");
+    textarea.selectionStart = textarea.selectionEnd = 0; // So focuses on first match
+
+    await waitAsync(50); // Wait for highlighting so text updates
+
+    // Open dialog and get interactive elements
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "f", "ctrlKey": true }));
+    let inputBoxes = codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog input");
+    let findInput = inputBoxes[0];
+    let regExpCheckbox = inputBoxes[1];
+    let caseSensitiveCheckbox = inputBoxes[2];
+    let replaceInput = inputBoxes[3];
+
+    let buttons = codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog button");
+    let nextMatchButton = buttons[0];
+    let previousMatchButton = buttons[1];
+    let replaceButton = buttons[2];
+    let replaceAllButton = buttons[3];
+
+    let replaceDropdown = codeInputElement.querySelector(".code-input_find-and-replace_dialog details summary");
+
+    // Run find/replace tests
+    findInput.value = "/\\s/g";
+    caseSensitiveCheckbox.click(); // Now case-sensitive
+    await waitAsync(150); // Wait for highlighting so matches update
+    testAssertion("FindAndReplace", "Finds Case-Sensitive Matches Correctly", confirm("Is there a match on only the lowercase '/\\s/g'?"), "user-judged");
+
+    findInput.value = "he[^l]*llo";
+    regExpCheckbox.click(); // Now regex
+    caseSensitiveCheckbox.click(); // Now not case-sensitive
+    await waitAsync(150); // Wait for highlighting so matches update
+    // Focuses on next match after /\s/g, therefore third he...llo
+    testAssertion("FindAndReplace", "Finds RegExp Matches Correctly", confirm("Are there matches on all 'he...llo's?"), "user-judged");
+
+    replaceDropdown.click();
+    previousMatchButton.click();
+    replaceInput.value = "do('hello";
+    replaceButton.click();
+    await waitAsync(50); // Wait for buttons to work
+    assertEqual("FindAndReplace", "Replaces Once Correctly", textarea.value, "// hello /\\S/g\ndo('hello', /\\s/g);\nhello");
+    nextMatchButton.click(); // Back to first match
+
+    // Exit find input box
+    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));
+    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup", { "key": "Escape" }));
+
+    // Check first hello now selected
+    assertEqual("FindAndReplace", "Selection Start on Focused Match when Dialog Exited", textarea.selectionStart, 3);
+    assertEqual("FindAndReplace", "Selection End on Focused Match when Dialog Exited", textarea.selectionEnd, 8);
+    
+    // Open replace dialog; conduct a find and replace
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "h", "ctrlKey": true }));
+    findInput.value = "";
+    findInput.focus();
+    allowInputEvents(findInput);
+    addText(findInput, "hello");
+    await waitAsync(150); // Wait for highlighting so matches update
+
+    replaceInput.value = "hi";
+    replaceAllButton.click();
+    assertEqual("FindAndReplace", "Replaces All Correctly", textarea.value, "// hi /\\S/g\ndo('hi', /\\s/g);\nhi");
+
+    // Exit find input box
+    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));
+    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup", { "key": "Escape" }));
+
+    // GoToLine
+    // Replace all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+    addText(textarea, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line");
+    
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
+    let lineInput = codeInputElement.querySelector(".code-input_go-to-line_dialog input");
+    lineInput.value = "1";
+    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
+    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
+    assertEqual("GoToLine", "Line Only", textarea.selectionStart, 0);
+
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
+    lineInput.value = "3:18";
+    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
+    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
+    assertEqual("GoToLine", "Line and Column", textarea.selectionStart, 45);
+    
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
+    lineInput.value = "10";
+    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
+    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
+    assertEqual("GoToLine", "Rejects Out-of-range Line", lineInput.classList.contains("code-input_go-to-line_error"), true);
+
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
+    lineInput.value = "2:12";
+    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
+    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
+    assertEqual("GoToLine", "Rejects Out-of-range Column", lineInput.classList.contains("code-input_go-to-line_error"), true);
+
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
+    lineInput.value = "sausages";
+    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
+    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
+    assertEqual("GoToLine", "Rejects Invalid Input", lineInput.classList.contains("code-input_go-to-line_error"), true);
+    assertEqual("GoToLine", "Stays open when Rejects Input", lineInput.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"), false);
+
+    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));
+    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Escape" }));
+    assertEqual("GoToLine", "Exits when Esc pressed", lineInput.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"), true);
+
+    // Indent
+    textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+    addText(textarea, "\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}");
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": false }));
+    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": false }));
+    assertEqual("Indent", "Indents Lines", textarea.value, "  // 7 times table\n  let i = 1;\n  while(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n  // That's my code.\n  // This is another comment\n  // Another\n  // Line\n  for(let i = 0; i < 100; i++) {\n    for(let j = i; j < 100; j++) {\n      // Here's some code\n      console.log(i,j);\n    }\n  }\n  {\n    // This is indented\n  }");
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": true }));
+    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": true }));
+    assertEqual("Indent", "Unindents Lines", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}");
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": true }));
+    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": true }));
+    assertEqual("Indent", "Unindents Lines where some are already fully unindented", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}");
+    
+    textarea.selectionStart = 255;
+    textarea.selectionEnd = 274;
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": false }));
+    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": false }));
+    assertEqual("Indent", "Indents Lines by Selection", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n  // This is indented\n}");
+
+    textarea.selectionStart = 265;
+    textarea.selectionEnd = 265;
+    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": true }));
+    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": true }));
+    assertEqual("Indent", "Unindents Lines by Selection", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}");
+
+    // Indent+AutoCloseBrackets
+    // Clear all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+
+    testAddingText("Indent-AutoCloseBrackets", textarea, function(textarea) {
+        addText(textarea, `function printTriples(max) {\nfor(let i = 0; i < max-2; i++) {\nfor(let j = 0; j < max-1; j++) {\nfor(let k = 0; k < max; k++) {\nconsole.log(i,j,k);\n}\n//Hmmm...`, true);
+    }, 'function printTriples(max) {\n  for(let i = 0; i < max-2; i++) {\n    for(let j = 0; j < max-1; j++) {\n      for(let k = 0; k < max; k++) {\n        console.log(i,j,k);\n      }\n      //Hmmm...\n      }\n    }\n  }\n}', 189, 189);
+
+    // SpecialChars
+    // Clear all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+
+    addText(textarea, '"Some special characters: \u0096,\u0001\u0003,\u0002..."');
+    textarea.selectionStart = textarea.value.length-4;
+    textarea.selectionEnd = textarea.value.length;
+
+    await waitAsync(50); // Wait for special characters to be rendered
+    
+    testAssertion("SpecialChars", "Displays Correctly", confirm("Do the special characters read (0096),(0001)(0003),(0002) and align with the ellipsis? (OK=Yes)"), "user-judged");
+
+    // Large amounts of code
+    // Clear all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+    fetch(new Request("https://cdn.jsdelivr.net/gh/webcoder49/code-input@2.1/code-input.js"))
+    .then((response) => response.text())
+    .then((code) => {
+        textarea.value = "// code-input v2.1: A large code file (not the latest version!)\n// Editing this here should give little latency.\n\n"+code;
+        
+        textarea.selectionStart = 112;
+        textarea.selectionEnd = 112;
+        addText(textarea, "\n", true);
+
+        document.getElementById("collapse-results").setAttribute("open", true);
+    });
+
+    /* Make it clear if any tests have failed */
+    if(testsFailed) {
+        document.querySelector("h2").style.backgroundColor = "red";
+        document.querySelector("h2").textContent = "Some Tests have Failed.";
+    } else {
+        document.querySelector("h2").style.backgroundColor = "lightgreen";
+        document.querySelector("h2").textContent = "All Tests have Passed.";
+    }
+}

package/tests/tester.min.js

@@ -0,0 +1,18 @@
+var testsFailed=!1;function testData(a,b,c){let d=document.getElementById("test-results"),e=d.querySelector("#test-"+a);e==null&&(e=document.createElement("span"),e.innerHTML=`Group <b>${a}</b>:\n`,e.id="test-"+a,d.append(e)),e.innerHTML+=`\t${b}: ${c}\n`}function testAssertion(a,b,c,d){let e=document.getElementById("test-results"),f=e.querySelector("#test-"+a);f==null&&(f=document.createElement("span"),f.innerHTML=`Group <b>${a}</b>:\n`,f.id="test-"+a,e.append(f)),f.innerHTML+=`\t${b}: ${c?"<b style=\"color: darkgreen;\">passed</b>":"<b style=\"color: red;\">failed</b> ("+d+")"}\n`,c||(testsFailed=!0)}function assertEqual(a,b,c,d){let e=c==d;testAssertion(a,b,e,"see console output"),e||console.error(a,b,c,"should be",d)}function testAddingText(a,b,c,d,e,f){let g=b.selectionStart,h=b.value.substring(0,b.selectionStart),i=b.value.substring(b.selectionEnd);c(b);let j=h+d+i;assertEqual(a,"Text Output",b.value,j),assertEqual(a,"Code-Input Value JS Property Output",b.parentElement.value,j),assertEqual(a,"Selection Start",b.selectionStart,g+e),assertEqual(a,"Selection End",b.selectionEnd,g+f)}function addText(a,b,c=!1){for(let d=0;d<b.length;d++)if(c&&"\n"==b[d])a.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"}));else{let c=new InputEvent("beforeinput",{cancelable:!0,data:b[d]});a.dispatchEvent(c),c.defaultPrevented||a.dispatchEvent(new InputEvent("input",{data:b[d]}))}}function backspace(a){let b=new KeyboardEvent("keydown",{cancelable:!0,key:"Backspace"});a.dispatchEvent(b);let c=new KeyboardEvent("keyup",{cancelable:!0,key:"Backspace"});a.dispatchEvent(c),b.defaultPrevented||(a.selectionEnd==a.selectionStart&&(a.selectionEnd=a.selectionStart,a.selectionStart--),document.execCommand("delete",!1,null))}function move(a,b){a.selectionStart+=b,a.selectionEnd=a.selectionStart}function waitAsync(a){return new Promise(b=>{setTimeout(()=>{b()},a)})}function beginTest(a){let b=document.querySelector("code-input");a?codeInput.registerTemplate("code-editor",codeInput.templates.hljs(hljs,[new codeInput.plugins.AutoCloseBrackets,new codeInput.plugins.Autocomplete(function(a,b,c){"popup"==b.value.substring(c-5,c)?(a.style.display="block",a.innerHTML="Here's your popup!"):a.style.display="none"}),new codeInput.plugins.Autodetect,new codeInput.plugins.FindAndReplace,new codeInput.plugins.GoToLine,new codeInput.plugins.Indent(!0,2),new codeInput.plugins.SpecialChars(!0)])):codeInput.registerTemplate("code-editor",codeInput.templates.prism(Prism,[new codeInput.plugins.AutoCloseBrackets,new codeInput.plugins.Autocomplete(function(a,b,c){"popup"==b.value.substring(c-5,c)?(a.style.display="block",a.innerHTML="Here's your popup!"):a.style.display="none"}),new codeInput.plugins.FindAndReplace,new codeInput.plugins.GoToLine,new codeInput.plugins.Indent(!0,2),new codeInput.plugins.SpecialChars(!0)])),startLoad(b,a)}function startLoad(a,b){let c,d=0,e=window.setInterval(()=>{c=a.querySelector("textarea"),null!=c&&window.clearInterval(e),d+=10,testData("TimeTaken","Textarea Appears",d+"ms (nearest 10)"),startTests(c,b)},10)}function allowInputEvents(a){a.addEventListener("input",function(a){a.isTrusted||(a.preventDefault(),document.execCommand("insertText",!1,a.data))},!1)}async function startTests(a,b){a.focus(),allowInputEvents(a),codeInputElement=a.parentElement,assertEqual("Core","Initial Textarea Value",a.value,`console.log("Hello, World!");
+// A second line
+// A third line with <html> tags`);let c=codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g,"");assertEqual("Core","Initial Rendered Value",c,`console.log("Hello, World!");
+// A second line
+// A third line with &lt;html&gt; tags`),codeInputElement.value+=`
+console.log("I've got another line!", 2 < 3, "should be true.");`,await waitAsync(50),assertEqual("Core","JS-updated Textarea Value",a.value,`console.log("Hello, World!");
+// A second line
+// A third line with <html> tags
+console.log("I've got another line!", 2 < 3, "should be true.");`),c=codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g,""),assertEqual("Core","JS-updated Rendered Value",c,`console.log("Hello, World!");
+// A second line
+// A third line with &lt;html&gt; tags
+console.log("I've got another line!", 2 &lt; 3, "should be true.");`);let d=0,e=0;codeInputElement.addEventListener("input",a=>{a.isTrusted||d++}),codeInputElement.addEventListener("change",()=>{e++});let f=!1,g=()=>{f=!0};codeInputElement.addEventListener("input",g),codeInputElement.removeEventListener("input",g),a.focus(),addText(a," // Hi"),a.blur(),a.focus(),assertEqual("Core","Input Event Listener Called Right Number of Times",d,6),assertEqual("Core","Change Event Listener Called Right Number of Times",e,1),testAssertion("Core","Input Event Removed Listener Not Called",!f,"(code-input element).removeEventListener did not work."),b||(testAssertion("Core","Language attribute Initial value",codeInputElement.codeElement.classList.contains("language-javascript")&&!codeInputElement.codeElement.classList.contains("language-html"),`Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`),codeInputElement.setAttribute("language","HTML"),await waitAsync(50),testAssertion("Core","Language attribute Changed value 1",codeInputElement.codeElement.classList.contains("language-html")&&!codeInputElement.codeElement.classList.contains("language-javascript"),`Language set to HTML but code element's class name is ${codeInputElement.codeElement.className}.`),codeInputElement.setAttribute("language","JavaScript"),await waitAsync(50),testAssertion("Core","Language attribute Changed value 2",codeInputElement.codeElement.classList.contains("language-javascript")&&!codeInputElement.codeElement.classList.contains("language-html"),`Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`));let h=codeInputElement.parentElement;h.reset(),await waitAsync(50),assertEqual("Core","Form Reset resets Code-Input Value",codeInputElement.value,`console.log("Hello, World!");
+// A second line
+// A third line with <html> tags`),assertEqual("Core","Form Reset resets Textarea Value",a.value,`console.log("Hello, World!");
+// A second line
+// A third line with <html> tags`),c=codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g,""),assertEqual("Core","Form Reset resets Rendered Value",c,`console.log("Hello, World!");
+// A second line
+// A third line with &lt;html&gt; tags`),testAddingText("AutoCloseBrackets",a,function(a){addText(a,`\nconsole.log("A test message`),move(a,2),addText(a,`;\nconsole.log("Another test message");\n{[{[]}(([[`),backspace(a),backspace(a),backspace(a),addText(a,`)`)},"\nconsole.log(\"A test message\");\nconsole.log(\"Another test message\");\n{[{[]}()]}",77,77),addText(a,"popup"),await waitAsync(50),testAssertion("Autocomplete","Popup Shows",confirm("Does the autocomplete popup display correctly? (OK=Yes)"),"user-judged"),backspace(a),await waitAsync(50),testAssertion("Autocomplete","Popup Disappears",confirm("Has the popup disappeared? (OK=Yes)"),"user-judged"),backspace(a),backspace(a),backspace(a),backspace(a),b&&(a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"console.log(\"Hello, World!\");\nfunction sayHello(name) {\n  console.log(\"Hello, \" + name + \"!\");\n}\nsayHello(\"code-input\");"),await waitAsync(50),assertEqual("Autodetect","Detects JavaScript",codeInputElement.getAttribute("language"),"javascript"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"#!/usr/bin/python\nprint(\"Hello, World!\")\nfor i in range(5):\n  print(i)"),await waitAsync(50),assertEqual("Autodetect","Detects Python",codeInputElement.getAttribute("language"),"python"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"body, html {\n  height: 100%;\n  background-color: blue;\n  color: red;\n}"),await waitAsync(50),assertEqual("Autodetect","Detects CSS",codeInputElement.getAttribute("language"),"css")),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"// hello /\\S/g\nhe('llo', /\\s/g);\nhello"),a.selectionStart=a.selectionEnd=0,await waitAsync(50),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"f",ctrlKey:!0}));let i=codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog input"),j=i[0],k=i[1],l=i[2],m=i[3],n=codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog button"),o=n[0],p=n[1],q=n[2],r=n[3],s=codeInputElement.querySelector(".code-input_find-and-replace_dialog details summary");j.value="/\\s/g",l.click(),await waitAsync(150),testAssertion("FindAndReplace","Finds Case-Sensitive Matches Correctly",confirm("Is there a match on only the lowercase '/\\s/g'?"),"user-judged"),j.value="he[^l]*llo",k.click(),l.click(),await waitAsync(150),testAssertion("FindAndReplace","Finds RegExp Matches Correctly",confirm("Are there matches on all 'he...llo's?"),"user-judged"),s.click(),p.click(),m.value="do('hello",q.click(),await waitAsync(50),assertEqual("FindAndReplace","Replaces Once Correctly",a.value,"// hello /\\S/g\ndo('hello', /\\s/g);\nhello"),o.click(),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"})),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup",{key:"Escape"})),assertEqual("FindAndReplace","Selection Start on Focused Match when Dialog Exited",a.selectionStart,3),assertEqual("FindAndReplace","Selection End on Focused Match when Dialog Exited",a.selectionEnd,8),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"h",ctrlKey:!0})),j.value="",j.focus(),allowInputEvents(j),addText(j,"hello"),await waitAsync(150),m.value="hi",r.click(),assertEqual("FindAndReplace","Replaces All Correctly",a.value,"// hi /\\S/g\ndo('hi', /\\s/g);\nhi"),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"})),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup",{key:"Escape"})),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line"),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0}));let t=codeInputElement.querySelector(".code-input_go-to-line_dialog input");t.value="1",t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Line Only",a.selectionStart,0),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),t.value="3:18",t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Line and Column",a.selectionStart,45),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),t.value="10",t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Rejects Out-of-range Line",t.classList.contains("code-input_go-to-line_error"),!0),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),t.value="2:12",t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Rejects Out-of-range Column",t.classList.contains("code-input_go-to-line_error"),!0),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),t.value="sausages",t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Rejects Invalid Input",t.classList.contains("code-input_go-to-line_error"),!0),assertEqual("GoToLine","Stays open when Rejects Input",t.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"),!1),t.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"})),t.dispatchEvent(new KeyboardEvent("keyup",{key:"Escape"})),assertEqual("GoToLine","Exits when Esc pressed",t.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"),!0),a.selectionStart=a.selectionEnd=a.value.length,addText(a,"\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}"),a.selectionStart=0,a.selectionEnd=a.value.length,a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!1})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!1})),assertEqual("Indent","Indents Lines",a.value,"  // 7 times table\n  let i = 1;\n  while(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n  // That's my code.\n  // This is another comment\n  // Another\n  // Line\n  for(let i = 0; i < 100; i++) {\n    for(let j = i; j < 100; j++) {\n      // Here's some code\n      console.log(i,j);\n    }\n  }\n  {\n    // This is indented\n  }"),a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!0})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!0})),assertEqual("Indent","Unindents Lines",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}"),a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!0})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!0})),assertEqual("Indent","Unindents Lines where some are already fully unindented",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}"),a.selectionStart=255,a.selectionEnd=274,a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!1})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!1})),assertEqual("Indent","Indents Lines by Selection",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n  // This is indented\n}"),a.selectionStart=265,a.selectionEnd=265,a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!0})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!0})),assertEqual("Indent","Unindents Lines by Selection",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),testAddingText("Indent-AutoCloseBrackets",a,function(a){addText(a,`function printTriples(max) {\nfor(let i = 0; i < max-2; i++) {\nfor(let j = 0; j < max-1; j++) {\nfor(let k = 0; k < max; k++) {\nconsole.log(i,j,k);\n}\n//Hmmm...`,!0)},"function printTriples(max) {\n  for(let i = 0; i < max-2; i++) {\n    for(let j = 0; j < max-1; j++) {\n      for(let k = 0; k < max; k++) {\n        console.log(i,j,k);\n      }\n      //Hmmm...\n      }\n    }\n  }\n}",189,189),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"\"Some special characters: \x96,\x01\x03,\x02...\""),a.selectionStart=a.value.length-4,a.selectionEnd=a.value.length,await waitAsync(50),testAssertion("SpecialChars","Displays Correctly",confirm("Do the special characters read (0096),(0001)(0003),(0002) and align with the ellipsis? (OK=Yes)"),"user-judged"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),fetch(new Request("https://cdn.jsdelivr.net/gh/webcoder49/code-input@2.1/code-input.js")).then(a=>a.text()).then(b=>{a.value="// code-input v2.1: A large code file (not the latest version!)\n// Editing this here should give little latency.\n\n"+b,a.selectionStart=112,a.selectionEnd=112,addText(a,"\n",!0),document.getElementById("collapse-results").setAttribute("open",!0)}),testsFailed?(document.querySelector("h2").style.backgroundColor="red",document.querySelector("h2").textContent="Some Tests have Failed."):(document.querySelector("h2").style.backgroundColor="lightgreen",document.querySelector("h2").textContent="All Tests have Passed.")}

package/plugins/debounce-update.js

@@ -1,40 +0,0 @@
-/**
- * Debounce the update and highlighting function
- * https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1
- * Files: debounce-update.js
- */
-codeInput.plugins.DebounceUpdate = class extends codeInput.Plugin {
-    /**
-     * Create a debounced update plugin to pass into a template
-     * @param {Number} delayMs Delay, in ms, to wait until updating the syntax highlighting 
-     */
-    constructor(delayMs) {
-        super([]); // No observed attributes
-        this.delayMs = delayMs;
-    }
-    /* Runs before elements are added into a `code-input`; Params: codeInput element) */
-    beforeElementsAdded(codeInput) {
-        this.update = codeInput.update.bind(codeInput); // Save previous update func
-        codeInput.update = this.updateDebounced.bind(this, codeInput);
-    }
-
-    /**
-     * Debounce the `update` function
-     */
-    updateDebounced(codeInput, text) {
-        // Editing - cancel prev. timeout
-        if(this.debounceTimeout != null) {
-            window.clearTimeout(this.debounceTimeout);
-        }
-
-        this.debounceTimeout = window.setTimeout(() => {
-            // Closure arrow function can take in variables like `text`
-            this.update(text);
-        }, this.delayMs);
-    }
-
-    // this.`update` function is original function
-
-    debounceTimeout = null; // Timeout until update
-    delayMs = 0; // Time until update
-}

package/plugins/debounce-update.min.js

@@ -1 +0,0 @@
-codeInput.plugins.DebounceUpdate=class extends codeInput.Plugin{constructor(a){super([]),this.delayMs=a}beforeElementsAdded(a){this.update=a.update.bind(a),a.update=this.updateDebounced.bind(this,a)}updateDebounced(a,b){null!=this.debounceTimeout&&window.clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout(()=>{this.update(b)},this.delayMs)}debounceTimeout=null;delayMs=0};