Add test harness for CDK drag&drop
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### 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):
Guía de contribución
Línea de trabajo
Comienza con la reproducción de StackBlitz y compara las pruebas "should drag using harness libs" y "should drag using UnitTestElement casting and MouseEvent triggering". Sigue UnitTestElement.dispatchEvent() hasta createFakeEvent() y compara esos eventos con la ruta de MouseEvent sin procesar que usa dragRaw(). Se considera terminado cuando la prueba de arrastre del harness detecta la acción de arrastre sin depender del acceso directo al DOM.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend, testing
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100