test_multiline_editor_input.html (3112B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Multiline editor input test</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link 8 rel="stylesheet" 9 href="chrome://mochikit/content/tests/SimpleTest/test.css" 10 /> 11 <link rel="stylesheet" href="chrome://global/skin/global.css" /> 12 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 13 <script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script> 14 <script 15 type="module" 16 src="chrome://browser/content/multilineeditor/multiline-editor.mjs" 17 ></script> 18 <script> 19 let html; 20 let testHelpers; 21 22 add_setup(async function setup() { 23 testHelpers = new LitTestHelpers(); 24 ({ html } = await testHelpers.setupLit()); 25 testHelpers.setupTests({ 26 templateFn: (attributes) => html`<moz-multiline-editor ${attributes}></moz-multiline-editor>`, 27 }); 28 }); 29 30 add_task(async function testInputEvent() { 31 const result = await testHelpers.renderTemplate(); 32 const editor = result.querySelector("moz-multiline-editor"); 33 34 let inputEventFired = false; 35 const inputPromise = BrowserTestUtils.waitForEvent(editor, "input"); 36 editor.addEventListener("input", () => { 37 inputEventFired = true; 38 }); 39 40 editor.focus(); 41 sendString("a"); 42 await inputPromise; 43 44 ok(inputEventFired, "Input event was fired"); 45 ok(editor.value.includes("a"), "Value updated after input"); 46 }); 47 48 add_task(async function testFocus() { 49 const result = await testHelpers.renderTemplate(); 50 const editor = result.querySelector("moz-multiline-editor"); 51 52 editor.focus(); 53 const shadowRoot = editor.shadowRoot; 54 const editorElement = shadowRoot.querySelector(".multiline-editor"); 55 ok(editorElement, "Editor element exists in shadow DOM"); 56 57 ok(shadowRoot.activeElement, "Shadow DOM has an active element after focus"); 58 is(document.activeElement, editor, "Editor element is the active element in document"); 59 }); 60 61 add_task(async function testReadOnlyPreventsUserInput() { 62 const result = await testHelpers.renderTemplate(html` 63 <moz-multiline-editor readonly></moz-multiline-editor> 64 `); 65 const editor = result.querySelector("moz-multiline-editor"); 66 67 is(editor.readOnly, true, "Editor is read-only"); 68 is(editor.value, "", "Initial value is empty"); 69 70 let inputEventFired = false; 71 editor.addEventListener("input", () => { 72 inputEventFired = true; 73 }); 74 75 editor.focus(); 76 sendString("test"); 77 78 await new Promise(resolve => requestAnimationFrame(resolve)); 79 80 ok(!inputEventFired, "Input event not fired"); 81 is(editor.value, "", "Value remains empty"); 82 }); 83 </script> 84 </head> 85 <body> 86 <p id="display"></p> 87 <div id="content" style="display: none"></div> 88 <pre id="test"></pre> 89 </body> 90 </html>