Skip to content

Commit

Permalink
Add motivating test which can be used against this PR as well as in r…
Browse files Browse the repository at this point in the history 
…rweb-io#1417
  • Loading branch information
@eoghanmurray
eoghanmurray committed Apr 5, 2024
1 parent 31fc641 commit 6a13cc8
Show file tree
Hide file tree
Showing 2 changed files with 284 additions and 0 deletions.
219 changes: 219 additions & 0 deletions packages/rrweb/test/__snapshots__/integration.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3825,6 +3825,225 @@ exports[`record integration tests can record style changes compactly and preserv
]"
`;

exports[`record integration tests can record style text mutations 1`] = `
"[
{
\\"type\\": 0,
\\"data\\": {}
},
{
\\"type\\": 1,
\\"data\\": {}
},
{
\\"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\\": {
\\"lang\\": \\"en\\"
},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"charset\\": \\"UTF-8\\"
},
\\"childNodes\\": [],
\\"id\\": 6
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 7
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"name\\": \\"viewport\\",
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
},
\\"childNodes\\": [],
\\"id\\": 8
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
},
{
\\"type\\": 2,
\\"tagName\\": \\"title\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"style\\",
\\"id\\": 11
}
],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 12
},
{
\\"type\\": 2,
\\"tagName\\": \\"style\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"body { background-color: black; }\\",
\\"isStyle\\": true,
\\"id\\": 14
}
],
\\"id\\": 13
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 15
}
],
\\"id\\": 4
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 16
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\",
\\"id\\": 18
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 20
}
],
\\"id\\": 19
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 21
}
],
\\"id\\": 17
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 13,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"body { background-color: darkgreen; }\\",
\\"isStyle\\": true,
\\"id\\": 22
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [
{
\\"id\\": 22,
\\"value\\": \\"body { background-color: purple; }\\"
}
],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [
{
\\"id\\": 14,
\\"value\\": \\"\\\\n body { background-color: black !important; }\\\\n \\"
}
],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": []
}
}
]"
`;

exports[`record integration tests can record textarea mutations correctly 1`] = `
"[
{
Expand Down
65 changes: 65 additions & 0 deletions packages/rrweb/test/integration.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,71 @@ describe('record integration tests', function (this: ISuite) {
]);
});

it('can record style text mutations', async () => {
// TODO: we could get a lot more elaborate here with mixed textContent and insertRule mutations
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'style.html'));

await waitForRAF(page); // ensure mutations aren't included in fullsnapshot

await page.evaluate(() => {
let styleEl = document.querySelector('style');
if (styleEl) {
styleEl.append(document.createTextNode('body { background-color: darkgreen; }'));
}
});

await page.evaluate(() => {
let styleEl = document.querySelector('style');
if (styleEl) {
styleEl.childNodes.forEach((cn)=>{
if (cn.textContent) {
cn.textContent = cn.textContent.replace('darkgreen', 'purple');
}
});
}
});

await page.evaluate(() => {
let styleEl = document.querySelector('style');
if (styleEl) {
styleEl.childNodes.forEach((cn)=>{
if (cn.textContent) {
cn.textContent = cn.textContent.replace('black', 'black !important');
}
});
}
});

const snapshots = (await page.evaluate(
'window.snapshots',
)) as eventWithTime[];

// following ensures that the ./rel url has been absolutized (in a mutation)
assertSnapshot(snapshots);

// check after each mutation and text input
const replayStyleValues = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(window.snapshots);
const vals = [];
window.snapshots.filter((e)=>e.data.attributes || e.data.source === 5).forEach((e)=>{
replayer.pause((e.timestamp - window.snapshots[0].timestamp)+1);
vals.push(getComputedStyle(replayer.iframe.contentDocument.querySelector('body'))['background-color']);
});
vals;
`);

expect(replayStyleValues).toEqual([
'rgb(0, 100, 0)', // darkgreen
'rgb(128, 0, 128)', // purple
'rgb(0, 0, 0)', // black !important
]);


});

it('can record childList mutations', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
Expand Down

0 comments on commit 6a13cc8

Please sign in to comment.