Atelier Unit-Testing Angular

Fondamentaux & Test-Driven Design
Angular Unit-Testing Workshop

L’unit-testing ou plus particuliĂšrement l’unit-testing front-end est indĂ©niablement dans le top 3 des sujets les plus complexes associĂ©s au dĂ©veloppement d’applications Angular.

Face Ă  cette complexitĂ©, il est tentant de renoncer mais Ă  quel prix ? Certes, il est possible de dĂ©velopper une application sans tests unitaires mais est-ce rĂ©ellement plus rapide ? Qu’advient-il de la maintenabilitĂ© du code quelques mois ou Ă  peine quelques semaines plus tard ? Pourrons-nous refactoriser l’application et la dĂ©ployer rĂ©guliĂšrement en toute sĂ©rĂ©nitĂ© au fur et Ă  mesure qu’elle se complexifie et qu’elle vieillit entre nos mains ?

Ce workshop prĂ©sente Ă  travers des exercices pratiques, des techniques pragmatiques d’unit-testing de composants et de services Angular. Vous y dĂ©couvrirez Ă©galement comment Ă©crire des tests comprĂ©hensibles, maintenables et surtout rentables.

Objectifs

Lors de ce workshop, vous apprendrez Ă  :

  • implĂ©menter des tests unitaires pour vos applications Angular avec l’approche Test-Driven Development,

  • choisir le bon type de tests Ă  implĂ©menter en fonction du contexte,

  • dĂ©coupler les tests du code pour faciliter le refactoring,

  • implĂ©menter des tests unitaires maintenables et comprĂ©hensibles.

RĂ©servation / Information

https://marmicode.eventbrite.fr

...ou contactez-nous sur camijote@marmicode.fr et appelez-nous au +33 4 26 83 61 92 pour toutes vos questions.

Déroulement de la journée

  • 9h00 : DĂ©but de l'atelier.

  • 12h30 - 14h : DĂ©jeuner.

  • 17h30 : Fin de l'atelier

  • 17h30 - 19h : ApĂ©ro-discute.

Le Lieu

Le lieu reste à définir en fonction du nombre de participants.

Prérequis

  • CuriositĂ© et bonne culture Web.

  • FamiliaritĂ© avec l’écosystĂšme Angular (e.g. savoir crĂ©er des composants, implĂ©menter et utiliser des Inputs / Outputs).

  • Un ordinateur portable.

Programme

Introduction au testing

  • Pourquoi tester ?

  • Les diffĂ©rentes types de test.

  • Un exemple de test unitaire.

Stratégie de testing

  • Que faut-il tester et comment ?

  • DĂ©finition d'une unitĂ© de code.

  • Classicists vs Mockists.

  • Exercice : ImplĂ©mentation d’un premier test unitaire.

  • Debugging avec Karma.

Jest

  • Avantages et inconvĂ©nients.

  • Mise en place de Jest.

  • Debugging avec Jest.

Test-Driven Development

  • Origines et intĂ©rĂȘt du Test-Driven Development.

  • Tips & tricks.

  • Exercice Bonus : Timeboxed TDD & TCR.

Service Testing

  • Exercice : ImplĂ©menter un service avec une approche pilotĂ©e par les tests (ou Test-Driven Development).

Mocks, Spies & Stubs

  • Mocks vs Spies vs Stubs.

  • Surcharge de l’injection de dĂ©pendance Angular.

  • Exercice : Simuler le comportement d’une dĂ©pendance avec des Mocks, Spies & Stubs.

Component Testing

  • ImplĂ©mentation de tests unitaires pour un composant.

  • Les diffĂ©rents types de tests de composants : Integration vs Shallow vs Isolated.

  • Interaction avec le DOM.

  • Exercice : Integration testing d’un composant.

  • Exercice : Shallow testing.

  • Exercice : Testing des Ă©changes Ă  base d’Inputs & Outputs.

Http Testing

  • Mocking des Ă©changes HTTP.

Votre Formateur

Younes est formateur, coach en eXtreme Programming et Google Developer Expert en Angular et Web Technologies.

AprĂšs 10 ans d’expĂ©rience en dĂ©veloppement web, Younes est convaincu que la qualitĂ© d’un produit repose principalement sur le Collective Ownership et la qualitĂ© de code. Son but est de propager cette culture de partage et d’amĂ©liorer la qualitĂ© des produits par l’échange et le levier de la Developer eXperience.

Depuis plus de 5 ans et avec un focus autour d'Angular, Younes forme et accompagne des équipes allant de jeunes startups aux institutions européennes en passant par des banques ou sociétés de service.

Il est Ă©galement l’auteur de ce guide... et prend parfois le temps d’aller bavarder aux meetups et confĂ©rences sur diffĂ©rents sujets tels que Les Composants Interchangeables Ă  l’AngularConnect ou le Limbo Ă  l'AngularUp.