add tests

test/runtime-puppeteer/index.ts

@@ -117,8 +117,12 @@ describe('runtime (puppeteer)', function() {
 						load(id) {
 							if (id === 'main') {
 								return `
-									import SvelteComponent from ${JSON.stringify(path.join(__dirname, 'samples', dir, 'main.svelte'))};
-									import config from ${JSON.stringify(path.join(__dirname, 'samples', dir, '_config.js'))};
+									import SvelteComponent from ${JSON.stringify(
+										path.join(__dirname, "samples", dir, "main.svelte")
+									)};
+									import config from ${JSON.stringify(
+										path.join(__dirname, "samples", dir, "_config.js")
+									)};
 									import * as assert from 'assert';
 
 									export default async function (target) {
@@ -140,6 +144,14 @@ describe('runtime (puppeteer)', function() {
 
 											const component = new SvelteComponent(options);
 
+											const waitUntil = async (fn, ms = 500) => {
+												const start = new Date().getTime();
+												do {
+													if (fn()) return;
+													await new Promise(resolve => window.setTimeout(resolve, 1));
+												} while (new Date().getTime() <= start + ms);
+											};
+
 											if (config.html) {
 												assert.htmlEqual(target.innerHTML, config.html);
 											}
@@ -150,6 +162,7 @@ describe('runtime (puppeteer)', function() {
 													component,
 													target,
 													window,
+													waitUntil,
 												});
 
 												component.$destroy();

test/runtime-puppeteer/samples/style_manager-cleanup/_config.js

@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	skip_if_hydrate_from_ssr: true,
+	test: async ({ component, assert, window, waitUntil }) => {
+		assert.htmlEqual(window.document.head.innerHTML, '');
+		component.visible = true;
+		assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
+		await waitUntil(() => window.document.head.innerHTML === '');
+		assert.htmlEqual(window.document.head.innerHTML, '');
+
+		component.visible = false;
+		assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
+		await waitUntil(() => window.document.head.innerHTML === '');
+		assert.htmlEqual(window.document.head.innerHTML, '');
+	}
+};

test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}

test/runtime-puppeteer/samples/transition-css-out-in/_config.js

@@ -0,0 +1,14 @@
+export default {
+	test: async ({ assert, component, window, waitUntil }) => {
+		component.visible = true;
+		await waitUntil(() => window.document.head.querySelector('style').sheet.rules.length === 2);
+		assert.equal(window.document.head.querySelector('style').sheet.rules.length, 2);
+		await waitUntil(() => window.document.head.querySelector('style') === null);
+		assert.equal(window.document.head.querySelector('style'), null);
+		component.visible = false;
+		await waitUntil(() => window.document.head.querySelector('style').sheet.rules.length === 2);
+		assert.equal(window.document.head.querySelector('style').sheet.rules.length, 2);
+		await waitUntil(() => window.document.head.querySelector('style') === null);
+		assert.equal(window.document.head.querySelector('style'), null);
+	}
+};

test/runtime-puppeteer/samples/transition-css-out-in/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
+
+{#if !visible}
+	<div transition:foo></div>
+{/if}

test/runtime/samples/style_manager-cleanup/_config.js

@@ -1,14 +0,0 @@
-export default {
-	skip_if_ssr: true,
-	skip_if_hydrate: true,
-	skip_if_hydrate_from_ssr: true,
-	test({ raf, assert, component, window }) {
-		component.visible = true;
-		raf.tick(100);
-		component.visible = false;
-		raf.tick(200);
-		raf.tick(0);
-
-		assert.htmlEqual(window.document.head.innerHTML, '');
-	}
-};

test/runtime/samples/style_manager-cleanup/main.svelte

@@ -1,14 +0,0 @@
-<script>
-    export let visible = false;
-    
-    function foo() {
-        return {
-            duration: 100,
-            css: () => ''
-        };
-    }
-    </script>
-    
-    {#if visible}
-        <div transition:foo></div>
-    {/if}