0

This my jsdom setup. I want to test oninput event for input[text] element. How can trigger oninput event? Because just setting element.value do not trigger this event.

const jsdom = require("jsdom");
    const { JSDOM } = jsdom;      
    suiteSetup(() => {
        return JSDOM.fromFile("./views/index.html", {
          runScripts: "dangerously",
          resources: "usable"
        }).then(dom => {
          global.dom = dom
          global.window = dom.window;
          global.document = dom.window.document;
        });
    });
Alan Svits
  • 122
  • 1
  • 10

2 Answers2

2

As per this answer, you can create an Event object and use it to trigger the input event by executing the JS.

Since you are using JSDOM, you can do that in the context of the page through eval.

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const dom = new JSDOM(
    `<!DOCTYPE html>
        <meta charset="utf-8">
        <title>Test</title>
        <input>
        <p>Hello world</p>

        <script>
            document.querySelector("input").addEventListener("input", event =>
                document.querySelector("p").textContent = event.target.value
            );
        </script>`,
    {
        runScripts: 'dangerously',
        resources: 'usable',
    }
);

dom.window.eval(`
    const input = document.querySelector("input");
    input.value = "New value";
    const event = new Event('input', {
        bubbles: true,
        cancelable: true
    });
    input.dispatchEvent(event);
`);

console.log(dom.serialize());
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

I can't improve the previous answer because I get the error: edit queue is full.

Since jsDOM gives you a near complete browser environment, you don't need the eval. You can trigger the event directly from Node.

const input = dom.window.document.querySelector("input");
input.value = "New value";
const event = new Event('input', {
        bubbles: true,
        cancelable: true
});
input.dispatchEvent(event);
gerardnico
  • 855
  • 11
  • 10