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

refactor the test infra: use puppeteer instead of jsdom to get rid of some hack implementations

Browse Source
This commit is contained in:
Yanzhen Yu
2018-10-05 22:26:18 +08:00
parent bd325870e7
commit c24e0c6a2f
9 changed files with 125 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
</head>
<body>
<script src="a.js"></script>
<script src="http://localhost:3030/js/a.js"></script>
<script>
var a = 1 + 1;
</script>
@@ -30,7 +30,7 @@
</head>
<body>
<noscript src="a.js"></noscript>
<noscript src="http://localhost:3030/js/a.js"></noscript>
<noscript></noscript>
</body>

16
test/html/with-style-sheet.html Normal file
View File

@@ -0,0 +1,16 @@
<!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="http://localhost:3030/css/style.css">
</head>
<body>
</body>
</html>

147
test/integration.ts
View File

@@ -1,10 +1,12 @@
import 'mocha';
import mochaDom = require('mocha-jsdom');
import { expect } from 'chai';
import * as fs from 'fs';
import * as path from 'path';
import { JSDOM } from 'jsdom';
import { snapshot, rebuild } from '../src';
import * as http from 'http';
import * as url from 'url';
import 'mocha';
import * as puppeteer from 'puppeteer';
import * as rollup from 'rollup';
import typescript = require('rollup-plugin-typescript');
import { expect } from 'chai';
const htmlFolder = path.join(__dirname, 'html');
const htmls = fs.readdirSync(htmlFolder).map(filePath => {
@@ -24,65 +26,86 @@ const htmls = fs.readdirSync(htmlFolder).map(filePath => {
};
});
describe('integration tests', () => {
mochaDom({ url: 'http://localhost' });
interface IMimeType {
[key: string]: string;
}
for (const html of htmls) {
it('[html file]: ' + html.filePath, done => {
const srcDom = new JSDOM(html.src, { runScripts: 'dangerously' });
const destDom = new JSDOM(html.dest);
srcDom.window.document.addEventListener('DOMContentLoaded', () => {
const snap = snapshot(srcDom.window.document);
const rebuildDom = rebuild(snap);
const htmlStr = destDom.window.document.documentElement.outerHTML.replace(
/\n\n/g,
'',
);
const rebuildStr = (rebuildDom as Document).documentElement.outerHTML.replace(
/\n\n/g,
'',
);
try {
expect(rebuildStr).to.equal(htmlStr);
done();
} catch (error) {
done(error);
}
});
const server = () =>
new Promise(resolve => {
const mimeType: IMimeType = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
};
const s = http.createServer((req, res) => {
const parsedUrl = url.parse(req.url);
const sanitizePath = path
.normalize(parsedUrl.pathname)
.replace(/^(\.\.[\/\\])+/, '');
let pathname = path.join(__dirname, sanitizePath);
try {
const data = fs.readFileSync(pathname);
const ext = path.parse(pathname).ext;
res.setHeader('Content-type', mimeType[ext] || 'text/plain');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET');
res.setHeader('Access-Control-Allow-Headers', 'Content-type');
res.end(data);
} catch (error) {
res.end();
}
});
}
it('will snapshot document type', () => {
const raw = '<html></html>';
const dom = new JSDOM(raw);
const snap = snapshot(dom.window.document);
expect(snap).to.deep.equal({
type: 0,
childNodes: [
{
type: 2,
tagName: 'html',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'head',
attributes: {},
childNodes: [],
id: 3,
},
{
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
id: 4,
},
],
id: 2,
},
],
id: 1,
s.listen(3030).on('listening', () => {
resolve(s);
});
});
describe('integration tests', () => {
before(async () => {
this.server = await server();
this.browser = await puppeteer.launch({
headless: false,
executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [typescript()],
});
const { code } = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
this.code = code;
});
after(() => {
this.browser.close();
this.server.close();
});
for (const html of htmls) {
it('[html file]: ' + html.filePath, async () => {
const page: puppeteer.Page = await this.browser.newPage();
await page.goto(`http://localhost:3030/html/${html.filePath}`);
await page.setContent(html.src);
page.once('load', async () => {
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));
`)).replace(/\n\n/g, '');
await page.goto(`data:text/html,${html.dest}`);
const destHtml = (await page.evaluate(() => {
const x = new XMLSerializer();
return x.serializeToString(document);
})).replace(/\n\n/g, '');
expect(rebuildHtml).to.equal(destHtml);
});
}).timeout(5000);
}
});

1
test/js/a.js Normal file
View File

@@ -0,0 +1 @@
var a = 1 + 1;

0
test/server.ts Normal file
View File