Как создать событие `oninput` для элемента input [text] с помощью jsdom? - PullRequest
Новая
       49

Как создать событие `oninput` для элемента input [text] с помощью jsdom?

0 голосов
/ 02 августа 2020

Это моя установка jsdom. Я хочу протестировать событие oninput для элемента input[text]. Как может вызвать событие oninput? Потому что просто установка element.value не вызывает это событие. 

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;
        });
    });

1 Ответ

1 голос
/ 02 августа 2020

Согласно этот ответ , вы можете создать объект Event и использовать его для запуска события input, выполнив JS.

Поскольку вы используете JSDOM, вы можно сделать это в контексте страницы через 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());
...