CSS Tests Unitaires

Question

Quelques recherches rapides découvert que je suis de toute évidence pas la première personne à avoir la pensée "je Peux unité de tester mon CSS?".

Je me demandais si quelqu'un ici a pris sur le CSS de Tests Unitaires avec succès? Si vous avez essayé et échoué, ou tout simplement avoir vos propres théories, s'il vous plaît dites-moi pourquoi il (apparemment) n'a pas encore été fait?

Answer 1

Vous pouvez utiliser le Sélénium, qui est un web framework de test. De cette façon, vous pourriez affirmer quels sont les styles à appliquer aux éléments dans le DOM etc.

Le sélénium

Sinon, pas sûr de ce que votre but est. Le test unitaire est, comme son nom l'indique, le test des "Unités", et pour moi, cela n'a de sens avec le code, pas de css.

Answer 2

Je pense qu'il serait possible dans le navigateur (côté client) pour "test unitaire" CSS. Il serait plus comme un système automatisé de checker qu'une unité de test:

1. Évaluer la finale attribut CSS conditions nous tenons à conserver pour un particulier CSS de la classe ou l'ID (le résultat).
2. Nous avons besoin d'un test de document HTML afin de rendre le contenu statique et le CSS. Tous les éléments doivent être inclus dans le contenu dans des contenants séparés.
3. Après avoir rendu, vérifier avec le javascript de la finale ou le résultat final des attributs de la sélection des cibles et de sortie non les éléments correspondants.

Les tests unitaires cas:

DOM sélecteurs:

.test1
.test2
#test3

Cela devrait toujours être le dernier des attributs:

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

Une fonction de tests de l'ensemble des règles en JS pourrait être:

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

Ensuite, nous vérifions si des éléments du DOM ont cette finale attributs.

Tout se fait en javascript après le rendu. Mais de toute façon ce n'est pas pratique parce que vous aurez à construire un grand nombre de l'unité des cas de test qui permettra d'augmenter votre code de manière significative.

En outre, vous devriez toujours avoir une remise à zéro.css pour le cross-browser "compatibilité".

Une alternative serait de désigner des classes CSS que vous connaissez doit de conserver la totalité de leur attributs. Créer une liste de DOM sélecteurs. Utilisation de jQuery pour obtenir CSS attributs de classe (directement à partir de la classe CSS) et vérifier si elles sont conservées dans la cible des éléments du DOM. Cette dernière méthode pourrait être presque entièrement automatisée, mais exigera de plus en plus complexes, javascript checker. Ce dernier ne sera pas vérifier CSS pour les sélecteurs d'ID (par exemple, "#test3"), seules les classes (par exemple ".test1")

Answer 3

Je ne comprends pas pourquoi on ne pourrait pas ou ne devrait pas l'unité de test de CSS. Voici le scénario que j'ai en tête :

J'ai un framework CSS qui est composée de plusieurs modulaire fichiers CSS et que lecteur 5 de mes sites.

Ex : base.css / form.css / article.css etc.

Imaginez-je faire un changement de base.css pour une condition qui s'applique au Site #1 seul => j'ai peut-pause-Site n ° 2 de style sans.

CSS test unitaire serait encore plus pertinente si mon framework CSS est de construire au-dessus de LESS ou SASS : un changement dans une macro peut briser tous les style. .

Answer 4

Vous pouvez utiliser PhantomCSS automatique de la comparaison visuelle. Et puis, vous pouvez créer des CSS du module de test unitaire de page ne charge que la base des styles CSS et affiche le composant dans tous ses états, mais ne prend pas en charge CSS à partir d'autres composants. Et puis vous pouvez le comparer à plein fichier CSS avec tous les modules chargés.

Answer 5

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

1. Vous créez des pages d'exemple (à la https://getboostrap.com) en fournissant tous les composants, etc.
2. Le test avec Huxley

Et voilà :)