mirror of
https://github.com/MaksTinyWorkshop/_Assistant_Lead_Tech
synced 2026-06-28 01:53:40 +02:00
chore(sanitization): nettoyage repo post-capitalisation
- Suppression de 3 fichiers *.tmp versionnés (résidus install BMAD 6.0.4, vides)
- Ajout de *.tmp au .gitignore
- Déduplication: entrée "Prisma init au chargement = casse build Next.js"
était dupliquée à l'identique dans risques/prisma.md ET risques/nextjs.md
→ conservée dans nextjs.md (risque Next.js), retirée de prisma.md
- Déduplication: pattern "Tests de styles RN sans renderer JSX" dupliqué dans
patterns/tests.md ET patterns/design-tokens.md → conservé dans tests.md
- Correction README backend/risques : retrait des entrées fantômes de la ligne
prisma.md ("init module build" déplacé vers nextjs ; "suppression champ .map()"
qui vit en réalité dans general.md)
Audit complet de la base : aucun doublon d'ancre restant, liens non cassés,
README synchronisés, format risques/patterns constant. Branches obsolètes
mcp_test et mcp_v1 supprimées (mergées dans main).
This commit is contained in:
@@ -137,56 +137,6 @@ import { buttonStyles } from '@/components/ui/Button';
|
||||
<TouchableOpacity style={[buttonStyles.base, styles.facebookButton]} />
|
||||
```
|
||||
|
||||
<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
|
||||
|
||||
---
|
||||
|
||||
<a id="pattern-palette-light-dark-md3-usethemedcolors"></a>
|
||||
## Pattern : Palette light/dark MD3 + hook `useThemedColors` + dual export
|
||||
|
||||
|
||||
Reference in New Issue
Block a user