xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate to jest (#721)

Browse Source 
* migrate rrweb-snapshot tests to jest

* migrate rrweb tests to jest
This commit is contained in:
yz-yu
2021-10-06 15:31:42 +08:00
committed by GitHub
parent 5622738e61
commit 18e4356be9
26 changed files with 9313 additions and 7983 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/rrweb-snapshot/jest.config.js Normal file
View File

@@ -0,0 +1,6 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/**.test.ts'],
};

8
packages/rrweb-snapshot/package.json
View File

@@ -5,7 +5,7 @@
"scripts": {
"prepare": "npm run prepack",
"prepack": "npm run bundle && npm run typings",
"test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
"test": "jest",
"bundle": "rollup --config",
"bundle:es-only": "cross-env ES_ONLY=true rollup --config",
"typings": "tsc -d --declarationDir typings",
@@ -39,18 +39,18 @@
"devDependencies": {
"@rollup/plugin-typescript": "^8.2.5",
"@types/chai": "^4.1.4",
"@types/jest": "^27.0.2",
"@types/jsdom": "^16.2.4",
"@types/mocha": "^5.2.5",
"@types/node": "^10.11.3",
"@types/puppeteer": "^1.12.4",
"chai": "^4.1.2",
"cross-env": "^5.2.0",
"jest": "^27.2.4",
"jest-snapshot": "^23.6.0",
"jsdom": "^16.4.0",
"mocha": "^5.2.0",
"puppeteer": "^1.15.0",
"rollup": "^2.45.2",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "^27.0.5",
"ts-node": "^7.0.1",
"tslib": "^1.9.3",
"tslint": "^4.5.1",

21
packages/rrweb-snapshot/test.d.ts vendored
View File

@@ -1,21 +0,0 @@
declare module 'rollup-plugin-typescript' {
function typescript(): any;
export = typescript;
}
declare module 'jest-snapshot' {
export class SnapshotState {
constructor(testFile: string, options: any);
save(): any;
}
type matchResult = {
pass: boolean;
report(): string;
};
export function toMatchSnapshot(
received: any,
propertyMatchers?: any,
testName?: string,
): matchResult;
}

680
packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap → packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
View File

@@ -1,344 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`[html file]: about-mozilla.html 1`] = `
"<!DOCTYPE html><html><head>
<title>The Book of Mozilla, 11:9</title>
<style type=\\"text/css\\">
html {
background: maroon;
color: white;
font-style: italic;
} #moztext {
margin-top: 15%;
font-size: 1.1em;
font-family: serif;
text-align: center;
line-height: 1.5;
} #from {
font-size: 1.95em;
font-family: serif;
text-align: right;
} em {
font-size: 1.3em;
line-height: 0;
} a {
text-decoration: none;
color: white;
}
</style>
</head><body> <p id=\\"moztext\\">
Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
fire, with the <em>cunning of foxes</em>. And they built a new world in their own
image as promised by the <em><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\">
sacred words</a></em>, and <em><a href=\\"http://wiki.mozilla.org/About:mozilla\\">spoke
</a></em> of the beast with their children. Mammon awoke, and lo! it was
<em>naught</em> but a follower.
</p> <p id=\\"from\\">
from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
</p></body></html>"
`;
exports[`[html file]: basic.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head><body>
<h1>Title</h1></body></html>"
`;
exports[`[html file]: block-element.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
<style>
.big {
width: 50px;
height: 50px;
}
.small {
width: 50px;
height: 100px;
float: left;
}
</style>
</head> <body>
<div class=\\"rr-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
<div>record 2</div>
<div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
<div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
</body></html>"
`;
exports[`[html file]: compat-mode.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
<title>Compat Mode; image resizing</title>
</head>
<body>
<center>
<a href=\\"http://localhost:3030/html#\\" class=\\"should-be-square-shaped\\">
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-left.png\\" />
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-right.png\\" />
<br /><img width=\\"80%\\" height=\\"20%\\" src=\\"http://localhost:3030/images/compat-bottom.png\\" /></a>
</center>
</body></html>"
`;
exports[`[html file]: cors-style-sheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet</title>
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
<link rel=\\"stylesheet\\" href=\\"\\" />
</head>
<body></body></html>"
`;
exports[`[html file]: dynamic-stylesheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>dynamic stylesheet</title>
<style>body { margin: 0px; }p { background: lightpink; }</style>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</head>
<body>
<p>p tag</p>
</body></html>"
`;
exports[`[html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>form fields</title>
</head> <body>
<form>
<label for=\\"text\\">
<input type=\\"text\\" value=\\"1\\" />
</label>
<label for=\\"radio\\">
<input type=\\"radio\\" checked=\\"\\" />
</label>
<label for=\\"checkbox\\">
<input type=\\"checkbox\\" checked=\\"\\" />
</label>
<label for=\\"textarea\\">
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
</label>
<label for=\\"select\\">
<select name=\\"\\" id=\\"\\" value=\\"2\\">
<option value=\\"1\\">1</option>
<option value=\\"2\\" selected=\\"\\">2</option>
</select>
</label>
<label>
<input name=\\"tagName\\" />
</label>
</form>
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`[html file]: hover.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>hover selector</title>
<style> div:hover, div.\\\\:hover {
background: orange;
} div:hover::after, div.\\\\:hover::after {
position: absolute;
left: 0;
top: 100%;
content: 'dropdown';
width: 100px;
height: 200px;
background: lightblue;
}
</style>
</head><body>
<div>hover me</div>
</body></html>"
`;
exports[`[html file]: iframe.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>iframe</title>
</head>
<body>
<iframe width=\\"100\\" height=\\"50\\"></iframe>
</body></html>"
`;
exports[`[html file]: iframe-inner.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
</body></html>"
`;
exports[`[html file]: invalid-attribute.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
</body></html>"
`;
exports[`[html file]: invalid-doctype.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>Invalid Doctype</title>
</head>
<body></body></html>"
`;
exports[`[html file]: invalid-tagname.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head>
<body>
<div>Hello</div>
<div>Hello</div>
<div></div>
</body></html>"
`;
exports[`[html file]: mask-text.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head> <body>
<p class=\\"rr-mask\\">**** *</p>
<div class=\\"rr-mask\\">
<span>**** *</span>
</div>
<div class=\\"rr-mask\\">**** *</div>
</body></html>"
`;
exports[`[html file]: picture.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<picture>
<source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
<img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
</picture>
</body></html>"
`;
exports[`[html file]: preload.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>Document</title>
<link />
<link />
</head>
<body></body></html>"
`;
exports[`[html file]: shadow-dom.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>shadow DOM</title>
</head>
<body>
<fancy-tabs background=\\"\\" role=\\"tablist\\" selected=\\"1\\">
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 1</button>
<button slot=\\"title\\" selected=\\"\\" role=\\"tab\\" tabindex=\\"0\\" aria-selected=\\"true\\">Tab 2</button>
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 3</button>
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 1</section>
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"false\\">content panel 2</section>
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 3</section>
</fancy-tabs>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</body></html>"
`;
exports[`[html file]: video.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>video</title>
</head>
<body>
<video controls=\\"\\">
<source src=\\"http://techslides.com/demos/sample-videos/small.webm\\" type=\\"video/webm\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.ogv\\" type=\\"video/ogg\\" />
<source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
</video>
</body></html>"
`;
exports[`[html file]: with-relative-res.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head>
<body>
<a href=\\"http://localhost:3030/basic.html\\"></a>
<div>Hello</div>
<alt34>Hello</alt34>
<div>Hello</div>
<div></div>
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
`;
exports[`[html file]: with-script.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with script</title>
</head><body>
<noscript src=\\"http://localhost:3030/js/a.js\\"></noscript>
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`[html file]: with-style-sheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet</title>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;
exports[`[html file]: with-style-sheet-with-import.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet with import</title>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;
exports[`iframe integration tests 1`] = `
exports[`iframe integration tests snapshot async iframes 1`] = `
"{
\\"type\\": 0,
\\"childNodes\\": [
@@ -470,7 +132,345 @@ exports[`iframe integration tests 1`] = `
}"
`;
exports[`shadow DOM integration tests 1`] = `
exports[`integration tests [html file]: about-mozilla.html 1`] = `
"<!DOCTYPE html><html><head>
<title>The Book of Mozilla, 11:9</title>
<style type=\\"text/css\\">
html {
background: maroon;
color: white;
font-style: italic;
} #moztext {
margin-top: 15%;
font-size: 1.1em;
font-family: serif;
text-align: center;
line-height: 1.5;
} #from {
font-size: 1.95em;
font-family: serif;
text-align: right;
} em {
font-size: 1.3em;
line-height: 0;
} a {
text-decoration: none;
color: white;
}
</style>
</head><body> <p id=\\"moztext\\">
Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
fire, with the <em>cunning of foxes</em>. And they built a new world in their own
image as promised by the <em><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\">
sacred words</a></em>, and <em><a href=\\"http://wiki.mozilla.org/About:mozilla\\">spoke
</a></em> of the beast with their children. Mammon awoke, and lo! it was
<em>naught</em> but a follower.
</p> <p id=\\"from\\">
from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
</p></body></html>"
`;
exports[`integration tests [html file]: basic.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head><body>
<h1>Title</h1></body></html>"
`;
exports[`integration tests [html file]: block-element.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
<style>
.big {
width: 50px;
height: 50px;
}
.small {
width: 50px;
height: 100px;
float: left;
}
</style>
</head> <body>
<div class=\\"rr-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
<div>record 2</div>
<div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
<div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
</body></html>"
`;
exports[`integration tests [html file]: compat-mode.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
<title>Compat Mode; image resizing</title>
</head>
<body>
<center>
<a href=\\"http://localhost:3030/html#\\" class=\\"should-be-square-shaped\\">
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-left.png\\" />
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-right.png\\" />
<br /><img width=\\"80%\\" height=\\"20%\\" src=\\"http://localhost:3030/images/compat-bottom.png\\" /></a>
</center>
</body></html>"
`;
exports[`integration tests [html file]: cors-style-sheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet</title>
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
<link rel=\\"stylesheet\\" href=\\"\\" />
</head>
<body></body></html>"
`;
exports[`integration tests [html file]: dynamic-stylesheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>dynamic stylesheet</title>
<style>body { margin: 0px; }p { background: lightpink; }</style>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</head>
<body>
<p>p tag</p>
</body></html>"
`;
exports[`integration tests [html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>form fields</title>
</head> <body>
<form>
<label for=\\"text\\">
<input type=\\"text\\" value=\\"1\\" />
</label>
<label for=\\"radio\\">
<input type=\\"radio\\" checked=\\"\\" />
</label>
<label for=\\"checkbox\\">
<input type=\\"checkbox\\" checked=\\"\\" />
</label>
<label for=\\"textarea\\">
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
</label>
<label for=\\"select\\">
<select name=\\"\\" id=\\"\\" value=\\"2\\">
<option value=\\"1\\">1</option>
<option value=\\"2\\" selected=\\"\\">2</option>
</select>
</label>
<label>
<input name=\\"tagName\\" />
</label>
</form>
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: hover.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>hover selector</title>
<style> div:hover, div.\\\\:hover {
background: orange;
} div:hover::after, div.\\\\:hover::after {
position: absolute;
left: 0;
top: 100%;
content: 'dropdown';
width: 100px;
height: 200px;
background: lightblue;
}
</style>
</head><body>
<div>hover me</div>
</body></html>"
`;
exports[`integration tests [html file]: iframe.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>iframe</title>
</head>
<body>
<iframe width=\\"100\\" height=\\"50\\"></iframe>
</body></html>"
`;
exports[`integration tests [html file]: iframe-inner.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
</body></html>"
`;
exports[`integration tests [html file]: invalid-attribute.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
</body></html>"
`;
exports[`integration tests [html file]: invalid-doctype.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>Invalid Doctype</title>
</head>
<body></body></html>"
`;
exports[`integration tests [html file]: invalid-tagname.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head>
<body>
<div>Hello</div>
<div>Hello</div>
<div></div>
</body></html>"
`;
exports[`integration tests [html file]: mask-text.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head> <body>
<p class=\\"rr-mask\\">**** *</p>
<div class=\\"rr-mask\\">
<span>**** *</span>
</div>
<div class=\\"rr-mask\\">**** *</div>
</body></html>"
`;
exports[`integration tests [html file]: picture.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<picture>
<source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
<img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
</picture>
</body></html>"
`;
exports[`integration tests [html file]: preload.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>Document</title>
<link />
<link />
</head>
<body></body></html>"
`;
exports[`integration tests [html file]: shadow-dom.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>shadow DOM</title>
</head>
<body>
<fancy-tabs background=\\"\\" role=\\"tablist\\" selected=\\"1\\">
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 1</button>
<button slot=\\"title\\" selected=\\"\\" role=\\"tab\\" tabindex=\\"0\\" aria-selected=\\"true\\">Tab 2</button>
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 3</button>
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 1</section>
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"false\\">content panel 2</section>
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 3</section>
</fancy-tabs>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</body></html>"
`;
exports[`integration tests [html file]: video.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>video</title>
</head>
<body>
<video controls=\\"\\">
<source src=\\"http://techslides.com/demos/sample-videos/small.webm\\" type=\\"video/webm\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.ogv\\" type=\\"video/ogg\\" />
<source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
</video>
</body></html>"
`;
exports[`integration tests [html file]: with-relative-res.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>Document</title>
</head>
<body>
<a href=\\"http://localhost:3030/basic.html\\"></a>
<div>Hello</div>
<alt34>Hello</alt34>
<div>Hello</div>
<div></div>
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
`;
exports[`integration tests [html file]: with-script.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with script</title>
</head><body>
<noscript src=\\"http://localhost:3030/js/a.js\\"></noscript>
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: with-style-sheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet</title>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;
exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet with import</title>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;
exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
"{
\\"type\\": 0,
\\"childNodes\\": [

64
packages/rrweb-snapshot/test/css.test.ts
View File

@@ -1,5 +1,3 @@
import 'mocha';
import { expect } from 'chai';
import { parse, Rule, Media } from '../src/css';
describe('css parser', () => {
@@ -9,50 +7,50 @@ describe('css parser', () => {
source: 'booty.css',
});
expect(ast.stylesheet!.source).to.equal('booty.css');
expect(ast.stylesheet!.source).toEqual('booty.css');
const position = ast.stylesheet!.rules[0].position!;
expect(position.start).to.be.ok;
expect(position.end).to.be.ok;
expect(position.source).to.equal('booty.css');
expect(position.content).to.equal(css);
expect(position.start).toBeTruthy();
expect(position.end).toBeTruthy();
expect(position.source).toEqual('booty.css');
expect(position.content).toEqual(css);
});
it('should throw when a selector is missing', () => {
expect(() => {
parse('{size: large}');
}).to.throw();
}).toThrow();
expect(() => {
parse('b { color: red; }\n{ color: green; }\na { color: blue; }');
}).to.throw();
}).toThrow();
});
it('should throw when a broken comment is found', () => {
expect(() => {
parse('thing { color: red; } /* b { color: blue; }');
}).to.throw();
}).toThrow();
expect(() => {
parse('/*');
}).to.throw();
}).toThrow();
/* Nested comments should be fine */
expect(() => {
parse('/* /* */');
}).to.not.throw();
}).not.toThrow();
});
it('should allow empty property value', () => {
expect(() => {
parse('p { color:; }');
}).to.not.throw();
}).not.toThrow();
});
it('should not throw with silent option', () => {
expect(() => {
parse('thing { color: red; } /* b { color: blue; }', { silent: true });
}).to.not.throw();
}).not.toThrow();
});
it('should list the parsing errors and continue parsing', () => {
@@ -65,18 +63,18 @@ describe('css parser', () => {
);
const rules = result.stylesheet!.rules;
expect(rules.length).to.above(2);
expect(rules.length).toBeGreaterThan(2);
const errors = result.stylesheet!.parsingErrors!;
expect(errors.length).to.equal(2);
expect(errors.length).toEqual(2);
expect(errors[0]).to.have.property('message');
expect(errors[0]).to.have.property('reason');
expect(errors[0]).to.have.property('filename');
expect(errors[0]).to.have.property('line');
expect(errors[0]).to.have.property('column');
expect(errors[0]).to.have.property('source');
expect(errors[0].filename).to.equal('foo.css');
expect(errors[0]).toHaveProperty('message');
expect(errors[0]).toHaveProperty('reason');
expect(errors[0]).toHaveProperty('filename');
expect(errors[0]).toHaveProperty('line');
expect(errors[0]).toHaveProperty('column');
expect(errors[0]).toHaveProperty('source');
expect(errors[0].filename).toEqual('foo.css');
});
it('should set parent property', () => {
@@ -85,27 +83,27 @@ describe('css parser', () => {
'@media (min-width: 100px) { thing { test: value; } }',
);
expect(result.parent).to.equal(null);
expect(result.parent).toEqual(null);
const rules = result.stylesheet!.rules;
expect(rules.length).to.equal(2);
expect(rules.length).toEqual(2);
let rule = rules[0] as Rule;
expect(rule.parent).to.equal(result);
expect(rule.declarations!.length).to.equal(1);
expect(rule.parent).toEqual(result);
expect(rule.declarations!.length).toEqual(1);
let decl = rule.declarations![0];
expect(decl.parent).to.equal(rule);
expect(decl.parent).toEqual(rule);
const media = rules[1] as Media;
expect(media.parent).to.equal(result);
expect(media.rules!.length).to.equal(1);
expect(media.parent).toEqual(result);
expect(media.rules!.length).toEqual(1);
rule = media.rules![0] as Rule;
expect(rule.parent).to.equal(media);
expect(rule.parent).toEqual(media);
expect(rule.declarations!.length).to.equal(1);
expect(rule.declarations!.length).toEqual(1);
decl = rule.declarations![0];
expect(decl.parent).to.equal(rule);
expect(decl.parent).toEqual(rule);
});
});

