diff --git a/packages/rrweb/test/events/noscript.ts b/packages/rrweb/test/events/noscript.ts new file mode 100644 index 0000000000..c9580858ae --- /dev/null +++ b/packages/rrweb/test/events/noscript.ts @@ -0,0 +1,104 @@ +import { EventType, IncrementalSource } from '@sentry-internal/rrweb-types'; +import type { eventWithTime } from '@sentry-internal/rrweb-types'; + +const now = Date.now(); + +const events: eventWithTime[] = [ + { type: EventType.DomContentLoaded, data: {}, timestamp: now }, + { + type: EventType.Meta, + data: { + href: 'about:blank', + width: 1920, + height: 1080, + }, + timestamp: now + 100, + }, + { + type: EventType.FullSnapshot, + data: { + node: { + type: 0, + childNodes: [ + { + type: 1, + name: 'html', + publicId: '', + systemId: '', + id: 2, + }, + { + type: 2, + tagName: 'html', + attributes: {}, + childNodes: [ + { + type: 2, + tagName: 'head', + attributes: {}, + childNodes: [], + id: 4, + }, + { + type: 2, + tagName: 'body', + attributes: {}, + childNodes: [ + { + type: 3, + textContent: '\n ', + id: 6, + }, + { + type: 2, + tagName: 'noscript', + attributes: {}, + childNodes: [ + { + type: 3, + textContent: 'text in noscript', + id: 8, + }, + ], + id: 7, + }, + ], + id: 5, + }, + ], + id: 3, + }, + ], + id: 1, + }, + initialOffset: { + left: 0, + top: 0, + }, + }, + timestamp: now + 100, + }, + { + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Mutation, + texts: [], + attributes: [], + removes: [], + adds: [ + { + parentId: -1, + nextId: null, + node: { + type: 3, + textContent: 'SCRIPT_PLACEHOLDER', + id: 21, + }, + }, + ], + }, + timestamp: now + 300, + }, +]; + +export default events; diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts index b54d360a6b..8579800735 100644 --- a/packages/rrweb/test/replayer.test.ts +++ b/packages/rrweb/test/replayer.test.ts @@ -10,6 +10,7 @@ import { waitForRAF, } from './utils'; import styleSheetRuleEvents from './events/style-sheet-rule-events'; +import noscriptEvents from './events/noscript'; import orderingEvents from './events/ordering'; import scrollEvents from './events/scroll'; import scrollWithParentStylesEvents from './events/scroll-with-parent-styles'; @@ -175,6 +176,29 @@ describe('replayer', function () { await assertDomSnapshot(page); }); + it('should keep default injected styles after fast forward, and appending to style tag', async () => { + await page.evaluate(`events = ${JSON.stringify(noscriptEvents)}`); + const result = await page.evaluate(` + const { Replayer } = rrweb; + const replayer = new Replayer(events); + function pause() { + return new Promise(resolve => setTimeout(() => { + replayer.pause(1500); + console.log('paused'); + resolve(); + }, 0)); + } + pause().then(() => { + const rules = [...replayer.iframe.contentDocument.styleSheets].map( + (sheet) => [...sheet.rules], + ).flat(); + return rules.some((x) => x.selectorText === 'noscript'); + }); + `); + + expect(result).toEqual(true); + }); + it('should apply fast forwarded StyleSheetRules that where added', async () => { await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`); const result = await page.evaluate(`