CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un...
Transcript of CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un...
![Page 1: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/1.jpg)
CSSTu peux pas test !
![Page 2: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/2.jpg)
Le CSS et la qualitéla vérité qui fâche
![Page 3: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/3.jpg)
“ 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
![Page 4: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/4.jpg)
‘ 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
![Page 5: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/5.jpg)
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
![Page 6: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/6.jpg)
Le bug CSS typiqueCelui responsable d'au moins 18 tickets JIRA
![Page 7: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/7.jpg)
.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
![Page 8: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/8.jpg)
.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
![Page 9: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/9.jpg)
.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
![Page 10: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/10.jpg)
.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
![Page 11: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/11.jpg)
.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
![Page 12: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/12.jpg)
.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
![Page 13: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/13.jpg)
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
![Page 14: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/14.jpg)
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
![Page 15: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/15.jpg)
Les sources de la complexitéRésumons !
![Page 16: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/16.jpg)
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
![Page 17: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/17.jpg)
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
![Page 18: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/18.jpg)
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
![Page 19: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/19.jpg)
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
![Page 20: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/20.jpg)
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
![Page 21: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/21.jpg)
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
![Page 22: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/22.jpg)
La complexité humaineLa complexité humaineLa complexité humaineLa complexité humaineLa complexité humaine
22
![Page 23: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/23.jpg)
La complexité humaineLa complexité humaineLa complexité humaineLa complexité humaineLa complexité humaine
23
![Page 24: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/24.jpg)
Quelle que soit l'énergie que vous y investirez,un niveau de qualité n'est jamais un acquis en CSS !
24
![Page 25: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/25.jpg)
Tester du codeCeux qui nous préviennent quand on fait une bourde !
![Page 26: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/26.jpg)
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
![Page 27: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/27.jpg)
Tester du codeTester du codeTester du codeTester du codeTester du code
27
![Page 28: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/28.jpg)
Sur 6play.fr :1500+ tests unitaires2300+ étapes de tests fonctionnels
Tester du codeTester du codeTester du codeTester du codeTester du code
28
![Page 29: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/29.jpg)
Tester du CSSC'est à partir de maintenant que c'est intéressant !
![Page 30: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/30.jpg)
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
![Page 31: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/31.jpg)
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
31
![Page 32: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/32.jpg)
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
![Page 33: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/33.jpg)
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
33
![Page 34: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/34.jpg)
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
34
![Page 35: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/35.jpg)
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
35
![Page 36: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/36.jpg)
Le style guide permet de documenter les composants :Aux designersAux développeurs
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
36
![Page 37: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/37.jpg)
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
37
![Page 38: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/38.jpg)
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
![Page 39: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/39.jpg)
Tester du CSSTester du CSSTester du CSSTester du CSSTester du CSS
39
![Page 40: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/40.jpg)
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
![Page 41: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/41.jpg)
Il s'agit de notre objectif !
Un seul bémolUn seul bémolUn seul bémolUn seul bémolUn seul bémol
41
![Page 42: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/42.jpg)
Tester du CSS aujourd'huiet pour toutes les tailles de projet stp.
![Page 43: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/43.jpg)
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
![Page 44: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/44.jpg)
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
![Page 45: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/45.jpg)
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
![Page 46: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/46.jpg)
Captures d'imageCaptures d'imageCaptures d'imageCaptures d'imageCaptures d'image
46
![Page 47: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/47.jpg)
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
![Page 48: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/48.jpg)
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
![Page 49: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/49.jpg)
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
![Page 50: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/50.jpg)
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
![Page 51: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/51.jpg)
Les lintersLes lintersLes lintersLes lintersLes linters
51
![Page 52: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/52.jpg)
Bemlinter permet de valider sur CSS et SCSS :La syntaxe BEML'isolation des composants
Les lintersLes lintersLes lintersLes lintersLes linters
52
![Page 53: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/53.jpg)
Les lintersLes lintersLes lintersLes lintersLes linters
53
![Page 54: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/54.jpg)
Première tentative :Analyser tous les fichiersAutoriser une blocklist
Les lintersLes lintersLes lintersLes lintersLes linters
54
![Page 55: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/55.jpg)
Deuxième tentative :Enregistrer les erreurs existantesAlerter sur les nouvelles erreurs
Les lintersLes lintersLes lintersLes lintersLes linters
55
![Page 56: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/56.jpg)
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
![Page 57: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/57.jpg)
Mais ce ne sont pas des tests !?En même temps c'était dans le titre de la conf.
![Page 58: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/58.jpg)
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
![Page 59: CSS - Paris Web · Les tests fonctionnels peuvent contenir des tests graphiques. Vérifier qu'un élément : est visible est dans le viewport ne dépasse pas de son parent Tests sur](https://reader033.fdocuments.us/reader033/viewer/2022052018/60311bf7d85bef462435ecab/html5/thumbnails/59.jpg)
Des questions ?
@iamtzitzi.fr/slides/pw2017
tzi.fr/slides/pw2017.pdf
Merci !Merci !Merci !Merci !Merci !
59