CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier...

CSSTu peux pas test !

Le CSS et la qualitéla vérité qui fâche

“ CSS is like a bear cub.

— Andres Galante

Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !

3

‘ It’s almost a challenge to find a development team that’sworking on a codebase that’s more than a couple of years oldwhere the CSS isn’t the most frightening and hated part ofthat system.

— Andy Hume, CSS for Grownups

Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !Le CSS, ce n'est pas simple !

4

Thomas Zilliox.

Je suis un expert CSS indépendant.

Je sais produire du code CSS maintenable...

...au moins par moi-même !

Et après ?

Qui suis-je ?Qui suis-je ?Qui suis-je ?Qui suis-je ?Qui suis-je ?

5

Le bug CSS typiqueCelui responsable d'au moins 18 tickets JIRA

.header {

padding: 0.5em 1em;

overflow: hidden;

background: black;

color: white;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

7

.header {

padding: 0.5em 1em;

/* overflow: hidden; */

background: black;

color: white;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

8

.header {

[...]

}

.ellipsis {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

9

.header {

display: inline-block;

}

.ellipsis {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

10

.header { [...] }

.ellipsis {

display: block;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

11

.header { [...] }

.home-item { display: flex }

.ellipsis {

display: block;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

12

body {

word-wrap: break-word;

}

.ellipsis {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

13

body {

word-wrap: break-word;

}

.ellipsis {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Le bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typiqueLe bug CSS typique

14

Les sources de la complexitéRésumons !

355 propriétés dans CSS3Une infinité de déclarations par sélecteursUne infinité de sélecteurs par projet

La complexité du CSSLa complexité du CSSLa complexité du CSSLa complexité du CSSLa complexité du CSS

16

5 545 sélecteurs 9 789 déclarations

4 525 sélecteurs 7 443 déclarations

3 280 sélecteurs 6 655 déclarations

2 511 sélecteurs 4 811 déclarations

1 447 sélecteurs 2 443 déclarations

La complexité du CSSLa complexité du CSSLa complexité du CSSLa complexité du CSSLa complexité du CSS

17

Une infinité de sélecteurs CSS par élément HTMLUne infinité d'éléments HTML par sélecteurs CSSDes propiétés héritées des noeuds HTML parents

La complexité du HTMLLa complexité du HTMLLa complexité du HTMLLa complexité du HTMLLa complexité du HTML

18

4 052 éléments HTML

3 776 éléments HTML,

3 492 éléments HTML

2 751 éléments HTML

1 791 éléments HTML

La complexité du HTMLLa complexité du HTMLLa complexité du HTMLLa complexité du HTMLLa complexité du HTML

19

Une infinité de configurations visiteurs possibles :appareils, OS, navigateurs, extensions, etc.

Chaque 6 semaines, une version de Chrome et FirefoxDu code qui a pu connaître d'autres temps

La complexité des navigateursLa complexité des navigateursLa complexité des navigateursLa complexité des navigateursLa complexité des navigateurs

20

CSSHTMLLes navigateursET ?

La complexité de l'intégrationLa complexité de l'intégrationLa complexité de l'intégrationLa complexité de l'intégrationLa complexité de l'intégration

21

La complexité humaineLa complexité humaineLa complexité humaineLa complexité humaineLa complexité humaine

22

La complexité humaineLa complexité humaineLa complexité humaineLa complexité humaineLa complexité humaine

23

Quelle que soit l'énergie que vous y investirez,un niveau de qualité n'est jamais un acquis en CSS !

24

Tester du codeCeux qui nous préviennent quand on fait une bourde !

Ce problème a été résolu du côté du code algorithmique :Tests unitairesTests fonctionnelsAnalyseur de code statique (linter)

Tester du codeTester du codeTester du codeTester du codeTester du code

26

Tester du codeTester du codeTester du codeTester du codeTester du code

27

Sur 6play.fr :1500+ tests unitaires2300+ étapes de tests fonctionnels

Tester du codeTester du codeTester du codeTester du codeTester du code

28

Tester du CSSC'est à partir de maintenant que c'est intéressant !

Les revues de code c'est bien !

Elles permettent de prévenir la majorité des erreurs.

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

30

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

31

Sauf que c'est illisible !

Comment rendre la revue de code de CSS efficace ?

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

32

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

33

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

34

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

35

Le style guide permet de documenter les composants :Aux designersAux développeurs

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

36

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

37

Il permet aussi de les visualiser sans leur contexted'utilisation.

C'est un excellent bac à sable.

C'est l'équivalent des TUs !

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

38

Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS

39

Il y a un seul bémol sur ces tests automatiques...

Un seul bémolUn seul bémolUn seul bémolUn seul bémolUn seul bémol

40

Il s'agit de notre objectif !

Un seul bémolUn seul bémolUn seul bémolUn seul bémolUn seul bémol

41

Tester du CSS aujourd'huiet pour toutes les tailles de projet stp.

Les différentiel de capture d'écrans existent :Gemini — basé sur Selenium, open-sourceWebdriverCSS — plugin webdriver, open-sourceBacktrac.io — crawler, saasPercy.io — GitHub CI, saas

Captures d'imageCaptures d'imageCaptures d'imageCaptures d'imageCaptures d'image

43

Mais ce n'est pas utilisable :Sur tous les navigateursSur du contenu dynamiqueSur des pages entières

Captures d'imageCaptures d'imageCaptures d'imageCaptures d'imageCaptures d'image

44

Pour être pérenne, il faudrait le coupler avec un style guide.

Encore faut-il en avoir un !

Captures d'imageCaptures d'imageCaptures d'imageCaptures d'imageCaptures d'image

45

Captures d'imageCaptures d'imageCaptures d'imageCaptures d'imageCaptures d'image

46

Les tests automatisés sur device sont possibles :BrowserStackSaucelabs

Tests sur différents navigateursTests sur différents navigateursTests sur différents navigateursTests sur différents navigateursTests sur différents navigateurs

47

Les tests fonctionnels peuvent contenir des tests graphiques.

Vérifier qu'un élément :est visibleest dans le viewportne dépasse pas de son parent

Tests sur différents navigateursTests sur différents navigateursTests sur différents navigateursTests sur différents navigateursTests sur différents navigateurs

48

Par contre c'est très long !

Impossible de valider tous les navigateurs sur toutes les PRs

Tests sur différents navigateursTests sur différents navigateursTests sur différents navigateursTests sur différents navigateursTests sur différents navigateurs

49

Les linters et formateurs CSS et Scss existent :stylelint.io — prévient les erreurs de syntaxescsscomb.com — ordonnacement des propriétésprettier — formateur JS également

Les lintersLes lintersLes lintersLes lintersLes linters

50

Les lintersLes lintersLes lintersLes lintersLes linters

51

Bemlinter permet de valider sur CSS et SCSS :La syntaxe BEML'isolation des composants

Les lintersLes lintersLes lintersLes lintersLes linters

52

Les lintersLes lintersLes lintersLes lintersLes linters

53

Première tentative :Analyser tous les fichiersAutoriser une blocklist

Les lintersLes lintersLes lintersLes lintersLes linters

54

Deuxième tentative :Enregistrer les erreurs existantesAlerter sur les nouvelles erreurs

Les lintersLes lintersLes lintersLes lintersLes linters

55

1. Ajoutez un linter et formateur2. Ajoutez bemlinter3. Ajoutez des contrôles visuels à vos TFs4. Jouez vos TFs sur plusieurs navigateurs5. Partagez un style guide

ConclusionConclusionConclusionConclusionConclusion

56

Mais ce ne sont pas des tests !?En même temps c'était dans le titre de la conf.

1. Évitez les excès de confiance2. Adoptez une méthodologie3. Formez toute l'équipe aux CSS4. Aimez vos intégrateurs <3

Et le côté humain ?Et le côté humain ?Et le côté humain ?Et le côté humain ?Et le côté humain ?

58

Des questions ?

@iamtzitzi.fr/slides/pw2017

tzi.fr/slides/pw2017.pdf

Merci !Merci !Merci !Merci !Merci !

59