diff --git a/test/css/style.css b/test/css/style.css new file mode 100644 index 00000000..70b063e6 --- /dev/null +++ b/test/css/style.css @@ -0,0 +1,6 @@ +body { + margin: 0; +} +p { + color: red; +} diff --git a/test/html/form-fields.html b/test/html/form-fields.html new file mode 100644 index 00000000..6eef3544 --- /dev/null +++ b/test/html/form-fields.html @@ -0,0 +1,79 @@ + + + + + + + + form fields + + + +
+ + + + + +
+ + + + + + + + + + + + + + + form fields + + + +
+ + + + + +
+ + + + \ No newline at end of file diff --git a/test/html/invalid-attribute.html b/test/html/invalid-attribute.html new file mode 100644 index 00000000..6fa84ad4 --- /dev/null +++ b/test/html/invalid-attribute.html @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/test/html/with-script.html b/test/html/with-script.html index e3598090..3dd8ca93 100644 --- a/test/html/with-script.html +++ b/test/html/with-script.html @@ -11,8 +11,27 @@ + + + + + + + + + + + + with script + + + + + + + \ No newline at end of file diff --git a/test/integration.ts b/test/integration.ts index 00375d0d..4f9917c8 100644 --- a/test/integration.ts +++ b/test/integration.ts @@ -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(raw)) { + const [src, dest] = raw.split(''); + 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(/') - .replace(//g, '') - .replace(/<\/script>/g, ''); - 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 = ``; - const dom = new JSDOM(raw); - expect(() => rebuild(snapshot(dom.window.document))).not.to.throw(); - }); - - it('will inline text input value', () => { - const raw = ''; - 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( - '', - ); - }); - - it('will inline radio input value', () => { - const raw = ''; - 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( - '', - ); - }); - - it('will inline checkbox input value', () => { - const raw = ''; - 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( - '', - ); - }); - - it('will inline textarea value into text node', () => { - const raw = ''; - 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(''); - }); - - it('will inline options state', () => { - const raw = ` - - `; - 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( - ``, - ); - }); });