nixi-web/TESTING.md

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

# 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

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

// ✅ 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

// ✅ 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

// 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

// 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 :

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 :

import MonComposant from '../MonComposant.astro';