Skip to content

Latest commit

 

History

History
150 lines (108 loc) · 5.75 KB

README.md

File metadata and controls

150 lines (108 loc) · 5.75 KB

Dashboard de gestion (React & Redux)


Table des matières
  1. À propos du projet
  2. Technologies utilisées
  3. Installation
  4. Utilisation
  5. Tests de performance
  6. Contact

À propos du projet

HRNet est un projet de modernisation réalisé pour WealthHealth, une grande société financière.

Mission :

Le projet vise à convertir l'application interne HRNet de jQuery vers React. L'objectif principal est de refondre les pages clés de l'application, notamment les sélecteurs de date, les modales, les menus déroulants et les tableaux, en remplaçant les plugins jQuery par des composants React personnalisés. Cette migration est effectuée pour améliorer la performance de l'application et réduire les bugs récurrents.

Tâches principales :

  • Conversion complète de l'application HRNet en React.
  • Remplacement de jQuery par des composants React pour les principaux éléments de l'interface utilisateur.
  • Analyse de performance avant et après migration avec Lighthouse.
  • Documentation détaillée du nouveau composant React créé, incluant un guide d'utilisation et des commentaires de code.

homepage

homepage

Technologies utilisées

React Redux Lighthouse Vite Faker.js

Installation

Étapes pour configurer le projet :

  1. Cloner le dépôt du projet :

    git clone https://github.com/AurelieDuynslaeger/Wealth-Health-OCR-p14.git

  2. Installer les dépendances :

    npm install

  3. Lancer l'application en mode développement :

    npm run dev

Gestion des données

Il n'y a pas d'API ni de backend pour le moment. La gestion des données est effectuée localement à l'aide de Redux pour stocker l'état global de l'application et de localStorage pour persister les données entre les sessions. Pour simuler des données réalistes d'employés, j'ai utilisé Faker.js, générant des informations aléatoires à des fins de développement et de test.

Utilisation

  • Accédez à l'application en ouvrant http://localhost:3000 dans votre navigateur.
  • Utilisez l'interface pour gérer les dossiers des employés (création et consultation).
  • Les composants clés tels que le sélecteur de date, la modale et le tableau ont été optimisés avec React.

Tests de performance

Des tests de performance ont été effectués à l'aide de Lighthouse pour comparer les performances avant et après la migration de jQuery vers React.

Résultats des tests :

  • Version jQuery :

    • Temps de chargement initial : 3.2s
    • Score Lighthouse (Performance) : 72

  • Version React :

    • Temps de chargement initial : 1.8s
    • Score Lighthouse (Performance) : 93

L'amélioration des performances résulte de la réduction de la manipulation excessive du DOM, de la gestion plus efficace des états avec Redux, et de l'élimination des lourdeurs liées à jQuery.

Tests

Tests manuels :

Des tests manuels ont été effectués pour vérifier le bon fonctionnement de l'interface utilisateur.

Tests unitaires :

Des tests unitaires pour valider le bon fonctionnement des composants React ont été effectués. Vitest est configuré pour l'application.

Pour exécuter les tests unitaires :

  1. Installer Vitest et les outils de test associés :

    npm install --save-dev vitest @testing-library/react @testing-library/jest-dom

  2. Ajouter les tests pour les composants dans le même dossier que les composants. Par exemple, pour le composant Button, vous aurez les fichiers suivants :

    src/components/Button/
├── Button.css
├── Button.jsx
└── Button.test.jsx

    Exemple de test pour le composant Button :

    // src/components/Button/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renders the button with correct text', () => {
  render(<Button label="Click Me" />);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

  3. Lancer les tests :

    npx vitest

(retour en haut)

Contact

Aurélie Duynslaeger - LinkedIn - aurelie.duynslaeger@gmail.com

(retour en haut)