Skip to content

Commit

Permalink
add better timeouts to e2e tests and reduce flakiness in one test
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilefokkema
emilefokkema committed Mar 15, 2024
1 parent a0e29c3 commit 2eb16a8
Show file tree
Hide file tree
Showing 30 changed files with 216 additions and 125 deletions.
4 changes: 2 additions & 2 deletions test-e2e/drag-events.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('when we transform the canvas', () => {
const mouse = page.mouse;
await mouse.move(100, 100);
await mouse.down({button: 'left'});
await getResultAfter(() => mouse.move(150, 100), () => drawn.getNext());
await getResultAfter(() => mouse.move(150, 100), [() => drawn.getNext()]);
await mouse.up({button: 'left'})

})
Expand All @@ -44,7 +44,7 @@ describe('when we transform the canvas', () => {
const dragStartEv = await addEventListenerInPage(infCanvasHandle, 'dragstart');
await getResultAfter(async () => {
await page.mouse.drag({x: 150, y: 100}, {x: 150, y: 150})
}, () => dragStartEv.getNext());
}, [() => dragStartEv.getNext()]);
})
})

Expand Down
8 changes: 4 additions & 4 deletions test-e2e/implicit-pointer-move.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe('when a pointer starts and default is not prevented', () => {
async () => {
firstTouch = await touchCollection.start(150, firstTouchInitialY)
},
() => pointerDown.getNext())
[() => pointerDown.getNext()])
})

describe('and then a second pointer starts and default is prevented', () => {
Expand All @@ -54,7 +54,7 @@ describe('when a pointer starts and default is not prevented', () => {
secondTouchInitialY = 150;
([{pointerId: secondPointerId}] = await getResultAfter(async () => {
secondTouch = await touchCollection.start(150, secondTouchInitialY);
}, () => pointerDown.getNext()));
}, [() => pointerDown.getNext()]));
});

afterAll(async () => {
Expand All @@ -69,8 +69,8 @@ describe('when a pointer starts and default is not prevented', () => {
deltaY = 100;

([pointerMoveEvent] = await getResultAfter(() => firstTouch.move(150, firstTouchInitialY - deltaY),
() => pointerMove.getNext(),
() => drawn.getNext()));
[() => pointerMove.getNext(),
() => drawn.getNext()] as const));
});

