Add test harness for CDK drag&drop
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### Reproduction
Stackblitz:
https://stackblitz.com/edit/harness-issue-drag-drop
Steps to reproduce:
1. Run tests
2. There are 2 tests that try to simply drag a box by using mousedown, mousemove, mouseup events. The box contains a text "was dragged: true/false" that indicates whether d&d action really took place.
3. See that `"should drag using harness libs"` test fails. It uses harness `drag()` method that invokes mouse events in a way:
```
const dragBox = await this.locatorFor(".drag-me")();
await dragBox.dispatchEvent("mousedown");
await dragBox.dispatchEvent("mousemove");
```
#### Expected Behavior
Calling `dispatchEvent` on `TestElement` implementation should be picked up by d&d.
#### Actual Behavior
Used implementation of `TestElement` is `UnitTestElement`. `dispatchEvent()` of this class triggers `createFakeEvent()` that create events using deprecated `initEvent()` method.
```
const event = document.createEvent('Event');
event.initEvent(type, canBubble, cancelable);
```
Such created event is not picked up by d&d implementation.
However getting to raw dom element and dispatching `new MouseEvent` works perfectly fine. It can be visible in `"should drag using UnitTestElement casting and MouseEvent triggering"` test. It uses harness `dragRaw()` method.
I guess `createFakeEvent` should not be used here.
My initial suggestion for implementing `TestElement` interface would be to simply distinguish even type by name in following way:
```
if (type.startswith("mouse")) {
... new MouseEvent(type);
}
```
I don't know if there is any other option taking into account `TestElement` interface takes only event name as a string.
#### Environment
- Angular: 11
- CDK/Material: 11
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu):
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz et comparez les tests "should drag using harness libs" et "should drag using UnitTestElement casting and MouseEvent triggering". Suivez UnitTestElement.dispatchEvent() jusqu'à createFakeEvent() et comparez ces événements avec le chemin MouseEvent brut utilisé par dragRaw(). C'est terminé lorsque le test de glisser-déposer du harness détecte l'action de glisser-déposer sans dépendre d'un accès direct au DOM.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend, testing
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100