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

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;



}


8

.header {

[...]

}

.ellipsis {

overflow: hidden;



}


9

.header {

display: inline-block;

}

.ellipsis {

overflow: hidden;



}


10

.header { [...] }

.ellipsis {

display: block;

overflow: hidden;



}


11

.header { [...] }

.home-item { display: flex }

.ellipsis {

display: block;

overflow: hidden;



}


12

body {

word-wrap: break-word;

}

.ellipsis {

overflow: hidden;



}


13

body {

word-wrap: break-word;

}

.ellipsis {

overflow: hidden;



}


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





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,




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


27

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


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


31

Sauf que c'est illisible !

Comment rendre la revue de code de CSS efficace ?


32


33


34


35

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


36


37

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

C'est un excellent bac à sable.

C'est l'équivalent des TUs !


38


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


44

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

Encore faut-il en avoir un !


45


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


48

Par contre c'est très long !

Impossible de valider tous les navigateurs sur toutes les PRs


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


51

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


52


53

Première tentative :Analyser tous les fichiersAutoriser une blocklist


54

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


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

Date post:	06-Oct-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

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

Documents