Учебное пособие по Sass: модульное тестирование с помощью Sass True

Серия SASS для начинающих

• SASS для CSS: совершенствуйте свои навыки интерфейса с помощью препроцессора CSS

• Лучшие практики SASS: 9 советов по интерфейсу для препроцессоров CSS

• Учебное пособие по Sass: модульное тестирование с помощью Sass True

Некоторые говорят, что если в вашем коде нет тесты, у вас нет кода для доставки. Когда дело доходит до модульного тестирования CSS или Sass, есть несколько инструментов на выбор.

Сегодня мы исследуем инструмент тестирования Sass и покажем вам некоторые из его основных функций.

Это мини-руководство будет посвящено настройке Sass True, фреймворка для модульного тестирования Sass, разработанного Мириам Сюзанн.

Вот что мы рассмотрим сегодня:

• Что такое Sass Unit Testing?
• Установить Sass True
• Присоединиться к Sass true с Jest
• Реализация функции Sass True
• Тестирование функции Sass
• Миксин Sass
• Заключение

Освойте передовые методы Sass

Создавайте свои собственные веб-проекты Sass, используя практические инструкции.

Sass для CSS: расширенная разработка интерфейса

Что такое Модульное тестирование Sass?

Модульное тестирование в Sass мало чем отличается от модульного тестирования на любом другом языке. Есть методы для определения тестового модуля, метод для обертывания серии тестов или утверждений, затем есть 4 типа утверждений: assert-true , assert-false , assert-equal и assert-unequal .

Единственное, что следует учитывать, — это то, что есть два различные шаблоны, которым нужно следовать для тестирования. Один для функций, которые будут оценивать вывод функции, другой — для миксинов, которые ожидают определенный возврат в зависимости от конфигурации миксина.

Установить Sass True

Для ясности в этом руководстве предполагается, что нет файлов, кроме Sass, который мы хотим протестировать, и тестовых файлов.

В чистом каталоге вы хотите запустить следующую команду установки:

  $ npm i node-sass sass-true glob jest  

Теперь создайте два каталога:

  $ mkdir src tests  

В вашем пакете .json , обновите до следующего:

  "scripts": {"test": "jest"},  

Когда все установлено, давайте напишем код.

Присоединяйтесь к Sass True с Jest

Это это последняя часть настройки, необходимая для работы команды jest с Sass True. Нам нужно написать небольшую прокладку JS.

В каталоге tests создайте новый файл оболочки:

  $ touch tests/scss.spec. js  

