Тестирование в контексте страницы

Question

Мне нужно руководствоваться тем, как запускать js-модульные тесты в контексте веб-страницы.

У меня есть страница, где графики будут рисоваться с использованием сторонней библиотеки JS. Кроме того, будет написана какая-то логика фильтрации - я хочу проверить этот фрагмент.

Задача, которую я имею, состоит в том, что у меня должен быть доступ к DOM для работы этой библиотеки, и я не совсем уверен, как запускать тесты в этом контексте.

Все это выглядит примерно так:

На веб-странице у меня есть DIV. Затем в JS файл скажу

var drawing = DrawStuffIn(getElementByid("my-div")); 
drawing.FilterBy(something); 
var filteredItems = drawing.GetFilteredItems(); 

На данный момент я хочу, чтобы убедиться, что filteredItems содержат то, что я ожидал.

Я смотрел на использование PhantomJS и жасмина, но не совсем уверен, как это все вместе.

Answer 1

У вас есть два основных варианта:

1. обезглавленный браузер (например, PhantomJS) (медленные и мощные)
2. DOM эмуляции (например, jsdom) (быстрый, но несовершенные)

Если вам просто нужна среда DOM для работы библиотеки, но она не должна работать так, как настоящая DOM, вы можете использовать эмуляцию DOM, такую ​​как jsdom, которая будет намного быстрее.

PhantomJS по существу Chrome без головы, и вы можете писать сценарии и запускать их в контексте Chrome. Что вы должны выбрать, зависит от того, что вам действительно нужно делать. В основном, поддерживает ли jsdom библиотеку и те функции, которые вам нужны для тестирования?

Вы должны предоставить более подробную информацию о том, что означает предложение At this point I want to make sure that filteredItems contain what I expect.. Собираетесь ли вы тестировать его для текстового контента, или у него будут изображения, рисунки или что-то еще?