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

refactor test infra so most test cases could be implemented by pure HTML

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent e9cf631934
commit 0e35b86d87
5 changed files with 146 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
test/css/style.css Normal file
View File

@@ -0,0 +1,6 @@
body {
margin: 0;
}
p {
color: red;
}

79
test/html/form-fields.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>
<script>
document.querySelector('input[type="text"]').value = '1';
document.querySelector('input[type="radio"]').checked = true;
document.querySelector('input[type="checkbox"]').checked = true;
document.querySelector('textarea').value = '1234';
document.querySelector('select').value = '2';
</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>

9
test/html/invalid-attribute.html Normal file
View File

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

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

@@ -11,8 +11,27 @@
<body> <body>
<script src="a.js"></script> <script src="a.js"></script>
<script> <script>
console.log(1) var a = 1 + 1;
</script> </script>
</body> </body>
</html> </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="a.js"></noscript>
<noscript></noscript>
</body>
</html>

108
test/integration.ts
View File

@@ -8,9 +8,19 @@ import { snapshot, rebuild } from '../src';
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 => {
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 { return {
filePath, filePath,
content: fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8'), src: raw,
dest: raw,
}; };
}); });
@@ -18,17 +28,27 @@ describe('integration tests', () => {
mochaDom({ url: 'http://localhost' }); mochaDom({ url: 'http://localhost' });
for (const html of htmls) { for (const html of htmls) {
it('[html file]:' + html.filePath, () => { it('[html file]: ' + html.filePath, done => {
const dom = new JSDOM(html.content); const srcDom = new JSDOM(html.src, { runScripts: 'dangerously' });
const snap = snapshot(dom.window.document); const destDom = new JSDOM(html.dest);
const rebuildDom = rebuild(snap); srcDom.window.document.addEventListener('DOMContentLoaded', () => {
const htmlStr = dom.window.document.documentElement.outerHTML const snap = snapshot(srcDom.window.document);
.replace(/<script>(.|\n)*?<\/script>/g, '<script></script>') const rebuildDom = rebuild(snap);
.replace(/<script(.*?)>/g, '<noscript$1>') const htmlStr = destDom.window.document.documentElement.outerHTML.replace(
.replace(/<\/script>/g, '</noscript>'); /\n\n/g,
expect((rebuildDom as Document).documentElement.outerHTML).to.equal( '',
htmlStr, );
); const rebuildStr = (rebuildDom as Document).documentElement.outerHTML.replace(
/\n\n/g,
'',
);
try {
expect(rebuildStr).to.equal(htmlStr);
done();
} catch (error) {
done(error);
}
});
}); });
} }
@@ -65,68 +85,4 @@ describe('integration tests', () => {
id: 1, id: 1,
}); });
}); });
it('will not throw error with invalid attribute', () => {
const raw = `<html foo='bar' ''></html>`;
const dom = new JSDOM(raw);
expect(() => rebuild(snapshot(dom.window.document))).not.to.throw();
});
it('will inline text input value', () => {
const raw = '<input type="text">';
const dom = new JSDOM(raw);
dom.window.document.querySelector('input').value = '1';
const rebuildDom = rebuild(snapshot(dom.window.document));
expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
'<input type="text" value="1">',
);
});
it('will inline radio input value', () => {
const raw = '<input type="radio">';
const dom = new JSDOM(raw);
dom.window.document.querySelector('input').checked = true;
const rebuildDom = rebuild(snapshot(dom.window.document));
expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
'<input type="radio" checked="">',
);
});
it('will inline checkbox input value', () => {
const raw = '<input type="checkbox">';
const dom = new JSDOM(raw);
dom.window.document.querySelector('input').checked = true;
const rebuildDom = rebuild(snapshot(dom.window.document));
expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
'<input type="checkbox" checked="">',
);
});
it('will inline textarea value into text node', () => {
const raw = '<textarea name="" id="" cols="30" rows="10"></textarea>';
const dom = new JSDOM(raw);
dom.window.document.querySelector('textarea').value = '1234';
const rebuildDom = rebuild(snapshot(dom.window.document));
expect(
(rebuildDom as Document).querySelector('textarea').outerHTML,
).to.equal('<textarea name="" id="" cols="30" rows="10">1234</textarea>');
});
it('will inline options state', () => {
const raw = `
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
</select>
`;
const dom = new JSDOM(raw);
dom.window.document.querySelector('select').value = '2';
const rebuildDom = rebuild(snapshot(dom.window.document));
expect((rebuildDom as Document).querySelector('select').outerHTML).to.equal(
`<select name="" id="" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
</select>`,
);
});
}); });