Tester une fonction SASS en 5 minutes

Points de base

• Les tests de fonctions SASS peuvent être effectués en créant des fonctions virtuelles, en écrivant des cas de test, en créant des coureurs de test et en résultats de sortie personnalisés. Cela peut être implémenté en utilisant le moteur de test SASS minimaliste pour tester les fonctions dans différents scénarios.
• Utilisez le mappage SASS pour tester les fonctions avec plusieurs paramètres, qui peuvent accepter n'importe quoi comme une clé, y compris une liste. Cela permet de tester les fonctions avec plusieurs paramètres.
• Bien que ce système de test minimaliste soit très pratique pour tester un petit nombre de fonctions, il est plus adapté à un cadre de test SASS complet, tel que les solutions plus approfondies d'Eric Suzanne pour les solutions plus approfondies.

J'utilisais l'autre jour la bibliothèque include d'Eduardo Bouças et je voulais tester rapidement une fonction que j'ai construite moi-même, alors j'ai commencé à écrire un petit mélangeur pour m'aider à tester de nombreux scénarios différents. Après quelques minutes, j'ai proposé un moteur de test SASS aussi minime que possible.

Bien que ce message soit un peu plus technique, je pense qu'il aide de nombreuses personnes, car les tests devraient être la responsabilité de chaque développeur. De plus, après avoir compris ceux-ci par un, vous constaterez que ce n'est pas en fait difficile à comprendre.

Créer des fonctions virtuelles pour tester

Tout commence par la fonction à tester. Pour nos besoins, je suggère que nous utilisons une fonction très simple. Par exemple, une fonction utilisée pour doubler le nombre.

<code class="language-sass">@function double($value) {
  @return $value * 2;
}</code>

semble simple. Cependant, à des fins de démonstration uniquement, nous introduirons délibérément une erreur dans la fonction afin que nous puissions réellement voir l'un de nos tests échouer.

<code class="language-sass">@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}</code>

Écriture des cas de test

Vous pouvez être surpris, mais l'écriture de cas de test dans notre système est aussi simple que d'écrire une carte SASS où les touches sont des entrées de fonction et les valeurs sont des résultats attendus.

<code class="language-sass">$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);</code>

c'est tout! Nous avons des cas de test écrits. Encore une fois: la gauche est l'entrée et la droite est la sortie attendue.

Test Runner

Jusqu'à présent, tout s'est bien passé. Nous avons construit nos fonctions et avons des cas de test écrits. Nous avons juste besoin de créer un coureur de test maintenant.

Si vous connaissez SASS, vous comprenez probablement déjà cela. Notre coureur de test itérara sur la carte de test, appellera la fonction pour chaque entrée et s'assurera qu'elle correspond à la sortie attendue. Il imprimera ensuite nos résultats de test.

Voici à quoi ressemble notre coureur de test:

<code class="language-sass">/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }</code>

d'accord. Jetons un regard plus approfondi à l'intérieur de cette "bête". L'idée est d'utiliser les résultats de chaque test pour créer une chaîne, et une fois toutes les opérations terminées, imprimez la chaîne à l'aide de la directive @error. Par exemple, nous pouvons également le transmettre à la propriété content de l'élément pseudo-élément, mais c'est un peu plus compliqué, nous nous en tiendrons donc @error.

La première chose à faire est d'itérer la suite de tests. Pour chaque test, nous appelons la fonction dynamiquement en fonction de son nom (en utilisant la fonction call(...)) et vérifions si les résultats sont comme prévu.

<code class="language-sass">@function double($value) {
  @return $value * 2;
}</code>

Pour le moment, notre système est en cours d'exécution. Exécutons-le sur notre suite de tests et voyons à quoi il ressemble.

<code class="language-sass">@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}</code>

<code class="language-sass">$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);</code>

Hé! C'est le début, non? Maintenant, nous avons juste besoin de rendre la sortie plus utile (et plus amicale).

Sortie améliorée

C'est à ce moment que vous pouvez personnaliser la sortie pour lui donner l'impression que vous voulez qu'il ressemble. Il n'y a pas de moyen unique de le faire, vous pouvez sortir la sortie que vous aimez. Notez que selon la spécification CSS, vous pouvez utiliser a pour envelopper les lignes en chaînes.

Dans mon cas, c'est ce que j'ai choisi:

<code class="language-sass">/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }</code>

Si nous l'exécutons à nouveau sur la fonction $tests-double, c'est ce que nous obtenons: double

<code class="language-sass">@mixin run-tests($tests, $function) {
  $output: '';

  @each $test, $expected-result in $tests {
    $result: call($function, $test...);

    @if $result == $expected-result {
      // 测试通过
      $output: $output + 'Test passed; ';
    } @else {
      // 测试失败
      $output: $output + 'Test failed; ';
    }
  }

  // 打印输出
  @error $output;
}</code>

C'est très bien maintenant, n'est-ce pas?

Fonctions de test avec plusieurs paramètres

Dans notre exemple, notre fonction n'a qu'un seul paramètre, mais nous pouvons compter sur le fait que la carte SASS accepte quoi que ce soit comme une clé (y compris une liste) pour tester une fonction avec plusieurs paramètres. Cela ressemble à ceci:

<code class="language-sass">@include run-tests($tests-double);</code>

