test: add guard-derived regression samples

Author: LeeWxx

packages/svelte/tests/runtime-runes/samples/guard-derived-await/_config.js

@@ -0,0 +1,17 @@
+import { test } from '../../test';
+import { flushSync, tick } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		await tick();
+
+		const text = target.textContent?.trim() ?? '';
+		if (!text.endsWith('trigger')) {
+			throw new Error(`unexpected text: ${text}`);
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-derived-await/main.svelte

@@ -0,0 +1,24 @@
+<script>
+	let value = $state({ nested: { depth: 2 } });
+	let trigger = $state(false);
+
+	$effect(() => {
+		if (trigger) value = null;
+	});
+
+	function load() {
+		return Promise.resolve(value);
+	}
+</script>
+
+{#await load() then result}
+	{#if result?.nested?.depth > 1}
+		ok
+	{:else}
+		low
+	{/if}
+{:catch}
+	error
+{/await}
+
+<button onclick={() => (trigger = true)}>trigger</button>

packages/svelte/tests/runtime-runes/samples/guard-derived-const/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		const text = target.textContent?.trim() ?? '';
+		if (!text.endsWith('toggle')) {
+			throw new Error(`unexpected text: ${text}`);
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-derived-const/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	let items = $state([
+		{ nested: { value: 1 } },
+		{ nested: { value: 2 } }
+	]);
+	let show = $state(true);
+
+	let first = $derived(items[0]);
+
+	$effect(() => {
+		if (!show) {
+			items = [];
+		}
+	});
+</script>
+
+{#if first?.nested?.value > 1}
+	big
+{:else}
+	small
+{/if}
+
+<button onclick={() => (show = false)}>toggle</button>

packages/svelte/tests/runtime-runes/samples/guard-derived-derived/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		const text = target.textContent?.trim() ?? '';
+		if (!text.endsWith('advance')) {
+			throw new Error(`unexpected text: ${text}`);
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-derived-derived/main.svelte

@@ -0,0 +1,24 @@
+<script>
+	let rows = $state([
+		{ nested: { depth: 1 } },
+		{ nested: { depth: 3 } }
+	]);
+	let ptr = $state(0);
+
+	let current = $derived(rows[ptr]);
+	let nested = $derived(current?.nested);
+
+	$effect(() => {
+		if (ptr === 1) {
+			rows = [];
+		}
+	});
+</script>
+
+{#if nested?.depth > 2}
+	deep
+{:else}
+	shallow
+{/if}
+
+<button onclick={() => (ptr = 1)}>advance</button>

packages/svelte/tests/runtime-runes/samples/guard-derived-each/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		const text = target.textContent?.trim() ?? '';
+		if (!text.endsWith('clear')) {
+			throw new Error(`unexpected text: ${text}`);
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-derived-each/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let items = $state([
+		{ nested: { ok: true } },
+		{ nested: { ok: false } }
+	]);
+	let clear = $state(false);
+
+	$effect(() => {
+		if (clear) items = [];
+	});
+</script>
+
+{#each items as item (item.nested)}
+	{#if item?.nested?.ok}
+		ok
+	{:else}
+		fail
+	{/if}
+{/each}
+
+<button onclick={() => (clear = true)}>clear</button>

packages/svelte/tests/runtime-runes/samples/guard-derived-elseif/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		const text = target.textContent?.trim() ?? '';
+		if (!text.endsWith('switch')) {
+			throw new Error(`unexpected text: ${text}`);
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-derived-elseif/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	let centerRows = $state([
+		{ depth: 0, nested: { optional: 1 } },
+		{ depth: 2, nested: { optional: 3 } }
+	]);
+	let index = $state(0);
+
+	let centerRow = $derived(centerRows[index]);
+
+	$effect(() => {
+		if (index) {
+			centerRows = [];
+		}
+	});
+</script>
+
+{#if centerRow?.nested?.optional > 2}
+	A
+{:else if centerRow?.nested?.optional > 1}
+	B
+{:else}
+	C
+{/if}
+
+<button onclick={() => (index = 1)}>switch</button>