angular / angular/components

Add test harness for CDK drag&drop

Offen
#22,067 3 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/drag-drop feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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):

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der StackBlitz-Reproduktion und vergleiche die Tests "should drag using harness libs" und "should drag using UnitTestElement casting and MouseEvent triggering". Verfolge UnitTestElement.dispatchEvent() bis zu createFakeEvent() und vergleiche diese Events mit dem unverarbeiteten MouseEvent-Pfad, der von dragRaw() verwendet wird. Als abgeschlossen gilt die Aufgabe, wenn der Harness-Drag-Test die Drag-Aktion erkennt, ohne auf den direkten Zugriff auf das DOM angewiesen zu sein.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend, testing
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.