Cette article décrit comment automatiser le drag-and-drop des lignes dans un DataGridPro de MUI en utilisant Cypress, en se basant sur des expériences réelles et des solutions testées pour garantir que l’événement onRowOrderChange et l’appel API se déclenchent correctement.
Contexte et objectif
Le DataGridPro utilisé dans l’application a le réordonnancement des lignes activé via rowReordering. L’objectif est de déplacer une ligne source vers une position cible et de s’assurer que le callback d’ordre des lignes et l’appel API de mise à jour du rang soient déclenchés.
Premières approches et résultats
Trial 1: Mouse coordinates manuels - L’élément est déplacé visuellement mais le drop correct n’est pas détecté et la callback onRowOrderChange ne se déclenche pas.
Trial 2: Drag events simulés - La ligne est amenée à la position cible, mais la callback onRowOrderChange ne se déclenche toujours pas, donc pas d’appel API.
Trial 3: Drag-and-drop fonctionnel avec dataTransfer - Le drag start, le dragover et le drop sont simulés avec dataTransfer, puis le dragend; le drop est bien pris en compte et la callback onRowOrderChange est déclenchée, l’appel API est émis. C’est la solution qui fonctionne.
Solution pratique et étape par étape
Pour obtenir le comportement attendu, il faut déclencher les événements de drag-and-drop en chaîne, en s’assurant que dataTransfer est fourni et que les quatre étapes clés sont couvertes : dragstart sur la source, dragover sur la cible, drop sur la cible et dragend sur la source.
Exemple conceptuel reproductible (résumé des points majeurs sans code exact):
- Indexer les lignes par leurs identifiants (data-id) et localiser le DragIndicatorIcon.
- Trigger le dragstart sur la source avec dataTransfer: {} et force true.
- Trigger le dragover sur la cible avec dataTransfer: {} et force true.
- Trigger le drop sur la cible avec dataTransfer: {} et force true.
- Trigger le dragend sur la source avec dataTransfer: {} et force true.
- Vérifier que la callback onRowOrderChange est bien déclenchée et que l’API de mise à jour du rang est appelée.
Remarque: les essais manuels de coordonnées ou l’envoi des événements drag et drop sans dataTransfer peuvent ne pas déclencher l’événement de réordonnancement dans DataGridPro.
Récit de découverte et conseils utiles
Une approche intéressante a consisté à travailler avec une version adaptée des événements drag-and-drop, incluant dataTransfer, pour que Cypress émule fidèlement le comportement utilisateur dans le navigateur et que le composant DataGridPro réagisse comme en usage normal.
Si vous cherchez des idées complémentaires, vous pouvez innover en utilisant des outils IA internes pour comprendre les scénarios qui échouent et adapter les enchaînements d’événements en conséquence.
Tableau récapitulatif des tests
| Approche | Événements simulés | Résultat |
|---|---|---|
| Trial 1 | mousedown, mousemove, mouseup sur DragIndicatorIcon | Déplacement visuel sans drop correct; pas d’appel onRowOrderChange |
| Trial 2 | dragstart, dragenter, dragover, drop | Drag visuel puis drop médiocre; pas d’appel API |
| Trial 3 | dragstart, dragover, drop, dragend avec dataTransfer | Drop correct, callback déclenchée, appel API émis |
Images et médias suggérés
Pour clarifier visuellement le processus, vous pouvez insérer des infographies montrant le flux d’événements et un schéma des éléments DataGridPro et DragIndicatorIcon.
Bonnes pratiques et recommandations
- Utiliser dataTransfer dans les déclencheurs dragstart et drop pour que Cypress simule fidèlement le comportement du navigateur.
- Vérifier que la callback onRowOrderChange est bien appelée et que l’API de mise à jour est déclenchée après le drop.
- Tester avec plusieurs positions cibles et différents ordres pour s’assurer de la robustesse du test.