Lab 2.3 : Red-Green-Refactor-AI

Module : 2.3 - Développement Piloté par les Tests avec Claude | ← SlidesDurée : 1 heure Projet Exemple : node-express-mongoose-demo

Objectifs d'Apprentissage

À la fin de ce lab, vous serez capable de :

• Pratiquer le cycle TDD (Red → Green → Refactor) avec Claude
• Écrire des tests qui échouent avant l'implémentation
• Utiliser Claude pour implémenter du code qui fait passer les tests
• Refactorer tout en gardant les tests au vert

Prérequis

• Lab 2.2 (Génération de Tests) terminé
• Tests fonctionnels dans le projet

Le Cycle TDD

┌──────────────────────────────────────────┐
│                                          │
│    RED ──────► GREEN ──────► REFACTOR    │
│     │                            │       │
│     └────────────────────────────┘       │
│                                          │
└──────────────────────────────────────────┘

RED :      Écrire un test qui échoue
GREEN :    Écrire le code minimum pour passer
REFACTOR : Améliorer sans changer le comportement

Configuration

# Naviguer vers le projet exemple
cd sample-projects/node-express-mongoose-demo

# S'assurer que les tests fonctionnent
npm test

# Démarrer Claude Code
claude

La Fonctionnalité

Vous allez implémenter une nouvelle fonctionnalité en utilisant TDD :

Fonctionnalité : Ajouter une fonction pour créer des slugs à partir des titres d'articles

• Entrée : "My Article Title"
• Sortie : "my-article-title"

---

Phase 1 : RED - Écrire un Test qui Échoue

Durée : 12-15 minutes

Créez un test pour une fonctionnalité qui n'existe pas encore.

Étape 1 : Créer le fichier de test

Create a test file for a new slugify utility. The function should:
- Convert "Hello World" to "hello-world"
- Handle special characters
- Handle multiple spaces

Write only the tests, not the implementation.

Étape 2 : Vérifier que le test échoue

npm test

Le test devrait échouer avec "function not found" ou similaire.

Critères de réussite :

• [ ] Fichier de test créé
• [ ] Les tests s'exécutent mais échouent (RED)
• [ ] L'échec est dû à l'absence d'implémentation

---

Phase 2 : GREEN - Faire Passer le Test

Durée : 15-20 minutes

Écrivez le code minimum pour faire passer les tests.

Étape 1 : Implémenter la fonction

Now implement the slugify function to make the tests pass. Write the minimum code necessary.

Étape 2 : Lancer les tests

npm test

Étape 3 : Corriger les échecs

The test for [specific case] is failing. Fix the implementation.

Critères de réussite :

• [ ] Implémentation créée
• [ ] Tous les tests passent (GREEN)
• [ ] Pas de fonctionnalités supplémentaires ajoutées

---

Phase 3 : REFACTOR - Améliorer le Code

Durée : 15-20 minutes

Améliorez la qualité du code tout en gardant les tests au vert.

Étape 1 : Examiner le code

Review the slugify function. What could be improved for readability or performance?

Étape 2 : Refactorer

Refactor the slugify function to [specific improvement] while keeping tests passing.

Étape 3 : Vérifier que les tests passent toujours

npm test

Critères de réussite :

• [ ] Code plus propre/lisible
• [ ] Les tests passent toujours
• [ ] Aucun changement de comportement

---

Phase 4 : Ajouter des Cas Limites

Durée : 15-20 minutes

Étendez la fonctionnalité avec plus de tests.

Étape 1 : Écrire plus de tests qui échouent

Add tests for these edge cases:
- Empty string input
- String with only special characters
- Very long strings
- Strings with numbers

Étape 2 : Les faire passer

Update the slugify function to handle these edge cases.

Critères de réussite :

• [ ] Nouveaux tests de cas limites ajoutés
• [ ] Tous les tests passent
• [ ] La fonction gère tous les cas

---

Exemple de Session TDD

# RED : Écrire le test d'abord
> Create a test for a slugify function that converts "Hello World" to "hello-world"

# Lancer les tests - ils échouent
$ npm test
FAIL: slugify is not defined

# GREEN : Implémenter
> Implement slugify to make the test pass

# Lancer les tests - ils passent
$ npm test
PASS: all tests passing

# REFACTOR : Améliorer
> Refactor slugify to use regex instead of multiple replace calls

# Lancer les tests - ils passent toujours
$ npm test
PASS: all tests passing

---

L'État d'Esprit TDD

Phase	Focus	Style de Prompt Claude
RED	Comportement	"Write a test that..."
GREEN	Correction	"Implement to make tests pass"
REFACTOR	Qualité	"Improve without changing behavior"

---

Erreurs Courantes à Éviter

1. Écrire l'implémentation d'abord - Toujours le test d'abord
2. Écrire trop de tests à la fois - Un test à la fois
3. Sur-implémenter - N'écrivez que le code pour passer le test actuel
4. Sauter le refactor - C'est là que la qualité du code s'améliore

---

Conseils pour Réussir

1. Petites étapes - Un test, une fonctionnalité à la fois
2. Lancer les tests fréquemment - Après chaque modification
3. Commiter au vert - Sauvegardez votre progression quand les tests passent
4. Faites confiance au processus - Cela semble lent mais prévient les bugs

---

Idées de Refactoring

Après que les tests passent, considérez :

• Extraire des fonctions utilitaires
• Améliorer les noms de variables
• Réduire la complexité
• Ajouter des annotations de type (si vous utilisez TypeScript)

---

Objectifs Avancés

Si vous terminez en avance :

1. Ajouter la fonction slugify au modèle Article
2. Écrire des tests d'intégration pour la création d'articles avec slugs
3. Ajouter un test pour l'unicité des slugs

---

Livrables

À la fin de ce lab, vous devriez avoir :

1. Une nouvelle fonction utilitaire avec une couverture de tests complète
2. De l'expérience avec le cycle Red-Green-Refactor
3. Du code propre et bien testé
4. Une compréhension de comment TDD fonctionne avec Claude

---

Prochaines Étapes

Après avoir terminé ce lab, passez au Lab 2.4 : Amélioration Incrémentale pour pratiquer le refactoring sécurisé.