test_multiline_editor_value.html (3218B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Multiline editor value 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 testSingleWordValue() { 31 const result = await testHelpers.renderTemplate(); 32 const editor = result.querySelector("moz-multiline-editor"); 33 34 editor.value = "Hello"; 35 is(editor.value, "Hello", "Value with single word is set correctly"); 36 }); 37 38 add_task(async function testMultiWordValue() { 39 const result = await testHelpers.renderTemplate(); 40 const editor = result.querySelector("moz-multiline-editor"); 41 42 editor.value = "Hello and goodbye world"; 43 is(editor.value, "Hello and goodbye world", "Value with multiple words is set correctly"); 44 }); 45 46 add_task(async function testMultilineValue() { 47 const result = await testHelpers.renderTemplate(); 48 const editor = result.querySelector("moz-multiline-editor"); 49 50 const text = "Line 1\nLine 2\nLine 3"; 51 editor.value = text; 52 is(editor.value, text, "Multiline text is set correctly"); 53 }); 54 55 add_task(async function testClearValue() { 56 const result = await testHelpers.renderTemplate(); 57 const editor = result.querySelector("moz-multiline-editor"); 58 59 editor.value = "Some text"; 60 is(editor.value, "Some text", "Value is set"); 61 62 editor.value = ""; 63 is(editor.value, "", "Value is cleared"); 64 }); 65 66 add_task(async function testPendingValue() { 67 const editor = document.createElement("moz-multiline-editor"); 68 69 // Set value before rendering completed 70 editor.value = "Pending text"; 71 is(editor.value, "Pending text", "Value getter returns pending value before view creation"); 72 ok(!editor.shadowRoot, "Shadow root doesn’t exist before connection"); 73 74 const result = await testHelpers.renderTemplate(); 75 result.appendChild(editor); 76 77 // Wait for editor to complete rendering 78 await editor.updateComplete; 79 80 ok(editor.shadowRoot, "Shadow root exists"); 81 is(editor.value, "Pending text", "Pending value is applied"); 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>