188 lines
4.9 KiB
Markdown
188 lines
4.9 KiB
Markdown
# Guide de Tests Astro
|
|
|
|
Ce projet utilise **Vitest** avec l'API **AstroContainer** pour tester les composants Astro UI.
|
|
|
|
## Configuration
|
|
|
|
- **Framework de test** : Vitest
|
|
- **API de rendu** : `experimental_AstroContainer` d'Astro
|
|
- **Environnement** : Node.js
|
|
- **Configuration** : `vitest.config.ts` utilise `getViteConfig` d'Astro
|
|
|
|
## Structure des Tests
|
|
|
|
```
|
|
src/components/ui/__tests__/
|
|
├── basic.test.ts # Test simple de démonstration
|
|
├── Button.test.ts # Tests du composant Button
|
|
├── Card.test.ts # Tests du composant Card
|
|
├── Alert.test.ts # Tests du composant Alert
|
|
├── Badge.test.ts # Tests du composant Badge
|
|
├── Input.test.ts # Tests du composant Input
|
|
├── Progress.test.ts # Tests du composant Progress
|
|
├── Spinner.test.ts # Tests du composant Spinner
|
|
├── MovieCard.test.ts # Tests du composant MovieCard
|
|
└── ... # Autres tests de composants
|
|
```
|
|
|
|
## Exécution des Tests
|
|
|
|
```bash
|
|
# Exécuter tous les tests
|
|
bun run test
|
|
|
|
# Exécuter les tests en mode watch
|
|
bun run test:watch
|
|
|
|
# Exécuter l'interface graphique des tests
|
|
bun run test:ui
|
|
|
|
# Exécuter des tests spécifiques
|
|
bun run test src/components/ui/__tests__/Button.test.ts
|
|
```
|
|
|
|
## Structure d'un Test Type
|
|
|
|
```typescript
|
|
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
|
|
import { describe, it, expect } from 'vitest';
|
|
import MonComposant from '../MonComposant.astro';
|
|
|
|
describe('MonComposant', () => {
|
|
it('renders with default props', async () => {
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(MonComposant, {
|
|
props: { propriete: 'valeur' },
|
|
slots: { default: 'Contenu du slot' }
|
|
});
|
|
|
|
expect(result).toContain('Contenu attendu');
|
|
expect(result).toContain('class="ma-classe"');
|
|
});
|
|
});
|
|
```
|
|
|
|
## Bonnes Pratiques
|
|
|
|
### 1. Utilisation d'AstroContainer
|
|
|
|
```typescript
|
|
// ✅ Correct - Utiliser AstroContainer
|
|
const container = await AstroContainer.create();
|
|
const result = await container.renderToString(Component, {
|
|
props: { variant: 'primary' },
|
|
slots: { default: 'Content' }
|
|
});
|
|
|
|
// ❌ Incorrect - Ancienne méthode DOM
|
|
const html = await renderAstroComponent(Component);
|
|
document.body.innerHTML = html;
|
|
```
|
|
|
|
### 2. Vérifications de Contenu
|
|
|
|
```typescript
|
|
// ✅ Vérifier le contenu HTML rendu
|
|
expect(result).toContain('expected-class');
|
|
expect(result).toContain('Expected text');
|
|
expect(result).toContain('attribute="value"');
|
|
|
|
// ✅ Vérifier la structure HTML
|
|
expect(result).toContain('<button');
|
|
expect(result).toContain('type="submit"');
|
|
```
|
|
|
|
### 3. Test des Props
|
|
|
|
```typescript
|
|
// Test des variants
|
|
const variants = ['primary', 'secondary', 'outline'] as const;
|
|
for (const variant of variants) {
|
|
const result = await container.renderToString(Button, {
|
|
props: { variant },
|
|
slots: { default: 'Test' }
|
|
});
|
|
expect(result).toContain(`btn-${variant}`);
|
|
}
|
|
```
|
|
|
|
### 4. Test des Slots
|
|
|
|
```typescript
|
|
// Test avec différents slots
|
|
const result = await container.renderToString(Modal, {
|
|
props: { id: 'test-modal' },
|
|
slots: {
|
|
header: 'Modal Title',
|
|
default: 'Modal content',
|
|
footer: 'Modal actions'
|
|
}
|
|
});
|
|
```
|
|
|
|
## Composants Testés
|
|
|
|
### Composants de Base (4/4)
|
|
- ✅ Button - Variants, tailles, états, types
|
|
- ✅ Card - Classes, contenu, props
|
|
- ✅ Alert - Variants (success, warning, error, info)
|
|
- ✅ Badge - Variants et styles
|
|
|
|
### Composants de Formulaire (4/4)
|
|
- ✅ Input - Types, tailles, validation
|
|
- ✅ Select - Options, validation
|
|
- ✅ Textarea - Dimensions, validation
|
|
- ✅ FormGroup - Regroupement
|
|
|
|
### Composants de Layout (3/3)
|
|
- ✅ Container - Mode fluide
|
|
- ✅ Row - Styles
|
|
- ✅ Col - Breakpoints responsifs
|
|
|
|
### Composants Modaux (4/4)
|
|
- ✅ Modal - Visibilité, structure
|
|
- ✅ ModalHeader - Avec bouton fermeture
|
|
- ✅ ModalBody - Contenu
|
|
- ✅ ModalFooter - Actions
|
|
|
|
### Composants de Navigation (3/3)
|
|
- ✅ Navbar - Slots (brand, nav, actions)
|
|
- ✅ NavLink - État actif, liens
|
|
- ✅ NavbarBrand - Logo/marque
|
|
|
|
### Composants Spécialisés (4/4)
|
|
- ✅ MovieCard - Film (poster, rating, metadata)
|
|
- ✅ SearchBar - Recherche avec icône
|
|
- ✅ Progress - Barre de progression
|
|
- ✅ Spinner - Indicateur de chargement
|
|
|
|
## Total : 22 composants testés
|
|
|
|
## Statut des Tests
|
|
|
|
- **Tests configurés** : ✅
|
|
- **API AstroContainer** : ✅
|
|
- **Tests fonctionnels** : ✅
|
|
- **Coverage complète** : ✅
|
|
|
|
## Dépannage
|
|
|
|
### Erreur de Parsing Astro
|
|
Si vous obtenez des erreurs de parsing `.astro`, vérifiez que votre `vitest.config.ts` utilise bien `getViteConfig` :
|
|
|
|
```typescript
|
|
import { getViteConfig } from 'astro/config';
|
|
|
|
export default getViteConfig({
|
|
test: {
|
|
environment: 'node'
|
|
}
|
|
});
|
|
```
|
|
|
|
### Tests qui ne trouvent pas les composants
|
|
Vérifiez les imports relatifs dans vos tests :
|
|
|
|
```typescript
|
|
import MonComposant from '../MonComposant.astro';
|
|
``` |