Add test harness for CDK drag&drop
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
#### 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):
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dalla riproduzione StackBlitz e confronta i test "should drag using harness libs" e "should drag using UnitTestElement casting and MouseEvent triggering". Segui UnitTestElement.dispatchEvent() fino a createFakeEvent() e confronta questi eventi con il percorso MouseEvent grezzo usato da dragRaw(). Il lavoro è completato quando il test di trascinamento dell'harness rileva l'azione di trascinamento senza dipendere dall'accesso diretto al DOM.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend, testing
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100