Угловое - тестирование D3.js, жасмин генерируется HTML

У меня есть код d3.js:Угловое - тестирование D3.js, жасмин генерируется HTML

var svgX = svg.append("text") 
     .attr("class", "x label") 
     .attr("text-anchor", "end") 
     .attr("x", graphConfig.width) 
     .attr("y", graphConfig.height - 6) 
     .style("font-size","16px") 
     .text(keyDim);

И я хочу, чтобы проверить сгенерированный HTML с жасмином следующим образом:

var svgXHtml = d3.select(angular.element('<text class="x label" text-anchor="end" x="500" y="294" style="font-size: 16px;">time</text>')[0]); 
expect(svgX).toBe(svgXHtml);

Тест не проходит, хотя <text>...</text> часть svgX и svgXHtml идентична. В консоли я вижу: Expected [ [ HTMLNode, parentNode: HTMLNode ] ] to be [ [ HTMLNode, parentNode: HTMLNode ] ]

Просто протоколирование svgX и svgXHtml дает:

LOG: [[<text class="x label" text-anchor="end" x="500" y="294" style="font-size: 16px;">time</text>]] 
LOG: [[<text class="x label" text-anchor="end" x="500" y="294" style="font-size: 16px;">time</text>]]

Похоже, идентичные для меня, но тест не пройден.

Итак, как это сделать в правильном направлении?

источник

2015-11-03 Nikita Vlasenko

Могу ли я спросить вас, почему вы используете 'd3.select' выбрать уже существующий элемент? – Appeiron

Потому что я пытаюсь сделать 'console.log()' одинаковым в обоих случаях, надеясь, что он может продвинуть меня дальше по дороге. Если я этого не сделаю, я получу '[[HTMLNode, parentNode: HTMLNode]]', другой - как «HTMLNode». Таким образом, я не нуждаюсь в этом ни для чего другого. Моя цель - просто построить html из ' time' make it равный svgX. –

Можете ли вы попытаться сохранить выбор для 'svgX с' d3.select' тоже? Что-то вроде 'd3.select ('body'). Html (''). Append ('text')', но выберите ваш фактический элемент, в который вы добавите его. – Appeiron

Очевидно, что каждый из svgX и svgXHtml являются Объектами и .toBe() метод относится к ===. Поэтому в настоящее время вы пытаетесь сравнить отдельные экземпляры объекта. В этом случае Jasmine имеет супер метод, называемый .toEqual(), который будет сравнивать структуру обоих объектов.

Если .toEqual() говорит вам, что глубоко сравнить не нашли спички, вы можете попробовать stringifying, что объект для на глаз-сравнения:

expect(JSON.stringify(svgX)).toEqual(JSON.stringify(svgXHtml));

Это поможет сравнить с совершенно разные объекты, которые Вы - svg экземпляр и d3 экземпляр.

По крайней мере, теперь вы можете использовать .toBe(): D

источник

2015-11-03 16:04:57 Appeiron

Пожалуйста, ознакомьтесь с http://jasmine.github.io/edge/introduction.html. Объяснение всего этого даже для этого («Сравнение« toBe »сравнивается с ===» ') – Appeiron

Нет, это не работает. После изменения на 'toEqual' я получаю такую же ошибку:« Ожидаемый [[HTMLNode, parentNode: HTMLNode]] равен [[HTMLNode, parentNode: HTMLNode]] .' –

Вы собираетесь сравнить два разных экземпляра объектов которые имеют собственный «прототип», которые отличаются друг от друга, а также 'ownProperty'.То почему любое из сравнений не будет работать для этих объектов. – Appeiron

Угловое - тестирование D3.js, жасмин генерируется HTML

ответ

Смежные вопросы