test_multiline_editor_rendering.html (2312B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Multiline editor rendering 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 testBasicRendering() { 31 const result = await testHelpers.renderTemplate(); 32 const editor = result.querySelector("moz-multiline-editor"); 33 34 ok(editor, "Editor element is rendered"); 35 is(editor.value, "", "Editor has empty value"); 36 is(editor.placeholder, "", "Editor has empty placeholder"); 37 is(editor.readOnly, false, "Editor is not read-only by default"); 38 }); 39 40 add_task(async function testPlaceholder() { 41 const result = await testHelpers.renderTemplate(html` 42 <moz-multiline-editor placeholder="Enter text here"></moz-multiline-editor> 43 `); 44 const editor = result.querySelector("moz-multiline-editor"); 45 46 is(editor.placeholder, "Enter text here", "Placeholder is set correctly"); 47 }); 48 49 add_task(async function testReadOnly() { 50 const result = await testHelpers.renderTemplate(html` 51 <moz-multiline-editor readonly></moz-multiline-editor> 52 `); 53 const editor = result.querySelector("moz-multiline-editor"); 54 55 is(editor.readOnly, true, "Editor is read-only"); 56 }); 57 </script> 58 </head> 59 <body> 60 <p id="display"></p> 61 <div id="content" style="display: none"></div> 62 <pre id="test"></pre> 63 </body> 64 </html>