Тестирование d3 (и других веб-приложений на основе SVG)

У меня есть веб-приложение, которое использует библиотеку d3 для некоторых сложных визуализаций на основе SVG.

У меня есть автоматические тесты для моего кода на стороне сервера и моделей JavaScript (я использую MVC-подобную архитектуру в своем JavaScript). Они выполняются на сервере Jenkins CI при каждой фиксации. Теперь мне нужно выяснить, как проверить мои взгляды.

Как другие решают эту проблему и какие инструменты вы используете?

Некоторые мысли, которые у меня были...

Сериализуйте SVG, сгенерированный в файл, и сравните с базовым уровнем
Автоматически захватить изображение браузера и выполнить изображение diff
Что-то еще?

Спасибо!

Ответ 1

Пример, который вы даете, предназначен для тестирования графического вывода. Для этого вы можете использовать инструмент сравнения снимков экрана, например PhantomCSS, Sikuli или сверните свой собственный с помощью Resemble.js.

Но если ваш вопрос более дественно связан с тестированием приложений на базе D3.js/SVG, как следует из названия, вы должны посмотреть на тестовый набор D3 . В большинстве тестов даже не требуется html-приспособление, потому что они в основном тестируют API. Если для вас важнее согласованность визуального результата, перейдите к инструменту сравнения скриншотов. Для навигации и UX-потока вам лучше работать с автоматизацией браузера, например Selenium. Но для модульного тестирования, где вы хотите обеспечить согласованный API и модульный код, большинство тестовых фреймворков со шпионами, приспособлениями и издевательскими возможностями будут (т.е. Jasmine, Vows, Mocha).

Ответ 2

Похоже, Selenium должен делать то, что вы ищете. Он управляет веб-браузером и, следовательно, позволяет вам проверить, что на самом деле происходит в браузере, вместо того, чтобы предположить, что SVG будет отображаться правильно. Это позволяет вам указывать модульные тесты как последовательность нажатий клавиш/клавиш, и он отлично сочетается с Jenkins.

Ответ 3

Решение, которое я сейчас рассматриваю, это...

Создайте простой файл (csv) со списком URL-адресов для захвата вместе с областью обрезки (см. 3)
Загрузите каждый URL-адрес и снимите скриншоты с Selenium
Обрезайте визуализацию на скриншоте с помощью ImageMagick (поэтому мы просто проверяем визуализацию, а не полный ui)
Сравните изображения с базовыми линиями с помощью ImageMagick
Создайте HTML-отчет со старыми, новыми и diff-изображениями (для любых изображений, которые отличаются)
Генерация вывода JUnit xml для сервера CI

Ответ 4

Захват браузера и проверка графика - хороший тест. Но я считаю, что это ответственность самого D3, чем наш код.

У меня тоже был аналогичный вопрос. (Мой вопрос). Пожалуйста, проверьте ответ, который я разместил там.