angular / angular/components

Add test harness for CDK drag&drop

未关闭
#22,067 3 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/drag-drop feature P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

从 StackBlitz 复现开始,比较 "should drag using harness libs" 和 "should drag using UnitTestElement casting and MouseEvent triggering" 测试。跟踪 UnitTestElement.dispatchEvent() 到 createFakeEvent(),并将这些事件与 dragRaw() 使用的原始 MouseEvent 路径进行比较。当 harness 拖动测试无需依赖原始 DOM 访问即可检测到拖动操作时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend, testing
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。