test: add transition condition tests

packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/_config.js

@@ -0,0 +1,105 @@
+export default {
+	test({ assert, component, target, raf }) {
+		// Undefined -> true
+		component.visible = true;
+		let div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+		assert.isUndefined(div.bar);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0);
+
+		component.visible = true;
+		div = target.querySelector('div');
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+		assert.isUndefined(div.bar);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+
+		// Create a condition objects that can be toggled
+		let shouldRunIn = true;
+		let shouldRunOut = true;
+		let conditionObject = {
+			get conditionIn() {
+				return shouldRunIn;
+			},
+			get conditionOut() {
+				return shouldRunOut;
+			}
+		};
+		component.conditionIn = () => conditionObject.conditionIn;
+		component.conditionOut = () => conditionObject.conditionOut;
+
+		component.visible = false;
+		raf.tick(400);
+		assert.htmlEqual(target.innerHTML, '');
+
+		// in: true, out: false
+		shouldRunIn = true;
+		shouldRunOut = false;
+
+		component.visible = true;
+		div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+		assert.isUndefined(div.bar);
+
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+
+		raf.tick(600);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+
+		// in: false, out: true
+		shouldRunIn = false;
+		shouldRunOut = true;
+
+		component.visible = true;
+		div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+
+		raf.tick(700);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+
+		raf.tick(800);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.isUndefined(div.foo, 1);
+		assert.equal(div.bar, 0);
+	}
+};

packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/main.svelte

@@ -0,0 +1,29 @@
+<script>
+	export let visible;
+	export let conditionIn;
+	export let conditionOut;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.foo = t;
+			},
+			condition: conditionIn
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.bar = t;
+			},
+			condition: conditionOut
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar />
+{/if}

packages/svelte/test/runtime/samples/transition-js-condition-dynamic/_config.js

@@ -0,0 +1,85 @@
+export default {
+	test({ assert, component, target, raf }) {
+		// Undefined -> true
+		component.visible = true;
+		let div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 0);
+
+		component.visible = true;
+		div = target.querySelector('div');
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		// Create a condition object that can be toggled
+		let shouldRun = true;
+		let conditionObject = {
+			get condition() {
+				return shouldRun;
+			}
+		};
+		component.condition = () => conditionObject.condition;
+
+		component.visible = false;
+		raf.tick(400);
+		assert.htmlEqual(target.innerHTML, '');
+		
+		// in: true, out: false
+		shouldRun = true;
+		component.visible = true;
+		div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		shouldRun = false;
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 1);
+
+		raf.tick(600);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 1);
+
+		// in: false, out: true
+		shouldRun = false;
+		component.visible = true;
+		div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+
+		raf.tick(700);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+
+		shouldRun = true;
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(800);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 0);
+	}
+};

packages/svelte/test/runtime/samples/transition-js-condition-dynamic/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let visible;
+	export let condition;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.foo = t;
+			},
+			condition
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo />
+{/if}

packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/_config.js

@@ -0,0 +1,35 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		let div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '');
+		assert.isUndefined(div.foo);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+
+		component.visible = true;
+		div = target.querySelector('div');
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+		assert.isUndefined(div.bar);
+	}
+};

packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/main.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.foo = t;
+			},
+			condition: () => false
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.bar = t;
+			},
+			condition: () => false
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar />
+{/if}

packages/svelte/test/runtime/samples/transition-js-condition-false/_config.js

@@ -0,0 +1,30 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		let div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '');
+		assert.isUndefined(div.foo);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.isUndefined(div.foo);
+
+		component.visible = true;
+		div = target.querySelector('div');
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.isUndefined(div.foo);
+	}
+};

packages/svelte/test/runtime/samples/transition-js-condition-false/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.foo = t;
+			},
+			condition: () => false
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo />
+{/if}

packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/_config.js

@@ -0,0 +1,35 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		let div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+		assert.isUndefined(div.bar);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0);
+
+		component.visible = true;
+		div = target.querySelector('div');
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+		assert.isUndefined(div.bar);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+		assert.isUndefined(div.bar);
+	}
+};

packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/main.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.foo = t;
+			},
+			condition: () => true
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.bar = t;
+			},
+			condition: () => true
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar />
+{/if}

packages/svelte/test/runtime/samples/transition-js-condition-true/_config.js

@@ -0,0 +1,30 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		let div = target.querySelector('div');
+
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+		assert.equal(div.foo, 0);
+
+		component.visible = true;
+		div = target.querySelector('div');
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 0);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(div.foo, 1);
+	}
+};

packages/svelte/test/runtime/samples/transition-js-condition-true/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t) => {
+				node.foo = t;
+			},
+			condition: () => true
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo />
+{/if}