CSS Tu peux pas test !

#Codeurs2017

Avant de commencer...

Les slides sont disponibles :

https://tzi.fr/slides/codeurs2017
https://tzi.fr/slides/codeurs2017.pdf

2

Le CSS et la qualité

la vérité qui fâche

Le CSS, ce n'est pas simple !

CSS is like a bear cub.
— Andres Galante
5 killer Tricks to Make Your Java App Look Awesome 4

Le CSS, ce n'est pas simple !

It’s almost a challenge to find a development team [...] where the CSS isn’t the most hated part of that system.
— Andy Hume
CSS for Grownups 5

Qui suis-je ?

Thomas Zilliox, expert CSS indépendant.

Je sais produire du code CSS maintenable...

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

https://tzi.fr 6

Qui suis-je ?

6play.fr

Et du code maintenable avec une équipe de 12 ?

7

Le bug CSS typique

Celui responsable d'au moins 18 tickets JIRA

Le bug CSS typique 

.header {
  padding: 0.5em 1em;
  overflow: hidden;
  background: black;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
}
9

Le bug CSS typique 

.header {
  padding: 0.5em 1em;
  /* overflow: hidden; */
  background: black;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
}
10

Le bug CSS typique 

.header {
  [...]
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
11

Le bug CSS typique 

.header {
  display: inline-block;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
12

Le bug CSS typique 

.header { [...] }

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
13

Le bug CSS typique 

.header { [...] }
.home-item { display: flex }
.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
14

Le bug CSS typique 

body {
  word-wrap: break-word;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
15

Le bug CSS typique 

body {
  word-wrap: break-word;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
16

Les sources de la complexité

Résumons !

La complexité du CSS

  • 501 propriétés CSS
  • Une infinité de déclarations par sélecteurs
  • Une infinité de sélecteurs par projet
w3c 18

La complexité du CSS

  • Le Monde 5 545 sélecteurs 9 789 déclarations
  • Le Figaro 4 525 sélecteurs 7 443 déclarations
  • L'Express 3 280 sélecteurs 6 655 déclarations
  • 20 minutes 2 511 sélecteurs 4 811 déclarations
  • Le nouvel Obs 1 447 sélecteurs 2 443 déclarations
cssstats.com 19

La complexité du HTML

  • Une infinité de sélecteurs CSS par élément HTML
  • Une infinité d'éléments HTML par sélecteurs CSS
  • Des propriétés héritées des noeuds HTML parents
20

La complexité du HTML

  • 20 minutes 4 052 éléments HTML
  • Le Monde 3 776 éléments HTML,
  • Le Figaro 3 492 éléments HTML
  • L'Express 2 751 éléments HTML
  • Le nouvel Obs 1 791 éléments HTML
21

La complexité des navigateurs

  • Une infinité de configurations visiteurs possibles :
    appareils, OS, navigateurs, extensions, etc.
  • Chaque 6 semaines, une version de Chrome et Firefox
  • Du code qui a pu connaître d'autres temps
Device Detector by Piwik 22

La complexité de l'intégration

  • CSS
  • HTML
  • Les navigateurs
  • ET ?
23

La complexité humaine

24

La complexité humaine

25

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

26

Et pour les autres langages ?

en assumant que CSS est un vrai langage

Et pour les autres langages ?

Ce problème a été résolu du côté du code algorithmique :

  • Revues de code (PR)
  • Tests unitaires (TU)
  • Tests fonctionnels (TF)
  • Analyseur de code statique (linter)
28

Et pour les autres langages ?

6play.fr

  • 1500+ tests unitaires
  • 2300+ étapes de tests fonctionnels
29

Et pour les autres langages ?

30

Tester du CSS

C'est à partir de maintenant que c'est intéressant !

Tester du CSS

Les revues de code c'est bien !

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

32

Tester du CSS

33

Tester du CSS

Sauf que c'est très difficile de relire du CSS !

Comment faciliter la relecture ?

34

Tester du CSS

1 - Faire des bilans automatiques

35

Tester du CSS

36

Tester du CSS

37

Tester du CSS

38

Tester du CSS

2 - Isoler les développements

39

Tester du CSS

Le style guide permet de documenter les composants :

  • Aux designers
  • Aux développeurs
40

Tester du CSS

41

Tester du CSS

Il permet aussi de les visualiser sans leur contexte d'utilisation.

C'est un excellent bac à sable.

C'est l'équivalent des TUs !

42

Tester du CSS

43

Tester du CSS

Un seul bémol sur ces techniques...

44

Tester du CSS

Un seul bémol sur ces techniques...

Ca n'existe pas, ou pas encore :(

45

Tester du CSS aujourd'hui

et pour toutes les tailles de projet stp

Les linters

Les linters allègent la revue de code

Exemple : stylelint.io

47

Les linters

48

Les linters

6play.fr

Bemlinter permet de valider la syntaxe BEM

Et l'isolation des composants

https://github.com/M6Web/bemlinter 49

Les linters

50

Les linters

Retour d'expérience

Attention à la mise en place d'outils de validation

51

Tests sur différents navigateurs

Faire des tests automatisés sur tous les navigateurs et appareils.

Exemple : BrowserStack

52

Tests sur différents navigateurs

Les tests fonctionnels peuvent contenir des tests graphiques.

Est-ce visible ?

Est-ce dans le viewport ?

Est-ce en dehors de son parent ?

53

Tests sur différents navigateurs

Par contre c'est très long !

Impossible de valider tous les navigateurs sur toutes les PRs.

54

Tests sur différents navigateurs

6play.fr

On fait le choix de lancer les tests IE 11 la nuit.

On souhaite rajouter iPhone, iPad, etc.

https://github.com/M6Web/bemlinter 55

Test visuel

Les outils de test de regression visuel se démocratisent.

Exemple : Percy.io

Visual Regression Testing Tools 56

Test visuel

On peut l'utiliser sur notre site, mais

un seul navigateur

du contenu statique

des pages entières

57

Test visuel

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

Encore faut-il en avoir un !

58

Test visuel

Turbocharge your React development with Percy and Storybook 59

Conclusion

  1. Ajoutez des linters
  2. Ajoutez des TFs
  3. Ajoutez des contrôles visuels aux TFs
  4. Jouez vos TFs sur plusieurs navigateurs
  5. Partagez un style guide
  6. Testez les regressions visuelles
60

Mais ce ne sont pas des tests !?

En même temps c'était dans le titre de la conf.

Accompagner la revue de code

Le problème et la solution, c'est l'humain !

Et le côté humain ?

  1. Évitez les excès de confiance
  2. Adoptez une méthodologie
  3. Formez toute l'équipe aux CSS
  4. Aimez vos intégrateurs et intégratrices <3
63

Merci !

Des questions ?

@iamtzi
tzi.fr/slides/codeurs2017
tzi.fr/slides/codeurs2017.pdf

64