langgenius/frontend-testing

Que fait frontend-testing ?

Génère des tests Vitest + React Testing Library pour les composants, hooks et utilitaires du frontend Dify. Se déclenche sur des demandes de test, fichiers spec, couverture, Vitest, RTL, tests unitaires, tests d'intégration, ou écriture/révision de tests.

Description

Cette compétence permet à l'agent IA de générer automatiquement des tests unitaires et d'intégration robustes pour le frontend Dify, en utilisant les frameworks Vitest et React Testing Library. Elle analyse les composants, hooks et utilitaires existants pour produire des tests cohérents avec les conventions du projet, des mocks appropriés, et une couverture optimale.

Utilisation

1. L'agent détecte une demande de test (par exemple, "écris des tests pour ce composant", "ajoute de la couverture de test")
2. Il analyse le fichier source (composant, hook, utilitaire) et ses dépendances
3. Il génère un fichier de test correspondant en suivant les conventions Dify :
   • Fichier placé dans un dossier __tests__ au même niveau que le fichier source
   • Nom du fichier : [nomSource].test.ts ou [nomSource].test.tsx
   • Utilisation des imports de modules existants (stores Zustand, services API, etc.)
   • Mocks pour les appels réseau, les modules externes, et les contextes
   • Tests pour les cas nominaux, les cas limites, et les cas d'erreur

Déclencheurs

• testing : demande générale de tests
• spec : travail sur des fichiers de spécification (*.spec.*)
• coverage : augmentation de la couverture de test
• vitest : travail lié à Vitest
• rtl : travail lié à React Testing Library
• unit-test : test unitaire
• integration-test : test d'intégration
• write-test : écriture d'un nouveau test
• review-test : révision d'un test existant

Exemple de fichier de test généré

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import MyComponent from '../MyComponent';

// Mock des dépendances
vi.mock('@/service/api', () => ({
  fetchData: vi.fn(),
}));

describe('MyComponent', () => {
  it('affiche correctement les props par défaut', () => {
    render(<MyComponent />);
    expect(screen.getByText('Titre par défaut')).toBeDefined();
  });

  it('déclenche onSubmit avec les données utilisateur', async () => {
    const onSubmit = vi.fn();
    render(<MyComponent onSubmit={onSubmit} />);
    await userEvent.type(screen.getByRole('textbox'), 'John');
    fireEvent.click(screen.getByRole('button', { name: /soumettre/i }));
    expect(onSubmit).toHaveBeenCalledWith({ name: 'John' });
  });

  it('affiche un message d'erreur si la donnée API échoue', async () => {
    const mockFetch = vi.fn().mockRejectedValue(new Error('Erreur réseau'));
    // ... suite du test
  });
});

Avantages

• Gain de temps : L'agent génère automatiquement les squelettes de test, les mocks et la couverture de base
• Cohérence : Les tests suivent toujours les conventions du projet Dify (TypeScript, structure __tests__, imports depuis les chemins absolus @/)
• Maintenabilité : Les tests sont conçus pour être faciles à maintenir, avec des mocks clairs et une séparation des responsabilités
• Qualité : L'agent s'assure d'inclure des tests pour les cas limites, les états de chargement, les états vides, et les erreurs

Notes techniques

• Compatible avec les versions récentes de Vitest et React Testing Library
• Nécessite que le projet Dify soit configuré avec Vitest (fichier vitest.config.ts ou vitest.config.js)
• Les tests générés utilisent les fonctions utilitaires du projet comme renderWithProvider si nécessaire
• Les mocks d'API sont basés sur les services existants dans /web/service/