Add test harness for CDK drag&drop
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 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 パスと比較します。raw DOM アクセスに依存せずに harness のドラッグテストがドラッグ操作を検出できれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend, testing
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100