add tests

Author: trueadm

packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js

@@ -59,7 +59,6 @@ export function SvelteBoundary(node, context) {
 			const init = [];
 			const block_state = { ...context.state, init };
 			context.visit(child, block_state);
-			const current = props_and_spreads.at(-1) ?? props_and_spreads.push([]);
 			push_prop(b.prop('init', b.id('failed'), b.id('failed')));
 			snippet_statements.push(...init);
 		} else {

packages/svelte/tests/runtime-runes/samples/error-boundary-2/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary-2/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
+
+

packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js

@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Fallback!</div><button>+</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	{count > 0 ? throw_error() : null}
+
+	{#snippet failed()}
+		<div>Fallback!</div>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>

packages/svelte/tests/runtime-runes/samples/error-boundary-4/_config.js

@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Fallback!</div><button>+</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary-4/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+</script>
+
+{#snippet failed()}
+	<div>Fallback!</div>
+{/snippet}
+
+<svelte:boundary {failed} onerror={(e) => console.log('error caught')}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>

packages/svelte/tests/runtime-runes/samples/error-boundary-5/Child.svelte

@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	$effect.pre(() => {
+		if (count > 1) {
+			throw new Error('too high');
+		}
+	});
+</script>
+
+{count}
+
+<button onclick={() => count++}>+</button>

packages/svelte/tests/runtime-runes/samples/error-boundary-5/_config.js

@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>too high</div><button>Retry</button>`);
+
+		const [btn2] = target.querySelectorAll('button');
+
+		btn2?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `0\n<button>+</button>`);
+
+		btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught', 'error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>too high</div><button>Retry</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary-5/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<svelte:boundary onerror={(e) => { throw e }}>
+		<svelte:boundary>
+			<Child />
+		</svelte:boundary>
+	</svelte:boundary>
+
+	{#snippet failed(e, retry)}
+		<div>{e.message}</div>
+		<button onclick={retry}>Retry</button>
+	{/snippet}
+</svelte:boundary>
+
+

packages/svelte/tests/runtime-runes/samples/error-boundary-6/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>+</button><div>There is an error!</div>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary-6/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+	let error = $state();
+</script>
+
+<svelte:boundary onerror={(e) => error = e}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
+
+{#if error}
+	<div>There is an error!</div>
+{/if}
+
+

packages/svelte/tests/runtime-runes/samples/error-boundary/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	test({ assert, logs }) {
+		assert.deepEqual(logs, ['error caught']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	{throw_error()}
+</svelte:boundary>
+
+