From 78f4431785ead650682f01f69f4c747b14299606 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 21 Feb 2023 14:21:15 +0100 Subject: [PATCH 1/5] test: Fix snapshot generation --- packages/integration-tests/package.json | 2 +- .../privacyBlock/test.ts-snapshots/privacy.json | 12 ++++++------ .../privacyDefault/test.ts-snapshots/privacy.json | 12 ++++++------ 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/integration-tests/package.json b/packages/integration-tests/package.json index 9285725cd791..3e9ce04dc91e 100644 --- a/packages/integration-tests/package.json +++ b/packages/integration-tests/package.json @@ -28,7 +28,7 @@ "test:cjs": "PW_BUNDLE=cjs yarn test", "test:esm": "PW_BUNDLE=esm yarn test", "test:ci": "playwright test ./suites --browser='all' --reporter='line'", - "test:update-snapshots": "yarn test --update-snapshots --browser='all'" + "test:update-snapshots": "yarn test --update-snapshots --browser='all' && yarn test --update-snapshots" }, "dependencies": { "@babel/preset-typescript": "^7.16.7", diff --git a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json index 4b08d64a07b3..a120d5e44a5e 100644 --- a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json @@ -32,8 +32,8 @@ "type": 2, "tagName": "link", "attributes": { - "rr_width": "0px", - "rr_height": "0px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 6 @@ -271,8 +271,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 38 @@ -287,8 +287,8 @@ "tagName": "div", "attributes": { "class": "nested-hide", - "rr_width": "1264px", - "rr_height": "18px" + "rr_width": "[1250-1300]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 40 diff --git a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json index f29f31d2eb75..f31f8b967d12 100644 --- a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json +++ b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json @@ -154,8 +154,8 @@ "type": 2, "tagName": "svg", "attributes": { - "rr_width": "200px", - "rr_height": "200px" + "rr_width": "[200-250]px", + "rr_height": "[200-250]px" }, "childNodes": [], "isSVG": true, @@ -214,8 +214,8 @@ "type": 2, "tagName": "img", "attributes": { - "rr_width": "100px", - "rr_height": "100px" + "rr_width": "[100-150]px", + "rr_height": "[100-150]px" }, "childNodes": [], "id": 31 @@ -245,8 +245,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 35 From 3ba8e0bac462efebcdfec4ef6ec86fe3ecc3396b Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 21 Feb 2023 14:35:53 +0100 Subject: [PATCH 2/5] test(replay): Add test for continuous flushing --- .../suites/replay/flushing/init.js | 16 +++++ .../suites/replay/flushing/subject.js | 6 ++ .../suites/replay/flushing/template.html | 9 +++ .../suites/replay/flushing/test.ts | 61 +++++++++++++++++++ 4 files changed, 92 insertions(+) create mode 100644 packages/integration-tests/suites/replay/flushing/init.js create mode 100644 packages/integration-tests/suites/replay/flushing/subject.js create mode 100644 packages/integration-tests/suites/replay/flushing/template.html create mode 100644 packages/integration-tests/suites/replay/flushing/test.ts diff --git a/packages/integration-tests/suites/replay/flushing/init.js b/packages/integration-tests/suites/replay/flushing/init.js new file mode 100644 index 000000000000..f64b8fff4e50 --- /dev/null +++ b/packages/integration-tests/suites/replay/flushing/init.js @@ -0,0 +1,16 @@ +import * as Sentry from '@sentry/browser'; + +window.Sentry = Sentry; +window.Replay = new Sentry.Replay({ + flushMinDelay: 500, + flushMaxDelay: 500, +}); + +Sentry.init({ + dsn: 'https://public@dsn.ingest.sentry.io/1337', + sampleRate: 0, + replaysSessionSampleRate: 1.0, + replaysOnErrorSampleRate: 0.0, + + integrations: [window.Replay], +}); diff --git a/packages/integration-tests/suites/replay/flushing/subject.js b/packages/integration-tests/suites/replay/flushing/subject.js new file mode 100644 index 000000000000..7aa69584f070 --- /dev/null +++ b/packages/integration-tests/suites/replay/flushing/subject.js @@ -0,0 +1,6 @@ +document.getElementById('go-background').addEventListener('click', () => { + Object.defineProperty(document, 'hidden', { value: true, writable: true }); + const ev = document.createEvent('Event'); + ev.initEvent('visibilitychange'); + document.dispatchEvent(ev); +}); diff --git a/packages/integration-tests/suites/replay/flushing/template.html b/packages/integration-tests/suites/replay/flushing/template.html new file mode 100644 index 000000000000..31cfc73ec3c3 --- /dev/null +++ b/packages/integration-tests/suites/replay/flushing/template.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts new file mode 100644 index 000000000000..683d280f3fb0 --- /dev/null +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -0,0 +1,61 @@ +import { expect } from '@playwright/test'; + +import { sentryTest } from '../../../utils/fixtures'; +import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates'; +import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; + +// Sync this with init.js - not we take seconds here instead of ms +const FLUSH_DELAY_SECONDS = 0.5; + +sentryTest('replay recording flushes every 5s', async ({ getLocalTestPath, page }) => { + if (shouldSkipReplayTest()) { + sentryTest.skip(); + } + + const reqPromise0 = waitForReplayRequest(page, 0); + const reqPromise1 = waitForReplayRequest(page, 1); + const reqPromise2 = waitForReplayRequest(page, 2); + + await page.route('https://dsn.ingest.sentry.io/**/*', route => { + return route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ id: 'test-id' }), + }); + }); + + const url = await getLocalTestPath({ testDir: __dirname }); + + await page.goto(url); + const replayEvent0 = getReplayEvent(await reqPromise0); + expect(replayEvent0).toEqual(getExpectedReplayEvent()); + + // trigger mouse click + void page.click('#go-background'); + + const replayEvent1 = getReplayEvent(await reqPromise1); + expect(replayEvent1).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] })); + + // trigger mouse click every 100ms, it should still flush after 5s even if clicks are ongoing + for (let i = 0; i < 70; i++) { + setTimeout(() => { + // at some point during this test, the page is closed, then we don't care about further clicks + if (page.isClosed()) { + return; + } + void page.click('#go-background'); + }, i * 100); + } + + const replayEvent2 = getReplayEvent(await reqPromise2); + expect(replayEvent2).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] })); + + // Ensure time diff is about 500ms between each event + const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; + const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; + + expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.1); + expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS); + expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.1); + expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS); +}); From dc11530c6cee80647c22d3007eecacf119e17edb Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 21 Feb 2023 15:41:01 +0100 Subject: [PATCH 3/5] ref: Increase wiggle room --- packages/integration-tests/suites/replay/flushing/test.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index 683d280f3fb0..9ead68f148c8 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -54,8 +54,9 @@ sentryTest('replay recording flushes every 5s', async ({ getLocalTestPath, page const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; - expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.1); + // We want to check that the diff is more than 0.5s, but less than 1s + expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS); - expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.1); + expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS); }); From b57e152e3c5c4189fea7670239e0819605d0bce6 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 21 Feb 2023 15:56:41 +0100 Subject: [PATCH 4/5] try-catch test --- .../integration-tests/suites/replay/flushing/test.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index 9ead68f148c8..1b97a7c3e6f5 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -38,12 +38,12 @@ sentryTest('replay recording flushes every 5s', async ({ getLocalTestPath, page // trigger mouse click every 100ms, it should still flush after 5s even if clicks are ongoing for (let i = 0; i < 70; i++) { - setTimeout(() => { - // at some point during this test, the page is closed, then we don't care about further clicks - if (page.isClosed()) { - return; + setTimeout(async () => { + try { + await page.click('#go-background'); + } catch { + // ignore errors here, we don't care if the page is closed } - void page.click('#go-background'); }, i * 100); } From 6e5d84ab139b9c4e64d728e0f4cf15fc7076d6cd Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 22 Feb 2023 09:20:13 +0100 Subject: [PATCH 5/5] larger wiggle room --- packages/integration-tests/suites/replay/flushing/test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index 1b97a7c3e6f5..e448a57dd964 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -54,9 +54,9 @@ sentryTest('replay recording flushes every 5s', async ({ getLocalTestPath, page const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; - // We want to check that the diff is more than 0.5s, but less than 1s + // We want to check that the diff is between 0.1 and 0.9 seconds, to accomodate for some wiggle room expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); - expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS); + expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); - expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS); + expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); });