diff --git a/package.json b/package.json index 0c399ca9..119a44c0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/test.d.ts b/test.d.ts index cbe3deb6..a3b614ee 100644 --- a/test.d.ts +++ b/test.d.ts @@ -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; +} diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap new file mode 100644 index 00000000..6aba1b5e --- /dev/null +++ b/test/__snapshots__/integration.ts.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[html file]: about-mozilla.html 1`] = ` +" + The Book of Mozilla, 11:9 + +

+ Mammon slept. And the beast reborn spread over the earth and its numbers + grew legion. And they proclaimed the times and sacrificed crops unto the + fire, with the cunning of foxes. And they built a new world in their own + image as promised by the + sacred words, and spoke + of the beast with their children. Mammon awoke, and lo! it was + naught but a follower. +

+ from The Book of Mozilla, 11:9
(10th Edition) +

" +`; + +exports[`[html file]: basic.html 1`] = ` +" + + + + Document +" +`; + +exports[`[html file]: cors-style-sheet.html 1`] = ` +" + + + + with style sheet + +" +`; + +exports[`[html file]: form-fields.html 1`] = ` +" + + + + form fields + +
+ + + + + +
+" +`; + +exports[`[html file]: iframe.html 1`] = ` +" + + + + iframe + + + +" +`; + +exports[`[html file]: iframe-inner.html 1`] = ` +" +" +`; + +exports[`[html file]: invalid-attribute.html 1`] = ` +" +" +`; + +exports[`[html file]: with-script.html 1`] = ` +" + + + + with script + + + " +`; + +exports[`[html file]: with-style-sheet.html 1`] = ` +" + + + + with style sheet + + +" +`; diff --git a/test/html/form-fields.html b/test/html/form-fields.html index 6eef3544..50778d60 100644 --- a/test/html/form-fields.html +++ b/test/html/form-fields.html @@ -39,41 +39,3 @@ - - - - - - - - - - - form fields - - - -
- - - - - -
- - - - \ No newline at end of file diff --git a/test/html/invalid-attribute.html b/test/html/invalid-attribute.html index 6fa84ad4..e2428e28 100644 --- a/test/html/invalid-attribute.html +++ b/test/html/invalid-attribute.html @@ -1,9 +1,3 @@ - - - - - - \ No newline at end of file diff --git a/test/html/with-script.html b/test/html/with-script.html index d7271338..b4812e96 100644 --- a/test/html/with-script.html +++ b/test/html/with-script.html @@ -16,22 +16,3 @@ - - - - - - - - - - - with script - - - - - - - - \ No newline at end of file diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html index 9ba3c5e4..2083dae9 100644 --- a/test/html/with-style-sheet.html +++ b/test/html/with-style-sheet.html @@ -14,22 +14,3 @@ - - - - - - - - - - - with style sheet - - - - - - - - \ No newline at end of file diff --git a/test/integration.ts b/test/integration.ts index 13647cc8..861c6580 100644 --- a/test/integration.ts +++ b/test/integration.ts @@ -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(raw)) { - const [src, dest] = raw.split(''); - 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); } });