Файл сценария, встроенный в JSDOM, с обработчиком событий нажатия, не запускаемым - PullRequest
Новая
       6

Файл сценария, встроенный в JSDOM, с обработчиком событий нажатия, не запускаемым

0 голосов
/ 11 ноября 2019

Я пытаюсь выяснить JSDOM и удивляюсь, почему это работает, только если я вставил onclick="...JS code..." на кнопку. Прямое манипулирование элементами работает из встроенного файла, но addEventListener и element.onclick = ... - нет. Настройка проста.

test.html

<!doctype html>
  <html>
    <head>
    </head>
    <body>
      <p id="test">abc</p>

      //this works
      <!--<button id="test-button"
            onclick="this.previousElementSibling.innerText = 'xyz'">
            Click Me</button>-->

      <button id="test-button">Click Me</button>
      <script src='test.js'></script>
    </body>
</html>

test.js

(function() {
  function init() {

    //document.getElementById('test').textContent = 'Goodbye'; <- WORKS

    /*document.getElementById('test-button').addEventListener('click', event => {
      document.getElementById('test').textContent = 'Goodbye'; <- Doesn't Work
    });*/

    document.getElementById('test-button').onclick = function() {
      document.getElementById('test').textContent = 'Goodbye'; <- Doesn't Work
    };

  }

  setTimeout(() => {
    init();
  }, 2000);
})();

test.spec.js

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

const options = {
  resources: 'usable',
  runScripts: 'dangerously'
};

JSDOM.fromFile(path.join(process.cwd(), '/src/popup_page/test.html'), options).then((dom) => {

  const document = dom.window.document;

  console.log(document.querySelector('#test').textContent);
  //output -> abc

  document.querySelector('#test-button').click();
  setTimeout(() => {
    console.log(document.querySelector('#test').textContent);
    //output -> abc
  }, 5000);
});

test.jsзагружается JSDOM, что я могу подтвердить. Можно ли подключиться к обработчикам событий для тестирования? Я видел примеры, где вы можете объявлять и прослушивать события внутри spec-файла, но как бы вы протестировали код в обработчиках test.js или даже узнали, произошло ли событие?

...