test_multiline_editor_value.html

Enable keyboard shortcuts

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Multiline editor value 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 testSingleWordValue() {

        const result = await testHelpers.renderTemplate();

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

        editor.value = "Hello";

        is(editor.value, "Hello", "Value with single word is set correctly");

});

      add_task(async function testMultiWordValue() {

        const result = await testHelpers.renderTemplate();

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

        editor.value = "Hello and goodbye world";

        is(editor.value, "Hello and goodbye world", "Value with multiple words is set correctly");

});

      add_task(async function testMultilineValue() {

        const result = await testHelpers.renderTemplate();

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

        const text = "Line 1\nLine 2\nLine 3";

        editor.value = text;

        is(editor.value, text, "Multiline text is set correctly");

});

      add_task(async function testClearValue() {

        const result = await testHelpers.renderTemplate();

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

        editor.value = "Some text";

        is(editor.value, "Some text", "Value is set");

        editor.value = "";

        is(editor.value, "", "Value is cleared");

});

      add_task(async function testPendingValue() {

        const editor = document.createElement("moz-multiline-editor");

        // Set value before rendering completed

        editor.value = "Pending text";

        is(editor.value, "Pending text", "Value getter returns pending value before view creation");

        ok(!editor.shadowRoot, "Shadow root doesn’t exist before connection");

        const result = await testHelpers.renderTemplate();

        result.appendChild(editor);

        // Wait for editor to complete rendering

        await editor.updateComplete;

        ok(editor.shadowRoot, "Shadow root exists");

        is(editor.value, "Pending text", "Pending value is applied");

});

    </script>

  </head>

  <body>

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

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

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

  </body>

</html>