Refonte Structure

knowledge/frontend/patterns/tests.md

@@ -0,0 +1,53 @@
+# Frontend — Patterns : Tests
+
+> Extrait de la base de connaissance Lead_tech. Voir `knowledge/frontend/patterns/README.md` pour l'index complet.
+
+---
+
+<a id="pattern-tests-styles-sans-renderer"></a>
+## Pattern : Tests de styles React Native sans renderer JSX
+
+### Synthèse
+
+- **Objectif** : tester les tokens et styles de composants React Native dans un environnement Jest `testEnvironment: node` sans renderer JSX.
+- **Contexte** : config Jest avec `transform: { '^.+\\.ts$': 'ts-jest' }` — les `.tsx` ne sont pas transformés.
+- **Quand l'utiliser** : tokens de thème, logique pure, valeurs de style exportées.
+- **Quand l'éviter** : rendu conditionnel (styles dynamiques inline) — nécessite `@testing-library/react-native`.
+
+### Analyse
+
+- **Avantages** :
+  - teste que le composant utilise les bons tokens, pas seulement que les tokens ont des valeurs
+  - détecte les régressions de style sans renderer
+  - rapide, aucune config Jest supplémentaire
+- **Limites / vigilance** :
+  - ne teste pas le style calculé au runtime (style conditionnel dynamique)
+
+### Validation
+
+- Validé le : 19-03-2026
+- Contexte technique : React Native / Jest / ts-jest — app-alexandrie story 0.2
+
+### Implémentation
+
+```typescript
+// Button.tsx — exporter le StyleSheet avec un nom préfixé
+export const buttonStyles = StyleSheet.create({
+  base: { borderRadius: 20, height: 57 },
+  primary: { backgroundColor: colors.primary },
+});
+export function Button(...) { ... }
+
+// ui-components.spec.ts — importer et vérifier les tokens
+import { buttonStyles } from './Button';
+import { colors } from '@/theme';
+
+it('variante primary utilise colors.primary', () => {
+  expect(buttonStyles.primary.backgroundColor).toBe(colors.primary);
+});
+```
+
+### Deux niveaux de tests UI recommandés
+
+1. `.spec.ts` (node) : tokens, valeurs, logique pure
+2. `.spec.tsx` (config séparée avec renderer) : rendu visuel, interactions