angular / angular/components

Add test harness for CDK drag&drop

Open
#22,067 3 comments 5 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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):

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction and compare the "should drag using harness libs" and "should drag using UnitTestElement casting and MouseEvent triggering" tests. Trace UnitTestElement.dispatchEvent() into createFakeEvent() and compare those events with the raw MouseEvent path used by dragRaw(). Done means the harness drag test detects the drag action without relying on raw DOM access.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.