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
2018-10-03 12:08:46 +08:00
parent 05e4103f7a
commit bd325870e7
5 changed files with 146 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
test/integration.ts
View File

@@ -8,9 +8,19 @@ import { snapshot, rebuild } from '../src';
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,
content: fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8'),
src: raw,
dest: raw,
};
});
@@ -18,17 +28,27 @@ describe('integration tests', () => {
mochaDom({ url: 'http://localhost' });
for (const html of htmls) {
it('[html file]:' + html.filePath, () => {
const dom = new JSDOM(html.content);
const snap = snapshot(dom.window.document);
const rebuildDom = rebuild(snap);
const htmlStr = dom.window.document.documentElement.outerHTML
.replace(/<script>(.|\n)*?<\/script>/g, '<script></script>')
.replace(/<script(.*?)>/g, '<noscript$1>')
.replace(/<\/script>/g, '</noscript>');
expect((rebuildDom as Document).documentElement.outerHTML).to.equal(
htmlStr,
);
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);
}
});
});
}
@@ -65,68 +85,4 @@ describe('integration tests', () => {
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>`,
);
});
});