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

use jest-snapshot to apply the snapshot testing

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent cb3efd427f
commit 87ff591cd1
8 changed files with 172 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -32,6 +32,7 @@
"@types/node": "^10.11.3",
"@types/puppeteer": "^1.8.0",
"chai": "^4.1.2",
"jest-snapshot": "^23.6.0",
"mocha": "^5.2.0",
"puppeteer": "^1.9.0",
"rollup": "^0.66.4",

17
test.d.ts vendored
View File

@@ -2,3 +2,20 @@ 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;
}

133
test/__snapshots__/integration.ts.snap Normal file
View File

@@ -0,0 +1,133 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`[html file]: about-mozilla.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<title data-rrid=\\"6\\">The Book of Mozilla, 11:9</title>
<style type=\\"text/css\\" data-rrid=\\"9\\">
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 data-rrid=\\"13\\"> <p id=\\"moztext\\" data-rrid=\\"15\\">
Mammon slept. And the <em data-rrid=\\"17\\">beast reborn</em> spread over the earth and its numbers
grew legion. And they proclaimed the times and <em data-rrid=\\"20\\">sacrificed</em> crops unto the
fire, with the <em data-rrid=\\"23\\">cunning of foxes</em>. And they built a new world in their own
image as promised by the <em data-rrid=\\"26\\"><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\" data-rrid=\\"27\\">
sacred words</a></em>, and <em data-rrid=\\"30\\"><a href=\\"http://wiki.mozilla.org/About:mozilla\\" data-rrid=\\"31\\">spoke
</a></em> of the beast with their children. Mammon awoke, and lo! it was
<em data-rrid=\\"34\\">naught</em> but a follower.
</p> <p id=\\"from\\" data-rrid=\\"38\\">
from <strong data-rrid=\\"40\\">The Book of Mozilla,</strong> 11:9<br data-rrid=\\"43\\" /><small data-rrid=\\"44\\">(10th Edition)</small>
</p></body></html>"
`;
exports[`[html file]: basic.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">Document</title>
</head><body data-rrid=\\"16\\"></body></html>"
`;
exports[`[html file]: cors-style-sheet.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">with style sheet</title>
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" data-rrid=\\"15\\" />
</head><body data-rrid=\\"18\\"></body></html>"
`;
exports[`[html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">form fields</title>
</head><body data-rrid=\\"16\\">
<form data-rrid=\\"18\\">
<label for=\\"text\\" data-rrid=\\"20\\">
<input type=\\"text\\" value=\\"1\\" data-rrid=\\"22\\" />
</label>
<label for=\\"radio\\" data-rrid=\\"25\\">
<input type=\\"radio\\" checked=\\"\\" data-rrid=\\"27\\" />
</label>
<label for=\\"checkbox\\" data-rrid=\\"30\\">
<input type=\\"checkbox\\" checked=\\"\\" data-rrid=\\"32\\" />
</label>
<label for=\\"textarea\\" data-rrid=\\"35\\">
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-rrid=\\"37\\">1234</textarea>
</label>
<label for=\\"select\\" data-rrid=\\"40\\">
<select name=\\"\\" id=\\"\\" value=\\"2\\" data-rrid=\\"42\\">
<option value=\\"1\\" data-rrid=\\"44\\">1</option>
<option value=\\"2\\" selected=\\"\\" data-rrid=\\"47\\">2</option>
</select>
</label>
</form><noscript data-rrid=\\"53\\"></noscript>
</body></html>"
`;
exports[`[html file]: iframe.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">iframe</title>
</head>
<body data-rrid=\\"16\\">
<iframe src=\\"/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\" data-rrid=\\"18\\"></iframe>
</body></html>"
`;
exports[`[html file]: iframe-inner.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" data-rrid=\\"2\\"><head data-rrid=\\"3\\"></head><body data-rrid=\\"4\\"><button data-rrid=\\"5\\">inner iframe button</button>
</body></html>"
`;
exports[`[html file]: invalid-attribute.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" foo=\\"bar\\" data-rrid=\\"2\\"><head data-rrid=\\"3\\"></head><body data-rrid=\\"4\\">
</body></html>"
`;
exports[`[html file]: with-script.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">with script</title>
</head><body data-rrid=\\"16\\">
<noscript src=\\"/js/a.js\\" data-rrid=\\"18\\"></noscript>
<noscript data-rrid=\\"20\\"></noscript></body></html>"
`;
exports[`[html file]: with-style-sheet.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
<meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">with style sheet</title>
<style data-rrid=\\"15\\">body { margin: 0px; }p { color: red; }body &gt; p { color: yellow; }</style>
</head><body data-rrid=\\"18\\">
</body></html>"
`;

38
test/html/form-fields.html
View File

@@ -39,41 +39,3 @@
</script>
</html>
<!-- TEST_DIVIDER -->
<!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>
</form>
</body>
<noscript></noscript>
</html>

6
test/html/invalid-attribute.html
View File

@@ -1,9 +1,3 @@
<html foo='bar' ''>
</html>
<!-- TEST_DIVIDER -->
<html foo='bar'>
</html>

19
test/html/with-script.html
View File

@@ -16,22 +16,3 @@
</body>
</html>
<!-- TEST_DIVIDER -->
<!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="/js/a.js"></noscript>
<noscript></noscript>
</body>
</html>

19
test/html/with-style-sheet.html
View File

@@ -14,22 +14,3 @@
</body>
</html>
<!-- TEST_DIVIDER -->
<!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; }p { color: red; }body > p { color: yellow; }</style>
</head>
<body>
</body>
</html>

44
test/integration.ts
View File

@@ -6,23 +6,15 @@ import 'mocha';
import * as puppeteer from 'puppeteer';
import * as rollup from 'rollup';
import typescript = require('rollup-plugin-typescript');
import { expect } from 'chai';
import { assert } from 'chai';
import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
const htmlFolder = path.join(__dirname, 'html');
const htmls = fs.readdirSync(htmlFolder).map(filePath => {
const raw = fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8');
if (/<!-- TEST_DIVIDER -->/.test(raw)) {
const [src, dest] = raw.split('<!-- TEST_DIVIDER -->');
return {
filePath,
src,
dest,
};
}
return {
filePath,
src: raw,
dest: raw,
};
});
@@ -60,6 +52,20 @@ const server = () =>
});
});
function matchSnapshot(actual: string, testFile: string, testTitle: string) {
const snapshotState = new SnapshotState(testFile, {
updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
});
const matcher = toMatchSnapshot.bind({
snapshotState,
currentTestName: testTitle,
});
const result = matcher(actual);
snapshotState.save();
return result;
}
describe('integration tests', () => {
before(async () => {
this.server = await server();
@@ -85,29 +91,21 @@ describe('integration tests', () => {
});
for (const html of htmls.slice(0, 10)) {
it('[html file]: ' + html.filePath, async () => {
const title = '[html file]: ' + html.filePath;
it(title, async () => {
const page: puppeteer.Page = await this.browser.newPage();
// console for debug
// tslint:disable-next-line: no-console
page.on('console', msg => console.log(msg.text()));
await page.goto(`http://localhost:3030/html`);
await page.setContent(html.src);
await page.evaluate(() => {
const x = new XMLSerializer();
return x.serializeToString(document);
});
const rebuildHtml = (await page.evaluate(`${this.code}
const x = new XMLSerializer();
const [snap] = rrweb.snapshot(document);
x.serializeToString(rrweb.rebuild(snap)[0]);
x.serializeToString(rrweb.rebuild(snap));
`)).replace(/\n\n/g, '');
await page.goto(`http://localhost:3030/html`);
await page.setContent(html.dest);
const destHtml = (await page.evaluate(() => {
const x = new XMLSerializer();
return x.serializeToString(document);
})).replace(/\n\n/g, '');
expect(rebuildHtml).to.equal(destHtml);
const result = matchSnapshot(rebuildHtml, __filename, title);
assert(result.pass, result.pass ? '' : result.report());
}).timeout(5000);
}
});