From cd11e0731828e34209b0d947af1a87233c2cefd1 Mon Sep 17 00:00:00 2001
From: Rubin Raithel <33808743+Coronon@users.noreply.github.com>
Date: Fri, 29 Sep 2023 01:19:23 +0200
Subject: [PATCH] test: add transition condition tests

---
 .../_config.js                                | 105 ++++++++++++++++++
 .../main.svelte                               |  29 +++++
 .../_config.js                                |  85 ++++++++++++++
 .../main.svelte                               |  18 +++
 .../_config.js                                |  35 ++++++
 .../main.svelte                               |  27 +++++
 .../transition-js-condition-false/_config.js  |  30 +++++
 .../transition-js-condition-false/main.svelte |  17 +++
 .../_config.js                                |  35 ++++++
 .../main.svelte                               |  27 +++++
 .../transition-js-condition-true/_config.js   |  30 +++++
 .../transition-js-condition-true/main.svelte  |  17 +++
 12 files changed, 455 insertions(+)
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-dynamic/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-dynamic/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-false/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-false/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-true/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/transition-js-condition-true/main.svelte

diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/_config.js b/packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/_config.js
new file mode 100644
index 0000000000..7895280bce
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/main.svelte b/packages/svelte/test/runtime/samples/transition-js-condition-dynamic-in-out/main.svelte
new file mode 100644
index 0000000000..a7b8d3601e
--- /dev/null
+++ b/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}
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-dynamic/_config.js b/packages/svelte/test/runtime/samples/transition-js-condition-dynamic/_config.js
new file mode 100644
index 0000000000..63081218dc
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-dynamic/main.svelte b/packages/svelte/test/runtime/samples/transition-js-condition-dynamic/main.svelte
new file mode 100644
index 0000000000..49ae605cf4
--- /dev/null
+++ b/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}
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/_config.js b/packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/_config.js
new file mode 100644
index 0000000000..a953f13674
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/main.svelte b/packages/svelte/test/runtime/samples/transition-js-condition-false-in-out/main.svelte
new file mode 100644
index 0000000000..ef957bb204
--- /dev/null
+++ b/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}
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-false/_config.js b/packages/svelte/test/runtime/samples/transition-js-condition-false/_config.js
new file mode 100644
index 0000000000..509e2020b5
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-false/main.svelte b/packages/svelte/test/runtime/samples/transition-js-condition-false/main.svelte
new file mode 100644
index 0000000000..3f7db25102
--- /dev/null
+++ b/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}
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/_config.js b/packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/_config.js
new file mode 100644
index 0000000000..b1df5786df
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/main.svelte b/packages/svelte/test/runtime/samples/transition-js-condition-true-in-out/main.svelte
new file mode 100644
index 0000000000..8ac462dbff
--- /dev/null
+++ b/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}
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-true/_config.js b/packages/svelte/test/runtime/samples/transition-js-condition-true/_config.js
new file mode 100644
index 0000000000..ebc1846fe1
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/transition-js-condition-true/main.svelte b/packages/svelte/test/runtime/samples/transition-js-condition-true/main.svelte
new file mode 100644
index 0000000000..30a75755b1
--- /dev/null
+++ b/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}