chore: split tests

Author: paoloricciuti

packages/svelte/tests/runtime-runes/samples/state-onchange-arrays/_config.js

@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(logs, ['arr']);
+
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.deepEqual(logs, ['arr', 'arr']);
+
+		flushSync(() => {
+			btn3.click();
+		});
+		assert.deepEqual(logs, ['arr', 'arr', 'arr']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-onchange-arrays/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	let arr = $state([0,1,2], {
+		onchange(){
+			console.log("arr");
+		}
+	})
+</script>
+
+<button onclick={()=> arr.push(arr.length)}>push</button>
+<button onclick={()=>arr.splice(0, 2)}>splice</button>
+<button onclick={()=>arr.sort((a,b)=>b-a)}>sort</button>

packages/svelte/tests/runtime-runes/samples/state-onchange-classes/_config.js

@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn, btn2, btn3] = target.querySelectorAll('button');
+
+		assert.deepEqual(logs, ['constructor count', 'constructor proxy']);
+
+		logs.length = 0;
+
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(logs, ['class count']);
+
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.deepEqual(logs, ['class count', 'class proxy']);
+
+		flushSync(() => {
+			btn3.click();
+		});
+		assert.deepEqual(logs, ['class count', 'class proxy', 'class proxy']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-onchange-classes/main.svelte

@@ -0,0 +1,37 @@
+<script>
+	class Test{
+		count = $state(0, {
+			onchange(){
+				console.log("class count");
+			}
+		})
+		proxy = $state({count: 0}, {
+			onchange(){
+				console.log("class proxy");
+			}
+		})
+
+		#in_constructor = $state(0, {
+			onchange(){
+				console.log("constructor count");
+			}
+		});
+
+		#in_constructor_proxy = $state({ count: 0 }, {
+			onchange(){
+				console.log("constructor proxy");
+			}
+		});
+
+		constructor(){
+			this.#in_constructor = 42;
+			this.#in_constructor_proxy.count++;
+		}
+	}
+
+	const class_test = new Test();
+</script>
+
+<button onclick={()=> class_test.count++}>{class_test.count}</button>
+<button onclick={()=> class_test.proxy.count++}>{class_test.proxy.count}</button>
+<button onclick={()=> class_test.proxy = {count: class_test.proxy.count+1}}>{class_test.proxy.count}</button>

packages/svelte/tests/runtime-runes/samples/state-onchange-proxies/_config.js

@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(logs, ['proxy']);
+
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.deepEqual(logs, ['proxy', 'proxy']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-onchange-proxies/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let proxy = $state({count: 0}, {
+		onchange(){
+			console.log("proxy");
+		}
+	})
+</script>
+
+<button onclick={()=> proxy.count++}>{proxy.count}</button>
+<button onclick={()=> proxy = {count: proxy.count+1}}>{proxy.count}</button>

packages/svelte/tests/runtime-runes/samples/state-onchange/_config.js

@@ -3,89 +3,11 @@ import { test } from '../../test';
 
 export default test({
 	async test({ assert, target, logs }) {
-		const [btn, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9] = target.querySelectorAll('button');
-
-		assert.deepEqual(logs, ['constructor count', 'constructor proxy']);
-
-		logs.length = 0;
+		const btn = target.querySelector('button');
 
 		flushSync(() => {
-			btn.click();
+			btn?.click();
 		});
 		assert.deepEqual(logs, ['count']);
-
-		flushSync(() => {
-			btn2.click();
-		});
-		assert.deepEqual(logs, ['count', 'proxy']);
-
-		flushSync(() => {
-			btn3.click();
-		});
-		assert.deepEqual(logs, ['count', 'proxy', 'proxy']);
-
-		flushSync(() => {
-			btn4.click();
-		});
-		assert.deepEqual(logs, ['count', 'proxy', 'proxy', 'class count']);
-
-		flushSync(() => {
-			btn5.click();
-		});
-		assert.deepEqual(logs, ['count', 'proxy', 'proxy', 'class count', 'class proxy']);
-
-		flushSync(() => {
-			btn6.click();
-		});
-		assert.deepEqual(logs, [
-			'count',
-			'proxy',
-			'proxy',
-			'class count',
-			'class proxy',
-			'class proxy'
-		]);
-
-		flushSync(() => {
-			btn7.click();
-		});
-		assert.deepEqual(logs, [
-			'count',
-			'proxy',
-			'proxy',
-			'class count',
-			'class proxy',
-			'class proxy',
-			'arr'
-		]);
-
-		flushSync(() => {
-			btn8.click();
-		});
-		assert.deepEqual(logs, [
-			'count',
-			'proxy',
-			'proxy',
-			'class count',
-			'class proxy',
-			'class proxy',
-			'arr',
-			'arr'
-		]);
-
-		flushSync(() => {
-			btn9.click();
-		});
-		assert.deepEqual(logs, [
-			'count',
-			'proxy',
-			'proxy',
-			'class count',
-			'class proxy',
-			'class proxy',
-			'arr',
-			'arr',
-			'arr'
-		]);
 	}
 });

packages/svelte/tests/runtime-runes/samples/state-onchange/main.svelte

@@ -4,61 +4,6 @@
 			console.log("count");
 		}
 	})
-
-	let proxy = $state({count: 0}, {
-		onchange(){
-			console.log("proxy");
-		}
-	})
-
-	class Test{
-		count = $state(0, {
-			onchange(){
-				console.log("class count");
-			}
-		})
-		proxy = $state({count: 0}, {
-			onchange(){
-				console.log("class proxy");
-			}
-		})
-
-		#in_constructor = $state(0, {
-			onchange(){
-				console.log("constructor count");
-			}
-		});
-
-		#in_constructor_proxy = $state({ count: 0 }, {
-			onchange(){
-				console.log("constructor proxy");
-			}
-		});
-
-
-		constructor(){
-			this.#in_constructor = 42;
-			this.#in_constructor_proxy.count++;
-		}
-	}
-
-	const class_test = new Test();
-
-	let arr = $state([0,1,2], {
-		onchange(){
-			console.log("arr");
-		}
-	})
 </script>
 
-<button onclick={()=> count++}>{count}</button>
-<button onclick={()=> proxy.count++}>{proxy.count}</button>
-<button onclick={()=> proxy = {count: proxy.count+1}}>{proxy.count}</button>
-
-<button onclick={()=> class_test.count++}>{class_test.count}</button>
-<button onclick={()=> class_test.proxy.count++}>{class_test.proxy.count}</button>
-<button onclick={()=> class_test.proxy = {count: class_test.proxy.count+1}}>{class_test.proxy.count}</button>
-
-<button onclick={()=> arr.push(arr.length)}>push</button>
-<button onclick={()=>arr.splice(0, 2)}>splice</button>
-<button onclick={()=>arr.sort((a,b)=>b-a)}>sort</button>
+<button onclick={()=> count++}>{count}</button>