diff --git a/test/hydration/index.js b/test/hydration/index.js index f57a0cdc1a..93c94f17ef 100644 --- a/test/hydration/index.js +++ b/test/hydration/index.js @@ -48,7 +48,7 @@ describe('hydration', () => { throw new Error('Forgot to remove `solo: true` from test'); } - (config.skip ? it.skip : solo ? it.only : it)(dir, () => { + (config.skip ? it.skip : solo ? it.only : it)(dir, async () => { const cwd = path.resolve(`${__dirname}/samples/${dir}`); compileOptions = config.compileOptions || {}; @@ -110,7 +110,7 @@ describe('hydration', () => { } if (config.test) { - config.test(assert, target, snapshot, component, window); + await config.test(assert, target, snapshot, component, window); } else { component.$destroy(); assert.equal(target.innerHTML, ''); diff --git a/test/hydration/samples/iframe/_after.html b/test/hydration/samples/iframe/_after.html new file mode 100644 index 0000000000..bf20af3971 --- /dev/null +++ b/test/hydration/samples/iframe/_after.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/test/hydration/samples/iframe/_before.html b/test/hydration/samples/iframe/_before.html new file mode 100644 index 0000000000..bf20af3971 --- /dev/null +++ b/test/hydration/samples/iframe/_before.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/test/hydration/samples/iframe/_config.js b/test/hydration/samples/iframe/_config.js new file mode 100644 index 0000000000..9383d38fc6 --- /dev/null +++ b/test/hydration/samples/iframe/_config.js @@ -0,0 +1,65 @@ +export default { + props: { + done: false, + }, + + snapshot(target) { + let domMutated; + const mutationRecords = []; + const mutationObserver = new global.window.MutationObserver(records => { + Array.from( + records + ).forEach( + ({ type, childList, target, attributes, addedNodes, removedNodes }) => { + childList = Array.from(childList|| []).map(n => n.nodeName); + addedNodes = Array.from(addedNodes|| []).map(n => n.nodeName); + removedNodes = Array.from(removedNodes|| []).map(n => n.nodeName); + mutationRecords.push({ + type, + childList, + target, + attributes, + addedNodes, + removedNodes, + }); + }); + domMutated && domMutated(mutationRecords); + }); + mutationObserver.observe(target, { childList: true, subtree: true }); + mutationRecords.length = 0; + const trigger = new Promise(resolve => (domMutated = resolve)); + + return { + mutationRecords, + mutationObserver, + trigger, + }; + }, + + async test(assert, target, snapshot, component, window) { + component.$set({done:true}); + + await snapshot.trigger; + snapshot.mutationObserver.disconnect(); + + console.log(snapshot.mutationRecords); + + const iframeMutations = snapshot.mutationRecords.filter(({addedNodes, removedNodes}) => { + console.log({addedNodes, removedNodes}); + return addedNodes.includes('IFRAME')|| removedNodes.includes('IFRAME'); + }); + console.log({iframeMutations}); + assert(iframeMutations.length === 0, 'iframe added/removed'); + // assert(false, 'test') + + assert.htmlEqual( + target.innerHTML, + ` +
+ + done +
+ ` + ); + }, +}; diff --git a/test/hydration/samples/iframe/main.svelte b/test/hydration/samples/iframe/main.svelte new file mode 100644 index 0000000000..5bebad8a9c --- /dev/null +++ b/test/hydration/samples/iframe/main.svelte @@ -0,0 +1,8 @@ + + +
+ + {#if done}done{/if} +