Skip to content

Commit fdfa0c0

Browse files
YunFeng0817YunFeng0817
committed
Merge branch 'stylesheet-test' into virtual-dom
2 parents 0f6729d + 70db46b commit fdfa0c0

File tree

4 files changed

+385
-0
lines changed

4 files changed

+385
-0
lines changed

‎packages/rrweb/test/__snapshots__/record.test.ts.snap

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,136 @@ exports[`record can add custom event 1`] = `
9494
]"
9595
`;
9696

97+
exports[`record captures inserted style text nodes correctly 1`] = `
98+
"[
99+
{
100+
\\"type\\": 4,
101+
\\"data\\": {
102+
\\"href\\": \\"about:blank\\",
103+
\\"width\\": 1920,
104+
\\"height\\": 1080
105+
}
106+
},
107+
{
108+
\\"type\\": 2,
109+
\\"data\\": {
110+
\\"node\\": {
111+
\\"type\\": 0,
112+
\\"childNodes\\": [
113+
{
114+
\\"type\\": 1,
115+
\\"name\\": \\"html\\",
116+
\\"publicId\\": \\"\\",
117+
\\"systemId\\": \\"\\",
118+
\\"id\\": 2
119+
},
120+
{
121+
\\"type\\": 2,
122+
\\"tagName\\": \\"html\\",
123+
\\"attributes\\": {},
124+
\\"childNodes\\": [
125+
{
126+
\\"type\\": 2,
127+
\\"tagName\\": \\"head\\",
128+
\\"attributes\\": {},
129+
\\"childNodes\\": [
130+
{
131+
\\"type\\": 2,
132+
\\"tagName\\": \\"style\\",
133+
\\"attributes\\": {},
134+
\\"childNodes\\": [
135+
{
136+
\\"type\\": 3,
137+
\\"textContent\\": \\"div { color: red; }\\",
138+
\\"isStyle\\": true,
139+
\\"id\\": 6
140+
},
141+
{
142+
\\"type\\": 3,
143+
\\"textContent\\": \\"section { color: blue; }\\",
144+
\\"isStyle\\": true,
145+
\\"id\\": 7
146+
}
147+
],
148+
\\"id\\": 5
149+
}
150+
],
151+
\\"id\\": 4
152+
},
153+
{
154+
\\"type\\": 2,
155+
\\"tagName\\": \\"body\\",
156+
\\"attributes\\": {},
157+
\\"childNodes\\": [
158+
{
159+
\\"type\\": 3,
160+
\\"textContent\\": \\"\\\\n \\",
161+
\\"id\\": 9
162+
},
163+
{
164+
\\"type\\": 2,
165+
\\"tagName\\": \\"input\\",
166+
\\"attributes\\": {
167+
\\"type\\": \\"text\\",
168+
\\"size\\": \\"40\\"
169+
},
170+
\\"childNodes\\": [],
171+
\\"id\\": 10
172+
},
173+
{
174+
\\"type\\": 3,
175+
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
176+
\\"id\\": 11
177+
}
178+
],
179+
\\"id\\": 8
180+
}
181+
],
182+
\\"id\\": 3
183+
}
184+
],
185+
\\"id\\": 1
186+
},
187+
\\"initialOffset\\": {
188+
\\"left\\": 0,
189+
\\"top\\": 0
190+
}
191+
}
192+
},
193+
{
194+
\\"type\\": 3,
195+
\\"data\\": {
196+
\\"source\\": 0,
197+
\\"texts\\": [],
198+
\\"attributes\\": [],
199+
\\"removes\\": [],
200+
\\"adds\\": [
201+
{
202+
\\"parentId\\": 5,
203+
\\"nextId\\": null,
204+
\\"node\\": {
205+
\\"type\\": 3,
206+
\\"textContent\\": \\"h1 { color: pink; }\\",
207+
\\"isStyle\\": true,
208+
\\"id\\": 12
209+
}
210+
},
211+
{
212+
\\"parentId\\": 5,
213+
\\"nextId\\": 12,
214+
\\"node\\": {
215+
\\"type\\": 3,
216+
\\"textContent\\": \\"span { color: orange; }\\",
217+
\\"isStyle\\": true,
218+
\\"id\\": 13
219+
}
220+
}
221+
]
222+
}
223+
}
224+
]"
225+
`;
226+
97227
exports[`record captures nested stylesheet rules 1`] = `
98228
"[
99229
{

‎packages/rrweb/test/events/style-sheet-text-mutation.ts

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
2+
3+
const now = Date.now();
4+
const events: eventWithTime[] = [
5+
{
6+
type: EventType.DomContentLoaded,
7+
data: {},
8+
timestamp: now,
9+
},
10+
{
11+
type: EventType.Load,
12+
data: {},
13+
timestamp: now + 100,
14+
},
15+
{
16+
type: EventType.Meta,
17+
data: {
18+
href: 'http://localhost',
19+
width: 1000,
20+
height: 800,
21+
},
22+
timestamp: now + 100,
23+
},
24+
// full snapshot
25+
{
26+
data: {
27+
node: {
28+
id: 1,
29+
type: 0,
30+
childNodes: [
31+
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
32+
{
33+
id: 3,
34+
type: 2,
35+
tagName: 'html',
36+
attributes: { lang: 'en' },
37+
childNodes: [
38+
{
39+
id: 4,
40+
type: 2,
41+
tagName: 'head',
42+
attributes: {},
43+
childNodes: [
44+
{
45+
id: 101,
46+
type: 2,
47+
tagName: 'style',
48+
attributes: {},
49+
childNodes: [
50+
{
51+
id: 102,
52+
type: 3,
53+
isStyle: true,
54+
textContent: '\n.css-added-at-100 {color: yellow;}\n',
55+
},
56+
],
57+
},
58+
],
59+
},
60+
{
61+
id: 107,
62+
type: 2,
63+
tagName: 'body',
64+
attributes: {},
65+
childNodes: [],
66+
},
67+
],
68+
},
69+
],
70+
},
71+
initialOffset: { top: 0, left: 0 },
72+
},
73+
type: EventType.FullSnapshot,
74+
timestamp: now + 100,
75+
},
76+
// mutation that adds an element
77+
{
78+
data: {
79+
adds: [
80+
{
81+
node: {
82+
id: 108,
83+
type: 2,
84+
tagName: 'div',
85+
attributes: {},
86+
childNodes: [],
87+
},
88+
nextId: null,
89+
parentId: 107,
90+
},
91+
],
92+
texts: [],
93+
source: IncrementalSource.Mutation,
94+
removes: [],
95+
attributes: [],
96+
},
97+
type: EventType.IncrementalSnapshot,
98+
timestamp: now + 500,
99+
},
100+
// adds a StyleSheetRule by inserting
101+
{
102+
data: {
103+
id: 101,
104+
adds: [
105+
{
106+
rule: '.css-added-at-1000-overwritten-at-1500 {color:red;}',
107+
},
108+
],
109+
source: IncrementalSource.StyleSheetRule,
110+
},
111+
type: EventType.IncrementalSnapshot,
112+
timestamp: now + 1000,
113+
},
114+
// adds a StyleSheetRule by adding a text
115+
{
116+
data: {
117+
adds: [
118+
{
119+
node: {
120+
type: 3,
121+
textContent: '.css-added-at-1500-deleted-at-2500 {color: yellow;}',
122+
id: 109,
123+
},
124+
nextId: null,
125+
parentId: 101,
126+
},
127+
],
128+
texts: [],
129+
source: IncrementalSource.Mutation,
130+
removes: [],
131+
attributes: [],
132+
},
133+
type: EventType.IncrementalSnapshot,
134+
timestamp: now + 1500,
135+
},
136+
// adds a StyleSheetRule by inserting
137+
{
138+
data: {
139+
id: 101,
140+
adds: [
141+
{
142+
rule: '.css-added-at-2000-overwritten-at-2500 {color: blue;}',
143+
},
144+
],
145+
source: IncrementalSource.StyleSheetRule,
146+
},
147+
type: EventType.IncrementalSnapshot,
148+
timestamp: now + 2000,
149+
},
150+
// deletes a StyleSheetRule by removing the text
151+
{
152+
data: {
153+
texts: [],
154+
attributes: [],
155+
removes: [{ parentId: 101, id: 109 }],
156+
adds: [],
157+
source: IncrementalSource.Mutation,
158+
},
159+
type: EventType.IncrementalSnapshot,
160+
timestamp: now + 2500,
161+
},
162+
// adds a StyleSheetRule by inserting
163+
{
164+
data: {
165+
id: 101,
166+
adds: [
167+
{
168+
rule: '.css-added-at-3000 {color: red;}',
169+
},
170+
],
171+
source: IncrementalSource.StyleSheetRule,
172+
},
173+
type: EventType.IncrementalSnapshot,
174+
timestamp: now + 3000,
175+
},
176+
];
177+
178+
export default events;

‎packages/rrweb/test/record.test.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,26 @@ describe('record', function (this: ISuite) {
344344
await ctx.page.waitForTimeout(50);
345345
assertSnapshot(ctx.events);
346346
});
347+
348+
it('captures inserted style text nodes correctly', async () => {
349+
await ctx.page.evaluate(() => {
350+
const { record } = ((window as unknown) as IWindow).rrweb;
351+
352+
const styleEl = document.createElement(`style`);
353+
styleEl.append(document.createTextNode('div { color: red; }'));
354+
styleEl.append(document.createTextNode('section { color: blue; }'));
355+
document.head.appendChild(styleEl);
356+
357+
record({
358+
emit: ((window as unknown) as IWindow).emit,
359+
});
360+
361+
styleEl.append(document.createTextNode('span { color: orange; }'));
362+
styleEl.append(document.createTextNode('h1 { color: pink; }'));
363+
});
364+
await waitForRAF(ctx.page);
365+
assertSnapshot(ctx.events);
366+
});
347367
});
348368

349369
describe('record iframes', function (this: ISuite) {

0 commit comments

Comments
 (0)