Composants Réels

Les composants UI réels — cartes produit, tableaux d'admin, barres de navigation, dropdowns, modals, carousels, grilles tarifaires, kanbans — combinent plusieurs propriétés CSS dans des systèmes visuels denses et interdépendants. Tester un composant en isolation avec un screenshot de référence de Storybook ne suffit pas, parce qu'une régression peut surgir uniquement quand le composant est intégré dans son contexte réel : un dropdown qui s'ouvre derrière un tableau parce qu'un overflow: hidden a été ajouté pour résoudre un autre bug, une modal décentrée parce que le positionnement du body a été modifié pour un composant sticky, ou un carousel qui affiche deux slides au lieu d'un parce que le conteneur parent a changé de largeur. Sur les interfaces métier, ces régressions touchent souvent des fonctionnalités critiques — boutons d'archivage cachés dans un tableau, options de validation invisibles dans une modal — et leur impact opérationnel dépasse largement le simple inconfort visuel. La cohérence d'un design system dépend précisément de la stabilité de ces composants intégrés à leurs pages réelles, sprint après sprint. Delta-QA capture les pages complètes contenant ces composants, dans leurs différents états interactifs (menu ouvert, modal affichée, ligne sélectionnée), et compare les snapshots à la baseline visuelle. Le diff met en évidence les composants dont les dimensions, le positionnement, le contenu visible ou la profondeur de superposition ont changé entre versions. Cette approche permet de valider qu'un changement sur une partie du système n'a pas brisé un autre composant à distance, et donne aux équipes QA une couverture sur les patterns UI complets que les tests unitaires de composant isolé ne peuvent par construction pas capter.