Skip to content

Commit

Permalink
Merge branch 'stylesheet-test' into virtual-dom
Browse files Browse the repository at this point in the history
  • Loading branch information
@YunFeng0817
YunFeng0817 committed May 5, 2022
2 parents 0f6729d + 70db46b commit fdfa0c0
Show file tree
Hide file tree
Showing 4 changed files with 385 additions and 0 deletions.
130 changes: 130 additions & 0 deletions packages/rrweb/test/__snapshots__/record.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,136 @@ exports[`record can add custom event 1`] = `
]"
`;

exports[`record captures inserted style text nodes correctly 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"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\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"style\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"div { color: red; }\\",
\\"isStyle\\": true,
\\"id\\": 6
},
{
\\"type\\": 3,
\\"textContent\\": \\"section { color: blue; }\\",
\\"isStyle\\": true,
\\"id\\": 7
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
},
{
\\"type\\": 2,
\\"tagName\\": \\"input\\",
\\"attributes\\": {
\\"type\\": \\"text\\",
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 11
}
],
\\"id\\": 8
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 5,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"h1 { color: pink; }\\",
\\"isStyle\\": true,
\\"id\\": 12
}
},
{
\\"parentId\\": 5,
\\"nextId\\": 12,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"span { color: orange; }\\",
\\"isStyle\\": true,
\\"id\\": 13
}
}
]
}
}
]"
`;

exports[`record captures nested stylesheet rules 1`] = `
"[
{
Expand Down
178 changes: 178 additions & 0 deletions packages/rrweb/test/events/style-sheet-text-mutation.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';

const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1000,
height: 800,
},
timestamp: now + 100,
},
// full snapshot
{
data: {
node: {
id: 1,
type: 0,
childNodes: [
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
{
id: 3,
type: 2,
tagName: 'html',
attributes: { lang: 'en' },
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [
{
id: 101,
type: 2,
tagName: 'style',
attributes: {},
childNodes: [
{
id: 102,
type: 3,
isStyle: true,
textContent: '\n.css-added-at-100 {color: yellow;}\n',
},
],
},
],
},
{
id: 107,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
},
],
},
],
},
initialOffset: { top: 0, left: 0 },
},
type: EventType.FullSnapshot,
timestamp: now + 100,
},
// mutation that adds an element
{
data: {
adds: [
{
node: {
id: 108,
type: 2,
tagName: 'div',
attributes: {},
childNodes: [],
},
nextId: null,
parentId: 107,
},
],
texts: [],
source: IncrementalSource.Mutation,
removes: [],
attributes: [],
},
type: EventType.IncrementalSnapshot,
timestamp: now + 500,
},
// adds a StyleSheetRule by inserting
{
data: {
id: 101,
adds: [
{
rule: '.css-added-at-1000-overwritten-at-1500 {color:red;}',
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 1000,
},
// adds a StyleSheetRule by adding a text
{
data: {
adds: [
{
node: {
type: 3,
textContent: '.css-added-at-1500-deleted-at-2500 {color: yellow;}',
id: 109,
},
nextId: null,
parentId: 101,
},
],
texts: [],
source: IncrementalSource.Mutation,
removes: [],
attributes: [],
},
type: EventType.IncrementalSnapshot,
timestamp: now + 1500,
},
// adds a StyleSheetRule by inserting
{
data: {
id: 101,
adds: [
{
rule: '.css-added-at-2000-overwritten-at-2500 {color: blue;}',
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 2000,
},
// deletes a StyleSheetRule by removing the text
{
data: {
texts: [],
attributes: [],
removes: [{ parentId: 101, id: 109 }],
adds: [],
source: IncrementalSource.Mutation,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 2500,
},
// adds a StyleSheetRule by inserting
{
data: {
id: 101,
adds: [
{
rule: '.css-added-at-3000 {color: red;}',
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 3000,
},
];

export default events;
20 changes: 20 additions & 0 deletions packages/rrweb/test/record.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,26 @@ describe('record', function (this: ISuite) {
await ctx.page.waitForTimeout(50);
assertSnapshot(ctx.events);
});

it('captures inserted style text nodes correctly', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;

const styleEl = document.createElement(`style`);
styleEl.append(document.createTextNode('div { color: red; }'));
styleEl.append(document.createTextNode('section { color: blue; }'));
document.head.appendChild(styleEl);

record({
emit: ((window as unknown) as IWindow).emit,
});

styleEl.append(document.createTextNode('span { color: orange; }'));
styleEl.append(document.createTextNode('h1 { color: pink; }'));
});
await waitForRAF(ctx.page);
assertSnapshot(ctx.events);
});
});

describe('record iframes', function (this: ISuite) {
Expand Down
Loading

0 comments on commit fdfa0c0

Please sign in to comment.