Добавьте в этот новый файл следующий код:

  const path = require ('path') const sassTrue =  require ('sass-true') const glob = require ('glob') describe ('Sass', () => {//Находим все файлы Sass, которые заканчиваются на `* .spec.scss` в любом каталоге  этот проект.//Я использую path.resolve, потому что True требует абсолютных путей для компиляции тестовых файлов. const sassTestFiles = glob.sync (path.resolve (process.cwd (), 'tests/**/*. spec.scss')  )//Запускаем True для каждого файла, найденного с помощью description и предоставленных методов sassTestFiles.forEach (file => sassTrue.runSass ({file}, {describe, it}))})  

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

Теперь мы готовы. чтобы начать писать тесты.

Реализовать функцию Sass True

Только Sass True будет тестировать миксины и функции. В конце концов, это все, что вам нужно для того, чтобы ваши инструменты всегда работали правильно. Тестирование самого вывода CSS — это еще одна задача инструмента.

Создайте в своем проекте новый файл Sass, который мы будем использовать в качестве функции для тестирования.

  $ touch src/_map-deep-get.scss  

Добавьте в файл следующий код:

 ///Эта функция должна использоваться для возврата значений вложенных ключей во вложенной карте///утилита @group///@parameter {Variable} $ map [null] - передать карту для оценки///@parameter {Variable  } $ keys [null] - передать ключи для оценки///@link https://css-tricks.com/snippets/sass/deep-getset-maps/Статья из CSS-Tricks///@example scss -  передать карту и строки/переменные в функцию///$ map: (///'size': (///'sml': 10px///)///);///$ var: map-deep-  get ($ tokens, 'size', 'sml');  => 10px///@function map-deep-get ($ map, $ keys ...) {@each $ key в $ keys {$ map: map-get ($ map, $ key);  } @return $ map;}  

Это довольно распространенная функция, которая добавляется в проекты Sass.

Тестирование функции Sass

Давайте создадим новый файл, необходимый для тестирования Sass. Помните, что в прокладке мы ищем любой файл, соответствующий *. Spec.scss , поэтому для проверки нашей функции карты мы можем создать файл с таким именем.

  $ touch tests/mapDeep.spec.scss  

Что мощно в Sass True, так это то, что он написан на Sass. Благодаря этому все функции Sass доступны вам при написании тестов.

Давайте импортируем в этот новый файл необходимые нам зависимости. Сначала нам нужно импортировать True, затем нам нужно импортировать функцию Sass, которую мы хотим протестировать.

  @import 'true'; @ import '../src/map-deep-get ';  

Глядя на код функции карты, становится ясно, что нам нужна карта для использования в этом тесте.

  $ map: ('size': ('sml': 10px));  

Для теста в первую очередь необходимо описать тест, который вы проводите. Это поможет вам увидеть результаты теста в выводе интерфейса командной строки.

Мне было немного трудно следовать документации, поскольку они все еще описывают фактические миксины, используемые в Sass True. Похоже, что для совместимости с фреймворками тестирования, такими как Jest, было создано несколько псевдонимов. Я сделаю все возможное, чтобы адресовать эти перекрестные ссылки в коде.

Помните, что в прокладке у нас есть аргумент {describe, it} . В Sass True, например, @mixin test-module () имеет псевдоним describe () , а test () mixin имеет псевдоним it () mixin.

  @include describe ('map-deep-get ()') {  ...}  

Затем вам нужно определить тест. Это будет использовать миксин it () .

  @include describe ('map-deep-get ()') {@include it  ('должен возвращать значение из запроса глубокой карты') {...}}  

Наконец, нам нужен сам тест. В этом примере мы будем использовать метод asset-equal .

assert-equal : Assert что два параметра равны. Утверждения используются внутри миксина test () для определения ожидаемых результатов теста.

assert-equal ( ) mixin принимает четыре аргумента, но мы собираемся использовать только $ assert и $ expected .

   assert-equal ($ assert, $ expected);  

Поместите функцию в круглые скобки assert-equal () Mixin, как если бы мы использовали его в Sass. Как показано, мы также можем воспользоваться переменной $ map , которую мы установили ранее.

ProTip: в вашем проекте, если у вас есть ряд переменных, которые вы уже используете и которые вам нужны для теста, просто @import их перед запуском теста (ов).

Для аргумента теста $ expected мы вставляем ожидаемое значение.

  @include describe  ('map-deep-get ()') {@include it ('должен возвращать значение из запроса глубокой карты') {@include assert-equal (map-deep-get ($ map, 'size', '  sml '), 10px);  }}  

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

Запуск теста

Сейчас все идет под откос. Из командной строки запустите свой тест.

  $ npm test  

Все работает правильно, вы должны увидеть следующее:

  ПРОЙДИТЕ тесты/scss.spec. js Sass map-deep-get () ✓ должен возвращать значение из запроса глубокой карты (1 мс) Наборы тестов: 1 пройден, 1 всего Тесты: 1 пройдено, 1 всего Снимки: 0 totalTime: 1,422s Выполнить все наборы тестов.  

Sass Mixin

На этом этапе у вас должен быть установлен Sass True и проверка функции карты работает. В дальнейшем вы можете протестировать миксин. Тестирование миксина лишь немного отличается от тестирования функции. Для теста миксина давайте протестируем общий шаблон создания миксина точки останова.

  $ touch src/_breakpoint - lg.scss  

Сам миксин будет выглядеть следующим образом:

 ///Стандартная точка останова для поддержки разрешений более 1232 пикселей .///@group responseive///@example scss  - Установить точку останова///.breakpoint - lg {///@include breakpoint - lg {///color: orange;///}///} @mixin breakpoint - lg {@media screen и (min  -width: $ breakpoint-lg) {@content;  }}  

Тестирование миксина Sass

В миксине вы могли заметить глобальную переменную $ breakpoint-lg как часть миксина. Чтобы сделать это немного более «реальным», давайте создадим глобальный файл переменных и определим значение этой переменной.

  $ touch src/_globals.scss  

И в этот файл поместим переменную и ее значение.

  $ breakpoint-lg: 1232px;  

Приступая к тесту, давайте создадим тестовый файл.

  $ touch tests/breakpoint.spec.scss  

Чтобы запустить этот файл, мы определим все наши зависимости.

  @import 'true'; @ import '../src/globals';@import'  ../src/breakpoint--lg ';  

Далее, как и в случае с функциональным тестом, нам нужно описать этот тест миксина.

  @include describe ('breakpoint - lg ()') {...}  

Затем мы определим что ожидается от it .

  @include describe ('breakpoint - lg ()') {@include it ('should  возвращать контент в рамках предварительно определенного медиа-запроса ') {...}}  

С миксином мы можем просто использовать assert () для нашего теста.

  @include describe ('breakpoint - lg ()') {@include it ('должен возвращать контент  внутри предопределенного медиа-запроса ') {@include assert {...}}}  

В методе assert () мы хотим для тестирования оцениваемого содержимого с помощью метода output () .

output : Опишите тестируемое содержимое, которое будет оцениваться по парному блоку expect () . Утверждения используются в миксине test () [или it () ] для определения ожидаемых результатов теста.

Хорошо, это просто означает, что в миксин output () вы можете включить любой Sass, который вы хотите, который использует миксин, который вы хотите протестировать.. Например, давайте создадим селектор, который использует миксин breakpoint , и введем значение @content внутрь миксина.

  @include describe ('breakpoint - lg ()') {@include it ('должен возвращать контент в рамках предварительно определенного медиа-запроса') {@include assert {@include output {.breakpoint - lg {@  включить точку останова - lg {цвет: оранжевый;  }}}}}}  

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

expect: Опишите ожидаемые результаты парного блока output () . Для миксина expect () требуется блок содержимого, и он должен быть вложен в миксин assert () вместе с одним output () блок. Утверждения используются внутри миксина test () для определения ожидаемых результатов теста.

Итак, внутри expect ( ) mixin, мы просто добавляем ожидаемый вывод CSS.

  @include describe ('breakpoint - lg ()') {@include it ('должен вернуть  контент в заранее определенном медиа-запросе ') {@include assert {@include output {.breakpoint - lg {@include breakpoint - lg {color: orange;  }}} @include expect {@media screen и (min-width: 1232px) {.breakpoint - lg {color: orange;  }}}}}}  

Запуск теста

На этом этапе у вас есть Sass набор тестов с двумя отдельными тестами, в каждом из которых выполняется одно утверждение.

Запустив команду $ npm test , вы должны увидеть следующее:

  PASS tests/scss.spec.js Точка останова Sass - lg () ✓ должен возвращать контент в рамках предварительно определенного медиа-запроса (2 мс) map-deep-get () ✓ должен возвращать значение из  запрос на глубокую карту. Наборы тестов: 1 пройден, 1 всего тестов: 2 пройдено, 2 всего Снимков: 0 totalTime: 1,512 сПроверено все наборы тестов.  

Заключение

В современном мире код Sass становится все более сложным. Таким образом, со временем тестирование станет еще более важным.

Чтобы помочь вам подготовиться к созданию сложных проектов Sass, компания Educative создала курс Sass для CSS: расширенная разработка интерфейса . В этом курсе есть практические руководства и примеры для всех основных техник Sass, таких как вложение, переменные, миксины, частичные и динамические функции. К концу у вас будет весь опыт, необходимый для создания и реализации собственных проектов Sass..

Удачного тестирования!

Продолжить чтение о тестировании

• Sass для CSS: улучшите свои навыки интерфейса с помощью препроцессора CSS.
• Тестирование программного обеспечения 101: начните с типов тестирования программного обеспечения
• Учебное пособие по тестированию производительности: автоматизация, Gatling, и Дженкинс