test_multiline_editor_rendering.html

Enable keyboard shortcuts

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Multiline editor rendering test</title>

    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

    <link

      rel="stylesheet"

      href="chrome://mochikit/content/tests/SimpleTest/test.css"

/>

    <link rel="stylesheet" href="chrome://global/skin/global.css" />

    <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

    <script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script>

    <script

      type="module"

      src="chrome://browser/content/multilineeditor/multiline-editor.mjs"

    ></script>

    <script>

      let html;

      let testHelpers;

      add_setup(async function setup() {

        testHelpers = new LitTestHelpers();

        ({ html } = await testHelpers.setupLit());

        testHelpers.setupTests({

          templateFn: (attributes) => html`<moz-multiline-editor ${attributes}></moz-multiline-editor>`,

});

});

      add_task(async function testBasicRendering() {

        const result = await testHelpers.renderTemplate();

        const editor = result.querySelector("moz-multiline-editor");

        ok(editor, "Editor element is rendered");

        is(editor.value, "", "Editor has empty value");

        is(editor.placeholder, "", "Editor has empty placeholder");

        is(editor.readOnly, false, "Editor is not read-only by default");

});

      add_task(async function testPlaceholder() {

        const result = await testHelpers.renderTemplate(html`

          <moz-multiline-editor placeholder="Enter text here"></moz-multiline-editor>

`);

        const editor = result.querySelector("moz-multiline-editor");

        is(editor.placeholder, "Enter text here", "Placeholder is set correctly");

});

      add_task(async function testReadOnly() {

        const result = await testHelpers.renderTemplate(html`

          <moz-multiline-editor readonly></moz-multiline-editor>

`);

        const editor = result.querySelector("moz-multiline-editor");

        is(editor.readOnly, true, "Editor is read-only");

});

    </script>

  </head>

  <body>

    <p id="display"></p>

    <div id="content" style="display: none"></div>

    <pre id="test"></pre>

  </body>

</html>