From d9d30754b7ec46d27fc098e49eb95d1b4966e904 Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Thu, 30 May 2024 16:22:03 -0700
Subject: [PATCH] TESTS.
---
packages/rrweb/src/replay/index.ts | 3 +-
.../test/__snapshots__/replayer.test.ts.snap | 179 ------------------
packages/rrweb/test/replayer.test.ts | 97 +++++++++-
3 files changed, 90 insertions(+), 189 deletions(-)
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 7b994dd7fb..ac659bfbc9 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -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
diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index e13ce9181e..1575c5db89 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -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
-
-
-
-
-
-
-
-
-
-
-file-frame-3
-
-
-
-
-
-
-
-
-
-
-
-
-
-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
-
-
-
-
-
-
-
-
-
-
-file-frame-3
-
-
-
-
-
-
-
-
-
-
-
-
-
-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
-
-
-
-
-
-
-
-
-
-
-file-frame-3
-
-
-
-
-
-
-
-
-
-
-
-
-
-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
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index 2f5a73a2ac..0362e6a52e 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -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'];
@@ -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 () => {
@@ -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 () => {