Javascript - Testing DOM Manipulations

Question

Я начинаю писать модульные тесты для своего javascript, используя Mocha с Chai, выполняя тесты через Node. Я бы предпочел, чтобы я мог запускать все свои тесты через узел и не требовать реальной страницы браузера/html.
Файлы .js записываются как модули RequireJs, и я думаю, что у меня есть способ написать некоторые логические модульные тесты (т. Е. Те, которые не управляют DOM).

Бит, на котором я сейчас застрял, как я могу проверить функции, которые выполняют манипуляции с DOM?

Должен ли я быть вынужден менять сигнатуры функций для передачи во всех элементах, которые я буду манипулировать в качестве параметров? (Что, вероятно, не так уж плохо, но может привести к множеству параметров, которые будут переданы, если я работаю над многими элементами)?

Также, как я могу проверить ответы AJAX, не попав на сервер? Что я хотел бы сделать, это имитировать ответ AJAX и проверить, как мой код обрабатывает его. например подделать ответ 404 и посмотреть, что произойдет.
Я слышал о SinonJs, но еще не знаком с этим.
Если я использую JQuery для своих вызовов AJAX, должен ли я удалять $ .ajax, чтобы получить желаемый результат?

Исходя из вышесказанного, есть ли что-нибудь, что я буду отсутствовать на фронте тестирования js? Есть ли что-то очевидное, что я описал выше, что не имеет смысла или кажется, что я ошибаюсь?

Я видел PhantomJs, но не совсем уверен, где он вписывается, похоже, что он лучше всего подходит для тестирования против рабочей среды (я думаю, ближе к интеграции) - это правильное предположение?

Answer 1

Что касается тестирования DOM-манипуляций, вы можете использовать модуль под названием jsdom, который является браузером без браузера, реализованным в JavaScript. Таким образом, вы получаете DOM, но ваши тесты все еще выполняются в Node.js и выполняются быстро. Недостатком является то, что вы не можете проверить специфические особенности браузера, потому что jsdom не зависит от других браузеров.

Что касается тестирования вызовов AJAX, то sinon.js действительно очень полезно. Вы можете заглушить $ .ajax, но если вы хотите проверить уровень глубже, вы также можете заглушить XMLHttpRequest в своем браузере (или в jsdom, на самом деле). Я написал сообщение в блоге об этом: http://nicolerauch.de/2015/12/20/lightweight-stubbing-of-ajax-requests-in-javascript.html (внизу есть ссылка на репозиторий Github с рабочим кодом и тестами с использованием mocha и node.js и jsdom).