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

add test infra and a basic record integration test

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent f4ded6b6d1
commit 5bbc29ef1a
6 changed files with 157 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
package.json
View File

@@ -4,7 +4,7 @@
"description": "record and replay the web", "description": "record and replay the web",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
"bundle": "rollup --config" "bundle": "rollup --config"
}, },
"repository": { "repository": {
@@ -21,9 +21,18 @@
}, },
"homepage": "https://github.com/rrweb-io/rrweb#readme", "homepage": "https://github.com/rrweb-io/rrweb#readme",
"devDependencies": { "devDependencies": {
"@types/chai": "^4.1.6",
"@types/mocha": "^5.2.5",
"@types/node": "^10.11.7",
"@types/puppeteer": "^1.9.0",
"chai": "^4.2.0",
"jest-snapshot": "^23.6.0",
"mocha": "^5.2.0",
"puppeteer": "^1.9.0",
"rollup": "^0.66.6", "rollup": "^0.66.6",
"rollup-plugin-node-resolve": "^3.4.0", "rollup-plugin-node-resolve": "^3.4.0",
"rollup-plugin-typescript": "^1.0.0", "rollup-plugin-typescript": "^1.0.0",
"ts-node": "^7.0.1",
"tslib": "^1.9.3", "tslib": "^1.9.3",
"tslint": "^4.5.1", "tslint": "^4.5.1",
"typescript": "^3.1.1" "typescript": "^3.1.1"

26
test.d.ts vendored Normal file
View File

@@ -0,0 +1,26 @@
declare module 'rollup-plugin-typescript' {
function typescript(): any;
export = typescript;
}
declare module 'rollup-plugin-node-resolve' {
function resolve(): any;
export = resolve;
}
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;
}

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

File diff suppressed because one or more lines are too long

34
test/html/form.html Normal file
View File

@@ -0,0 +1,34 @@
<!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">
</label>
<label for="radio">
<input type="radio">
</label>
<label for="checkbox">
<input type="checkbox">
</label>
<label for="textarea">
<textarea name="" id="" cols="30" rows="10"></textarea>
</label>
<label for="select">
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
</select>
</label>
</form>
</body>
</html>

83
test/integration.ts Normal file
View File

@@ -0,0 +1,83 @@
import * as fs from 'fs';
import * as path from 'path';
import * as puppeteer from 'puppeteer';
import { assert } from 'chai';
import * as rollup from 'rollup';
import typescript = require('rollup-plugin-typescript');
import resolve = require('rollup-plugin-node-resolve');
import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
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('record integration tests', () => {
function getHtml(fileName: string): string {
const filePath = path.resolve(__dirname, `./html/${fileName}`);
const html = fs.readFileSync(filePath, 'utf8');
return html.replace(
'</body>',
`
<script>
${this.code}
window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
window.snapshots = [];
record({
emit: event => {
console.log(event);
window.snapshots.push(event);
}
});
</script>
</body>
`,
);
}
before(async () => {
this.browser = await puppeteer.launch({
// headless: false,
executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/record/index.ts'),
plugins: [typescript(), resolve()],
});
const { code } = await bundle.generate({
name: 'record',
format: 'iife',
});
this.code = code;
});
after(async () => {
await this.browser.close();
});
it('can record form interactions', async () => {
const page: puppeteer.Page = await this.browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'form.html'));
await page.type('input[type="text"]', 'test');
await page.click('input[type="radio"]');
await page.click('input[type="checkbox"]');
await page.type('textarea', 'textarea test');
await page.select('select', '1');
const snapshots = await page.evaluate('window.snapshots');
const result = matchSnapshot(JSON.stringify(snapshots), __filename, 'form');
assert(result.pass, result.pass ? '' : result.report());
}).timeout(5000);
});

2
tsconfig.json
View File

@@ -12,5 +12,5 @@
}, },
"compileOnSave": true, "compileOnSave": true,
"exclude": ["test"], "exclude": ["test"],
"include": ["src", "index.d.ts"] "include": ["src", "index.d.ts", "test.d.ts"]
} }