# 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';
```