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": { "scripts": {
"prepare": "npm run prepack", "prepare": "npm run prepack",
"prepack": "npm run bundle && npm run typings", "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": "rollup --config",
"bundle:es-only": "cross-env ES_ONLY=true rollup --config", "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
"typings": "tsc -d --declarationDir typings", "typings": "tsc -d --declarationDir typings",
@@ -39,18 +39,18 @@
"devDependencies": { "devDependencies": {
"@rollup/plugin-typescript": "^8.2.5", "@rollup/plugin-typescript": "^8.2.5",
"@types/chai": "^4.1.4", "@types/chai": "^4.1.4",
"@types/jest": "^27.0.2",
"@types/jsdom": "^16.2.4", "@types/jsdom": "^16.2.4",
"@types/mocha": "^5.2.5",
"@types/node": "^10.11.3", "@types/node": "^10.11.3",
"@types/puppeteer": "^1.12.4", "@types/puppeteer": "^1.12.4",
"chai": "^4.1.2",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"jest": "^27.2.4",
"jest-snapshot": "^23.6.0", "jest-snapshot": "^23.6.0",
"jsdom": "^16.4.0", "jsdom": "^16.4.0",
"mocha": "^5.2.0",
"puppeteer": "^1.15.0", "puppeteer": "^1.15.0",
"rollup": "^2.45.2", "rollup": "^2.45.2",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"ts-jest": "^27.0.5",
"ts-node": "^7.0.1", "ts-node": "^7.0.1",
"tslib": "^1.9.3", "tslib": "^1.9.3",
"tslint": "^4.5.1", "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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`[html file]: about-mozilla.html 1`] = ` exports[`iframe integration tests snapshot async iframes 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`] = `
"{ "{
\\"type\\": 0, \\"type\\": 0,
\\"childNodes\\": [ \\"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, \\"type\\": 0,
\\"childNodes\\": [ \\"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'; import { parse, Rule, Media } from '../src/css';
describe('css parser', () => { describe('css parser', () => {
@@ -9,50 +7,50 @@ describe('css parser', () => {
source: 'booty.css', 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!; const position = ast.stylesheet!.rules[0].position!;
expect(position.start).to.be.ok; expect(position.start).toBeTruthy();
expect(position.end).to.be.ok; expect(position.end).toBeTruthy();
expect(position.source).to.equal('booty.css'); expect(position.source).toEqual('booty.css');
expect(position.content).to.equal(css); expect(position.content).toEqual(css);
}); });
it('should throw when a selector is missing', () => { it('should throw when a selector is missing', () => {
expect(() => { expect(() => {
parse('{size: large}'); parse('{size: large}');
}).to.throw(); }).toThrow();
expect(() => { expect(() => {
parse('b { color: red; }\n{ color: green; }\na { color: blue; }'); parse('b { color: red; }\n{ color: green; }\na { color: blue; }');
}).to.throw(); }).toThrow();
}); });
it('should throw when a broken comment is found', () => { it('should throw when a broken comment is found', () => {
expect(() => { expect(() => {
parse('thing { color: red; } /* b { color: blue; }'); parse('thing { color: red; } /* b { color: blue; }');
}).to.throw(); }).toThrow();
expect(() => { expect(() => {
parse('/*'); parse('/*');
}).to.throw(); }).toThrow();
/* Nested comments should be fine */ /* Nested comments should be fine */
expect(() => { expect(() => {
parse('/* /* */'); parse('/* /* */');
}).to.not.throw(); }).not.toThrow();
}); });
it('should allow empty property value', () => { it('should allow empty property value', () => {
expect(() => { expect(() => {
parse('p { color:; }'); parse('p { color:; }');
}).to.not.throw(); }).not.toThrow();
}); });
it('should not throw with silent option', () => { it('should not throw with silent option', () => {
expect(() => { expect(() => {
parse('thing { color: red; } /* b { color: blue; }', { silent: true }); parse('thing { color: red; } /* b { color: blue; }', { silent: true });
}).to.not.throw(); }).not.toThrow();
}); });
it('should list the parsing errors and continue parsing', () => { it('should list the parsing errors and continue parsing', () => {
@@ -65,18 +63,18 @@ describe('css parser', () => {
); );
const rules = result.stylesheet!.rules; const rules = result.stylesheet!.rules;
expect(rules.length).to.above(2); expect(rules.length).toBeGreaterThan(2);
const errors = result.stylesheet!.parsingErrors!; 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]).toHaveProperty('message');
expect(errors[0]).to.have.property('reason'); expect(errors[0]).toHaveProperty('reason');
expect(errors[0]).to.have.property('filename'); expect(errors[0]).toHaveProperty('filename');
expect(errors[0]).to.have.property('line'); expect(errors[0]).toHaveProperty('line');
expect(errors[0]).to.have.property('column'); expect(errors[0]).toHaveProperty('column');
expect(errors[0]).to.have.property('source'); expect(errors[0]).toHaveProperty('source');
expect(errors[0].filename).to.equal('foo.css'); expect(errors[0].filename).toEqual('foo.css');
}); });
it('should set parent property', () => { it('should set parent property', () => {
@@ -85,27 +83,27 @@ describe('css parser', () => {
'@media (min-width: 100px) { thing { test: value; } }', '@media (min-width: 100px) { thing { test: value; } }',
); );
expect(result.parent).to.equal(null); expect(result.parent).toEqual(null);
const rules = result.stylesheet!.rules; const rules = result.stylesheet!.rules;
expect(rules.length).to.equal(2); expect(rules.length).toEqual(2);
let rule = rules[0] as Rule; let rule = rules[0] as Rule;
expect(rule.parent).to.equal(result); expect(rule.parent).toEqual(result);
expect(rule.declarations!.length).to.equal(1); expect(rule.declarations!.length).toEqual(1);
let decl = rule.declarations![0]; let decl = rule.declarations![0];
expect(decl.parent).to.equal(rule); expect(decl.parent).toEqual(rule);
const media = rules[1] as Media; const media = rules[1] as Media;
expect(media.parent).to.equal(result); expect(media.parent).toEqual(result);
expect(media.rules!.length).to.equal(1); expect(media.rules!.length).toEqual(1);
rule = media.rules![0] as Rule; 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]; 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 path from 'path';
import * as http from 'http'; import * as http from 'http';
import * as url from 'url'; import * as url from 'url';
import 'mocha';
import * as puppeteer from 'puppeteer'; import * as puppeteer from 'puppeteer';
import * as rollup from 'rollup'; import * as rollup from 'rollup';
import typescript = require('rollup-plugin-typescript'); import * as typescript from '@rollup/plugin-typescript';
import { assert } from 'chai'; import * as assert from 'assert';
import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
import { Suite } from 'mocha'; const _typescript = (typescript as unknown) as typeof typescript.default;
const htmlFolder = path.join(__dirname, 'html'); const htmlFolder = path.join(__dirname, 'html');
const htmls = fs.readdirSync(htmlFolder).map((filePath) => { const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
@@ -23,7 +22,7 @@ interface IMimeType {
[key: string]: string; [key: string]: string;
} }
const server = () => const startServer = () =>
new Promise<http.Server>((resolve) => { new Promise<http.Server>((resolve) => {
const mimeType: IMimeType = { const mimeType: IMimeType = {
'.html': 'text/html', '.html': 'text/html',
@@ -53,49 +52,40 @@ const server = () =>
}); });
}); });
function matchSnapshot(actual: string, testFile: string, testTitle: string) { interface ISuite {
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 {
server: http.Server; server: http.Server;
browser: puppeteer.Browser; browser: puppeteer.Browser;
code: string; code: string;
} }
describe('integration tests', function (this: ISuite) { 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 () => { beforeAll(async () => {
this.server = await server(); server = await startServer();
this.browser = await puppeteer.launch({ browser = await puppeteer.launch({
// headless: false, // headless: false,
}); });
const bundle = await rollup.rollup({ const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'), 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', name: 'rrweb',
format: 'iife', format: 'iife',
}); });
this.code = code; code = _code;
}); });
after(async () => { afterAll(async () => {
await this.browser.close(); await browser.close();
await this.server.close(); await server.close();
}); });
for (const html of htmls) { for (const html of htmls) {
@@ -104,7 +94,7 @@ describe('integration tests', function (this: ISuite) {
} }
const title = '[html file]: ' + html.filePath; const title = '[html file]: ' + html.filePath;
it(title, async () => { it(title, async () => {
const page: puppeteer.Page = await this.browser.newPage(); const page: puppeteer.Page = await browser.newPage();
// console for debug // console for debug
// tslint:disable-next-line: no-console // tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text())); page.on('console', (msg) => console.log(msg.text()));
@@ -115,11 +105,21 @@ describe('integration tests', function (this: ISuite) {
waitUntil: 'load', waitUntil: 'load',
}); });
const outerCompatMode = await page.evaluate('document.compatMode'); const outerCompatMode = await page.evaluate('document.compatMode');
const innerCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode'); const innerCompatMode = await page.evaluate(
assert(outerCompatMode === 'CSS1Compat', outerCompatMode + ' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"'); '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 // 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 // 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 { } else {
// loading indirectly is improtant for relative path testing // loading indirectly is improtant for relative path testing
await page.goto(`http://localhost:3030/html`); await page.goto(`http://localhost:3030/html`);
@@ -128,7 +128,7 @@ describe('integration tests', function (this: ISuite) {
}); });
} }
const rebuildHtml = ( const rebuildHtml = (
await page.evaluate(`${this.code} await page.evaluate(`${code}
const x = new XMLSerializer(); const x = new XMLSerializer();
const [snap] = rrweb.snapshot(document); const [snap] = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]); let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
@@ -139,13 +139,12 @@ describe('integration tests', function (this: ISuite) {
out; // return out; // return
`) `)
).replace(/\n\n/g, ''); ).replace(/\n\n/g, '');
const result = matchSnapshot(rebuildHtml, __filename, title); expect(rebuildHtml).toMatchSnapshot();
assert(result.pass, result.pass ? '' : result.report()); });
}).timeout(5000);
} }
it('correctly triggers backCompat mode and rendering', async () => { 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 // console for debug
// tslint:disable-next-line: no-console // tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text())); page.on('console', (msg) => console.log(msg.text()));
@@ -154,11 +153,20 @@ describe('integration tests', function (this: ISuite) {
waitUntil: 'load', waitUntil: 'load',
}); });
const compatMode = await page.evaluate('document.compatMode'); const compatMode = await page.evaluate('document.compatMode');
assert(compatMode === 'BackCompat', compatMode + ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted'); assert(
const renderedHeight = await page.evaluate('document.querySelector("center").clientHeight'); 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 // 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`) assert(
const rebuildRenderedHeight = await page.evaluate(`${this.code} 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 [snap] = rrweb.snapshot(document);
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.setAttribute('width', document.body.clientWidth) iframe.setAttribute('width', document.body.clientWidth)
@@ -169,39 +177,53 @@ document.body.appendChild(iframe);
const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0]; const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0];
iframe.contentDocument.querySelector('center').clientHeight iframe.contentDocument.querySelector('center').clientHeight
`); `);
const rebuildCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode'); const rebuildCompatMode = await page.evaluate(
assert(rebuildCompatMode === 'BackCompat', 'rebuilt compatMode should match source compatMode, but doesn\'t: ' + rebuildCompatMode); 'document.querySelector("iframe").contentDocument.compatMode',
assert(rebuildRenderedHeight === renderedHeight, 'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})') );
}).timeout(5000); 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) { 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 () => { beforeAll(async () => {
this.server = await server(); server = await startServer();
this.browser = await puppeteer.launch({ browser = await puppeteer.launch({
// headless: false, // headless: false,
}); });
const bundle = await rollup.rollup({ const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'), 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', name: 'rrweb',
format: 'iife', format: 'iife',
}); });
this.code = code; code = _code;
}); });
after(async () => { afterAll(async () => {
await this.browser.close(); await browser.close();
await this.server.close(); await server.close();
}); });
it('snapshot async iframes', async () => { it('snapshot async iframes', async () => {
const page: puppeteer.Page = await this.browser.newPage(); const page: puppeteer.Page = await browser.newPage();
// console for debug // console for debug
// tslint:disable-next-line: no-console // tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text())); page.on('console', (msg) => console.log(msg.text()));
@@ -209,43 +231,48 @@ describe('iframe integration tests', function (this: ISuite) {
waitUntil: 'load', waitUntil: 'load',
}); });
const snapshotResult = JSON.stringify( const snapshotResult = JSON.stringify(
await page.evaluate(`${this.code}; await page.evaluate(`${code};
rrweb.snapshot(document)[0]; rrweb.snapshot(document)[0];
`), `),
null, null,
2, 2,
); );
const result = matchSnapshot(snapshotResult, __filename, this.title); expect(snapshotResult).toMatchSnapshot();
assert(result.pass, result.pass ? '' : result.report()); });
}).timeout(5000);
}); });
describe('shadow DOM integration tests', function (this: ISuite) { 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 () => { beforeAll(async () => {
this.server = await server(); server = await startServer();
this.browser = await puppeteer.launch({ browser = await puppeteer.launch({
// headless: false, // headless: false,
}); });
const bundle = await rollup.rollup({ const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'), 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', name: 'rrweb',
format: 'iife', format: 'iife',
}); });
this.code = code; code = _code;
}); });
after(async () => { afterAll(async () => {
await this.browser.close(); await browser.close();
await this.server.close(); await server.close();
}); });
it('snapshot shadow DOM', async () => { it('snapshot shadow DOM', async () => {
const page: puppeteer.Page = await this.browser.newPage(); const page: puppeteer.Page = await browser.newPage();
// console for debug // console for debug
// tslint:disable-next-line: no-console // tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text())); page.on('console', (msg) => console.log(msg.text()));
@@ -253,13 +280,12 @@ describe('shadow DOM integration tests', function (this: ISuite) {
waitUntil: 'load', waitUntil: 'load',
}); });
const snapshotResult = JSON.stringify( const snapshotResult = JSON.stringify(
await page.evaluate(`${this.code}; await page.evaluate(`${code};
rrweb.snapshot(document)[0]; rrweb.snapshot(document)[0];
`), `),
null, null,
2, 2,
); );
const result = matchSnapshot(snapshotResult, __filename, this.title); expect(snapshotResult).toMatchSnapshot();
assert(result.pass, result.pass ? '' : result.report()); });
}).timeout(5000);
}); });

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

@@ -1,67 +1,62 @@
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
import { Suite } from 'mocha';
import { expect } from 'chai';
import { addHoverClass, createCache } from '../src/rebuild'; import { addHoverClass, createCache } from '../src/rebuild';
import { BuildCache } from '../src/types';
function getDuration(hrtime: [number, number]) { function getDuration(hrtime: [number, number]) {
const [seconds, nanoseconds] = hrtime; const [seconds, nanoseconds] = hrtime;
return seconds * 1000 + nanoseconds / 1000000; return seconds * 1000 + nanoseconds / 1000000;
} }
interface ISuite extends Suite { describe('add hover class to hover selector related rules', function () {
cache: BuildCache; let cache: ReturnType<typeof createCache>;
}
describe('add hover class to hover selector related rules', function (this: ISuite) {
beforeEach(() => { beforeEach(() => {
this.cache = createCache(); cache = createCache();
}); });
it('will do nothing to css text without :hover', () => { it('will do nothing to css text without :hover', () => {
const cssText = 'body { color: white }'; 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', () => { it('can add hover class to css text', () => {
const cssText = '.a:hover { color: white }'; const cssText = '.a:hover { color: white }';
expect(addHoverClass(cssText, this.cache)).to.equal( expect(addHoverClass(cssText, cache)).toEqual(
'.a:hover, .a.\\:hover { color: white }', '.a:hover, .a.\\:hover { color: white }',
); );
}); });
it('can add hover class when there is multi selector', () => { it('can add hover class when there is multi selector', () => {
const cssText = '.a, .b:hover, .c { color: white }'; 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 }', '.a, .b:hover, .b.\\:hover, .c { color: white }',
); );
}); });
it('can add hover class when there is a multi selector with the same prefix', () => { it('can add hover class when there is a multi selector with the same prefix', () => {
const cssText = '.a:hover, .a:hover::after { color: white }'; 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 }', '.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', () => { it('can add hover class when :hover is not the end of selector', () => {
const cssText = 'div:hover::after { color: white }'; 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 }', 'div:hover::after, div.\\:hover::after { color: white }',
); );
}); });
it('can add hover class when the selector has multi :hover', () => { it('can add hover class when the selector has multi :hover', () => {
const cssText = 'a:hover b:hover { color: white }'; 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 }', 'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
); );
}); });
it('will ignore :hover in css value', () => { it('will ignore :hover in css value', () => {
const cssText = '.a::after { content: ":hover" }'; const cssText = '.a::after { content: ":hover" }';
expect(addHoverClass(cssText, this.cache)).to.equal(cssText); expect(addHoverClass(cssText, cache)).toEqual(cssText);
}); });
it('benchmark', () => { it('benchmark', () => {
@@ -70,10 +65,10 @@ describe('add hover class to hover selector related rules', function (this: ISui
'utf8', 'utf8',
); );
const start = process.hrtime(); const start = process.hrtime();
addHoverClass(cssText, this.cache); addHoverClass(cssText, cache);
const end = process.hrtime(start); const end = process.hrtime(start);
const duration = getDuration(end); 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', () => { 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(); const start = process.hrtime();
addHoverClass(cssText, this.cache); addHoverClass(cssText, cache);
const end = process.hrtime(start); const end = process.hrtime(start);
const cachedStart = process.hrtime(); const cachedStart = process.hrtime();
addHoverClass(cssText, this.cache); addHoverClass(cssText, cache);
const cachedEnd = process.hrtime(cachedStart); 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 { JSDOM } from 'jsdom';
import { expect } from 'chai';
import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot'; import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
describe('absolute url to stylesheet', () => { describe('absolute url to stylesheet', () => {
const href = 'http://localhost/css/style.css'; const href = 'http://localhost/css/style.css';
it('can handle relative path', () => { 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)`, `url(http://localhost/css/a.jpg)`,
); );
}); });
it('can handle same level path', () => { 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")`, `url("http://localhost/css/a.jpg")`,
); );
}); });
it('can handle parent level path', () => { 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")`, `url("http://localhost/a.jpg")`,
); );
}); });
it('can handle absolute path', () => { 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")`, `url("http://localhost/a.jpg")`,
); );
}); });
it('can handle external path', () => { it('can handle external path', () => {
expect( expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual(
absoluteToStylesheet('url("http://localhost/a.jpg")', href), `url("http://localhost/a.jpg")`,
).to.equal(`url("http://localhost/a.jpg")`); );
}); });
it('can handle single quote path', () => { 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')`, `url('http://localhost/css/a.jpg')`,
); );
}); });
it('can handle no quote path', () => { 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)`, `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;', 'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
href, href,
), ),
).to.equal( ).toEqual(
`background-image: url(http://localhost/css/images/b.jpg);` + `background-image: url(http://localhost/css/images/b.jpg);` +
`background: #aabbcc url(http://localhost/css/images/a.jpg) 50% 50% repeat;`, `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', () => { it('can handle data url image', () => {
expect( expect(
absoluteToStylesheet('url(data:image/gif;base64,ABC)', href), absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
).to.equal('url(data:image/gif;base64,ABC)'); ).toEqual('url(data:image/gif;base64,ABC)');
expect( expect(
absoluteToStylesheet( absoluteToStylesheet(
'url(data:application/font-woff;base64,d09GMgABAAAAAAm)', 'url(data:application/font-woff;base64,d09GMgABAAAAAAm)',
href, 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', () => { 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\")", "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, 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\")", "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( 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>\')', '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, 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>\')', '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( expect(
absoluteToStylesheet( 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, 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>")', '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', () => { 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')!; JSDOM.fragment(html).querySelector('div')!;
it('can handle empty elements', () => { it('can handle empty elements', () => {
expect(subject('<div />')).to.equal(false); expect(subject('<div />')).toEqual(false);
}); });
it('blocks prohibited className', () => { 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', () => { 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', () => { it('blocks blocked selector', () => {
expect( expect(
subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }), 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"] "lib": ["es6", "dom"]
}, },
"exclude": ["test"], "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": { "scripts": {
"prepare": "npm run prepack", "prepare": "npm run prepack",
"prepack": "npm run bundle", "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": "npm run bundle:browser && jest",
"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:headless": "npm run bundle:browser && PUPPETEER_HEADLESS=true jest",
"test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch --watch-extensions js,ts", "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", "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:browser": "cross-env BROWSER_ONLY=true rollup --config",
"bundle": "rollup --config", "bundle": "rollup --config",
@@ -44,26 +44,26 @@
"@rollup/plugin-typescript": "^8.2.5", "@rollup/plugin-typescript": "^8.2.5",
"@types/chai": "^4.1.6", "@types/chai": "^4.1.6",
"@types/inquirer": "0.0.43", "@types/inquirer": "0.0.43",
"@types/jest": "^27.0.2",
"@types/jsdom": "^16.2.12", "@types/jsdom": "^16.2.12",
"@types/mocha": "^5.2.5",
"@types/node": "^12.20.16", "@types/node": "^12.20.16",
"@types/prettier": "^2.3.2", "@types/prettier": "^2.3.2",
"@types/puppeteer": "^5.4.3", "@types/puppeteer": "^5.4.3",
"chai": "^4.2.0",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"fast-mhtml": "^1.1.9", "fast-mhtml": "^1.1.9",
"ignore-styles": "^5.0.1", "ignore-styles": "^5.0.1",
"inquirer": "^6.2.1", "inquirer": "^6.2.1",
"jest": "^27.2.4",
"jest-snapshot": "^23.6.0", "jest-snapshot": "^23.6.0",
"jsdom": "^17.0.0", "jsdom": "^17.0.0",
"jsdom-global": "^3.0.2", "jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"prettier": "2.2.1", "prettier": "2.2.1",
"puppeteer": "^9.1.1", "puppeteer": "^9.1.1",
"rollup": "^2.45.2", "rollup": "^2.45.2",
"rollup-plugin-postcss": "^3.1.1", "rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-rename-node-modules": "^1.1.0", "rollup-plugin-rename-node-modules": "^1.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"ts-jest": "^27.0.5",
"ts-node": "^7.0.1", "ts-node": "^7.0.1",
"tslib": "^1.9.3", "tslib": "^1.9.3",
"tslint": "^4.5.1", "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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ordering-events 1`] = ` exports[`replayer can fast forward past StyleSheetRule changes on virtual elements 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`] = `
"file-frame-4 "file-frame-4
<html> <html>
<head> <head>
@@ -250,8 +80,19 @@ file-cid-3
" "
`; `;
exports[`style-sheet-rule-events-play-at-2500 1`] = ` exports[`replayer can fast forward past StyleSheetRule deletion on virtual elements 1`] = `
"file-frame-4 "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> <html>
<head> <head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" /> <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> </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> <!DOCTYPE html>
<html lang=\\"en\\"> <html lang=\\"en\\">
<head> <head>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" /> <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-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> </head>
<body> <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> </body>
</html> </html>
@@ -301,29 +238,5 @@ file-cid-0
noscript { display: none !important; } noscript { display: none !important; }
html.rrweb-paused * { animation-play-state: paused !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'; iframe2.src = './html/frame1.html';
setTimeout(() => { setTimeout(() => {
document.body.appendChild(iframe2); document.body.appendChild(iframe2);
}, 10); }, 100);
</script> </script>
</html> </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 url from 'url';
import * as puppeteer from 'puppeteer'; import * as puppeteer from 'puppeteer';
import { assertSnapshot, launchPuppeteer } from './utils'; import { assertSnapshot, launchPuppeteer } from './utils';
import { Suite } from 'mocha';
import { expect } from 'chai';
import { recordOptions, eventWithTime, EventType } from '../src/types'; import { recordOptions, eventWithTime, EventType } from '../src/types';
import { visitSnapshot, NodeType } from 'rrweb-snapshot'; import { visitSnapshot, NodeType } from 'rrweb-snapshot';
interface ISuite extends Suite { interface ISuite {
server: http.Server; server: http.Server;
code: string; code: string;
browser: puppeteer.Browser; browser: puppeteer.Browser;
@@ -19,7 +17,7 @@ interface IMimeType {
[key: string]: string; [key: string]: string;
} }
const server = () => const startServer = () =>
new Promise<http.Server>((resolve) => { new Promise<http.Server>((resolve) => {
const mimeType: IMimeType = { const mimeType: IMimeType = {
'.html': 'text/html', '.html': 'text/html',
@@ -53,7 +51,7 @@ const server = () =>
}); });
describe('record integration tests', function (this: ISuite) { describe('record integration tests', function (this: ISuite) {
this.timeout(10_000); jest.setTimeout(10_000);
const getHtml = ( const getHtml = (
fileName: string, fileName: string,
@@ -65,7 +63,7 @@ describe('record integration tests', function (this: ISuite) {
'</body>', '</body>',
` `
<script> <script>
${this.code} ${code}
window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf(); window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
window.snapshots = []; window.snapshots = [];
rrweb.record({ rrweb.record({
@@ -86,9 +84,13 @@ describe('record integration tests', function (this: ISuite) {
); );
}; };
before(async () => { let server: ISuite['server'];
this.server = await server(); let code: ISuite['code'];
this.browser = await launchPuppeteer(); let browser: ISuite['browser'];
beforeAll(async () => {
server = await startServer();
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js'); const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
const pluginsCode = [ const pluginsCode = [
@@ -96,16 +98,16 @@ describe('record integration tests', function (this: ISuite) {
] ]
.map((path) => fs.readFileSync(path, 'utf8')) .map((path) => fs.readFileSync(path, 'utf8'))
.join(); .join();
this.code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode; code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
}); });
after(async () => { afterAll(async () => {
await this.browser.close(); await browser.close();
this.server.close(); server.close();
}); });
it('can record form interactions', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'form.html')); await page.setContent(getHtml.call(this, 'form.html'));
@@ -116,11 +118,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1'); await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'form'); assertSnapshot(snapshots);
}); });
it('can record childList mutations', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html')); 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'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'child-list'); assertSnapshot(snapshots);
}); });
it('can record character data muatations', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html')); 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'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'character-data'); assertSnapshot(snapshots);
}); });
it('can record attribute mutation', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html')); 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'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'attributes'); assertSnapshot(snapshots);
}); });
it('can record node mutations', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'select2.html'), { await page.setContent(getHtml.call(this, 'select2.html'), {
waitUntil: 'networkidle0', 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")', 'document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")',
); );
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'select2'); assertSnapshot(snapshots);
}); });
it('can freeze mutations', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html')); await page.setContent(getHtml.call(this, 'mutation-observer.html'));
@@ -215,22 +217,22 @@ describe('record integration tests', function (this: ISuite) {
document.body.removeChild(ul); document.body.removeChild(ul);
}); });
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'frozen'); assertSnapshot(snapshots);
}); });
it('should not record input events on ignored elements', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'ignore.html')); await page.setContent(getHtml.call(this, 'ignore.html'));
await page.type('.rr-ignore', 'secret'); await page.type('.rr-ignore', 'secret');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'ignore'); assertSnapshot(snapshots);
}); });
it('should not record input values if maskAllInputs is enabled', async () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'form.html', { maskAllInputs: true }), getHtml.call(this, 'form.html', { maskAllInputs: true }),
@@ -244,11 +246,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1'); await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots'); 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 () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'form.html', { getHtml.call(this, 'form.html', {
@@ -268,11 +270,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1'); await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'maskInputOptions'); assertSnapshot(snapshots);
}); });
it('should mask value attribute with maskInputOptions', async () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'password.html', { getHtml.call(this, 'password.html', {
@@ -285,11 +287,11 @@ describe('record integration tests', function (this: ISuite) {
await page.type('input[type="password"]', 'secr3t'); await page.type('input[type="password"]', 'secr3t');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'maskPassword'); assertSnapshot(snapshots);
}); });
it('should record input userTriggered values if userTriggeredOnInput is enabled', async () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'form.html', { userTriggeredOnInput: true }), getHtml.call(this, 'form.html', { userTriggeredOnInput: true }),
@@ -303,11 +305,11 @@ describe('record integration tests', function (this: ISuite) {
await page.select('select', '1'); await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'userTriggered'); assertSnapshot(snapshots);
}); });
it('should not record blocked elements and its child nodes', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'block.html')); await page.setContent(getHtml.call(this, 'block.html'));
@@ -316,11 +318,11 @@ describe('record integration tests', function (this: ISuite) {
await page.click('#text'); await page.click('#text');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'block'); assertSnapshot(snapshots);
}); });
it('should not record blocked elements dynamically added', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'block.html')); 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'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'block 2'); assertSnapshot(snapshots);
}); });
it('should record DOM node movement 1', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'move-node.html')); await page.setContent(getHtml.call(this, 'move-node.html'));
@@ -354,11 +356,11 @@ describe('record integration tests', function (this: ISuite) {
div.appendChild(span); div.appendChild(span);
}); });
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'move-node-1'); assertSnapshot(snapshots);
}); });
it('should record DOM node movement 2', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'move-node.html')); await page.setContent(getHtml.call(this, 'move-node.html'));
@@ -369,20 +371,20 @@ describe('record integration tests', function (this: ISuite) {
div.appendChild(span); div.appendChild(span);
}); });
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'move-node-2'); assertSnapshot(snapshots);
}); });
it('should record dynamic CSS changes', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'react-styled-components.html')); await page.setContent(getHtml.call(this, 'react-styled-components.html'));
await page.click('.toggle'); await page.click('.toggle');
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'react-styled-components'); assertSnapshot(snapshots);
}); });
it('should record canvas mutations', async () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'canvas.html', { 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 () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html')); 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'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'serialize-before-record'); assertSnapshot(snapshots);
}); });
it('will defer missing next node mutation', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'shuffle.html')); await page.setContent(getHtml.call(this, 'shuffle.html'));
@@ -441,11 +443,11 @@ describe('record integration tests', function (this: ISuite) {
return parent.innerText; 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 () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'log.html', { getHtml.call(this, 'log.html', {
@@ -454,7 +456,7 @@ describe('record integration tests', function (this: ISuite) {
); );
await page.evaluate(() => { await page.evaluate(() => {
console.assert(0 == 0, 'assert'); console.assert(0 === 0, 'assert');
console.count('count'); console.count('count');
console.countReset('count'); console.countReset('count');
console.debug('debug'); console.debug('debug');
@@ -479,23 +481,22 @@ describe('record integration tests', function (this: ISuite) {
console.log('from iframe'); console.log('from iframe');
}); });
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'log'); assertSnapshot(snapshots);
}); });
it('should nest record iframe', async () => { 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.goto(`http://localhost:3030/html`);
await page.setContent(getHtml.call(this, 'main.html')); await page.setContent(getHtml.call(this, 'main.html'));
await page.waitForTimeout(500); await page.waitForTimeout(500);
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'iframe'); assertSnapshot(snapshots);
}); });
it('should record shadow DOM', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'shadow-dom.html')); await page.setContent(getHtml.call(this, 'shadow-dom.html'));
@@ -528,11 +529,11 @@ describe('record integration tests', function (this: ISuite) {
await page.waitForTimeout(50); await page.waitForTimeout(50);
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'shadow-dom'); assertSnapshot(snapshots);
}); });
it('should mask texts', async () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'mask-text.html', { getHtml.call(this, 'mask-text.html', {
@@ -541,11 +542,11 @@ describe('record integration tests', function (this: ISuite) {
); );
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-text'); assertSnapshot(snapshots);
}); });
it('should mask texts using maskTextFn', async () => { 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.goto('about:blank');
await page.setContent( await page.setContent(
getHtml.call(this, 'mask-text.html', { getHtml.call(this, 'mask-text.html', {
@@ -555,11 +556,11 @@ describe('record integration tests', function (this: ISuite) {
); );
const snapshots = await page.evaluate('window.snapshots'); const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-text-fn'); assertSnapshot(snapshots);
}); });
it('can mask character data mutations', async () => { 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.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html')); 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'); 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 { discardPriorSnapshots } from '../src/replay/machine';
import { sampleEvents } from './utils'; import { sampleEvents } from './utils';
import { EventType } from '../src/types'; import { EventType } from '../src/types';
@@ -17,7 +16,7 @@ const nextNextEvents = nextEvents.map((e) => ({
describe('get last session', () => { describe('get last session', () => {
it('will return all the events when there is only one 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', () => { it('will return last session when there is more than one in the events', () => {
@@ -27,7 +26,7 @@ describe('get last session', () => {
multiple, multiple,
nextNextEvents[nextNextEvents.length - 1].timestamp, nextNextEvents[nextNextEvents.length - 1].timestamp,
), ),
).to.deep.equal(nextNextEvents); ).toEqual(nextNextEvents);
}); });
it('will return last session when baseline time is future time', () => { it('will return last session when baseline time is future time', () => {
@@ -37,11 +36,11 @@ describe('get last session', () => {
multiple, multiple,
nextNextEvents[nextNextEvents.length - 1].timestamp + 1000, nextNextEvents[nextNextEvents.length - 1].timestamp + 1000,
), ),
).to.deep.equal(nextNextEvents); ).toEqual(nextNextEvents);
}); });
it('will return all sessions when baseline time is prior time', () => { 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, 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 { pack, unpack } from '../src/packer';
import { eventWithTime, EventType } from '../src/types'; import { eventWithTime, EventType } from '../src/types';
import { MARK } from '../src/packer/base'; import { MARK } from '../src/packer/base';
@@ -13,30 +11,29 @@ const event: eventWithTime = {
describe('pack', () => { describe('pack', () => {
it('can pack event', () => { it('can pack event', () => {
const packedData = pack(event); const packedData = pack(event);
const result = matchSnapshot(packedData, __filename, 'pack'); expect(packedData).toMatchSnapshot();
expect(result.pass).to.true;
}); });
}); });
describe('unpack', () => { describe('unpack', () => {
it('is compatible with unpacked data 1', () => { it('is compatible with unpacked data 1', () => {
const result = unpack((event as unknown) as string); 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', () => { it('is compatible with unpacked data 2', () => {
const result = unpack(JSON.stringify(event)); const result = unpack(JSON.stringify(event));
expect(result).to.deep.equal(event); expect(result).toEqual(event);
}); });
it('stop on unknown data format', () => { it('stop on unknown data format', () => {
expect(() => unpack('[""]')).to.throw(''); expect(() => unpack('[""]')).toThrow('');
}); });
it('can unpack packed data', () => { it('can unpack packed data', () => {
const packedData = pack(event); const packedData = pack(event);
const result = unpack(packedData); const result = unpack(packedData);
expect(result).to.deep.equal({ expect(result).toEqual({
...event, ...event,
v: MARK, v: MARK,
}); });

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

@@ -3,7 +3,6 @@
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
import * as puppeteer from 'puppeteer'; import * as puppeteer from 'puppeteer';
import { expect } from 'chai';
import { import {
recordOptions, recordOptions,
listenerHandler, listenerHandler,
@@ -13,9 +12,8 @@ import {
styleSheetRuleData, styleSheetRuleData,
} from '../src/types'; } from '../src/types';
import { assertSnapshot, launchPuppeteer } from './utils'; import { assertSnapshot, launchPuppeteer } from './utils';
import { Suite } from 'mocha';
interface ISuite extends Suite { interface ISuite {
code: string; code: string;
browser: puppeteer.Browser; browser: puppeteer.Browser;
page: puppeteer.Page; page: puppeteer.Page;
@@ -32,44 +30,47 @@ interface IWindow extends Window {
emit: (e: eventWithTime) => undefined; emit: (e: eventWithTime) => undefined;
} }
const setup = async function (this: ISuite, content: string) { const setup = function (this: ISuite, content: string): ISuite {
before(async () => { const ctx = {} as ISuite;
this.browser = await launchPuppeteer();
beforeAll(async () => {
ctx.browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js'); const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
this.code = fs.readFileSync(bundlePath, 'utf8'); ctx.code = fs.readFileSync(bundlePath, 'utf8');
}); });
beforeEach(async () => { beforeEach(async () => {
const page: puppeteer.Page = await this.browser.newPage(); ctx.page = await ctx.browser.newPage();
await page.goto('about:blank'); await ctx.page.goto('about:blank');
await page.setContent(content); await ctx.page.setContent(content);
await page.evaluate(this.code); await ctx.page.evaluate(ctx.code);
this.page = page; ctx.events = [];
this.events = []; await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
await this.page.exposeFunction('emit', (e: eventWithTime) => {
if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) { if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
return; 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 () => { afterEach(async () => {
await this.page.close(); await ctx.page.close();
}); });
after(async () => { afterAll(async () => {
await this.browser.close(); await ctx.browser.close();
}); });
return ctx;
}; };
describe('record', function (this: ISuite) { describe('record', function (this: ISuite) {
this.timeout(10_000); jest.setTimeout(10_000);
setup.call( const ctx: ISuite = setup.call(
this, this,
` `
<!DOCTYPE html> <!DOCTYPE html>
@@ -82,7 +83,7 @@ describe('record', function (this: ISuite) {
); );
it('will only have one full snapshot without checkout config', async () => { 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; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
emit: ((window as unknown) as IWindow).emit, emit: ((window as unknown) as IWindow).emit,
@@ -90,24 +91,23 @@ describe('record', function (this: ISuite) {
}); });
let count = 30; let count = 30;
while (count--) { while (count--) {
await this.page.type('input', 'a'); await ctx.page.type('input', 'a');
} }
await this.page.waitForTimeout(10); await ctx.page.waitForTimeout(10);
expect(this.events.length).to.equal(33); expect(ctx.events.length).toEqual(33);
expect( expect(
this.events.filter( ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
(event: eventWithTime) => event.type === EventType.Meta, .length,
).length, ).toEqual(1);
).to.equal(1);
expect( expect(
this.events.filter( ctx.events.filter(
(event: eventWithTime) => event.type === EventType.FullSnapshot, (event: eventWithTime) => event.type === EventType.FullSnapshot,
).length, ).length,
).to.equal(1); ).toEqual(1);
}); });
it('can checkout full snapshot by count', async () => { it('can checkout full snapshot by count', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
emit: ((window as unknown) as IWindow).emit, emit: ((window as unknown) as IWindow).emit,
@@ -116,28 +116,27 @@ describe('record', function (this: ISuite) {
}); });
let count = 30; let count = 30;
while (count--) { while (count--) {
await this.page.type('input', 'a'); await ctx.page.type('input', 'a');
} }
await this.page.waitForTimeout(10); await ctx.page.waitForTimeout(10);
expect(this.events.length).to.equal(39); expect(ctx.events.length).toEqual(39);
expect( expect(
this.events.filter( ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
(event: eventWithTime) => event.type === EventType.Meta, .length,
).length, ).toEqual(4);
).to.equal(4);
expect( expect(
this.events.filter( ctx.events.filter(
(event: eventWithTime) => event.type === EventType.FullSnapshot, (event: eventWithTime) => event.type === EventType.FullSnapshot,
).length, ).length,
).to.equal(4); ).toEqual(4);
expect(this.events[1].type).to.equal(EventType.FullSnapshot); expect(ctx.events[1].type).toEqual(EventType.FullSnapshot);
expect(this.events[13].type).to.equal(EventType.FullSnapshot); expect(ctx.events[13].type).toEqual(EventType.FullSnapshot);
expect(this.events[25].type).to.equal(EventType.FullSnapshot); expect(ctx.events[25].type).toEqual(EventType.FullSnapshot);
expect(this.events[37].type).to.equal(EventType.FullSnapshot); expect(ctx.events[37].type).toEqual(EventType.FullSnapshot);
}); });
it('can checkout full snapshot by time', async () => { it('can checkout full snapshot by time', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
emit: ((window as unknown) as IWindow).emit, emit: ((window as unknown) as IWindow).emit,
@@ -146,30 +145,29 @@ describe('record', function (this: ISuite) {
}); });
let count = 30; let count = 30;
while (count--) { while (count--) {
await this.page.type('input', 'a'); await ctx.page.type('input', 'a');
} }
await this.page.waitForTimeout(300); await ctx.page.waitForTimeout(300);
expect(this.events.length).to.equal(33); // before first automatic snapshot expect(ctx.events.length).toEqual(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 ctx.page.waitForTimeout(200); // could be 33 or 35 events by now depending on speed of test env
await this.page.type('input', 'a'); await ctx.page.type('input', 'a');
await this.page.waitForTimeout(10); await ctx.page.waitForTimeout(10);
expect(this.events.length).to.equal(36); // additionally includes the 2 checkout events expect(ctx.events.length).toEqual(36); // additionally includes the 2 checkout events
expect( expect(
this.events.filter( ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
(event: eventWithTime) => event.type === EventType.Meta, .length,
).length, ).toEqual(2);
).to.equal(2);
expect( expect(
this.events.filter( ctx.events.filter(
(event: eventWithTime) => event.type === EventType.FullSnapshot, (event: eventWithTime) => event.type === EventType.FullSnapshot,
).length, ).length,
).to.equal(2); ).toEqual(2);
expect(this.events[1].type).to.equal(EventType.FullSnapshot); expect(ctx.events[1].type).toEqual(EventType.FullSnapshot);
expect(this.events[35].type).to.equal(EventType.FullSnapshot); expect(ctx.events[35].type).toEqual(EventType.FullSnapshot);
}); });
it('is safe to checkout during async callbacks', async () => { 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; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
emit: ((window as unknown) as IWindow).emit, emit: ((window as unknown) as IWindow).emit,
@@ -190,12 +188,12 @@ describe('record', function (this: ISuite) {
document.body.appendChild(span); document.body.appendChild(span);
}, 10); }, 10);
}); });
await this.page.waitForTimeout(100); await ctx.page.waitForTimeout(100);
assertSnapshot(this.events, __filename, 'async-checkout'); assertSnapshot(ctx.events);
}); });
it('can add custom event', async () => { it('can add custom event', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb; const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb;
record({ record({
emit: ((window as unknown) as IWindow).emit, emit: ((window as unknown) as IWindow).emit,
@@ -205,12 +203,12 @@ describe('record', function (this: ISuite) {
a: 'b', a: 'b',
}); });
}); });
await this.page.waitForTimeout(50); await ctx.page.waitForTimeout(50);
assertSnapshot(this.events, __filename, 'custom-event'); assertSnapshot(ctx.events);
}); });
it('captures stylesheet rules', async () => { it('captures stylesheet rules', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
@@ -236,8 +234,8 @@ describe('record', function (this: ISuite) {
styleSheet.insertRule('body { color: #ccc; }'); styleSheet.insertRule('body { color: #ccc; }');
}, 10); }, 10);
}); });
await this.page.waitForTimeout(50); await ctx.page.waitForTimeout(50);
const styleSheetRuleEvents = this.events.filter( const styleSheetRuleEvents = ctx.events.filter(
(e) => (e) =>
e.type === EventType.IncrementalSnapshot && e.type === EventType.IncrementalSnapshot &&
e.data.source === IncrementalSource.StyleSheetRule, e.data.source === IncrementalSource.StyleSheetRule,
@@ -249,14 +247,18 @@ describe('record', function (this: ISuite) {
Boolean((e.data as styleSheetRuleData).removes), Boolean((e.data as styleSheetRuleData).removes),
).length; ).length;
// pre-serialization insert/delete should be ignored // pre-serialization insert/delete should be ignored
expect(addRules.length).to.equal(2); expect(addRules.length).toEqual(2);
expect((addRules[0].data as styleSheetRuleData).adds).to.deep.include({rule: "body { color: #fff; }"}); expect((addRules[0].data as styleSheetRuleData).adds).toEqual([
expect(removeRuleCount).to.equal(1); {
assertSnapshot(this.events, __filename, 'stylesheet-rules'); rule: 'body { color: #fff; }',
},
]);
expect(removeRuleCount).toEqual(1);
assertSnapshot(ctx.events);
}); });
const captureNestedStylesheetRulesTest = async () => { const captureNestedStylesheetRulesTest = async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
@@ -283,8 +285,8 @@ describe('record', function (this: ISuite) {
atMediaRule.insertRule('body { color: #ccc; }', 0); atMediaRule.insertRule('body { color: #ccc; }', 0);
}, 10); }, 10);
}); });
await this.page.waitForTimeout(50); await ctx.page.waitForTimeout(50);
const styleSheetRuleEvents = this.events.filter( const styleSheetRuleEvents = ctx.events.filter(
(e) => (e) =>
e.type === EventType.IncrementalSnapshot && e.type === EventType.IncrementalSnapshot &&
e.data.source === IncrementalSource.StyleSheetRule, e.data.source === IncrementalSource.StyleSheetRule,
@@ -296,9 +298,9 @@ describe('record', function (this: ISuite) {
Boolean((e.data as styleSheetRuleData).removes), Boolean((e.data as styleSheetRuleData).removes),
).length; ).length;
// sync insert/delete should be ignored // sync insert/delete should be ignored
expect(addRuleCount).to.equal(2); expect(addRuleCount).toEqual(2);
expect(removeRuleCount).to.equal(1); expect(removeRuleCount).toEqual(1);
assertSnapshot(this.events, __filename, 'nested-stylesheet-rules'); assertSnapshot(ctx.events);
}; };
it('captures nested stylesheet rules', captureNestedStylesheetRulesTest); 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 // Safari currently doesn't support CSSGroupingRule, let's test without that
// https://caniuse.com/?search=CSSGroupingRule // https://caniuse.com/?search=CSSGroupingRule
beforeEach(async () => { beforeEach(async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
/* @ts-ignore: override CSSGroupingRule */ /* @ts-ignore: override CSSGroupingRule */
CSSGroupingRule = undefined; CSSGroupingRule = undefined;
}); });
// load a fresh rrweb recorder without CSSGroupingRule // 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 nested stylesheet rules', captureNestedStylesheetRulesTest);
}); });
it('captures style property changes', async () => { it('captures style property changes', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
@@ -330,21 +332,24 @@ describe('record', function (this: ISuite) {
const styleSheet = <CSSStyleSheet>styleElement.sheet; const styleSheet = <CSSStyleSheet>styleElement.sheet;
styleSheet.insertRule('body { background: #000; }'); styleSheet.insertRule('body { background: #000; }');
setTimeout(() => { setTimeout(() => {
(styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green'); (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
(styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty('background'); 'color',
'green',
);
(styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty(
'background',
);
}, 0); }, 0);
}); });
await this.page.waitForTimeout(50); await ctx.page.waitForTimeout(50);
assertSnapshot(this.events, __filename, 'stylesheet-properties'); assertSnapshot(ctx.events);
}); });
}); });
describe('record iframes', function (this: ISuite) { describe('record iframes', function (this: ISuite) {
this.timeout(10_000); jest.setTimeout(10_000);
setup.call( const ctx: ISuite = setup.call(
this, this,
` `
<!DOCTYPE html> <!DOCTYPE html>
@@ -357,31 +362,31 @@ describe('record iframes', function (this: ISuite) {
); );
it('captures iframe content in correct order', async () => { it('captures iframe content in correct order', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
emit: ((window as unknown) as IWindow).emit, emit: ((window as unknown) as IWindow).emit,
}); });
}); });
await this.page.waitForTimeout(10); await ctx.page.waitForTimeout(10);
// console.log(JSON.stringify(this.events)); // console.log(JSON.stringify(ctx.events));
expect(this.events.length).to.equal(3); expect(ctx.events.length).toEqual(3);
const eventTypes = this.events const eventTypes = ctx.events
.filter( .filter(
(e) => (e) =>
e.type === EventType.IncrementalSnapshot || e.type === EventType.IncrementalSnapshot ||
e.type === EventType.FullSnapshot, e.type === EventType.FullSnapshot,
) )
.map((e) => e.type); .map((e) => e.type);
expect(eventTypes).to.have.ordered.members([ expect(eventTypes).toEqual([
EventType.FullSnapshot, EventType.FullSnapshot,
EventType.IncrementalSnapshot, EventType.IncrementalSnapshot,
]); ]);
}); });
it('captures stylesheet mutations in iframes', async () => { it('captures stylesheet mutations in iframes', async () => {
await this.page.evaluate(() => { await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb; const { record } = ((window as unknown) as IWindow).rrweb;
record({ record({
// need to reference window.top for when we are in an iframe! // 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'); const iframe = document.querySelector('iframe');
// outer timeout is needed to wait for initStyleSheetObserver on iframe to be set up // outer timeout is needed to wait for initStyleSheetObserver on iframe to be set up
setTimeout(() => { setTimeout(() => {
const idoc = (iframe as HTMLIFrameElement).contentDocument!; const idoc = (iframe as HTMLIFrameElement).contentDocument!;
const styleElement = idoc.createElement('style'); const styleElement = idoc.createElement('style');
@@ -400,8 +404,11 @@ describe('record iframes', function (this: ISuite) {
const styleSheet = <CSSStyleSheet>styleElement.sheet; const styleSheet = <CSSStyleSheet>styleElement.sheet;
styleSheet.insertRule('@media {}'); styleSheet.insertRule('@media {}');
const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule; const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule;
const atRuleIdx0 = atMediaRule.insertRule('body { background: #000; }', 0); const atRuleIdx0 = atMediaRule.insertRule(
const ruleIdx0 = styleSheet.insertRule('body { background: #000; }'); // inserted before above 'body { background: #000; }',
0,
);
const ruleIdx0 = styleSheet.insertRule('body { background: #000; }'); // inserted before above
// pre-serialization insert/delete above should be ignored // pre-serialization insert/delete above should be ignored
setTimeout(() => { setTimeout(() => {
styleSheet.insertRule('body { color: #fff; }'); styleSheet.insertRule('body { color: #fff; }');
@@ -409,19 +416,22 @@ describe('record iframes', function (this: ISuite) {
}, 0); }, 0);
setTimeout(() => { setTimeout(() => {
styleSheet.deleteRule(ruleIdx0); styleSheet.deleteRule(ruleIdx0);
(styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green'); (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
'color',
'green',
);
}, 5); }, 5);
setTimeout(() =>{ setTimeout(() => {
atMediaRule.deleteRule(atRuleIdx0); atMediaRule.deleteRule(atRuleIdx0);
}, 10); }, 10);
}, 10); }, 10);
}); });
await this.page.waitForTimeout(50); await ctx.page.waitForTimeout(50);
const styleRelatedEvents = this.events.filter( const styleRelatedEvents = ctx.events.filter(
(e) => (e) =>
e.type === EventType.IncrementalSnapshot && e.type === EventType.IncrementalSnapshot &&
(e.data.source === IncrementalSource.StyleSheetRule || (e.data.source === IncrementalSource.StyleSheetRule ||
e.data.source === IncrementalSource.StyleDeclaration), e.data.source === IncrementalSource.StyleDeclaration),
); );
const addRuleCount = styleRelatedEvents.filter((e) => const addRuleCount = styleRelatedEvents.filter((e) =>
Boolean((e.data as styleSheetRuleData).adds), Boolean((e.data as styleSheetRuleData).adds),
@@ -429,10 +439,9 @@ describe('record iframes', function (this: ISuite) {
const removeRuleCount = styleRelatedEvents.filter((e) => const removeRuleCount = styleRelatedEvents.filter((e) =>
Boolean((e.data as styleSheetRuleData).removes), Boolean((e.data as styleSheetRuleData).removes),
).length; ).length;
expect(styleRelatedEvents.length).to.equal(5); expect(styleRelatedEvents.length).toEqual(5);
expect(addRuleCount).to.equal(2); expect(addRuleCount).toEqual(2);
expect(removeRuleCount).to.equal(2); expect(removeRuleCount).toEqual(2);
assertSnapshot(this.events, __filename, 'iframe-stylesheet-mutations'); 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 { JSDOM } from 'jsdom';
import { import {
applyVirtualStyleRulesToNode, applyVirtualStyleRulesToNode,
@@ -21,8 +20,8 @@ describe('virtual styles', () => {
]; ];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl); applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(1); expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText); expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
}); });
it('should insert rule at index 0 and keep exsisting rules', () => { it('should insert rule at index 0 and keep exsisting rules', () => {
@@ -40,8 +39,8 @@ describe('virtual styles', () => {
]; ];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl); applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(3); expect(styleEl.sheet?.cssRules?.length).toEqual(3);
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText); expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
}); });
it('should delete rule at index 0', () => { it('should delete rule at index 0', () => {
@@ -58,10 +57,8 @@ describe('virtual styles', () => {
]; ];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl); applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(1); expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).to.equal( expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
'div {color: black;}',
);
}); });
it('should restore a snapshot by inserting missing rules', () => { it('should restore a snapshot by inserting missing rules', () => {
@@ -82,7 +79,7 @@ describe('virtual styles', () => {
]; ];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl); 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', () => { it('should restore a snapshot by fixing order of rules', () => {
@@ -104,10 +101,10 @@ describe('virtual styles', () => {
]; ];
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl); applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
expect(styleEl.sheet?.cssRules?.length).to.equal(2); expect(styleEl.sheet?.cssRules?.length).toEqual(2);
expect( expect(
Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText), Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
).to.have.ordered.members(cssTexts); ).toEqual(cssTexts);
}); });
// JSDOM/CSSOM is currently broken for this test // JSDOM/CSSOM is currently broken for this test
@@ -135,10 +132,10 @@ describe('virtual styles', () => {
expect( expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length, (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).to.equal(3); ).toEqual(3);
expect( expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText, (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).to.equal(cssText); ).toEqual(cssText);
}); });
it('should delete rule at index [0,1]', () => { it('should delete rule at index [0,1]', () => {
@@ -159,10 +156,10 @@ describe('virtual styles', () => {
expect( expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length, (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).to.equal(1); ).toEqual(1);
expect( expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText, (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 fs from 'fs';
import * as path from 'path'; import * as path from 'path';
import * as puppeteer from 'puppeteer'; import * as puppeteer from 'puppeteer';
import { expect } from 'chai';
import { Suite } from 'mocha';
import { import {
assertDomSnapshot, assertDomSnapshot,
launchPuppeteer, launchPuppeteer,
@@ -14,47 +12,50 @@ import {
import styleSheetRuleEvents from './events/style-sheet-rule-events'; import styleSheetRuleEvents from './events/style-sheet-rule-events';
import orderingEvents from './events/ordering'; import orderingEvents from './events/ordering';
interface ISuite extends Suite { interface ISuite {
code: string; code: string;
browser: puppeteer.Browser; browser: puppeteer.Browser;
page: puppeteer.Page; page: puppeteer.Page;
} }
describe('replayer', function (this: ISuite) { describe('replayer', function () {
this.timeout(10_000); jest.setTimeout(10_000);
before(async () => { let code: ISuite['code'];
this.browser = await launchPuppeteer(); let browser: ISuite['browser'];
let page: ISuite['page'];
beforeAll(async () => {
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js'); const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
this.code = fs.readFileSync(bundlePath, 'utf8'); code = fs.readFileSync(bundlePath, 'utf8');
}); });
beforeEach(async () => { beforeEach(async () => {
const page: puppeteer.Page = await this.browser.newPage(); page = await browser.newPage();
await page.goto('about:blank'); await page.goto('about:blank');
await page.evaluate(this.code); await page.evaluate(code);
await page.evaluate(`let events = ${JSON.stringify(events)}`); await page.evaluate(`let events = ${JSON.stringify(events)}`);
this.page = page;
page.on('console', (msg) => console.log('PAGE LOG:', msg.text())); page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
}); });
afterEach(async () => { afterEach(async () => {
await this.page.close(); await page.close();
}); });
after(async () => { afterAll(async () => {
await this.browser.close(); await browser.close();
}); });
it('can get meta data', async () => { it('can get meta data', async () => {
const meta = await this.page.evaluate(` const meta = await page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.getMetaData(); replayer.getMetaData();
`); `);
expect(meta).to.deep.equal({ expect(meta).toEqual({
startTime: events[0].timestamp, startTime: events[0].timestamp,
endTime: events[events.length - 1].timestamp, endTime: events[events.length - 1].timestamp,
totalTime: events[events.length - 1].timestamp - events[0].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 () => { it('will start actions when play', async () => {
const actionLength = await this.page.evaluate(` const actionLength = await page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(); replayer.play();
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal(events.length); expect(actionLength).toEqual(events.length);
}); });
it('will clean actions when pause', async () => { it('will clean actions when pause', async () => {
const actionLength = await this.page.evaluate(` const actionLength = await page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(); replayer.play();
replayer.pause(); replayer.pause();
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal(0); expect(actionLength).toEqual(0);
}); });
it('can play at any time offset', async () => { it('can play at any time offset', async () => {
const actionLength = await this.page.evaluate(` const actionLength = await page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(1500); replayer.play(1500);
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal( expect(actionLength).toEqual(
events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length, events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
); );
}); });
it('can play a second time in the future', async () => { 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 } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(500); replayer.play(500);
replayer.play(1500); replayer.play(1500);
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal( expect(actionLength).toEqual(
events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length, events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
); );
}); });
it('can play a second time to the past', async () => { 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 } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(1500); replayer.play(1500);
replayer.play(500); replayer.play(500);
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal( expect(actionLength).toEqual(
events.filter((e) => e.timestamp - events[0].timestamp >= 500).length, events.filter((e) => e.timestamp - events[0].timestamp >= 500).length,
); );
}); });
it('can pause at any time offset', async () => { it('can pause at any time offset', async () => {
const actionLength = await this.page.evaluate(` const actionLength = await page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.pause(2500); replayer.pause(2500);
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
const currentTime = await this.page.evaluate(` const currentTime = await page.evaluate(`
replayer.getCurrentTime(); replayer.getCurrentTime();
`); `);
const currentState = await this.page.evaluate(` const currentState = await page.evaluate(`
replayer['service']['state']['value']; replayer['service']['state']['value'];
`); `);
expect(actionLength).to.equal(0); expect(actionLength).toEqual(0);
expect(currentTime).to.equal(2500); expect(currentTime).toEqual(2500);
expect(currentState).to.equal('paused'); expect(currentState).toEqual('paused');
}); });
it('can fast forward past StyleSheetRule changes on virtual elements', async () => { it('can fast forward past StyleSheetRule changes on virtual elements', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
`events = ${JSON.stringify(styleSheetRuleEvents)}`, const actionLength = await page.evaluate(`
);
const actionLength = await this.page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(1500); replayer.play(1500);
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal( expect(actionLength).toEqual(
styleSheetRuleEvents.filter( styleSheetRuleEvents.filter(
(e) => e.timestamp - styleSheetRuleEvents[0].timestamp >= 1500, (e) => e.timestamp - styleSheetRuleEvents[0].timestamp >= 1500,
).length, ).length,
); );
await assertDomSnapshot( await assertDomSnapshot(
this.page, page,
__filename, __filename,
'style-sheet-rule-events-play-at-1500', 'style-sheet-rule-events-play-at-1500',
); );
}); });
it('should apply fast forwarded StyleSheetRules that where added', async () => { it('should apply fast forwarded StyleSheetRules that where added', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
`events = ${JSON.stringify(styleSheetRuleEvents)}`, const result = await page.evaluate(`
);
const result = await this.page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.pause(1500); replayer.pause(1500);
@@ -176,55 +173,43 @@ describe('replayer', function (this: ISuite) {
rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500'); 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 () => { it('can handle removing style elements', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(stylesheetRemoveEvents)}`);
`events = ${JSON.stringify(stylesheetRemoveEvents)}`, const actionLength = await page.evaluate(`
);
const actionLength = await this.page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(2500); replayer.play(2500);
replayer['timer']['actions'].length; replayer['timer']['actions'].length;
`); `);
expect(actionLength).to.equal( expect(actionLength).toEqual(
stylesheetRemoveEvents.filter( stylesheetRemoveEvents.filter(
(e) => e.timestamp - stylesheetRemoveEvents[0].timestamp >= 2500, (e) => e.timestamp - stylesheetRemoveEvents[0].timestamp >= 2500,
).length, ).length,
); );
await assertDomSnapshot( await assertDomSnapshot(
this.page, page,
__filename, __filename,
'style-sheet-remove-events-play-at-2500', 'style-sheet-remove-events-play-at-2500',
); );
}); });
it('can fast forward past StyleSheetRule deletion on virtual elements', async () => { it('can fast forward past StyleSheetRule deletion on virtual elements', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
`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 assertDomSnapshot( await assertDomSnapshot(
this.page, page,
__filename, __filename,
'style-sheet-rule-events-play-at-2500', 'style-sheet-rule-events-play-at-2500',
); );
}); });
it('should delete fast forwarded StyleSheetRules that where removed', async () => { it('should delete fast forwarded StyleSheetRules that where removed', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
`events = ${JSON.stringify(styleSheetRuleEvents)}`, const result = await page.evaluate(`
);
const result = await this.page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.pause(3000); replayer.pause(3000);
@@ -234,11 +219,11 @@ describe('replayer', function (this: ISuite) {
rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500'); 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 () => { it('can stream events in live mode', async () => {
const status = await this.page.evaluate(` const status = await page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events, { const replayer = new Replayer(events, {
liveMode: true liveMode: true
@@ -246,46 +231,32 @@ describe('replayer', function (this: ISuite) {
replayer.startLive(); replayer.startLive();
replayer.service.state.value; replayer.service.state.value;
`); `);
expect(status).to.equal('live'); expect(status).toEqual('live');
}); });
it('replays same timestamp events in correct order', async () => { it('replays same timestamp events in correct order', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(orderingEvents)}`);
`events = ${JSON.stringify(orderingEvents)}`, await page.evaluate(`
);
await this.page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events); const replayer = new Replayer(events);
replayer.play(); replayer.play();
`); `);
await this.page.waitForTimeout(50); await page.waitForTimeout(50);
await assertDomSnapshot( await assertDomSnapshot(page, __filename, 'ordering-events');
this.page,
__filename,
'ordering-events',
);
}); });
it('replays same timestamp events in correct order (with addAction)', async () => { it('replays same timestamp events in correct order (with addAction)', async () => {
await this.page.evaluate( await page.evaluate(`events = ${JSON.stringify(orderingEvents)}`);
`events = ${JSON.stringify(orderingEvents)}`, await page.evaluate(`
);
await this.page.evaluate(`
const { Replayer } = rrweb; const { Replayer } = rrweb;
const replayer = new Replayer(events.slice(0, events.length-2)); const replayer = new Replayer(events.slice(0, events.length-2));
replayer.play(); replayer.play();
replayer.addEvent(events[events.length-2]); replayer.addEvent(events[events.length-2]);
replayer.addEvent(events[events.length-1]); replayer.addEvent(events[events.length-1]);
`); `);
await this.page.waitForTimeout(50); await page.waitForTimeout(50);
await assertDomSnapshot( await assertDomSnapshot(page, __filename, 'ordering-events');
this.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 { NodeType } from 'rrweb-snapshot';
import { assert } from 'chai';
import { import {
EventType, EventType,
IncrementalSource, 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. * Puppeteer may cast random mouse move which make our tests flaky.
* So we only do snapshot test with filtered events. * So we only do snapshot test with filtered events.
@@ -137,7 +117,7 @@ function stringifyDomSnapshot(mhtml: string): string {
.rewrite() // rewrite all links .rewrite() // rewrite all links
.spit(); // return all contents .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 }) => { (asset: { filename: string; content: string }) => {
let { filename, content } = asset; let { filename, content } = asset;
let res: string | undefined; 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'); return newResult.map((asset) => Object.values(asset).join('\n')).join('\n\n');
} }
export function assertSnapshot( export function assertSnapshot(snapshots: eventWithTime[]) {
snapshots: eventWithTime[], expect(stringifySnapshots(snapshots)).toMatchSnapshot();
filename: string,
name: string,
) {
const result = matchSnapshot(stringifySnapshots(snapshots), filename, name);
assert(result.pass, result.pass ? '' : result.report());
} }
export async function assertDomSnapshot( export async function assertDomSnapshot(
@@ -171,8 +146,7 @@ export async function assertDomSnapshot(
format: 'mhtml', format: 'mhtml',
}); });
const result = matchSnapshot(stringifyDomSnapshot(data), filename, name); expect(stringifyDomSnapshot(data)).toMatchSnapshot();
assert(result.pass, result.pass ? '' : result.report());
} }
const now = Date.now(); const now = Date.now();

6
packages/rrweb/tsconfig.json
View File

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