Test AG Grid Page

Overview

Pagina di test per verificare il corretto funzionamento di AG Grid React Enterprise nel progetto Elerama Frontend, utilizzando dati reali dall'API di magazzino.

Accesso

• URL: /test-ag-grid
• Disponibilità: Accessibile anche in produzione (redirect commentato)
• Autenticazione: Richiesta (protected route)

Features

1. Test Configurabili

• Configurazione test caricata da JSON esterno
• Filtro automatico per ditta corrente
• Selezione manuale del test da eseguire
• Parametri test: date, magazzini, tipi movimento

2. Performance Tracking

• Tempo API: Misurato dalla chiamata al completamento
• Tempo Rendering: Misurato dal completamento API al render della griglia
• Metriche visualizzate in tempo reale

3. AG Grid Enterprise Configuration

• Versione: ag-grid-react v34.3.0 (Enterprise Edition)
• Tema: ag-theme-quartz-dark personalizzato
• Features Enterprise attive:
  • Paginazione avanzata (10, 50, 100, 1000, 10000, 100000 righe)
  • Row Grouping
  • Pivot Mode
  • Value Aggregation
  • Advanced Filters (data, numero)
  • Sidebar con pannelli Columns e Filters
  • Range Selection
  • Excel Export (menu contestuale)
  • Integrated Charts
  • Grid State Persistence (sessionStorage)

4. Gestione Dati Warehouse

• API: getWarehouseMovementsSummary
• TanStack Query hooks (StrictMode-safe)
• Hook useFetchJson per configurazione test
• Interfaccia WarehouseMovement da schema Zod

5. Interazioni Utente

• Click su riga: Visualizza tutti i dati della riga selezionata
• Arrow Up/Down: Naviga tra le righe con tastiera
• Grid State: Posizione scroll e filtri persistono tra navigazioni

Struttura Codice

import { AG_GRID_LOCALE_IT } from '@ag-grid-community/locale';
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { ModuleRegistry, ClientSideRowModelModule } from "ag-grid-community";

// Register AG Grid Enterprise modules
ModuleRegistry.registerModules([
    AllEnterpriseModule,
    ClientSideRowModelModule,
    IntegratedChartsModule.with(AgChartsEnterpriseModule)
]);

// TanStack Query hook - StrictMode-safe
const { data, isLoading, error } = useWarehouseMovementsSummary();

// Carica configurazione test
const { data: testsConfig } = useFetchJson<TestsConfigFile>(
    "https://daisysolution.it/benchmark/erp/erp-warehouse-movements-summary-test-list.json"
);

// Filtra test per ditta corrente
const availableTests = useMemo(() => {
    if (!testsConfig || !currentCompanyId) return [];
    return testsConfig.tests.filter(test => test.companyId === currentCompanyId);
}, [testsConfig, currentCompanyId]);

Grid State Persistence

Lo stato della griglia (scroll, filtri, ordinamento) viene salvato automaticamente:

const GRID_STATE_KEY = 'ag-grid-test-state';

// Carica stato iniziale
const initialState = useMemo<GridState | undefined>(() => {
    const savedState = sessionStorage.getItem(GRID_STATE_KEY);
    return savedState ? JSON.parse(savedState) : undefined;
}, []);

// Salva stato prima della distruzione
const onGridPreDestroyed = useCallback((event: GridPreDestroyedEvent) => {
    if (event.state) {
        sessionStorage.setItem(GRID_STATE_KEY, JSON.stringify(event.state));
    }
}, []);

Compatibilità

• ✅ React 19
• ✅ React Compiler
• ✅ React Router 7.9
• ✅ TypeScript 5 (strict mode)
• ✅ StrictMode double-call prevention
• ✅ AG Grid Enterprise v34.3.0

Testing

Test completi disponibili in: tests/routes/test-ag-grid.test.tsx

Coverage:

• Meta tags
• Client loader
• Rendering componenti
• Selettore test
• Grid con dati iniziali vuoti
• Persistenza stato

Eseguire i test:

npm test tests/routes/test-ag-grid.test.tsx

Uso

1. Accedi alla pagina /test-ag-grid
2. Seleziona un test dal menu dropdown
3. Osserva i tempi di caricamento e rendering
4. Clicca su una riga per visualizzare i dettagli
5. Esplora le features Enterprise (sidebar, export, charts)

Link Rapidi

• Dalla pagina /welcome è disponibile un menu con link a tutte le pagine di test (visibile solo in development)
• AG Grid React Documentation

Note Tecniche

React Compiler

Questa pagina è compatibile con il React Compiler abilitato nel progetto. Non utilizza useCallback o useMemo poiché il compilatore ottimizza automaticamente.

CSS

Gli stili di AG Grid sono importati direttamente nel componente:

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";

Questo è accettabile per una pagina di test. Per uso in produzione, considera di importare gli stili nel app.css principale.