Si vous passez en revue notre mélangeur, vous verrez que lorsque vous appelez la fonction à l'aide de

, nous ajoutons une ellipsis (...) à la variable call(...). $test

<code>Test passed; Test passed; Test failed; Test passed;</code>

Cela signifie que nous passons la valeur

en tant que liste de paramètres. En d'autres termes, si $test est une liste (par exemple $test), elle sera transmise sous forme de paramètres multiples au lieu d'une liste. ('a', red, 42px')

Réflexions finales

c'est tout, amis: le plus petit moteur de test SASS de tous les temps. Ce petit système de test peut être très pratique pour tester un petit nombre de fonctions qui peuvent avoir dans votre projet, surtout si vous prévoyez de la mettre à la disposition d'autres développeurs (frameworks, bibliothèques ...). De plus, j'ai trouvé très pratique de tester rapidement les fonctions sur Sassmeister. Mettez simplement le mélangeur et votre fonction là-bas et exécutez vos tests!

Bien sûr, si vous cherchez une solution plus approfondie, vous voudrez peut-être consulter le vrai d'Eric Suzanne. En tant que cadre complet de tests SASS, il convient plus à l'infrastructure mondiale des tests unitaires.

Si vous souhaitez afficher (une version légèrement plus avancée du code), j'ai ouvert le référentiel SassyTester pour tout collecter.

Alors, qu'en pensez-vous?

FAQ sur le test des fonctions SASS (FAQ)

Quelle est l'importance de tester les fonctions SASS?

Le test des fonctions SASS est essentiel dans le développement Web car il assure la fonctionnalité et l'efficacité du préprocesseur CSS. Il aide à identifier et à corriger les bogues, à améliorer les performances du site et garantit que les fonctions SASS fonctionnent comme prévu. En testant les fonctions SASS, vous pouvez vous assurer que la conception et la disposition de votre site Web sont cohérentes sur différents navigateurs et plateformes.

Comment tester les fonctions SASS?

Une variété d'outils et de méthodes peuvent être utilisés pour tester les fonctions SASS. Une approche commune consiste à utiliser des cadres de test SASS, tels que True. Vrai est un outil de test unitaire qui s'intègre à vos projets SASS. Il vous permet d'écrire des tests directement dans un fichier SASS, qui peut ensuite être exécuté dans Node.js ou n'importe quel navigateur Web.

Quelles sont les meilleures pratiques pour tester les fonctions SASS?

Certaines meilleures pratiques pour tester les fonctions SASS incluent des tests d'écriture pour chaque fonction, en utilisant des conventions de dénomination cohérentes pour les tests et en veillant à ce que le test couvre tous les scénarios possibles. Il est également important d'exécuter régulièrement des tests et de mettre à jour les tests selon les besoins lors des modifications des fonctions.

Puis-je tester les fonctions SASS en utilisant JavaScript?

Oui, vous pouvez tester les fonctions SASS à l'aide de JavaScript. Vous pouvez utiliser des outils tels que la plaisanterie pour tester vos fonctions SASS. Jest est un cadre de test JavaScript qui vous permet d'écrire des tests dans une syntaxe simple et claire.

Quels sont les défis courants pour tester les fonctions SASS?

Certains défis courants dans le test des fonctions SASS comprennent la gestion des fonctions complexes, la gestion des dépendances et la garantie de compatibilité entre les navigateurs. Ces défis peuvent être surmontés à l'aide d'un framework de test puissant, en écrivant des tests clairs et concis et en vérifiant et mettant régulièrement des tests.

Comment améliorer mes compétences de test SASS?

Vous pouvez améliorer vos compétences de test SASS en pratiquant régulièrement, en lisant et en apprenant le code des autres et en comprenant les dernières tendances et les meilleures pratiques des tests SASS. La participation aux défis de codage et la contribution à des projets open source peut également aider à améliorer vos compétences.

Quel est le rôle du SASS dans le développement Web?

SASS joue un rôle crucial dans le développement Web en rendant CSS plus fort et plus facile à entretenir. Il fournit des fonctionnalités telles que les variables, la nidification, les mélangeurs et les fonctions, ce qui aide à écrire du code CSS plus efficace et réutilisable.

Comment déboguer les fonctions SASS?

Une variété d'outils et de techniques peuvent être utilisés pour déboguer les fonctions SASS. Une approche commune consiste à utiliser la fonction SASS inspect, qui vous permet de vérifier la valeur d'une expression SASS. Vous pouvez également utiliser la directive SASS @debug, qui imprime la valeur de l'expression SASS à la console.

Puis-je tester les fonctions SASS sans cadre de test?

Bien que les fonctions SASS puissent être testées sans cadre de test, cela n'est pas recommandé. Le cadre de test fournit une approche structurée et systématique des tests, ce qui facilite l'écriture, la gestion et l'exécution de tests.

Quels sont les avantages de l'utilisation de frameworks de test SASS?

L'utilisation du cadre de test SASS offre de nombreux avantages. Il vous permet d'écrire des tests de manière structurée et systématique, ce qui facilite la gestion et l'exécution de tests. Il fournit également des outils et des fonctionnalités qui peuvent aider à rédiger des tests plus efficaces, tels que les fonctions d'assertion et les coureurs de test.

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!