Несколько быстрых поисков обнаружили, что я, очевидно, не сначала человек, чтобы подумать "Могу ли я unit test мой CSS?" .
Мне интересно, успешно ли кто-нибудь из вас прошел тестирование модуля CSS? Если вы пробовали и терпели неудачу, или просто имеете свои собственные теории, скажите, пожалуйста, почему это (по-видимому) еще не сделано?
Вы можете использовать Selenium, который является основой веб-тестирования. Таким образом, вы можете утверждать, какие стили должны применяться к элементам в DOM и т.д.
В противном случае, не уверен, какова ваша цель. Модульное тестирование, как следует из названия, тестирует "Единицы", и для меня это имеет смысл только с кодом, а не с CSS.
Существует новая библиотека тестирования css-единиц, называемая Quixote. Вместо визуального сравнения изображений он просматривает код. В отличие от Selenium, вам не нужно утверждать определенные стили, вместо этого вы можете сказать что-то вроде "он должен быть центрирован" или "левая сторона должна быть на 10 пикселей дальше справа от этого другого элемента".
Я думаю, что в браузере (на стороне клиента) было бы возможно "unit test" CSS. Это скорее похоже на автоматическую проверку, чем на модульное тестирование:
Корпус блока тестирования:
Селектора DOM:
.test1
.test2
#test3
Это всегда должно быть конечными атрибутами:
CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3
Функция установки тестовых правил в JS может быть:
addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");
Затем мы проверяем, имеют ли элементы DOM эти конечные атрибуты.
Все сделано в javascript после рендеринга. Но в любом случае это нецелесообразно, потому что вам придется построить много случаев unit test, которые значительно повысят ваш код.
Также вы всегда должны иметь reset.css для кросс-браузерной "совместимости".
альтернативный будет обозначать классы CSS, которые, как вы знаете, должны сохранять все их атрибуты. Создайте список селекторов DOM. Используйте jQuery для получения атрибутов класса CSS (непосредственно из класса CSS) и проверьте, сохранены ли они в целевых элементах DOM. Этот последний метод может быть почти полностью автоматизирован, но потребует более сложной проверки javascript. Этот последний не будет проверять CSS для селекторов ID (например, "# test3" ), только классы (например, ".test1" )
Вы можете использовать PhantomCSS для автоматического визуального сравнения. А затем вы можете создать страницу CSS unit test, которая загружает только базовые стили CSS и отображает компонент во всех его состояниях, но не загружает CSS из других компонентов. И тогда вы можете сравнить его с полным файлом CSS со всеми загруженными модулями.
Я не понимаю, почему мы не могли или не должны unit test CSS. Вот сценарий, который я имею в виду:
У меня есть CSS-фреймворк, состоящий из нескольких модульных файлов CSS и приводящих 5 моих сайтов.
Ex : base.css / form.css / article.css etc.
Представьте, что я вношу изменения в base.css для требования, применимого только к сайту # 1 = > Я могу сломать стиль сайта №2.
CSS unit test будет еще более уместным, если моя CSS-структура будет построена поверх LESS или SASS: изменение макроса может сломать все стили.
.
Weve настроил модульные тесты на большой проект UI-heavy, и он отлично работает! Это также было проще, чем кажется.
Возьмите простые инструменты, такие как getBoundingClientRect или getComputedStyle, сопоставьте его с hyperscript, чтобы создать быстрые временные деревья DOM, и вам хорошо идти. Weve написал tape-css, чтобы уменьшить шаблон при тестировании с помощью tape, но стек будет похож на любую тестовую настройку.
Вчера я опубликовал подробное сообщение в блоге с простым учебным пособием и живыми примерами о нашем новом рабочем процессе и о том, как он повысил нашу производительность: Как модульные тесты CSS помогли нам двигаться быстро.
Там интересный подход, который я никогда не пробовал, но может работать:
Et voilà:)
Unit Testing CSS, зависит от вашей структуры и вашего подхода к CSS.
Вопросы:
Тестирование для данного класса в вашем CSS например, Assert.IsNotNull
Получить свойство CSS и проверить его атрибуты.
Во-первых, я бы удостоверился, что если файл CSS существует, тогда найдите конкретный класс, а затем найдите атрибуты внутри указанного класса.
Я испытал недостающий класс во время моего теста регрессии и смог исправить его сразу же из предыдущих результатов.
Не имеет смысла делать это ИМО. CSS - это язык для управления макетом страницы; пытаясь выполнить unit-test, это будет похоже на попытку unit-test Postscript.
Единственное очевидное использование для модульного тестирования, о котором я мог думать, - это сравнение скриншотов, чтобы увидеть, какие браузеры были затронуты изменением кода. Помимо этого, вы не можете сказать, что код прав, если вы не вручную сравниваете все в отображаемом выпуске с тем, что говорит спецификация. Для меня правильное правление CSS всегда будет пробным и ошибочным.
В настоящее время понимание того, работает ли CSS правильно или нет, визуально определяется. Пока что лучший способ проверить это - установить несколько браузеров на вашей машине dev. Начните использовать инструменты, такие как Firebug и веб-разработчик в Firefox, и забудьте об модульном тестировании CSS до тех пор, пока он не станет полным.: -)