Add test harness for CDK drag&drop
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
#### 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):
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện trên StackBlitz và so sánh các test "should drag using harness libs" và "should drag using UnitTestElement casting and MouseEvent triggering". Theo dõi UnitTestElement.dispatchEvent() đến createFakeEvent() và so sánh các event đó với đường dẫn MouseEvent thô được dragRaw() sử dụng. Hoàn tất khi test kéo của harness phát hiện được thao tác kéo mà không phụ thuộc vào việc truy cập DOM thô.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, testing
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100