Skip to content

Commit

Permalink
TESTS.
Browse files Browse the repository at this point in the history
  • Loading branch information
@michellewzhang
michellewzhang committed May 30, 2024
1 parent 830d8f3 commit d9d3075
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 189 deletions.
3 changes: 1 addition & 2 deletions packages/rrweb/src/replay/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1267,8 +1267,7 @@ export class Replayer {
void pointer.pointerEl.offsetWidth; // needed for the position update of moveAndHover to apply without the .touch-active transition
pointer.pointerEl.classList.add('touch-active');
} else if (d.type === MouseInteractions.TouchEnd) {
pointer.pointerEl.classList.remove('touch-active');
pointer.pointerEl.classList.remove('replayer-mouse');
pointer.pointerEl.remove();
delete this.pointers[pointerId];
} else {
// for MouseDown & MouseUp also invoke default behavior
Expand Down
179 changes: 0 additions & 179 deletions packages/rrweb/test/__snapshots__/replayer.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,185 +203,6 @@ html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { ani
"
`;

exports[`replayer has a pointer for regular mouse interactions 1`] = `
"file-frame-2
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1600\\"
height=\\"900\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1600\\"
height=\\"900\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
<div class=\\"replayer-mouse active\\" style=\\"left: 30px; top: 30px\\"></div>
</div>
</body>
</html>
file-frame-3
<!DOCTYPE html>
<html lang=\\"en\\" class=\\":hover\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
</head>
<body class=\\":hover\\">
<div
style=\\"border: 1px solid #000000; width: 100px; height: 100px\\"
class=\\":hover\\"
></div>
</body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
file-cid-1
@charset \\"utf-8\\";
div:hover, div.\\\\:hover { background-color: gold; }
"
`;
exports[`replayer has a pointer for touch interactions with pointerIds 1`] = `
"file-frame-2
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1600\\"
height=\\"900\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1600\\"
height=\\"900\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
<div class=\\"replayer-mouse touch-device\\"></div>
<div class=\\"replayer-mouse touch-device\\"></div>
</div>
</body>
</html>
file-frame-3
<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
</head>
<body>
<div style=\\"border: 1px solid #000000; width: 100px; height: 100px\\"></div>
</body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
file-cid-1
@charset \\"utf-8\\";
div:hover, div.\\\\:hover { background-color: gold; }
"
`;
exports[`replayer has a pointer for touch interactions with some pointerIds 1`] = `
"file-frame-2
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1600\\"
height=\\"900\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1600\\"
height=\\"900\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
<div class=\\"replayer-mouse touch-device\\"></div>
<div class=\\"replayer-mouse touch-device\\"></div>
</div>
</body>
</html>
file-frame-3
<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
</head>
<body>
<div style=\\"border: 1px solid #000000; width: 100px; height: 100px\\"></div>
</body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
file-cid-1
@charset \\"utf-8\\";
div:hover, div.\\\\:hover { background-color: gold; }
"
`;
exports[`replayer replays same timestamp events in correct order (with addAction) 1`] = `
"file-frame-1
<html>
Expand Down
97 changes: 89 additions & 8 deletions packages/rrweb/test/replayer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ type IWindow = Window &
typeof globalThis & { rrweb: typeof import('../src'); events: typeof events };

describe('replayer', function () {
jest.setTimeout(10_000);
jest.setTimeout(300_000);

let code: ISuite['code'];
let browser: ISuite['browser'];
Expand Down Expand Up @@ -793,22 +793,77 @@ describe('replayer', function () {
const replayer = new Replayer(events);
replayer.play();
`);
await page.waitForTimeout(50);

await assertDomSnapshot(page);
// No active pointers should exist
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(0);

await page.evaluate(`
replayer.pause(101);
`);

// 2 pointers should exist
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(2);

await page.evaluate(`
replayer.pause(160);
replayer.play();
`);

// Both pointers should be removed after the TouchEnd event
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(0);
});

// This should't happen, but we want to test/capture the behavior
it('has a pointer for touch interactions with some pointerIds', async () => {
it.only('has a pointer for touch interactions with some pointerIds', async () => {
await page.evaluate(`events = ${JSON.stringify(touchSomePointerEvents)}`);
await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play();
`);
await page.waitForTimeout(50);

await assertDomSnapshot(page);
// No active pointers should exist
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(0);

await page.evaluate(`
replayer.pause(101);
window.pointers = replayer.pointers;
`);

// 2 pointers should exist
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(2);

await page.evaluate(`
replayer.pause(200);
replayer.play();
`);

// Both pointers should be removed after the TouchEnd event
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(0);
});

it('has a pointer for regular mouse interactions', async () => {
Expand All @@ -818,9 +873,35 @@ describe('replayer', function () {
const replayer = new Replayer(events);
replayer.play();
`);
await page.waitForTimeout(160);

await assertDomSnapshot(page);
// No pointer should exist yet
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(0);

await page.evaluate(`
replayer.pause(101);
`);

// One mouse pointer should exist
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(1);

await page.evaluate(`
replayer.pause(160);
`);

// Pointers should still exist after all events execute
await expect(
await page.evaluate(
() => document.querySelectorAll('.replayer-mouse')!.length,
),
).toEqual(1);
});

it('should destroy the replayer after calling destroy()', async () => {
Expand Down

0 comments on commit d9d3075

Please sign in to comment.