more tests

test/runtime/samples/transition-js-local-and-global/_config.js

@@ -0,0 +1,68 @@
+export default {
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		y: true
+	},
+
+	test(assert, component, target, window, raf) {
+		// first, toggle x — first element should snap in
+		// and out while second one transitions
+		component.set({ x: true });
+
+		let divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0);
+
+		raf.tick(50);
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(100);
+
+		component.set({ x: false });
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+
+		raf.tick(150);
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+
+		// then toggle y
+		component.set({ x: true, y: false });
+		component.set({ y: true });
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+		divs = target.querySelectorAll('div');
+
+		raf.tick(250);
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 1);
+
+		component.set({ y: false });
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+
+		raf.tick(320);
+		assert.equal(divs[0].foo, 0.8);
+		assert.equal(divs[1].foo, 0.8);
+
+		raf.tick(400);
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-and-global/main.html

@@ -0,0 +1,21 @@
+{#if x}
+	{#if y}
+		<div transition:foo|local>snaps if x changes</div>
+		<div transition:foo>transitions if x changes</div>
+	{/if}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-local-nested-await/_config.js

@@ -0,0 +1,33 @@
+let fulfil;
+
+const promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		promise
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+		fulfil();
+
+		return promise.then(() => {
+			const div = target.querySelector('div');
+			assert.equal(div.foo, 0);
+
+			raf.tick(100);
+			assert.equal(div.foo, 1);
+
+			component.set({ x: false });
+			assert.htmlEqual(target.innerHTML, '');
+
+			raf.tick(150);
+			assert.equal(div.foo, 1);
+		});
+	}
+};

test/runtime/samples/transition-js-local-nested-await/main.html

@@ -0,0 +1,20 @@
+{#if x}
+	{#await promise then value}
+		<div transition:foo|local></div>
+	{/await}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-local-nested-component/Widget.html

@@ -0,0 +1,16 @@
+<div transition:foo|local></div>
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-local-nested-component/_config.js

@@ -0,0 +1,26 @@
+export default {
+	nestedTransitions: true,
+
+	data: {
+		x: false
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.set({ x: false });
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};

test/runtime/samples/transition-js-local-nested-component/main.html

@@ -0,0 +1,13 @@
+{#if x}
+	<Widget/>
+{/if}
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: {
+			Widget: './Widget.html'
+		}
+	};
+</script>

test/runtime/samples/transition-js-local-nested-each-keyed/_config.js

@@ -0,0 +1,32 @@
+export default {
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		things: ['a']
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		const div1 = target.querySelector('div');
+		assert.equal(div1.foo, undefined);
+
+		raf.tick(100);
+		assert.equal(div1.foo, undefined);
+
+		component.set({ things: ['a', 'b'] });
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+
+		const div2 = target.querySelector('div:last-child');
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 1);
+
+		component.set({ x: false });
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-nested-each-keyed/main.html

@@ -0,0 +1,20 @@
+{#if x}
+	{#each things as thing (thing)}
+		<div transition:foo|local></div>
+	{/each}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-local-nested-each/_config.js

@@ -0,0 +1,32 @@
+export default {
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		things: ['a']
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		const div1 = target.querySelector('div');
+		assert.equal(div1.foo, undefined);
+
+		raf.tick(100);
+		assert.equal(div1.foo, undefined);
+
+		component.set({ things: ['a', 'b'] });
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+
+		const div2 = target.querySelector('div:last-child');
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 1);
+
+		component.set({ x: false });
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-nested-each/main.html

@@ -0,0 +1,20 @@
+{#if x}
+	{#each things as thing}
+		<div transition:foo|local></div>
+	{/each}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-local-nested-if/_config.js

@@ -0,0 +1,41 @@
+export default {
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		y: true
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		component.set({ y: false });
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.set({ x: false, y: true });
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.set({ x: true });
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		component.set({ y: false });
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-nested-if/main.html

@@ -0,0 +1,20 @@
+{#if x}
+	{#if y}
+		<div transition:foo|local></div>
+	{/if}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>