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

 dist/ | |- my-sass-library.scss | tests/ | |- helpers/ | |- _SassyTester.scss | |- _custom-formatter.scss | |- function-1.scss |- function-2.scss |- ... 

Не так уж и впечатляет, а? Задача Gulp просто запустит движки Sass для всех файлов в папке tests . Вот как может выглядеть function-1.scss :

 // Import the library to test (or only the function if you can) @import '../dist/my-sass-library'; // Import the tester @import 'helpers/SassyTester'; // Import the custom formatter @import 'helpers/custom-formatter'; // Write the tests // See my previous article to know more about this: // http://... $tests-function-1: ( ... ); // Run the tests @include run(test('function-1', $tests-function-1)); 

И последнее, но не менее важное: нам нужно переопределить run(..) потому что оригинальный из SassyTester выводит результаты тестов с помощью @error независимо от того, все они @error или нет. В нашем случае мы хотим бросить только в случае ошибки. Давайте просто поместим это в helpers/_output-formatter.scss .

 // We overwrite the `run(..)` mixin from SassyTester to make it throw // an `@error` only if a test fails. The only argument needed by the // `run(..)` mixin is the return of `test(..)` function from SassyTester. // You can check what `$data` looks like in SassyTester documentation: // http://hugogiraudel.com/SassyTester/#function-test @mixin run($data) { $tests: map-get($data, 'tests'); @each $test in $tests { @if map-get($test, 'fail') { @error 'Failing test! Expected : #{map-get($test, 'expected')} Actual : #{map-get($test, 'actual')}'; } } } 

Для более продвинутой версии эквивалентного run(..) mixin, проверьте тот из include-media .

Рабочий процесс Gulp

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

Нам нужно три задачи:

• один для запуска LibSass в папке с tests (используя gulp-sass )
• один для запуска Ruby Sass в папке с tests (используя gulp-ruby-sass )
• один для запуска двух предыдущих задач

 var gulp = require('gulp'); var sass = require('gulp-sass'); var rubySass = require('gulp-ruby-sass'); // Run LibSass on the tests folder // Gulp automatically exits process in case of Sass error gulp.task('test:libsass', function () { return gulp.src('./tests/*.scss') .pipe(plugins.sass()); }); // Run Ruby Sass on the tests folder // Gulp manually exits process in case of Sass error gulp.task('test:ruby-sass', function () { return rubySass('./tests') .on('error', function (err) { process.exit(1); }); }); gulp.task('test', ['test:libsass', 'test:ruby-sass']); 

В идеале, когда Sass выдает ошибку (либо из-за встроенной ошибки, либо из-за @error ), Gulp должен правильно @error . К сожалению, есть проблема по этому поводу в gulp-ruby-sass, которая до сих пор не исправлена, поэтому для Ruby Sass мы должны вызвать исключение Node Uncaught Fatal Exception с process.exit(1) самостоятельно.

Добавление хука до фиксации

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

Чтобы добавить хук предварительной фиксации к нашему проекту, нам нужно создать ключ pre-commit в нашем package.json . Этот ключ сопоставлен с массивом команд сценариев npm . Таким образом, нам также нужен объект scripts с ключом с именем test , сопоставленный с командой Gulp: gulp test .

 "scripts": { "test": "gulp test" }, "pre-commit": ["test"] 

При фиксации запускается ловушка pre-commit и пытается выполнить test скрипт npm. Этот скрипт запускает следующую команду: gulp test , которая указывает Gulp для запуска тестов.

Вот и все, мы сделали.

Последние мысли

Этот пример очень прост, как вы можете видеть, но он выполняет свою работу и делает это хорошо. Вот как это может выглядеть:

Так что ты думаешь? Вы можете добавить это в свою библиотеку или фреймворк?