Skip to content

Commit b1b249b

Browse files
mydeamydea
authored
test(replay): Add test for continuous flushing (#7240)
1 parent f5b7b10 commit b1b249b

File tree

7 files changed

+106
-13
lines changed

7 files changed

+106
-13
lines changed

‎packages/integration-tests/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"test:cjs": "PW_BUNDLE=cjs yarn test",
2929
"test:esm": "PW_BUNDLE=esm yarn test",
3030
"test:ci": "playwright test ./suites --browser='all' --reporter='line'",
31-
"test:update-snapshots": "yarn test --update-snapshots --browser='all'"
31+
"test:update-snapshots": "yarn test --update-snapshots --browser='all' && yarn test --update-snapshots"
3232
},
3333
"dependencies": {
3434
"@babel/preset-typescript": "^7.16.7",

‎packages/integration-tests/suites/replay/flushing/init.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
window.Replay = new Sentry.Replay({
5+
flushMinDelay: 500,
6+
flushMaxDelay: 500,
7+
});
8+
9+
Sentry.init({
10+
dsn: 'https://public@dsn.ingest.sentry.io/1337',
11+
sampleRate: 0,
12+
replaysSessionSampleRate: 1.0,
13+
replaysOnErrorSampleRate: 0.0,
14+
15+
integrations: [window.Replay],
16+
});

‎packages/integration-tests/suites/replay/flushing/subject.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
document.getElementById('go-background').addEventListener('click', () => {
2+
Object.defineProperty(document, 'hidden', { value: true, writable: true });
3+
const ev = document.createEvent('Event');
4+
ev.initEvent('visibilitychange');
5+
document.dispatchEvent(ev);
6+
});

‎packages/integration-tests/suites/replay/flushing/template.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button id="go-background">New Tab</button>
8+
</body>
9+
</html>

‎packages/integration-tests/suites/replay/flushing/test.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { expect } from '@playwright/test';
2+
3+
import { sentryTest } from '../../../utils/fixtures';
4+
import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates';
5+
import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
6+
7+
// Sync this with init.js - not we take seconds here instead of ms
8+
const FLUSH_DELAY_SECONDS = 0.5;
9+
10+
sentryTest('replay recording flushes every 5s', async ({ getLocalTestPath, page }) => {
11+
if (shouldSkipReplayTest()) {
12+
sentryTest.skip();
13+
}
14+
15+
const reqPromise0 = waitForReplayRequest(page, 0);
16+
const reqPromise1 = waitForReplayRequest(page, 1);
17+
const reqPromise2 = waitForReplayRequest(page, 2);
18+
19+
await page.route('https://dsn.ingest.sentry.io/**/*', route => {
20+
return route.fulfill({
21+
status: 200,
22+
contentType: 'application/json',
23+
body: JSON.stringify({ id: 'test-id' }),
24+
});
25+
});
26+
27+
const url = await getLocalTestPath({ testDir: __dirname });
28+
29+
await page.goto(url);
30+
const replayEvent0 = getReplayEvent(await reqPromise0);
31+
expect(replayEvent0).toEqual(getExpectedReplayEvent());
32+
33+
// trigger mouse click
34+
void page.click('#go-background');
35+
36+
const replayEvent1 = getReplayEvent(await reqPromise1);
37+
expect(replayEvent1).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }));
38+
39+
// trigger mouse click every 100ms, it should still flush after 5s even if clicks are ongoing
40+
for (let i = 0; i < 70; i++) {
41+
setTimeout(async () => {
42+
try {
43+
await page.click('#go-background');
44+
} catch {
45+
// ignore errors here, we don't care if the page is closed
46+
}
47+
}, i * 100);
48+
}
49+
50+
const replayEvent2 = getReplayEvent(await reqPromise2);
51+
expect(replayEvent2).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] }));
52+
53+
// Ensure time diff is about 500ms between each event
54+
const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!;
55+
const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!;
56+
57+
// We want to check that the diff is between 0.1 and 0.9 seconds, to accomodate for some wiggle room
58+
expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4);
59+
expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4);
60+
expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4);
61+
expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4);
62+
});

‎packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
"type": 2,
3333
"tagName": "link",
3434
"attributes": {
35-
"rr_width": "0px",
36-
"rr_height": "0px"
35+
"rr_width": "[0-50]px",
36+
"rr_height": "[0-50]px"
3737
},
3838
"childNodes": [],
3939
"id": 6
@@ -271,8 +271,8 @@
271271
"type": 2,
272272
"tagName": "video",
273273
"attributes": {
274-
"rr_width": "30px",
275-
"rr_height": "30px"
274+
"rr_width": "[0-50]px",
275+
"rr_height": "[0-50]px"
276276
},
277277
"childNodes": [],
278278
"id": 38
@@ -287,8 +287,8 @@
287287
"tagName": "div",
288288
"attributes": {
289289
"class": "nested-hide",
290-
"rr_width": "1264px",
291-
"rr_height": "18px"
290+
"rr_width": "[1250-1300]px",
291+
"rr_height": "[0-50]px"
292292
},
293293
"childNodes": [],
294294
"id": 40

‎packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,8 @@
154154
"type": 2,
155155
"tagName": "svg",
156156
"attributes": {
157-
"rr_width": "200px",
158-
"rr_height": "200px"
157+
"rr_width": "[200-250]px",
158+
"rr_height": "[200-250]px"
159159
},
160160
"childNodes": [],
161161
"isSVG": true,
@@ -214,8 +214,8 @@
214214
"type": 2,
215215
"tagName": "img",
216216
"attributes": {
217-
"rr_width": "100px",
218-
"rr_height": "100px"
217+
"rr_width": "[100-150]px",
218+
"rr_height": "[100-150]px"
219219
},
220220
"childNodes": [],
221221
"id": 31
@@ -245,8 +245,8 @@
245245
"type": 2,
246246
"tagName": "video",
247247
"attributes": {
248-
"rr_width": "30px",
249-
"rr_height": "30px"
248+
"rr_width": "[0-50]px",
249+
"rr_height": "[0-50]px"
250250
},
251251
"childNodes": [],
252252
"id": 35

0 commit comments

Comments
 (0)