Тестирование SVG-компонентов

Для работы с Snap.svg первым шагом является создание SVG-контейнера. Это делается с помощью функции Snap():

var s = Snap(800, 600); // создаём SVG-контейнер размером 800x600

Можно также привязать контейнер к существующему элементу DOM:

var s = Snap("#svgCanvas"); // элемент с id="svgCanvas" в HTML

Контейнер является базовой областью для всех графических элементов, и все последующие операции выполняются относительно него.

Создание и тестирование графических элементов

Snap.svg поддерживает разнообразные SVG-элементы: прямоугольники, круги, эллипсы, линии, многоугольники, пути и текст.

Прямоугольник:

var rect = s.rect(50, 50, 200, 100);
rect.attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 4
});

Круг:

var circle = s.circle(300, 150, 75);
circle.attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 3
});

Тестирование элементов включает проверку их существования, координат, размеров и атрибутов. Например:

console.assert(circle.attr("r") === 75, "Радиус круга должен быть 75");
console.assert(rect.attr("fill") === "#3498db", "Цвет заливки прямоугольника неверен");

Проверка трансформаций

Snap.svg позволяет применять трансформации: translate, rotate, scale. Для тестирования необходимо убедиться, что трансформация применяется корректно:

rect.transform("t100,50"); // перемещение на 100 по X и 50 по Y
console.assert(rect.getBBox().x === 150, "X координата прямоугольника после трансформации должна быть 150");
console.assert(rect.getBBox().y === 100, "Y координата прямоугольника после трансформации должна быть 100");

Можно комбинировать несколько трансформаций:

circle.transform("t50,0 r45 s1.5,1.5");

При этом проверяется итоговое положение и размер элемента.

Анимация и её тестирование

Snap.svg предоставляет метод animate() для плавных изменений атрибутов:

circle.animate({ r: 150, fill: "#2ecc71" }, 1000, mina.easeinout);

Тестирование анимации включает проверку начального и конечного состояния:

console.assert(circle.attr("r") === 75, "Начальный радиус должен быть 75");
setTimeout(() => {
    console.assert(circle.attr("r") === 150, "Радиус после анимации должен быть 150");
}, 1100);

Для комплексного тестирования анимаций используется последовательное применение нескольких animate() и проверка промежуточных состояний.

Работа с группами элементов

Группы позволяют объединять несколько элементов и управлять ими как одним объектом:

var group = s.group(rect, circle);
group.attr({ opacity: 0.5 });
group.transform("t200,0");

Тестирование группы проверяет корректность применения атрибутов и трансформаций ко всем дочерним элементам:

console.assert(rect.attr("opacity") === 0.5, "Прямоугольник должен иметь opacity 0.5");
console.assert(circle.attr("opacity") === 0.5, "Круг должен иметь opacity 0.5");

Проверка событий и интерактивности

Snap.svg позволяет назначать обработчики событий на элементы:

rect.click(function() {
    this.attr({ fill: "#f1c40f" });
});

Тестирование событий заключается в симуляции действия пользователя и проверке изменения атрибутов:

rect.fire("click");
console.assert(rect.attr("fill") === "#f1c40f", "Цвет прямоугольника после клика должен измениться");

Можно проверять любые события: mouseover, mouseout, mousedown, mouseup.

Тестирование сложных путей

Для путей используется метод path():

var path = s.path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path.attr({
    fill: "none",
    stroke: "#8e44ad",
    strokeWidth: 2
});

Тестирование путей включает проверку длины, координат точек и атрибутов:

console.assert(path.getTotalLength() > 0, "Длина пути должна быть больше нуля");
console.assert(path.attr("stroke") === "#8e44ad", "Цвет линии пути неверен");

Snap.svg позволяет получать любую точку пути для тестов:

var point = path.getPointAtLength(50);
console.assert(point.x > 0 && point.y > 0, "Точка на пути должна иметь положительные координаты");

Использование фильтров и эффектов

Snap.svg поддерживает SVG-фильтры: размытие, тени, цветовые эффекты.

var blurFilter = s.filter(Snap.filter.blur(5, 5));
circle.attr({ filter: blurFilter });

Тестирование фильтров проверяет корректность назначения и влияние на элементы:

console.assert(circle.node.querySelector("filter") !== null, "Фильтр должен применяться к элементу");

Автоматизация тестирования

Для комплексного тестирования используется комбинация console.assert, проверки координат через getBBox(), проверки атрибутов через attr() и симуляции событий.

Можно создавать функции-утилиты для повторяющихся проверок:

function testAttr(element, attr, expected) {
    console.assert(element.attr(attr) === expected, `${attr} должен быть ${expected}`);
}

function testBBox(element, expectedX, expectedY) {
    var box = element.getBBox();
    console.assert(box.x === expectedX, `X должен быть ${expectedX}`);
    console.assert(box.y === expectedY, `Y должен быть ${expectedY}`);
}

Такой подход позволяет создавать надёжный и повторяемый процесс тестирования SVG-компонентов в Snap.svg.

Оглавление