180
packages/rrweb-snapshot/test/integration.ts → packages/rrweb-snapshot/test/integration.test.ts
View File

@@ -2,13 +2,12 @@ import * as fs from 'fs';
import * as path from 'path';
import * as http from 'http';
import * as url from 'url';
import 'mocha';
import * as puppeteer from 'puppeteer';
import * as rollup from 'rollup';
import typescript = require('rollup-plugin-typescript');
import { assert } from 'chai';
import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
import { Suite } from 'mocha';
import * as typescript from '@rollup/plugin-typescript';
import * as assert from 'assert';
const _typescript = (typescript as unknown) as typeof typescript.default;
const htmlFolder = path.join(__dirname, 'html');
const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
@@ -23,7 +22,7 @@ interface IMimeType {
[key: string]: string;
}
const server = () =>
const startServer = () =>
new Promise<http.Server>((resolve) => {
const mimeType: IMimeType = {
'.html': 'text/html',
@@ -53,49 +52,40 @@ const server = () =>
});
});
function matchSnapshot(actual: string, testFile: string, testTitle: string) {
const snapshotState = new SnapshotState(testFile, {
updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
});
const matcher = toMatchSnapshot.bind({
snapshotState,
currentTestName: testTitle,
});
const result = matcher(actual);
snapshotState.save();
return result;
}
interface ISuite extends Suite {
interface ISuite {
server: http.Server;
browser: puppeteer.Browser;
code: string;
}
describe('integration tests', function (this: ISuite) {
this.timeout(10_000);
jest.setTimeout(30_000);
let server: ISuite['server'];
let browser: ISuite['browser'];
let code: ISuite['code'];
before(async () => {
this.server = await server();
this.browser = await puppeteer.launch({
beforeAll(async () => {
server = await startServer();
browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [typescript()],
plugins: [_typescript()],
});
const { code } = await bundle.generate({
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
this.code = code;
code = _code;
});
after(async () => {
await this.browser.close();
await this.server.close();
afterAll(async () => {
await browser.close();
await server.close();
});
for (const html of htmls) {
@@ -104,7 +94,7 @@ describe('integration tests', function (this: ISuite) {
}
const title = '[html file]: ' + html.filePath;
it(title, async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
// console for debug
// tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text()));
@@ -115,11 +105,21 @@ describe('integration tests', function (this: ISuite) {
waitUntil: 'load',
});
const outerCompatMode = await page.evaluate('document.compatMode');
const innerCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
assert(outerCompatMode === 'CSS1Compat', outerCompatMode + ' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"');
const innerCompatMode = await page.evaluate(
'document.querySelector("iframe").contentDocument.compatMode',
);
assert(
outerCompatMode === 'CSS1Compat',
outerCompatMode +
' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"',
);
// inner omits a doctype so gets rendered in backwards compat mode
// although this was originally accidental, we'll add a synthetic doctype to the rebuild to recreate this
assert(innerCompatMode === 'BackCompat', innerCompatMode + ' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"');
assert(
innerCompatMode === 'BackCompat',
innerCompatMode +
' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"',
);
} else {
// loading indirectly is improtant for relative path testing
await page.goto(`http://localhost:3030/html`);
@@ -128,7 +128,7 @@ describe('integration tests', function (this: ISuite) {
});
}
const rebuildHtml = (
await page.evaluate(`${this.code}
await page.evaluate(`${code}
const x = new XMLSerializer();
const [snap] = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
@@ -139,13 +139,12 @@ describe('integration tests', function (this: ISuite) {
out; // return
`)
).replace(/\n\n/g, '');
const result = matchSnapshot(rebuildHtml, __filename, title);
assert(result.pass, result.pass ? '' : result.report());
}).timeout(5000);
expect(rebuildHtml).toMatchSnapshot();
});
}
it('correctly triggers backCompat mode and rendering', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
// console for debug
// tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text()));
@@ -154,11 +153,20 @@ describe('integration tests', function (this: ISuite) {
waitUntil: 'load',
});
const compatMode = await page.evaluate('document.compatMode');
assert(compatMode === 'BackCompat', compatMode + ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted');
const renderedHeight = await page.evaluate('document.querySelector("center").clientHeight');
assert(
compatMode === 'BackCompat',
compatMode +
' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted',
);
const renderedHeight = await page.evaluate(
'document.querySelector("center").clientHeight',
);
// can remove following assertion if dimensions of page change
assert(renderedHeight < 400, `pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`)
const rebuildRenderedHeight = await page.evaluate(`${this.code}
assert(
renderedHeight < 400,
`pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
);
const rebuildRenderedHeight = await page.evaluate(`${code}
const [snap] = rrweb.snapshot(document);
const iframe = document.createElement('iframe');
iframe.setAttribute('width', document.body.clientWidth)
@@ -169,39 +177,53 @@ document.body.appendChild(iframe);
const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0];
iframe.contentDocument.querySelector('center').clientHeight
`);
const rebuildCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
assert(rebuildCompatMode === 'BackCompat', 'rebuilt compatMode should match source compatMode, but doesn\'t: ' + rebuildCompatMode);
assert(rebuildRenderedHeight === renderedHeight, 'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})')
}).timeout(5000);
const rebuildCompatMode = await page.evaluate(
'document.querySelector("iframe").contentDocument.compatMode',
);
assert(
rebuildCompatMode === 'BackCompat',
"rebuilt compatMode should match source compatMode, but doesn't: " +
rebuildCompatMode,
);
assert(
rebuildRenderedHeight === renderedHeight,
'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})',
);
});
});
describe('iframe integration tests', function (this: ISuite) {
jest.setTimeout(30_000);
let server: ISuite['server'];
let browser: ISuite['browser'];
let code: ISuite['code'];
before(async () => {
this.server = await server();
this.browser = await puppeteer.launch({
beforeAll(async () => {
server = await startServer();
browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [typescript()],
plugins: [_typescript()],
});
const { code } = await bundle.generate({
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
this.code = code;
code = _code;
});
after(async () => {
await this.browser.close();
await this.server.close();
afterAll(async () => {
await browser.close();
await server.close();
});
it('snapshot async iframes', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
// console for debug
// tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text()));
@@ -209,43 +231,48 @@ describe('iframe integration tests', function (this: ISuite) {
waitUntil: 'load',
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${this.code};
await page.evaluate(`${code};
rrweb.snapshot(document)[0];
`),
null,
2,
);
const result = matchSnapshot(snapshotResult, __filename, this.title);
assert(result.pass, result.pass ? '' : result.report());
}).timeout(5000);
expect(snapshotResult).toMatchSnapshot();
});
});
describe('shadow DOM integration tests', function (this: ISuite) {
jest.setTimeout(30_000);
let server: ISuite['server'];
let browser: ISuite['browser'];
let code: ISuite['code'];
before(async () => {
this.server = await server();
this.browser = await puppeteer.launch({
beforeAll(async () => {
server = await startServer();
browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [typescript()],
plugins: [_typescript()],
});
const { code } = await bundle.generate({
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
this.code = code;
code = _code;
});
after(async () => {
await this.browser.close();
await this.server.close();
afterAll(async () => {
await browser.close();
await server.close();
});
it('snapshot shadow DOM', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
// console for debug
// tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text()));
@@ -253,13 +280,12 @@ describe('shadow DOM integration tests', function (this: ISuite) {
waitUntil: 'load',
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${this.code};
await page.evaluate(`${code};
rrweb.snapshot(document)[0];
`),
null,
2,
);
const result = matchSnapshot(snapshotResult, __filename, this.title);
assert(result.pass, result.pass ? '' : result.report());
}).timeout(5000);
expect(snapshotResult).toMatchSnapshot();
});
});

35
packages/rrweb-snapshot/test/rebuild.test.ts
View File

@@ -1,67 +1,62 @@
import * as fs from 'fs';
import * as path from 'path';
import { Suite } from 'mocha';
import { expect } from 'chai';
import { addHoverClass, createCache } from '../src/rebuild';
import { BuildCache } from '../src/types';
function getDuration(hrtime: [number, number]) {
const [seconds, nanoseconds] = hrtime;
return seconds * 1000 + nanoseconds / 1000000;
}
interface ISuite extends Suite {
cache: BuildCache;
}
describe('add hover class to hover selector related rules', function () {
let cache: ReturnType<typeof createCache>;
describe('add hover class to hover selector related rules', function (this: ISuite) {
beforeEach(() => {
this.cache = createCache();
cache = createCache();
});
it('will do nothing to css text without :hover', () => {
const cssText = 'body { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
expect(addHoverClass(cssText, cache)).toEqual(cssText);
});
it('can add hover class to css text', () => {
const cssText = '.a:hover { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal(
expect(addHoverClass(cssText, cache)).toEqual(
'.a:hover, .a.\\:hover { color: white }',
);
});
it('can add hover class when there is multi selector', () => {
const cssText = '.a, .b:hover, .c { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal(
expect(addHoverClass(cssText, cache)).toEqual(
'.a, .b:hover, .b.\\:hover, .c { color: white }',
);
});
it('can add hover class when there is a multi selector with the same prefix', () => {
const cssText = '.a:hover, .a:hover::after { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal(
expect(addHoverClass(cssText, cache)).toEqual(
'.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
);
});
it('can add hover class when :hover is not the end of selector', () => {
const cssText = 'div:hover::after { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal(
expect(addHoverClass(cssText, cache)).toEqual(
'div:hover::after, div.\\:hover::after { color: white }',
);
});
it('can add hover class when the selector has multi :hover', () => {
const cssText = 'a:hover b:hover { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal(
expect(addHoverClass(cssText, cache)).toEqual(
'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
);
});
it('will ignore :hover in css value', () => {
const cssText = '.a::after { content: ":hover" }';
expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
expect(addHoverClass(cssText, cache)).toEqual(cssText);
});
it('benchmark', () => {
@@ -70,10 +65,10 @@ describe('add hover class to hover selector related rules', function (this: ISui
'utf8',
);
const start = process.hrtime();
addHoverClass(cssText, this.cache);
addHoverClass(cssText, cache);
const end = process.hrtime(start);
const duration = getDuration(end);
expect(duration).to.below(100);
expect(duration).toBeLessThan(100);
});
it('should be a lot faster to add a hover class to a previously processed css string', () => {
@@ -85,13 +80,13 @@ describe('add hover class to hover selector related rules', function (this: ISui
);
const start = process.hrtime();
addHoverClass(cssText, this.cache);
addHoverClass(cssText, cache);
const end = process.hrtime(start);
const cachedStart = process.hrtime();
addHoverClass(cssText, this.cache);
addHoverClass(cssText, cache);
const cachedEnd = process.hrtime(cachedStart);
expect(getDuration(cachedEnd) * factor).to.below(getDuration(end));
expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
});
});

46
packages/rrweb-snapshot/test/snapshot.test.ts
View File

@@ -1,49 +1,47 @@
import 'mocha';
import { JSDOM } from 'jsdom';
import { expect } from 'chai';
import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
describe('absolute url to stylesheet', () => {
const href = 'http://localhost/css/style.css';
it('can handle relative path', () => {
expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
expect(absoluteToStylesheet('url(a.jpg)', href)).toEqual(
`url(http://localhost/css/a.jpg)`,
);
});
it('can handle same level path', () => {
expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
expect(absoluteToStylesheet('url("./a.jpg")', href)).toEqual(
`url("http://localhost/css/a.jpg")`,
);
});
it('can handle parent level path', () => {
expect(absoluteToStylesheet('url("../a.jpg")', href)).to.equal(
expect(absoluteToStylesheet('url("../a.jpg")', href)).toEqual(
`url("http://localhost/a.jpg")`,
);
});
it('can handle absolute path', () => {
expect(absoluteToStylesheet('url("/a.jpg")', href)).to.equal(
expect(absoluteToStylesheet('url("/a.jpg")', href)).toEqual(
`url("http://localhost/a.jpg")`,
);
});
it('can handle external path', () => {
expect(
absoluteToStylesheet('url("http://localhost/a.jpg")', href),
).to.equal(`url("http://localhost/a.jpg")`);
expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual(
`url("http://localhost/a.jpg")`,
);
});
it('can handle single quote path', () => {
expect(absoluteToStylesheet(`url('./a.jpg')`, href)).to.equal(
expect(absoluteToStylesheet(`url('./a.jpg')`, href)).toEqual(
`url('http://localhost/css/a.jpg')`,
);
});
it('can handle no quote path', () => {
expect(absoluteToStylesheet('url(./a.jpg)', href)).to.equal(
expect(absoluteToStylesheet('url(./a.jpg)', href)).toEqual(
`url(http://localhost/css/a.jpg)`,
);
});
@@ -54,7 +52,7 @@ describe('absolute url to stylesheet', () => {
'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
href,
),
).to.equal(
).toEqual(
`background-image: url(http://localhost/css/images/b.jpg);` +
`background: #aabbcc url(http://localhost/css/images/a.jpg) 50% 50% repeat;`,
);
@@ -63,13 +61,13 @@ describe('absolute url to stylesheet', () => {
it('can handle data url image', () => {
expect(
absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
).to.equal('url(data:image/gif;base64,ABC)');
).toEqual('url(data:image/gif;base64,ABC)');
expect(
absoluteToStylesheet(
'url(data:application/font-woff;base64,d09GMgABAAAAAAm)',
href,
),
).to.equal('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
).toEqual('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
});
it('preserves quotes around inline svgs with spaces', () => {
@@ -78,7 +76,7 @@ describe('absolute url to stylesheet', () => {
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
href,
),
).to.equal(
).toEqual(
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
);
expect(
@@ -86,20 +84,20 @@ describe('absolute url to stylesheet', () => {
'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
href,
),
).to.equal(
).toEqual(
'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
);
expect(
absoluteToStylesheet(
'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
href,
),
).to.equal(
'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
).toEqual(
'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
);
});
it('can handle empty path', () => {
expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
expect(absoluteToStylesheet(`url('')`, href)).toEqual(`url('')`);
});
});
@@ -111,20 +109,20 @@ describe('isBlockedElement()', () => {
JSDOM.fragment(html).querySelector('div')!;
it('can handle empty elements', () => {
expect(subject('<div />')).to.equal(false);
expect(subject('<div />')).toEqual(false);
});
it('blocks prohibited className', () => {
expect(subject('<div class="foo rr-block bar" />')).to.equal(true);
expect(subject('<div class="foo rr-block bar" />')).toEqual(true);
});
it('does not block random data selector', () => {
expect(subject('<div data-rr-block />')).to.equal(false);
expect(subject('<div data-rr-block />')).toEqual(false);
});
it('blocks blocked selector', () => {
expect(
subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }),
).to.equal(true);
).toEqual(true);
});
});

2
packages/rrweb-snapshot/tsconfig.json
View File

@@ -11,5 +11,5 @@
"lib": ["es6", "dom"]
},
"exclude": ["test"],
"include": ["src", "test.d.ts"]
"include": ["src"]
}

6
packages/rrweb/jest.config.js Normal file
View File

@@ -0,0 +1,6 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/**.test.ts'],
};

12
packages/rrweb/package.json
View File

@@ -5,9 +5,9 @@
"scripts": {
"prepare": "npm run prepack",
"prepack": "npm run bundle",
"test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
"test:headless": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true PUPPETEER_HEADLESS=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
"test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch --watch-extensions js,ts",
"test": "npm run bundle:browser && jest",
"test:headless": "npm run bundle:browser && PUPPETEER_HEADLESS=true jest",
"test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch",
"repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
"bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
"bundle": "rollup --config",
@@ -44,26 +44,26 @@
"@rollup/plugin-typescript": "^8.2.5",
"@types/chai": "^4.1.6",
"@types/inquirer": "0.0.43",
"@types/jest": "^27.0.2",
"@types/jsdom": "^16.2.12",
"@types/mocha": "^5.2.5",
"@types/node": "^12.20.16",
"@types/prettier": "^2.3.2",
"@types/puppeteer": "^5.4.3",
"chai": "^4.2.0",
"cross-env": "^5.2.0",
"fast-mhtml": "^1.1.9",
"ignore-styles": "^5.0.1",
"inquirer": "^6.2.1",
"jest": "^27.2.4",
"jest-snapshot": "^23.6.0",
"jsdom": "^17.0.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"prettier": "2.2.1",
"puppeteer": "^9.1.1",
"rollup": "^2.45.2",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-rename-node-modules": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "^27.0.5",
"ts-node": "^7.0.1",
"tslib": "^1.9.3",
"tslint": "^4.5.1",

16
packages/rrweb/test.d.ts vendored
View File

@@ -1,16 +0,0 @@
declare module 'jest-snapshot' {
export class SnapshotState {
constructor(testFile: string, options: any);
save(): any;
}
type matchResult = {
pass: boolean;
report(): string;
};
export function toMatchSnapshot(
received: any,
propertyMatchers?: any,
testName?: string,
): matchResult;
}

12336
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

BIN
packages/rrweb/test/__snapshots__/packer.test.ts.snap
View File

Binary file not shown.

1345
packages/rrweb/test/__snapshots__/record.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

317
packages/rrweb/test/__snapshots__/replayer.test.ts.snap
View File

@@ -1,176 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ordering-events 1`] = `
"file-frame-1
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<div class=\\"replayer-mouse\\"></div>
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
</div>
</body>
</html>
file-frame-2
<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
</head>
<body>
<span>Final - correct</span>
</body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !important; }
"
`;
exports[`style-sheet-remove-events-play-at-2500 1`] = `
"file-frame-1
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<div class=\\"replayer-mouse\\"></div>
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
</div>
</body>
</html>
file-frame-2
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
</head>
<body></body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !important; }
"
`;
exports[`style-sheet-rule-events-pause-at-2500 1`] = `
"file-frame-4
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
<title></title>
</head>
<body>
<div class=\\"replayer-wrapper\\">
<div class=\\"replayer-mouse\\"></div>
<canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
\\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
\\"no\\" width=\\"1000\\" height=\\"800\\" style=
\\"display: inherit; pointer-events: none;\\"></iframe>
</div>
</body>
</html>
file-frame-5
<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\">
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\">
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\">
<title></title>
</head>
<body>
<a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
</body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !important; }
file-cid-1
@charset \\"utf-8\\";
.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
file-cid-2
@charset \\"utf-8\\";
.c01x { opacity: 1; transform: translateX(0px); }
.css-added-at-400 { border: 1px solid blue; }
file-cid-3
@charset \\"utf-8\\";
.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
.css-lsxxx { padding-left: 4rem; }
"
`;
exports[`style-sheet-rule-events-play-at-1500 1`] = `
exports[`replayer can fast forward past StyleSheetRule changes on virtual elements 1`] = `
"file-frame-4
<html>
<head>
@@ -250,8 +80,19 @@ file-cid-3
"
`;
exports[`style-sheet-rule-events-play-at-2500 1`] = `
"file-frame-4
exports[`replayer can fast forward past StyleSheetRule deletion on virtual elements 1`] = `
"file-frame-0
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body></body>
</html>
"
`;
exports[`replayer can handle removing style elements 1`] = `
"file-frame-1
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
@@ -277,18 +118,114 @@ exports[`style-sheet-rule-events-play-at-2500 1`] = `
</html>
file-frame-5
file-frame-2
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
</head>
<body></body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !important; }
"
`;
exports[`replayer replays same timestamp events in correct order (with addAction) 1`] = `
"file-frame-1
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<div class=\\"replayer-mouse\\"></div>
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
</div>
</body>
</html>
file-frame-2
<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
</head>
<body>
<a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
<span>Final - correct</span>
</body>
</html>
file-cid-0
@charset \\"utf-8\\";
.rr-block { background: currentcolor; }
noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !important; }
"
`;
exports[`replayer replays same timestamp events in correct order 1`] = `
"file-frame-1
<html>
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
</head>
<body>
<div class=\\"replayer-wrapper\\">
<div class=\\"replayer-mouse\\"></div>
<canvas
class=\\"replayer-mouse-tail\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit\\"
></canvas
><iframe
sandbox=\\"allow-same-origin\\"
scrolling=\\"no\\"
width=\\"1000\\"
height=\\"800\\"
style=\\"display: inherit; pointer-events: none\\"
></iframe>
</div>
</body>
</html>
file-frame-2
<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
</head>
<body>
<span>Final - correct</span>
</body>
</html>
@@ -301,29 +238,5 @@ file-cid-0
noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !important; }
file-cid-1
@charset \\"utf-8\\";
.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
file-cid-2
@charset \\"utf-8\\";
.c01x { opacity: 1; transform: translateX(0px); }
.css-added-at-400 { border: 1px solid blue; }
file-cid-3
@charset \\"utf-8\\";
.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
.css-lsxxx { padding-left: 4rem; }
"
`;

2
packages/rrweb/test/html/main.html
View File

@@ -20,6 +20,6 @@
iframe2.src = './html/frame1.html';
setTimeout(() => {
document.body.appendChild(iframe2);
}, 10);
}, 100);
</script>
</html>

131
packages/rrweb/test/integration.test.ts
View File

@@ -4,12 +4,10 @@ import * as http from 'http';
import * as url from 'url';
import * as puppeteer from 'puppeteer';
import { assertSnapshot, launchPuppeteer } from './utils';
import { Suite } from 'mocha';
import { expect } from 'chai';
import { recordOptions, eventWithTime, EventType } from '../src/types';
import { visitSnapshot, NodeType } from 'rrweb-snapshot';
interface ISuite extends Suite {
interface ISuite {
server: http.Server;
code: string;
browser: puppeteer.Browser;
@@ -19,7 +17,7 @@ interface IMimeType {
[key: string]: string;
}
const server = () =>
const startServer = () =>
new Promise<http.Server>((resolve) => {
const mimeType: IMimeType = {
'.html': 'text/html',
@@ -53,7 +51,7 @@ const server = () =>
});
describe('record integration tests', function (this: ISuite) {
this.timeout(10_000);
jest.setTimeout(10_000);
const getHtml = (
fileName: string,
@@ -65,7 +63,7 @@ describe('record integration tests', function (this: ISuite) {
'</body>',
`
<script>
${this.code}
${code}
window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
window.snapshots = [];
rrweb.record({
@@ -86,9 +84,13 @@ describe('record integration tests', function (this: ISuite) {
);
};
before(async () => {
this.server = await server();
this.browser = await launchPuppeteer();
let server: ISuite['server'];
let code: ISuite['code'];
let browser: ISuite['browser'];
beforeAll(async () => {
server = await startServer();
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
const pluginsCode = [
@@ -96,16 +98,16 @@ describe('record integration tests', function (this: ISuite) {
]
.map((path) => fs.readFileSync(path, 'utf8'))
.join();
this.code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
});
after(async () => {
await this.browser.close();
this.server.close();
afterAll(async () => {
await browser.close();
server.close();
});
it('can record form interactions', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'form.html'));
@@ -116,11 +118,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'form');
assertSnapshot(snapshots);
});
it('can record childList mutations', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -134,11 +136,11 @@ describe('record integration tests', function (this: ISuite) {
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'child-list');
assertSnapshot(snapshots);
});
it('can record character data muatations', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -154,11 +156,11 @@ describe('record integration tests', function (this: ISuite) {
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'character-data');
assertSnapshot(snapshots);
});
it('can record attribute mutation', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -172,11 +174,11 @@ describe('record integration tests', function (this: ISuite) {
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'attributes');
assertSnapshot(snapshots);
});
it('can record node mutations', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'select2.html'), {
waitUntil: 'networkidle0',
@@ -189,11 +191,11 @@ describe('record integration tests', function (this: ISuite) {
'document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")',
);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'select2');
assertSnapshot(snapshots);
});
it('can freeze mutations', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -215,22 +217,22 @@ describe('record integration tests', function (this: ISuite) {
document.body.removeChild(ul);
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'frozen');
assertSnapshot(snapshots);
});
it('should not record input events on ignored elements', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'ignore.html'));
await page.type('.rr-ignore', 'secret');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'ignore');
assertSnapshot(snapshots);
});
it('should not record input values if maskAllInputs is enabled', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'form.html', { maskAllInputs: true }),
@@ -244,11 +246,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask');
assertSnapshot(snapshots);
});
it('can use maskInputOptions to configure which type of inputs should be masked', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'form.html', {
@@ -268,11 +270,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'maskInputOptions');
assertSnapshot(snapshots);
});
it('should mask value attribute with maskInputOptions', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'password.html', {
@@ -285,11 +287,11 @@ describe('record integration tests', function (this: ISuite) {
await page.type('input[type="password"]', 'secr3t');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'maskPassword');
assertSnapshot(snapshots);
});
it('should record input userTriggered values if userTriggeredOnInput is enabled', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'form.html', { userTriggeredOnInput: true }),
@@ -303,11 +305,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'userTriggered');
assertSnapshot(snapshots);
});
it('should not record blocked elements and its child nodes', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'block.html'));
@@ -316,11 +318,11 @@ describe('record integration tests', function (this: ISuite) {
await page.click('#text');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'block');
assertSnapshot(snapshots);
});
it('should not record blocked elements dynamically added', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'block.html'));
@@ -336,11 +338,11 @@ describe('record integration tests', function (this: ISuite) {
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'block 2');
assertSnapshot(snapshots);
});
it('should record DOM node movement 1', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'move-node.html'));
@@ -354,11 +356,11 @@ describe('record integration tests', function (this: ISuite) {
div.appendChild(span);
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'move-node-1');
assertSnapshot(snapshots);
});
it('should record DOM node movement 2', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'move-node.html'));
@@ -369,20 +371,20 @@ describe('record integration tests', function (this: ISuite) {
div.appendChild(span);
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'move-node-2');
assertSnapshot(snapshots);
});
it('should record dynamic CSS changes', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'react-styled-components.html'));
await page.click('.toggle');
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'react-styled-components');
assertSnapshot(snapshots);
});
it('should record canvas mutations', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'canvas.html', {
@@ -400,11 +402,11 @@ describe('record integration tests', function (this: ISuite) {
});
}
}
assertSnapshot(snapshots, __filename, 'canvas');
assertSnapshot(snapshots);
});
it('will serialize node before record', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -419,11 +421,11 @@ describe('record integration tests', function (this: ISuite) {
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'serialize-before-record');
assertSnapshot(snapshots);
});
it('will defer missing next node mutation', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'shuffle.html'));
@@ -441,11 +443,11 @@ describe('record integration tests', function (this: ISuite) {
return parent.innerText;
});
expect(text).to.equal('4\n3\n2\n1\n5');
expect(text).toEqual('4\n3\n2\n1\n5');
});
it('should record console messages', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'log.html', {
@@ -454,7 +456,7 @@ describe('record integration tests', function (this: ISuite) {
);
await page.evaluate(() => {
console.assert(0 == 0, 'assert');
console.assert(0 === 0, 'assert');
console.count('count');
console.countReset('count');
console.debug('debug');
@@ -479,23 +481,22 @@ describe('record integration tests', function (this: ISuite) {
console.log('from iframe');
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'log');
assertSnapshot(snapshots);
});
it('should nest record iframe', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto(`http://localhost:3030/html`);
await page.setContent(getHtml.call(this, 'main.html'));
await page.waitForTimeout(500);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'iframe');
assertSnapshot(snapshots);
});
it('should record shadow DOM', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'shadow-dom.html'));
@@ -528,11 +529,11 @@ describe('record integration tests', function (this: ISuite) {
await page.waitForTimeout(50);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'shadow-dom');
assertSnapshot(snapshots);
});
it('should mask texts', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'mask-text.html', {
@@ -541,11 +542,11 @@ describe('record integration tests', function (this: ISuite) {
);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-text');
assertSnapshot(snapshots);
});
it('should mask texts using maskTextFn', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'mask-text.html', {
@@ -555,11 +556,11 @@ describe('record integration tests', function (this: ISuite) {
);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-text-fn');
assertSnapshot(snapshots);
});
it('can mask character data mutations', async () => {
const page: puppeteer.Page = await this.browser.newPage();
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -576,6 +577,6 @@ describe('record integration tests', function (this: ISuite) {
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-character-data');
assertSnapshot(snapshots);
});
});

9
packages/rrweb/test/machine.test.ts
View File

@@ -1,4 +1,3 @@
import { expect } from 'chai';
import { discardPriorSnapshots } from '../src/replay/machine';
import { sampleEvents } from './utils';
import { EventType } from '../src/types';
@@ -17,7 +16,7 @@ const nextNextEvents = nextEvents.map((e) => ({
describe('get last session', () => {
it('will return all the events when there is only one session', () => {
expect(discardPriorSnapshots(events, events[0].timestamp)).to.deep.equal(events);
expect(discardPriorSnapshots(events, events[0].timestamp)).toEqual(events);
});
it('will return last session when there is more than one in the events', () => {
@@ -27,7 +26,7 @@ describe('get last session', () => {
multiple,
nextNextEvents[nextNextEvents.length - 1].timestamp,
),
).to.deep.equal(nextNextEvents);
).toEqual(nextNextEvents);
});
it('will return last session when baseline time is future time', () => {
@@ -37,11 +36,11 @@ describe('get last session', () => {
multiple,
nextNextEvents[nextNextEvents.length - 1].timestamp + 1000,
),
).to.deep.equal(nextNextEvents);
).toEqual(nextNextEvents);
});
it('will return all sessions when baseline time is prior time', () => {
expect(discardPriorSnapshots(events, events[0].timestamp - 1000)).to.deep.equal(
expect(discardPriorSnapshots(events, events[0].timestamp - 1000)).toEqual(
events,
);
});

13
packages/rrweb/test/packer.test.ts
View File

@@ -1,5 +1,3 @@
import { expect } from 'chai';
import { matchSnapshot } from './utils';
import { pack, unpack } from '../src/packer';
import { eventWithTime, EventType } from '../src/types';
import { MARK } from '../src/packer/base';
@@ -13,30 +11,29 @@ const event: eventWithTime = {
describe('pack', () => {
it('can pack event', () => {
const packedData = pack(event);
const result = matchSnapshot(packedData, __filename, 'pack');
expect(result.pass).to.true;
expect(packedData).toMatchSnapshot();
});
});
describe('unpack', () => {
it('is compatible with unpacked data 1', () => {
const result = unpack((event as unknown) as string);
expect(result).to.deep.equal(event);
expect(result).toEqual(event);
});
it('is compatible with unpacked data 2', () => {
const result = unpack(JSON.stringify(event));
expect(result).to.deep.equal(event);
expect(result).toEqual(event);
});
it('stop on unknown data format', () => {
expect(() => unpack('[""]')).to.throw('');
expect(() => unpack('[""]')).toThrow('');
});
it('can unpack packed data', () => {
const packedData = pack(event);
const result = unpack(packedData);
expect(result).to.deep.equal({
expect(result).toEqual({
...event,
v: MARK,
});

231
packages/rrweb/test/record.test.ts
View File

@@ -3,7 +3,6 @@
import * as fs from 'fs';
import * as path from 'path';
import * as puppeteer from 'puppeteer';
import { expect } from 'chai';
import {
recordOptions,
listenerHandler,
@@ -13,9 +12,8 @@ import {
styleSheetRuleData,
} from '../src/types';
import { assertSnapshot, launchPuppeteer } from './utils';
import { Suite } from 'mocha';
interface ISuite extends Suite {
interface ISuite {
code: string;
browser: puppeteer.Browser;
page: puppeteer.Page;
@@ -32,44 +30,47 @@ interface IWindow extends Window {
emit: (e: eventWithTime) => undefined;
}
const setup = async function (this: ISuite, content: string) {
before(async () => {
this.browser = await launchPuppeteer();
const setup = function (this: ISuite, content: string): ISuite {
const ctx = {} as ISuite;
beforeAll(async () => {
ctx.browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
this.code = fs.readFileSync(bundlePath, 'utf8');
ctx.code = fs.readFileSync(bundlePath, 'utf8');
});
beforeEach(async () => {
const page: puppeteer.Page = await this.browser.newPage();
await page.goto('about:blank');
await page.setContent(content);
await page.evaluate(this.code);
this.page = page;
this.events = [];
await this.page.exposeFunction('emit', (e: eventWithTime) => {
ctx.page = await ctx.browser.newPage();
await ctx.page.goto('about:blank');
await ctx.page.setContent(content);
await ctx.page.evaluate(ctx.code);
ctx.events = [];
await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
return;
}
this.events.push(e);
ctx.events.push(e);
});
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
});
afterEach(async () => {
await this.page.close();
await ctx.page.close();
});
after(async () => {
await this.browser.close();
afterAll(async () => {
await ctx.browser.close();
});
return ctx;
};
describe('record', function (this: ISuite) {
this.timeout(10_000);
jest.setTimeout(10_000);
setup.call(
const ctx: ISuite = setup.call(
this,
`
<!DOCTYPE html>
@@ -82,7 +83,7 @@ describe('record', function (this: ISuite) {
);
it('will only have one full snapshot without checkout config', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
@@ -90,24 +91,23 @@ describe('record', function (this: ISuite) {
});
let count = 30;
while (count--) {
await this.page.type('input', 'a');
await ctx.page.type('input', 'a');
}
await this.page.waitForTimeout(10);
expect(this.events.length).to.equal(33);
await ctx.page.waitForTimeout(10);
expect(ctx.events.length).toEqual(33);
expect(
this.events.filter(
(event: eventWithTime) => event.type === EventType.Meta,
).length,
).to.equal(1);
ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
.length,
).toEqual(1);
expect(
this.events.filter(
ctx.events.filter(
(event: eventWithTime) => event.type === EventType.FullSnapshot,
).length,
).to.equal(1);
).toEqual(1);
});
it('can checkout full snapshot by count', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
@@ -116,28 +116,27 @@ describe('record', function (this: ISuite) {
});
let count = 30;
while (count--) {
await this.page.type('input', 'a');
await ctx.page.type('input', 'a');
}
await this.page.waitForTimeout(10);
expect(this.events.length).to.equal(39);
await ctx.page.waitForTimeout(10);
expect(ctx.events.length).toEqual(39);
expect(
this.events.filter(
(event: eventWithTime) => event.type === EventType.Meta,
).length,
).to.equal(4);
ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
.length,
).toEqual(4);
expect(
this.events.filter(
ctx.events.filter(
(event: eventWithTime) => event.type === EventType.FullSnapshot,
).length,
).to.equal(4);
expect(this.events[1].type).to.equal(EventType.FullSnapshot);
expect(this.events[13].type).to.equal(EventType.FullSnapshot);
expect(this.events[25].type).to.equal(EventType.FullSnapshot);
expect(this.events[37].type).to.equal(EventType.FullSnapshot);
).toEqual(4);
expect(ctx.events[1].type).toEqual(EventType.FullSnapshot);
expect(ctx.events[13].type).toEqual(EventType.FullSnapshot);
expect(ctx.events[25].type).toEqual(EventType.FullSnapshot);
expect(ctx.events[37].type).toEqual(EventType.FullSnapshot);
});
it('can checkout full snapshot by time', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
@@ -146,30 +145,29 @@ describe('record', function (this: ISuite) {
});
let count = 30;
while (count--) {
await this.page.type('input', 'a');
await ctx.page.type('input', 'a');
}
await this.page.waitForTimeout(300);
expect(this.events.length).to.equal(33); // before first automatic snapshot
await this.page.waitForTimeout(200); // could be 33 or 35 events by now depending on speed of test env
await this.page.type('input', 'a');
await this.page.waitForTimeout(10);
expect(this.events.length).to.equal(36); // additionally includes the 2 checkout events
await ctx.page.waitForTimeout(300);
expect(ctx.events.length).toEqual(33); // before first automatic snapshot
await ctx.page.waitForTimeout(200); // could be 33 or 35 events by now depending on speed of test env
await ctx.page.type('input', 'a');
await ctx.page.waitForTimeout(10);
expect(ctx.events.length).toEqual(36); // additionally includes the 2 checkout events
expect(
this.events.filter(
(event: eventWithTime) => event.type === EventType.Meta,
).length,
).to.equal(2);
ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
.length,
).toEqual(2);
expect(
this.events.filter(
ctx.events.filter(
(event: eventWithTime) => event.type === EventType.FullSnapshot,
).length,
).to.equal(2);
expect(this.events[1].type).to.equal(EventType.FullSnapshot);
expect(this.events[35].type).to.equal(EventType.FullSnapshot);
).toEqual(2);
expect(ctx.events[1].type).toEqual(EventType.FullSnapshot);
expect(ctx.events[35].type).toEqual(EventType.FullSnapshot);
});
it('is safe to checkout during async callbacks', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
@@ -190,12 +188,12 @@ describe('record', function (this: ISuite) {
document.body.appendChild(span);
}, 10);
});
await this.page.waitForTimeout(100);
assertSnapshot(this.events, __filename, 'async-checkout');
await ctx.page.waitForTimeout(100);
assertSnapshot(ctx.events);
});
it('can add custom event', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
@@ -205,12 +203,12 @@ describe('record', function (this: ISuite) {
a: 'b',
});
});
await this.page.waitForTimeout(50);
assertSnapshot(this.events, __filename, 'custom-event');
await ctx.page.waitForTimeout(50);
assertSnapshot(ctx.events);
});
it('captures stylesheet rules', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
@@ -236,8 +234,8 @@ describe('record', function (this: ISuite) {
styleSheet.insertRule('body { color: #ccc; }');
}, 10);
});
await this.page.waitForTimeout(50);
const styleSheetRuleEvents = this.events.filter(
await ctx.page.waitForTimeout(50);
const styleSheetRuleEvents = ctx.events.filter(
(e) =>
e.type === EventType.IncrementalSnapshot &&
e.data.source === IncrementalSource.StyleSheetRule,
@@ -249,14 +247,18 @@ describe('record', function (this: ISuite) {
Boolean((e.data as styleSheetRuleData).removes),
).length;
// pre-serialization insert/delete should be ignored
expect(addRules.length).to.equal(2);
expect((addRules[0].data as styleSheetRuleData).adds).to.deep.include({rule: "body { color: #fff; }"});
expect(removeRuleCount).to.equal(1);
assertSnapshot(this.events, __filename, 'stylesheet-rules');
expect(addRules.length).toEqual(2);
expect((addRules[0].data as styleSheetRuleData).adds).toEqual([
{
rule: 'body { color: #fff; }',
},
]);
expect(removeRuleCount).toEqual(1);
assertSnapshot(ctx.events);
});
const captureNestedStylesheetRulesTest = async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
@@ -283,8 +285,8 @@ describe('record', function (this: ISuite) {
atMediaRule.insertRule('body { color: #ccc; }', 0);
}, 10);
});
await this.page.waitForTimeout(50);
const styleSheetRuleEvents = this.events.filter(
await ctx.page.waitForTimeout(50);
const styleSheetRuleEvents = ctx.events.filter(
(e) =>
e.type === EventType.IncrementalSnapshot &&
e.data.source === IncrementalSource.StyleSheetRule,
@@ -296,9 +298,9 @@ describe('record', function (this: ISuite) {
Boolean((e.data as styleSheetRuleData).removes),
).length;
// sync insert/delete should be ignored
expect(addRuleCount).to.equal(2);
expect(removeRuleCount).to.equal(1);
assertSnapshot(this.events, __filename, 'nested-stylesheet-rules');
expect(addRuleCount).toEqual(2);
expect(removeRuleCount).toEqual(1);
assertSnapshot(ctx.events);
};
it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
@@ -306,18 +308,18 @@ describe('record', function (this: ISuite) {
// Safari currently doesn't support CSSGroupingRule, let's test without that
// https://caniuse.com/?search=CSSGroupingRule
beforeEach(async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
/* @ts-ignore: override CSSGroupingRule */
CSSGroupingRule = undefined;
});
// load a fresh rrweb recorder without CSSGroupingRule
await this.page.evaluate(this.code);
await ctx.page.evaluate(ctx.code);
});
it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
});
it('captures style property changes', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
@@ -330,21 +332,24 @@ describe('record', function (this: ISuite) {
const styleSheet = <CSSStyleSheet>styleElement.sheet;
styleSheet.insertRule('body { background: #000; }');
setTimeout(() => {
(styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
(styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty('background');
(styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
'color',
'green',
);
(styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty(
'background',
);
}, 0);
});
await this.page.waitForTimeout(50);
assertSnapshot(this.events, __filename, 'stylesheet-properties');
await ctx.page.waitForTimeout(50);
assertSnapshot(ctx.events);
});
});
describe('record iframes', function (this: ISuite) {
this.timeout(10_000);
jest.setTimeout(10_000);
setup.call(
const ctx: ISuite = setup.call(
this,
`
<!DOCTYPE html>
@@ -357,31 +362,31 @@ describe('record iframes', function (this: ISuite) {
);
it('captures iframe content in correct order', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
});
});
await this.page.waitForTimeout(10);
// console.log(JSON.stringify(this.events));
await ctx.page.waitForTimeout(10);
// console.log(JSON.stringify(ctx.events));
expect(this.events.length).to.equal(3);
const eventTypes = this.events
expect(ctx.events.length).toEqual(3);
const eventTypes = ctx.events
.filter(
(e) =>
e.type === EventType.IncrementalSnapshot ||
e.type === EventType.FullSnapshot,
)
.map((e) => e.type);
expect(eventTypes).to.have.ordered.members([
expect(eventTypes).toEqual([
EventType.FullSnapshot,
EventType.IncrementalSnapshot,
]);
});
it('captures stylesheet mutations in iframes', async () => {
await this.page.evaluate(() => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
record({
// need to reference window.top for when we are in an iframe!
@@ -391,7 +396,6 @@ describe('record iframes', function (this: ISuite) {
const iframe = document.querySelector('iframe');
// outer timeout is needed to wait for initStyleSheetObserver on iframe to be set up
setTimeout(() => {
const idoc = (iframe as HTMLIFrameElement).contentDocument!;
const styleElement = idoc.createElement('style');
@@ -400,8 +404,11 @@ describe('record iframes', function (this: ISuite) {
const styleSheet = <CSSStyleSheet>styleElement.sheet;
styleSheet.insertRule('@media {}');
const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule;
const atRuleIdx0 = atMediaRule.insertRule('body { background: #000; }', 0);
const ruleIdx0 = styleSheet.insertRule('body { background: #000; }'); // inserted before above
const atRuleIdx0 = atMediaRule.insertRule(
'body { background: #000; }',
0,
);
const ruleIdx0 = styleSheet.insertRule('body { background: #000; }'); // inserted before above
// pre-serialization insert/delete above should be ignored
setTimeout(() => {
styleSheet.insertRule('body { color: #fff; }');
@@ -409,19 +416,22 @@ describe('record iframes', function (this: ISuite) {
}, 0);
setTimeout(() => {
styleSheet.deleteRule(ruleIdx0);
(styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
(styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
'color',
'green',
);
}, 5);
setTimeout(() =>{
setTimeout(() => {
atMediaRule.deleteRule(atRuleIdx0);
}, 10);
}, 10);
});
await this.page.waitForTimeout(50);
const styleRelatedEvents = this.events.filter(
await ctx.page.waitForTimeout(50);
const styleRelatedEvents = ctx.events.filter(
(e) =>
e.type === EventType.IncrementalSnapshot &&
(e.data.source === IncrementalSource.StyleSheetRule ||
e.data.source === IncrementalSource.StyleDeclaration),
e.data.source === IncrementalSource.StyleDeclaration),
);
const addRuleCount = styleRelatedEvents.filter((e) =>
Boolean((e.data as styleSheetRuleData).adds),
@@ -429,10 +439,9 @@ describe('record iframes', function (this: ISuite) {
const removeRuleCount = styleRelatedEvents.filter((e) =>
Boolean((e.data as styleSheetRuleData).removes),
).length;
expect(styleRelatedEvents.length).to.equal(5);
expect(addRuleCount).to.equal(2);
expect(removeRuleCount).to.equal(2);
assertSnapshot(this.events, __filename, 'iframe-stylesheet-mutations');
expect(styleRelatedEvents.length).toEqual(5);
expect(addRuleCount).toEqual(2);
expect(removeRuleCount).toEqual(2);
assertSnapshot(ctx.events);
});
});

29
packages/rrweb/test/replay/virtual-styles.test.ts
View File

@@ -1,4 +1,3 @@
import { expect } from 'chai';
import { JSDOM } from 'jsdom';
import {
applyVirtualStyleRulesToNode,
@@ -21,8 +20,8 @@ describe('virtual styles', () => {
];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(1);
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
});
it('should insert rule at index 0 and keep exsisting rules', () => {
@@ -40,8 +39,8 @@ describe('virtual styles', () => {
];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(3);
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
expect(styleEl.sheet?.cssRules?.length).toEqual(3);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
});
it('should delete rule at index 0', () => {
@@ -58,10 +57,8 @@ describe('virtual styles', () => {
];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(1);
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(
'div {color: black;}',
);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
});
it('should restore a snapshot by inserting missing rules', () => {
@@ -82,7 +79,7 @@ describe('virtual styles', () => {
];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(2);
expect(styleEl.sheet?.cssRules?.length).toEqual(2);
});
it('should restore a snapshot by fixing order of rules', () => {
@@ -104,10 +101,10 @@ describe('virtual styles', () => {
];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(2);
expect(styleEl.sheet?.cssRules?.length).toEqual(2);
expect(
Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
).to.have.ordered.members(cssTexts);
).toEqual(cssTexts);
});
// JSDOM/CSSOM is currently broken for this test
@@ -135,10 +132,10 @@ describe('virtual styles', () => {
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).to.equal(3);
).toEqual(3);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).to.equal(cssText);
).toEqual(cssText);
});
it('should delete rule at index [0,1]', () => {
@@ -159,10 +156,10 @@ describe('virtual styles', () => {
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).to.equal(1);
).toEqual(1);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).to.equal('a {color: blue;}');
).toEqual('a {color: blue;}');
});
});
});

147
packages/rrweb/test/replayer.test.ts
View File

@@ -3,8 +3,6 @@
import * as fs from 'fs';
import * as path from 'path';
import * as puppeteer from 'puppeteer';
import { expect } from 'chai';
import { Suite } from 'mocha';
import {
assertDomSnapshot,
launchPuppeteer,
@@ -14,47 +12,50 @@ import {
import styleSheetRuleEvents from './events/style-sheet-rule-events';
import orderingEvents from './events/ordering';
interface ISuite extends Suite {
interface ISuite {
code: string;
browser: puppeteer.Browser;
page: puppeteer.Page;
}
describe('replayer', function (this: ISuite) {
this.timeout(10_000);
describe('replayer', function () {
jest.setTimeout(10_000);
before(async () => {
this.browser = await launchPuppeteer();
let code: ISuite['code'];
let browser: ISuite['browser'];
let page: ISuite['page'];
beforeAll(async () => {
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
this.code = fs.readFileSync(bundlePath, 'utf8');
code = fs.readFileSync(bundlePath, 'utf8');
});
beforeEach(async () => {
const page: puppeteer.Page = await this.browser.newPage();
page = await browser.newPage();
await page.goto('about:blank');
await page.evaluate(this.code);
await page.evaluate(code);
await page.evaluate(`let events = ${JSON.stringify(events)}`);
this.page = page;
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
});
afterEach(async () => {
await this.page.close();
await page.close();
});
after(async () => {
await this.browser.close();
afterAll(async () => {
await browser.close();
});
it('can get meta data', async () => {
const meta = await this.page.evaluate(`
const meta = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.getMetaData();
`);
expect(meta).to.deep.equal({
expect(meta).toEqual({
startTime: events[0].timestamp,
endTime: events[events.length - 1].timestamp,
totalTime: events[events.length - 1].timestamp - events[0].timestamp,
@@ -62,111 +63,107 @@ describe('replayer', function (this: ISuite) {
});
it('will start actions when play', async () => {
const actionLength = await this.page.evaluate(`
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play();
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(events.length);
expect(actionLength).toEqual(events.length);
});
it('will clean actions when pause', async () => {
const actionLength = await this.page.evaluate(`
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play();
replayer.pause();
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(0);
expect(actionLength).toEqual(0);
});
it('can play at any time offset', async () => {
const actionLength = await this.page.evaluate(`
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(1500);
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(
expect(actionLength).toEqual(
events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
);
});
it('can play a second time in the future', async () => {
const actionLength = await this.page.evaluate(`
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(500);
replayer.play(1500);
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(
expect(actionLength).toEqual(
events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
);
});
it('can play a second time to the past', async () => {
const actionLength = await this.page.evaluate(`
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(1500);
replayer.play(500);
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(
expect(actionLength).toEqual(
events.filter((e) => e.timestamp - events[0].timestamp >= 500).length,
);
});
it('can pause at any time offset', async () => {
const actionLength = await this.page.evaluate(`
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.pause(2500);
replayer['timer']['actions'].length;
`);
const currentTime = await this.page.evaluate(`
const currentTime = await page.evaluate(`
replayer.getCurrentTime();
`);
const currentState = await this.page.evaluate(`
const currentState = await page.evaluate(`
replayer['service']['state']['value'];
`);
expect(actionLength).to.equal(0);
expect(currentTime).to.equal(2500);
expect(currentState).to.equal('paused');
expect(actionLength).toEqual(0);
expect(currentTime).toEqual(2500);
expect(currentState).toEqual('paused');
});
it('can fast forward past StyleSheetRule changes on virtual elements', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(styleSheetRuleEvents)}`,
);
const actionLength = await this.page.evaluate(`
await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(1500);
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(
expect(actionLength).toEqual(
styleSheetRuleEvents.filter(
(e) => e.timestamp - styleSheetRuleEvents[0].timestamp >= 1500,
).length,
);
await assertDomSnapshot(
this.page,
page,
__filename,
'style-sheet-rule-events-play-at-1500',
);
});
it('should apply fast forwarded StyleSheetRules that where added', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(styleSheetRuleEvents)}`,
);
const result = await this.page.evaluate(`
await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
const result = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.pause(1500);
@@ -176,55 +173,43 @@ describe('replayer', function (this: ISuite) {
rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500');
`);
expect(result).to.equal(true);
expect(result).toEqual(true);
});
it('can handle removing style elements', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(stylesheetRemoveEvents)}`,
);
const actionLength = await this.page.evaluate(`
await page.evaluate(`events = ${JSON.stringify(stylesheetRemoveEvents)}`);
const actionLength = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(2500);
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(
expect(actionLength).toEqual(
stylesheetRemoveEvents.filter(
(e) => e.timestamp - stylesheetRemoveEvents[0].timestamp >= 2500,
).length,
);
await assertDomSnapshot(
this.page,
page,
__filename,
'style-sheet-remove-events-play-at-2500',
);
});
it('can fast forward past StyleSheetRule deletion on virtual elements', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(styleSheetRuleEvents)}`,
);
const actionLength = await this.page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(2500);
replayer['timer']['actions'].length;
`);
await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
await assertDomSnapshot(
this.page,
page,
__filename,
'style-sheet-rule-events-play-at-2500',
);
});
it('should delete fast forwarded StyleSheetRules that where removed', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(styleSheetRuleEvents)}`,
);
const result = await this.page.evaluate(`
await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
const result = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.pause(3000);
@@ -234,11 +219,11 @@ describe('replayer', function (this: ISuite) {
rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500');
`);
expect(result).to.equal(false);
expect(result).toEqual(false);
});
it('can stream events in live mode', async () => {
const status = await this.page.evaluate(`
const status = await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events, {
liveMode: true
@@ -246,46 +231,32 @@ describe('replayer', function (this: ISuite) {
replayer.startLive();
replayer.service.state.value;
`);
expect(status).to.equal('live');
expect(status).toEqual('live');
});
it('replays same timestamp events in correct order', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(orderingEvents)}`,
);
await this.page.evaluate(`
await page.evaluate(`events = ${JSON.stringify(orderingEvents)}`);
await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play();
`);
await this.page.waitForTimeout(50);
await page.waitForTimeout(50);
await assertDomSnapshot(
this.page,
__filename,
'ordering-events',
);
await assertDomSnapshot(page, __filename, 'ordering-events');
});
it('replays same timestamp events in correct order (with addAction)', async () => {
await this.page.evaluate(
`events = ${JSON.stringify(orderingEvents)}`,
);
await this.page.evaluate(`
await page.evaluate(`events = ${JSON.stringify(orderingEvents)}`);
await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events.slice(0, events.length-2));
replayer.play();
replayer.addEvent(events[events.length-2]);
replayer.addEvent(events[events.length-1]);
`);
await this.page.waitForTimeout(50);
await page.waitForTimeout(50);
await assertDomSnapshot(
this.page,
__filename,
'ordering-events',
);
await assertDomSnapshot(page, __filename, 'ordering-events');
});
});

34
packages/rrweb/test/utils.ts
View File

@@ -1,6 +1,4 @@
import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
import { NodeType } from 'rrweb-snapshot';
import { assert } from 'chai';
import {
EventType,
IncrementalSource,
@@ -21,24 +19,6 @@ export async function launchPuppeteer() {
});
}
export function matchSnapshot(
actual: string,
testFile: string,
testTitle: string,
) {
const snapshotState = new SnapshotState(testFile, {
updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
});
const matcher = toMatchSnapshot.bind({
snapshotState,
currentTestName: testTitle,
});
const result = matcher(actual);
snapshotState.save();
return result;
}
/**
* Puppeteer may cast random mouse move which make our tests flaky.
* So we only do snapshot test with filtered events.
@@ -137,7 +117,7 @@ function stringifyDomSnapshot(mhtml: string): string {
.rewrite() // rewrite all links
.spit(); // return all contents
const newResult: { filename: string; content: string }[] = result.map(
const newResult: Array<{ filename: string; content: string }> = result.map(
(asset: { filename: string; content: string }) => {
let { filename, content } = asset;
let res: string | undefined;
@@ -152,13 +132,8 @@ function stringifyDomSnapshot(mhtml: string): string {
return newResult.map((asset) => Object.values(asset).join('\n')).join('\n\n');
}
export function assertSnapshot(
snapshots: eventWithTime[],
filename: string,
name: string,
) {
const result = matchSnapshot(stringifySnapshots(snapshots), filename, name);
assert(result.pass, result.pass ? '' : result.report());
export function assertSnapshot(snapshots: eventWithTime[]) {
expect(stringifySnapshots(snapshots)).toMatchSnapshot();
}
export async function assertDomSnapshot(
@@ -171,8 +146,7 @@ export async function assertDomSnapshot(
format: 'mhtml',
});
const result = matchSnapshot(stringifyDomSnapshot(data), filename, name);
assert(result.pass, result.pass ? '' : result.report());
expect(stringifyDomSnapshot(data)).toMatchSnapshot();
}
const now = Date.now();

6
packages/rrweb/tsconfig.json
View File

@@ -13,9 +13,5 @@
"downlevelIteration": true
},
"exclude": ["test"],
"include": [
"src",
"test.d.ts",
"node_modules/@types/css-font-loading-module/index.d.ts"
]
"include": ["src", "node_modules/@types/css-font-loading-module/index.d.ts"]
}

1620
yarn.lock
View File

File diff suppressed because it is too large Load Diff