Жасмин тестирует события наведения мыши в d3

Я рассматриваю создание интерактивных элементов диаграммы с помощью d3.js.

Я пытаюсь проверить изменение цвета заливки из-за события наведения курсора мыши с жасмином. В идеале я хочу, чтобы цвет элемента пути изменился на «# ff0000» при наведении курсора мыши, но мой терминал жасмина говорит мне, что этого не происходит — элемент, похоже, остается того же цвета, что и изначально установлен, например, мой элемент с идентификатором # 1 выдает: Ожидается, что «# 1f77b4» будет «# ff0000».

Я также использую библиотеки jquery и jasmine-jquery.

Соответствующий код из моего приспособления кольцевой диаграммы, DonutChartFixture.html

var color = d3.scale.category20();

var path = svg.selectAll("path")
              .data(pie(data))
              .enter().append("path").attr("class", "path")
              .attr("fill", function(d, i) { return color(i); })
              // removed id declaration here
              .attr("d", arc)
              .on("mouseover", function(){d3.select(this).style("fill", "#ff0000");})
              .on("mouseout" , function(){d3.select(this).style("fill", function(d) {   
                                                                   return d.color;
                                                                 });});

// want to highlight the first path element
var path_one = d3.select('.path').attr("id", "path_one");

И тест из моего файла спецификации, DonutChart.js

function loadDonutChart() {
    loadFixtures('DonutChartFixture.html');
}

describe("Mouseover events", function() {
    var spyEvent;

    beforeEach(function() {
        loadDonutChart();
    });

    // updated test for element d3.select('.path').attr("id", "path_one")
    it("#path_one should change fill colour to rgb(255,0,0)", function() {
        spyEvent = spyOnEvent('#path_one', 'mouseover');
        $('#path_one').trigger("mouseover");
        // expect('mouseover').toHaveBeenTriggeredOn('#path_one');
        expect(path_one.style('fill')).toEqual('rgb(255,0,0)');
    });

});

Как видите, я пробовал выбирать элементы по идентификатору, а также по имени тега, но безрезультатно, оба выдают тот же результат, что и выше. Ваше здоровье.


javascript jquery d3.js jasmine jasmine-jquery
person tpgmartin    schedule 27.05.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Итак, я придумал проходное тестирование, во многом вдохновленное приведенным здесь ответом, Тестирование события Mouseover в D3 с помощью Sinon. Единственная реальная разница заключается в использовании синтаксиса d3/jasmine вместо Sinon. Следующее проходит правильно:

it("#path_one should change fill colour to rgb(255,0,0)", function() {
    var oldColor = path.style('fill');
    document.getElementById('path_one').dispatchEvent(new MouseEvent('mouseover'));
    expect(d3.select('#path_one').style('fill')).not.toEqual(oldColor);
});
person tpgmartin    schedule 06.06.2014

arrow_upward
1
arrow_downward

В коде вы устанавливаете стиль, а в тесте вы устанавливаете атрибут. Попытка перейти на один или другой для обоих. Кроме того, браузер, скорее всего, преобразует шестнадцатеричную строку цвета в строку цвета rgb. Поэтому, если вы установите цвет «# ff0000», он, скорее всего, будет преобразован в «rgb (255, 0, 0)». Наконец, trigger jQuery не будет запускать событие, зарегистрированное с помощью on d3. Подробнее см. https://github.com/mbostock/d3/issues/100.

person Andy Thornton    schedule 27.05.2014
comment
Я внес предложенное изменение, но, похоже, это не дало мне правильного ответа. Тест с использованием $('path') теперь дает: Ожидаемое значение 'rgb(31, 119, 180)' равно '#ff0000' Тест с использованием $('#1') теперь дает: TypeError: undefined is not a function - person tpgmartin; 28.05.2014
comment
Я только что заметил, что вы устанавливаете заполнение атрибута сразу после ввода. Это согласуется с вашим наведением мыши и тестом сейчас? - person Andy Thornton; 28.05.2014
comment
Я не уверен, что именно вы имеете в виду. Я вижу, что вы имеете в виду шестую строку DonutChartFixture.html, но не уверен, как это связано с тестом. Код такой, какой указан. - person tpgmartin; 28.05.2014
comment
Поскольку вы сначала устанавливаете атрибут fill, затем при наведении курсора вы устанавливаете его через css, используя стиль. Затем вы проверяете, что атрибут fill равен тому, что вы установили с помощью стиля. Это не пройдет. Кроме того, d3 преобразует шестнадцатеричные цветовые строки в rgb-строки, поэтому вам нужно написать свой тест для проверки rgb-строки цвета. Проверьте это: plnkr.co/edit/XX1VGNBqcnE7haocUxEB?p=preview - person Andy Thornton; 28.05.2014
comment
Спасибо за ваш пример. Я внес рекомендуемые изменения и сделал несколько изменений, чтобы убедиться, что выбираю правильный элемент: я пометил первый элемент пути, который d3.select('.path') возвращает по умолчанию с идентификатором '#path_one' поэтому я могу правильно выбрать этот элемент по идентификатору. Однако, хотя я получаю тест вроде expect('mouseover').toHaveBeenTriggeredOn('#path_one') для правильного прохождения, я все равно получаю неправильное сравнение цветов: Ожидается, что 'rgb(31, 119, 180)' равно 'rgb (255,0,0)». - person tpgmartin; 28.05.2014
comment
После дополнительного тестирования и небольшого поиска в Google это связано с тем, что использование метода триггера jQuery не запускает обработчик событий в d3. Проверьте github.com/mbostock/d3/issues/100, чтобы найти решение. - person Andy Thornton; 28.05.2014
comment
Я действительно не знаю, как поступить. Не могли бы вы привести конкретный пример в контексте исходного вопроса? Запуск события наведения мыши и проверка изменения цвета заливки. - person tpgmartin; 28.05.2014