Tests unitaires CSS
Quelques recherches rapides ont découvert que je suis évidemment pas le première personne {[2] } à avoir la pensée " Puis-je tester mon CSS?".
Je me demande si quelqu'un ici a pris des tests unitaires CSS avec succès? Si vous avez essayé et échoué, ou tout simplement avoir vos propres théories, se il Vous Plaît me dire pourquoi il (apparemment) n'a pas encore été fait?
9 réponses
Vous pouvez utiliser Selenium, qui est un framework de test web. De cette façon, vous pouvez affirmer quels styles doivent être appliqués aux éléments du DOM, etc.
Sinon, vous ne savez pas quel est votre but. Le test unitaire est, comme son nom l'indique, le test des 'unités', et pour moi, cela n'a de sens qu'avec du code, pas css.
Il existe une nouvelle bibliothèque de tests unitaires CSS appelée Quichotte. Plutôt que de comparer les images visuellement, il regarde le code. Contrairement au sélénium, vous n'avez pas besoin d'affirmer des styles spécifiques, vous pouvez plutôt dire quelque chose comme "il devrait être centré" ou "le côté gauche devrait être 10px plus à droite de cet autre élément".
Je ne comprends pas pourquoi nous ne pouvions pas ou ne devrions pas tester l'unité CSS. Voici le scénario que j'ai en tête :
J'ai un framework CSS composé de plusieurs fichiers CSS modulaires et qui pilote 5 de mes sites.
Ex : base.css / form.css / article.css etc.
Imaginez que je fasse un changement à base.css pour une exigence s'appliquant au Site #1 seulement = > je peux casser le style du site #2 sans.
Le test unitaire CSS serait encore plus pertinent si mon framework CSS est construit au - dessus de LESS ou SASS : un changement dans une macro pourrait tout casser style.
.
Je pense qu'il serait possible dans le navigateur (côté client) de "tester l'unité" CSS. Ce serait plus comme un vérificateur automatisé qu'un test unitaire:
- évaluez les conditions d'attribut CSS finales que nous aimerions préserver pour une classe ou un ID CSS particulier (le résultat).
- Nous avons besoin D'un document de test HTML pour rendre le contenu statique et CSS. Tous les éléments doivent être inclus dans le contenu dans des conteneurs séparés.
- après le rendu, vérifiez avec javascript la finale ou les attributs finaux résultants des cibles sélectionnées et les éléments non correspondants de sortie.
Cas de test unitaire:
Sélecteurs DOM:
.test1
.test2
#test3
Cela devrait toujours être les attributs finaux:
CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3
Une fonction pour définir des règles de test dans JS pourrait être:
addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");
Ensuite, nous vérifions si les éléments DOM ont ces attributs finaux.
Tout est fait en javascript après le rendu. Mais de toute façon ce n'est pas pratique car vous devrez construire de nombreux cas de test unitaire qui va augmenter votre code de manière significative.
Aussi, vous devriez toujours avoir une réinitialisation.css pour la "compatibilité"entre navigateurs.
Une alternative {[29] } serait de désigner des classes CSS dont vous savez qu'elles doivent préserver l'ensemble de leurs attributs. Créez une liste de sélecteurs DOM. Utilisez jQuery pour obtenir des attributs de classe CSS (directement à partir de la classe CSS) et vérifiez s'ils sont conservés dans les éléments DOM cibles. Cette dernière méthode pourrait être presque entièrement automatisée, mais nécessitera un plus complexe JavaScript checker. Ce dernier ne vérifiera pas CSS pour les sélecteurs D'ID (par exemple "#test3"), seulement les classes (par exemple ".test1")
Vous pouvez utiliser PhantomCSS pour la comparaison visuelle automatique. Et puis vous pouvez créer une page de test unitaire de module CSS qui charge uniquement les styles css de base et affiche le composant dans tous ses états, mais ne charge pas CSS à partir d'autres composants. Et puis vous pouvez le comparer à un fichier CSS complet avec tous les modules chargés.
Nous avons mis en place des tests unitaires sur un grand projet lourd D'interface utilisateur et cela a fonctionné à merveille! Il était aussi bien plus facile que ça en a l'air.
Prenez des outils simples comme getBoundingClientRect ou getComputedStyle, associez-le avec hyperscript pour créer des arbres DOM temporaires rapides et vous êtes prêt à partir. Nous avons écrit bande-css pour réduire réutilisable lors de l'essai avec bande, mais la pile sera similaire dans toute l'installation d'essai.
Hier, j'ai publié un billet de blog détaillé avec un tutoriel simple et des exemples en direct sur notre nouveau flux de travail et comment il a stimulé notre productivité: Comment les tests unitaires css nous ont aidés à aller vite.
Il y a une approche intéressante que je n'ai jamais essayé, mais peut fonctionner:
- vous créez des exemples de pages (à la https://getboostrap.com ) fournissant tous les composants, etc.
- vous testez avec Huxley
Et voilà:)
Test unitaire CSS, dépend de votre framework et de votre approche de CSS.
Questions à poser:
Test pour une classe donnée dans votre CSS e.g, l'Affirmer.IsNotNull
Récupère la propriété CSS et vérifie ses attributs.
Tout d'abord, je voudrais vérifier, si le fichier CSS existe, puis rechercher une classe spécifique puis rechercher des attributs dans la classe spécifiée.
J'ai connu une classe manquante lors de mon test de régression et j'ai réussi à la corriger immédiatement à partir du précédent Conclusion.
Actuellement, comprendre si CSS fonctionne correctement ou non est visuellement déterminé. Jusqu'à présent, la meilleure façon de le tester est d'installer plusieurs navigateurs sur votre machine de développement. Commencez à utiliser des outils comme Firebug et Web Developer sur Firefox, et oubliez les tests unitaires CSS jusqu'à ce Qu'il devienne complet Turing. :-)