web-dev-qa-db-fra.com

Tests unitaires CSS

Quelques recherches rapides ont permis de découvrir que je suis évidemment pas le _ { première personne _ avoir la pensée "Puis-je tester un peu mon CSS?" .

Je me demande si quelqu'un ici a réussi le test unitaire CSS? Si vous avez échoué ou si vous avez vos propres théories, dites-moi pourquoi, apparemment, cela n'a pas encore été fait.

cssunit-testing
55
nickf

Vous pouvez utiliser Selenium, qui est un framework de test Web. De cette façon, vous pouvez déterminer quels styles doivent être appliqués aux éléments du DOM, etc.

Sélénium

Sinon, je ne sais pas quel est votre objectif. Comme son nom l'indique, les tests unitaires testent des «unités» et, selon moi, cela n'a de sens qu'avec du code, pas du css.

20
RekrowYnapmoc

Il existe une nouvelle bibliothèque de tests unitaires css appelée Quixote . Plutôt que de comparer les images visuellement, il se penche sur le code. Contrairement à Selenium, vous n'avez pas besoin d'affirmer des styles spécifiques, mais vous pouvez plutôt dire quelque chose comme "il devrait être centré" ou "le côté gauche devrait être 10 pixels plus loin à droite de cet autre élément".

14
aharris88

Je ne comprends pas pourquoi nous ne pourrions pas ou ne devrions pas tester les CSS. Voici le scénario que j'ai à l'esprit:

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 modifie le fichier base.css pour une exigence s’appliquant uniquement au site n ° 1 => Je peux rompre le style du site n ° 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 casser tout le style. .

2
boudu

Je pense qu'il serait possible dans le navigateur (côté client) de "tester l'unité" CSS. Cela ressemblerait plus à un vérificateur automatique qu'à un test unitaire:

  1. Évaluez les conditions d'attributs CSS finales que nous aimerions conserver pour une classe ou un ID CSS particulier (le résultat).
  2. Nous avons besoin d’un document de test HTML pour restituer le contenu statique et CSS. Tous les éléments doivent être inclus dans le contenu dans des conteneurs séparés.
  3. Après le rendu, vérifiez avec javascript les attributs final ou final résultant des cibles sélectionnées et des éléments non correspondants en 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 permettant de 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. Quoi qu'il en soit, cela n’est pas pratique car vous devrez créer de nombreux cas de tests unitaires qui augmenteront considérablement votre code.

Aussi, vous devriez toujours avoir un reset.css pour la "compatibilité" entre navigateurs.

Une alternative consisterait à désigner des classes CSS dont vous savez qu'elles devraient conserver l'intégralité de leurs attributs. Créez une liste de sélecteurs DOM. Utilisez jQuery pour obtenir les attributs de classe CSS (directement à partir de la classe CSS) et vérifiez s'ils sont préservés dans les éléments DOM cibles. Cette dernière méthode pourrait être presque entièrement automatisée, mais nécessitera un vérificateur javascript plus complexe. Ce dernier ne vérifie pas CSS pour les sélecteurs d’ID (par exemple "# test3"), mais seulement pour les classes (par exemple ".test1").

2
Heroselohim

Vous pouvez utiliser PhantomCSS pour la comparaison visuelle automatique. Et ensuite, vous pouvez créer une page de test d'unité 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 vous pourrez ensuite le comparer à un fichier CSS complet avec tous les modules chargés.

1
Jkarttunen

Nous avons mis en place des tests unitaires sur un projet volumineux, basé sur une interface utilisateur lourde, et cela a fonctionné à merveille! C'était aussi beaucoup plus facile qu'il n'y paraît.

Utilisez des outils simples tels que getBoundingClientRect ou getComputedStyle , associez-le à hyperscript pour créer rapidement des arborescences DOM temporaires et vous êtes prêt à partir. Nous avons écrit tape-css afin de réduire l’impact lors des tests avec tape , mais la pile sera similaire dans n’importe quelle configuration de test.

Hier, j'ai publié un article de blog détaillé avec un tutoriel simple et des exemples concrets de notre nouveau flux de travail et de la manière dont il a amélioré notre productivité: Comment les tests unitaires CSS nous ont aidés à progresser rapidement .

1
tomekwi

Les tests unitaires CSS dépendent de votre framework et de votre approche du CSS.

Questions a poser :

Tester une classe donnée dans votre CSS, par exemple, Assert.IsNotNull

Récupère la propriété CSS et vérifie ses attributs.

Premièrement, je vérifierais si un fichier CSS existe, puis recherchez une classe spécifique, puis des attributs dans la classe spécifiée.

J'ai fait l'expérience d'un cours manquant lors de mon test de régression et j'ai réussi à le corriger immédiatement à partir de résultats précédents.

0
Muks

Il y a une approche intéressante que je n'ai jamais essayée, mais qui peut marcher:

  1. Vous créez des exemples de pages (à la https://getboostrap.com ) fournissant tous les composants, etc.
  2. Vous testez avec Huxley

Et voilà :)

0
avetisk