Tester une bibliothèque SASS

Dernièrement, j'ai passé un temps décent à travailler avec Eduardo Bouças sur Includ Media. Nous avons traversé beaucoup de refactorisation, nous avons donc décidé d'écrire des tests et de les exécuter sur chaque engagement à être sûr que nous n'avons rien cassé. Je vais passer par les détails de cet article.

Si vous ne savez pas encore inclure les médias, c'est un gestionnaire de points d'arrêt très léger mais puissant dans SASS.

L'API publique fournie est un seul mixin, les médias (..) (d'où le nom de la bibliothèque), mais le tout est suffisamment pensé pour que vous puissiez faire des merveilles avec. Un court exemple avant de commencer:

<span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

Maintenant, c'est assez rad, n'est-ce pas?

Quoi qu'il en soit, nous avons donc trouvé un petit système de test que je voudrais partager avec vous les gars. Bien sûr, si vous souhaitez tester un cadre complet, vous voudrez peut-être utiliser True à partir d'Eric Suzanne à la place, qui est un cadre de test complet écrit dans SASS, pour Sass et a été introduit et expliqué par David dans un article récent sur SitePoint.

Quelle est l'idée?

Nous voulions exécuter quelques tests sur les principales fonctions privées de la bibliothèque à chaque fois que nous nous engageons dans le référentiel. Si un test échoue, l'engagement est interdit et le code doit être corrigé pour permettre à l'engagement de passer. De cette façon, nous nous assurons que nous pouvons travailler en toute sécurité sur la bibliothèque sans risquer de le casser (qui est généralement une chose bad ).

Atteindre quelque chose comme cela a fini par être étonnamment facile: nous avons mis en place un hook Git pré-Commit Git pour effectuer des tests dans Libsass et Ruby Sass avant tout engagement. Si le test échoue, nous tuons le processus.

Il existe différentes façons d'exécuter Sass et Libsass. Vous pouvez soit avoir des binaires, soit vous pouvez utiliser un emballage. Dans notre cas, nous avons opté pour un minuscule flux de travail Gulp, ce qui nous permet de faire fonctionner facilement Ruby Sass et Libsass.

Nous voulions quelque chose de très simple, donc les tests sont écrits en SASS en utilisant SassyTester, que j'ai introduit récemment dans l'article testant une fonction SASS en 5 minutes. SassyTester mesure environ 25 lignes. La fonction de test ne sort qu'une carte SASS avec les résultats des tests. De là, nous pouvons faire tout ce que nous voulons. Dans notre cas, nous voulons lancer une erreur en cas d'échec d'un test. Pour ce faire, nous avons la directive @error de Sass!

Lors de la compilation des tests SASS, si la tâche Gulp rencontre une erreur SASS, elle quitte le processus tout en lançant une erreur elle-même, qui bouillonne vers le crochet pré-engagé et interdit enfin le commit.

Si nous résumons cela, cela se passe comme ceci:

1. Un crochet de pré-commit exécute une tâche de gulp de test sur commit
2. La tâche de gulp de test compile des tests SASS dans les libsass et rubis sass
3. Si un test échoue, SASS lance une erreur avec @error
4. L'erreur SASS est capturée par Gulp qui émet elle-même une erreur
5. L'erreur Gulp est capturée par le crochet de pré-commit qui interdit le commit

Jusqu'à présent, tout va bien?

Configuration de l'architecture de test

La architecture le mot le rend si grand alors qu'il est en fait extrêmement simple. Voici à quoi pourrait ressembler le projet:

<span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

pas si impressionnant après tout, heh? La tâche Gulp exécutera simplement les moteurs SASS sur tous les fichiers du dossier Tests. Voici à quoi pourrait ressembler Function-1.SCSS:

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

Enfin, nous devons redéfinir le RUN (..) Parce que l'original de SassyTester publie les tests résulte avec @Error, que ce soit tous ou non. Dans notre cas, nous ne voulons lancer que s'il y a une erreur. Mettons-le simplement dans les aides / _Output-formatter.SCSS.

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

Pour une version plus avancée d'une course équivalente (..) Mélange, vérifiez celle de l'includ-media.

Le flux de travail Gulp

Si vous voulez une courte introduction à Gulp, assurez-vous de lire mon récent article à ce sujet: un simple flux de travail gulpy pour Sass. Pour cette section, je suppose que vous connaissez Gulp.

Nous avons besoin de trois tâches:

• un pour exécuter Libsass sur le dossier des tests (en utilisant Gulp-Sass)
• un pour exécuter Ruby Sass sur le dossier des tests (en utilisant Gulp-Ruby-Sass)
• un pour exécuter les deux tâches précédentes

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

Idéalement, lorsque SASS lance une erreur (soit en raison d'une erreur intégrée, soit à cause de @error), Gulp devrait quitter correctement. Malheureusement, il y a un problème à ce sujet sur Gulp-Ruby-Sass qui n'est toujours pas corrigé donc pour Ruby Sass, nous devons élever un nœud Exception fatale non apprise Avec Process.exit (1) nous-mêmes.

ajoutant un crochet pré-engagé

Il y a des tonnes de bibliothèques pour configurer des crochets pré-comités. Personnellement, j'aime le pré-engagement, mais vous pouvez essentiellement choisir celui que vous aimez car ils font tous plus ou moins la même chose.

Pour ajouter un crochet de pré-engagement à notre projet, nous devons créer une clé pré-engagement dans notre package.json. Cette clé est mappée sur un tableau de commandes npm scripts . Ainsi, nous avons également besoin d'un objet Scripts, avec une clé nommée Test, mappé sur la commande Gulp: Gulp Test.

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

Lors de la commission, le crochet pré-engagé se déclenche et essaie d'exécuter le script NPM de test. Ce script exécute la commande suivante: Gulp Test, qui indique Gulp pour exécuter les tests.

c'est tout, nous avons fini.

Réflexions finales

Cet exemple est extrêmement simpliste comme vous pouvez le voir, mais il fait le travail et il le fait bien. Voici à quoi cela pourrait ressembler:

Alors, qu'en pensez-vous? Est-ce quelque chose que vous pourriez envisager d'ajouter à votre bibliothèque ou à votre cadre?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!