Я думаю, вы должны рассмотреть это: http://busypeoples.github.io/post/testing-d3-with-jasmine/
И это действительно кажется, имеет смысл. Я прочитал ответы других, но я немного не согласен с ними. Я думаю, что мы не только проверяем, называется ли функция справа, но мы можем проверить гораздо больше. Проверка только некоторых вызовов функций хороша на уровне тестирования устройства, но недостаточно. Такие тестовые примеры, написанные разработчиком, будут основываться на понимании разработчика, как называются эти функции или нет. Но должны ли эти методы быть вызваны или нет, эту вещь можно проверить только, перейдя на другой уровень, потому что в отличие от другой работы, здесь код делает что-то не возвращающее то, что можно просто проверить и убедиться, что все правильно.
Мы, очевидно, не должны проверять, выполняет ли D3 свою работу правильно или нет. Поэтому мы можем использовать D3 внутри нашего тестового кода. Но D3 создает SVG, и мы можем проверять такие вещи, как если бы у svg были элементы, где ожидалось. Опять же, он не собирается проверять, демонстрирует ли SVG и правильно ли отображается или нет. Мы собираемся проверить, есть ли у SVG элементы, которые ожидаются, и они настроены так, как ожидалось.
Например: Если это гистограмма, мы можем проверить количество баров. Как в примере в приведенной выше ссылке, это проверяет это.
// extend beforeEach to load the correct data...
beforeEach(function() {
var testData = [{ date: '2014-01', value: 100}, { date: '2014-02', value: 140}, {date: '2014-03', value: 215}];
c = barChart();
c.setData(testData);
c.render();
});
describe('create bars' ,function() {
it('should render the correct number of bars', function() {
expect(getBars().length).toBe(3);
});
it('should render the bars with correct height', function() {
expect(d3.select(getBars()[0]).attr('height')).toBeCloseTo(420);
});
it('should render the bars with correct x', function() {
expect(d3.select(getBars()[0]).attr('x')).toBeCloseTo(9);
});
it('should render the bars with correct y', function() {
expect(d3.select(getBars()[0]).attr('y')).toBeCloseTo(0);
});
});
// added a simple helper method for finding the bars..
function getBars() {
return d3.selectAll('rect.bar')[0];
}
Некоторые люди, вероятно, скажут, что мы будем использовать D3 внутри кода тестирования? Опять же, мы должны помнить, что цель тестового письма здесь заключается не в тестировании D3, а в нашей логике и SVG-коде, который компилируется в ответ на наш код.
Это всего лишь способ, и жасмин - это то, что помогает нам в написании теста, вы также можете перейти к более подробным и различным сценариям.Вы можете сделать домен и проверить высоту ширины datapoints для перекрестной проверки, если они приводят к данным, которые были предоставлены рендерингу.
Я думаю, что я ясно, если нет, то проверьте эту ссылку: http://busypeoples.github.io/post/testing-d3-with-jasmine/
Здесь записи из этой статьи объяснена вещи подробно с тем, как вы можете использовать жасмин. Также я думаю, что я все еще подробно разбираюсь. Если требуется только модульное тестирование на разных уровнях функций js, тогда есть намного больше вещей, которые можно протестировать, не вдаваясь в детали элементов.
Я всегда тестировал любую часть, которая что-то делает с данными, которые затем будут нарисованы с помощью d3. Так, например, если вы создавали кумулятивный линейный график, я бы проверял, что [0,5,2,1] преобразуется в [0,5,7,8], который затем применяется к отбору и рассвету (и что необычные случаи обрабатываются изящно). Было бы интересно посмотреть, что другие делают. –
Один из способов сделать это - использовать [Selenium] (http://docs.seleniumhq.org/). –
Вам, вероятно, придется просмотреть мой ответ, я его отредактировал. Поскольку я не согласен с вашим ответом немного и объяснил причину. Надеюсь, это будет полезно. – Hafiz