it('should emit a pointermove for the second touch', async () => {
Expand Down
20 changes: 10 additions & 10 deletions test-e2e/mouse-events.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('when the mouse interacts with the canvas', () => {
const [{
offsetX: pointerEnterOffsetX,
offsetY: pointerEnterOffsetY,
}] = await getResultAfter(() => page.mouse.move(100, 100), () => pointerEnter.getNext());
}] = await getResultAfter(() => page.mouse.move(100, 100), [() => pointerEnter.getNext()]);
expect(pointerEnterOffsetX).toBeCloseTo(100);
expect(pointerEnterOffsetY).toBeCloseTo(100);

Expand All @@ -45,7 +45,7 @@ describe('when the mouse interacts with the canvas', () => {
isTrusted,
bubbles,
eventPhase,
type }] = await getResultAfter(() => page.mouse.down({button: 'left'}), () => mouseDown.getNext());
type }] = await getResultAfter(() => page.mouse.down({button: 'left'}), [() => mouseDown.getNext()]);
expect(offsetX).toBeCloseTo(100);
expect(offsetY).toBeCloseTo(100);
expect(clientX).toBeCloseTo(100);
Expand All @@ -68,9 +68,9 @@ describe('when the mouse interacts with the canvas', () => {
const mouseMove = await addEventListenerInPage(infCanvas, 'mousemove')
const pointerMove = await addEventListenerInPage(infCanvas, 'pointermove')
await getResultAfter(() => page.mouse.move(200, 200),
() => drawn.getNext(),
[() => drawn.getNext(),
() => mouseMove.ensureNoNext(300),
() => pointerMove.ensureNoNext(300));
() => pointerMove.ensureNoNext(300)]);
await pointerMove.remove();
await mouseMove.remove();
await drawn.remove();
Expand All @@ -86,7 +86,7 @@ describe('when the mouse interacts with the canvas', () => {
ctrlKey,
button,
cancelable,
type }] = await getResultAfter(() => page.mouse.up({button: 'left'}), () => mouseUp.getNext());
type }] = await getResultAfter(() => page.mouse.up({button: 'left'}), [() => mouseUp.getNext()]);
expect(offsetX).toBeCloseTo(100);
expect(offsetY).toBeCloseTo(100);
expect(clientX).toBeCloseTo(200);
Expand Down Expand Up @@ -117,7 +117,7 @@ describe('when the mouse interacts with the canvas', () => {
clientY: pointerMoveClientY,
ctrlKey: pointerMoveCtrlKey,
type: pointerMoveType
}] = await getResultAfter(() => page.mouse.move(100, 100), () => mouseMove.getNext(), () => pointerMove.getNext());
}] = await getResultAfter(() => page.mouse.move(100, 100), [() => mouseMove.getNext(), () => pointerMove.getNext()] as const);
expect(mouseMoveOffsetX).toBeCloseTo(0);
expect(mouseMoveOffsetY).toBeCloseTo(0);
expect(mouseMoveClientX).toBeCloseTo(100);
Expand All @@ -144,7 +144,7 @@ describe('when the mouse interacts with the canvas', () => {
clientX,
clientY,
ctrlKey,
button }] = await getResultAfter(() => page.mouse.down({button: 'right'}), () => mouseDown.getNext());
button }] = await getResultAfter(() => page.mouse.down({button: 'right'}), [() => mouseDown.getNext()]);
expect(offsetX).toBeCloseTo(0);
expect(offsetY).toBeCloseTo(0);
expect(clientX).toBeCloseTo(100);
Expand All @@ -165,7 +165,7 @@ describe('when the mouse interacts with the canvas', () => {
clientY,
ctrlKey,
button,
type }] = await getResultAfter(() => page.mouse.click(100, 100), () => click.getNext());
type }] = await getResultAfter(() => page.mouse.click(100, 100), [() => click.getNext()]);
expect(offsetX).toBeCloseTo(0);
expect(offsetY).toBeCloseTo(0);
expect(clientX).toBeCloseTo(100);
Expand All @@ -184,7 +184,7 @@ describe('when the mouse interacts with the canvas', () => {
const transformationEnded: InPageEventListener<TransformationEvent> = await addEventListenerInPage(infCanvas, 'transformationend');
const [[transformationStart, transformationChange, transformationEnd]] = await getResultAfter(
() => page.mouse.move(200, 200),
() => getNextInTurn(transformationStarted, transformationChanged, transformationEnded));
[() => getNextInTurn(transformationStarted, transformationChanged, transformationEnded)]);
let {transformation, inverseTransformation, type} = transformationStart;
expect(transformation).toBeCloseToTransformation({a: 1, b: 0, c: 0, d: 1, e: -200, f: -200})
expect(inverseTransformation).toBeCloseToTransformation({a: 1, b: 0, c: 0, d: 1, e: 200, f: 200})
Expand Down Expand Up @@ -213,7 +213,7 @@ describe('when the mouse interacts with the canvas', () => {
clientY,
ctrlKey,
button,
type }] = await getResultAfter(() => page.mouse.wheel({deltaY: initialDeltaY}), () => wheel.getNext());
type }] = await getResultAfter(() => page.mouse.wheel({deltaY: initialDeltaY}), [() => wheel.getNext()]);
expect(offsetX).toBeCloseTo(0);
expect(offsetY).toBeCloseTo(0);
expect(clientX).toBeCloseTo(200);
Expand Down
4 changes: 2 additions & 2 deletions test-e2e/mouse-move-when-rotating.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ describe('when the mouse interacts with the canvas', () => {

it('should emit a mousemove when rotating with the mouse', async () => {
const mouse = page.mouse;
await getResultAfter(async () => await mouse.move(100, 100), () => mouseMoved.getNext())
await getResultAfter(async () => await mouse.move(100, 100), [() => mouseMoved.getNext()])
await mouse.down({button: 'middle'});
const [{offsetX, offsetY, movementX, movementY}] = await getResultAfter(async () => {
// A horizontal difference of 50 leads to a rotation of 90 degrees, cf src/transformer/rotate.ts
await mouse.move(150, 100)
}, () => mouseMoved.getNext());
}, [() => mouseMoved.getNext()]);
expect(offsetX).toBeCloseTo(100);
expect(offsetY).toBeCloseTo(150);
expect(movementX).toBeCloseTo(0);
Expand Down
10 changes: 5 additions & 5 deletions test-e2e/multiple-touch-events.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('when the canvas is touched', () => {
it('should dispatch a touchstart event', async () => {
const [touchEvent] = await getResultAfter(async () => {
firstTouch = await touchCollection.start(100, 100)
}, () => touchStarted.getNext())
}, [() => touchStarted.getNext()])
expect(touchEvent.touches.length).toBe(1)
expect(touchEvent.targetTouches.length).toBe(1)
expect(touchEvent.changedTouches.length).toBe(1)
Expand All @@ -53,7 +53,7 @@ describe('when the canvas is touched', () => {
it('should dispatch another touchstart event', async () => {
const [touchEvent] = await getResultAfter(async () => {
secondTouch = await touchCollection.start(200, 100)
}, () => touchStarted.getNext())
}, [() => touchStarted.getNext()])
expect(touchEvent.touches.length).toBe(2)
expect(touchEvent.targetTouches.length).toBe(2)
expect(touchEvent.changedTouches.length).toBe(1)
Expand All @@ -75,15 +75,15 @@ describe('when the canvas is touched', () => {
it('should not dispatch a touchmove event', async () => {
const touchMoved: InPageEventListener<InfiniteCanvasTouchEvent> = await addEventListenerInPage(infCanvas, 'touchmove');
const drawn: InPageEventListener<DrawEvent> = await addEventListenerInPage(infCanvas, 'draw')
await getResultAfter(() => firstTouch.move(100, 200), () => drawn.getNext(), () => touchMoved.ensureNoNext(300));
await getResultAfter(() => firstTouch.move(100, 200), [() => drawn.getNext(), () => touchMoved.ensureNoNext(300)]);

await drawn.remove();
await touchMoved.remove();
});

it('should dispatch a touchend event', async () => {

const [touchEvent] = await getResultAfter(() => firstTouch.end(), () => touchEnded.getNext());
const [touchEvent] = await getResultAfter(() => firstTouch.end(), [() => touchEnded.getNext()]);
expect(touchEvent.touches.length).toBe(1)
expect(touchEvent.targetTouches.length).toBe(1)
expect(touchEvent.changedTouches.length).toBe(1)
Expand Down Expand Up @@ -119,7 +119,7 @@ describe('when the canvas is touched', () => {
});

it('should dispatch another touchend event', async () => {
const [touchEvent] = await getResultAfter(() => secondTouch.end(), () => touchEnded.getNext());
const [touchEvent] = await getResultAfter(() => secondTouch.end(), [() => touchEnded.getNext()]);
expect(touchEvent.touches.length).toBe(0)
expect(touchEvent.targetTouches.length).toBe(0)
expect(touchEvent.changedTouches.length).toBe(1);
Expand Down
28 changes: 14 additions & 14 deletions test-e2e/prevent-default.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,20 @@ describe('when default is prevented', () => {

await page.mouse.move(150, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(250, 150), () => drawn.ensureNoNext(300));
await getResultAfter(() => page.mouse.move(250, 150), [() => drawn.ensureNoNext(300)]);
await page.mouse.up({button: 'left'});
await page.mouse.move(50, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(200, 150), () => drawn.getNext());
await getResultAfter(() => page.mouse.move(200, 150), [() => drawn.getNext()]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()
await page.mouse.up({button: 'left'});
await page.mouse.move(300, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(150, 150), () => drawn.ensureNoNext(300));
await getResultAfter(() => page.mouse.move(150, 150), [() => drawn.ensureNoNext(300)]);
await page.mouse.up({button: 'left'});
await page.mouse.move(150, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(50, 150), () => drawn.getNext());
await getResultAfter(() => page.mouse.move(50, 150), [() => drawn.getNext()]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()

await drawn.remove();
Expand All @@ -92,7 +92,7 @@ describe('when default is prevented', () => {
const scrolled = fromSource(await addEventListenerInPage(windowHandle, 'scroll')).pipe(debounceTime(300))
await page.mouse.move(150, 150);
const deltaY: number = 80;
await getResultAfter(() => page.mouse.wheel({deltaX: 0, deltaY}), () => firstValueFrom(scrolled));
await getResultAfter(() => page.mouse.wheel({deltaX: 0, deltaY}), [() => firstValueFrom(scrolled)]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()
expect(await page.evaluate(() => window.scrollY)).toEqual(deltaY);
});
Expand All @@ -108,7 +108,7 @@ describe('when default is prevented', () => {
}
}))
await page.mouse.move(150, 150);
await getResultAfter(() => page.mouse.wheel({deltaX: 0, deltaY: 80}), () => drawn.ensureNoNext(300));
await getResultAfter(() => page.mouse.wheel({deltaX: 0, deltaY: 80}), [() => drawn.ensureNoNext(300)]);
expect(await page.evaluate(() => window.scrollY)).toEqual(0);
});

Expand All @@ -124,7 +124,7 @@ describe('when default is prevented', () => {
}
}))
await page.mouse.move(150, 150);
await getResultAfter(() => page.mouse.wheel({deltaX: 0, deltaY: 80}), () => drawn.ensureNoNext(300));
await getResultAfter(() => page.mouse.wheel({deltaX: 0, deltaY: 80}), [() => drawn.ensureNoNext(300)]);
expect(await page.evaluate(() => window.scrollY)).toEqual(0);
});

Expand All @@ -144,10 +144,10 @@ describe('when default is prevented', () => {
}))
const touches: TouchCollection = await getTouchCollection(page);
let touch = await touches.start(150, 150);
await getResultAfter(() => touch.move(250, 150), () => drawn.ensureNoNext(300));
await getResultAfter(() => touch.move(250, 150), [() => drawn.ensureNoNext(300)]);
await touch.end();
touch = await touches.start(50, 150);
await getResultAfter(() => touch.move(200, 150), () => drawn.getNext());
await getResultAfter(() => touch.move(200, 150), [() => drawn.getNext()]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()
});

Expand All @@ -167,7 +167,7 @@ describe('when default is prevented', () => {
}))
const touches: TouchCollection = await getTouchCollection(page);
let touch = await touches.start(150, 150);
await getResultAfter(() => touch.move(150, 50), () => drawn.ensureNoNext(300));
await getResultAfter(() => touch.move(150, 50), [() => drawn.ensureNoNext(300)]);
await touch.end();
expect(await page.evaluate(() => window.scrollY)).toEqual(0);
});
Expand All @@ -188,9 +188,9 @@ describe('when default is prevented', () => {
}))
const touches: TouchCollection = await getTouchCollection(page);
const touch = await touches.start(120, 120);
await getResultAfter(() => touch.move(120, 140), () => drawn.getNext());
await getResultAfter(() => touch.move(120, 140), [() => drawn.getNext()]);
const secondTouch = await touches.start(180, 140);
await getResultAfter(() => secondTouch.move(200, 140), () => drawn.ensureNoNext(300));
await getResultAfter(() => secondTouch.move(200, 140), [() => drawn.ensureNoNext(300)]);
await touch.end();
await secondTouch.end();
});
Expand All @@ -213,7 +213,7 @@ describe('when default is prevented', () => {
const touches: TouchCollection = await getTouchCollection(page);
const firstTouch = await touches.start(150, 150);
const secondTouch = await touches.start(50, 150);
await getResultAfter(() => secondTouch.move(50, 250), () => drawn.ensureNoNext(300));
await getResultAfter(() => secondTouch.move(50, 250), [() => drawn.ensureNoNext(300)]);
await firstTouch.end();
await secondTouch.end();
});
Expand All @@ -238,7 +238,7 @@ describe('when default is prevented', () => {
const firstTouchDeltaY: number = -40;
const touch = await touchCollection.start(120, firstTouchInitialY);
const secondTouch = await touchCollection.start(180, secondTouchInitialY);
const [{touches, changedTouches, targetTouches}] = await getResultAfter(() => touch.move(120, firstTouchInitialY + firstTouchDeltaY), () => touchMoved.getNext());
const [{touches, changedTouches, targetTouches}] = await getResultAfter(() => touch.move(120, firstTouchInitialY + firstTouchDeltaY), [() => touchMoved.getNext()]);
expect(touches.length).toBe(2);
expect(changedTouches.length).toBe(1);
expect(targetTouches.length).toBe(2);
Expand Down
12 changes: 6 additions & 6 deletions test-e2e/prevent-pointerdown-default.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,20 +57,20 @@ describe('when default is prevented for pointerdown', () => {
}))
await page.mouse.move(150, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(250, 150), () => drawn.ensureNoNext(300));
await getResultAfter(() => page.mouse.move(250, 150), [() => drawn.ensureNoNext(300)]);
await page.mouse.up({button: 'left'});
await page.mouse.move(50, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(200, 150), () => drawn.getNext());
await getResultAfter(() => page.mouse.move(200, 150), [() => drawn.getNext()]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()
await page.mouse.up({button: 'left'});
await page.mouse.move(300, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(150, 150), () => drawn.ensureNoNext(300));
await getResultAfter(() => page.mouse.move(150, 150), [() => drawn.ensureNoNext(300)]);
await page.mouse.up({button: 'left'});
await page.mouse.move(150, 150);
await page.mouse.down({button: 'left'});
await getResultAfter(() => page.mouse.move(50, 150), () => drawn.getNext());
await getResultAfter(() => page.mouse.move(50, 150), [() => drawn.getNext()]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()
});

Expand All @@ -86,10 +86,10 @@ describe('when default is prevented for pointerdown', () => {
}))
const touches: TouchCollection = await getTouchCollection(page)
let touch = await touches.start(150, 150);
await getResultAfter(() => touch.move(250, 150), () => drawn.ensureNoNext(300));
await getResultAfter(() => touch.move(250, 150), [() => drawn.ensureNoNext(300)]);
await touch.end();
touch = await touches.start(50, 150);
await getResultAfter(() => touch.move(200, 150), () => drawn.getNext());
await getResultAfter(() => touch.move(200, 150), [() => drawn.getNext()]);
expect(await getScreenshot(page)).toMatchImageSnapshotCustom()
});

Expand Down
Loading

0 comments on commit 2eb16a8

Please sign in to comment.