Тестирование 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, чем наш код.

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