update tests

Author: Rich-Harris

packages/svelte/tests/runtime-legacy/shared.ts

@@ -3,7 +3,7 @@ import { setImmediate } from 'node:timers/promises';
 import glob from 'tiny-glob/sync.js';
 import * as $ from 'svelte/internal/client';
 import { createClassComponent } from 'svelte/legacy';
-import { flushSync } from 'svelte';
+import { flushSync, hydrate, mount, unmount } from 'svelte';
 import { render } from 'svelte/server';
 import { afterAll, assert, beforeAll } from 'vitest';
 import { compile_directory } from '../helpers.js';
@@ -119,7 +119,7 @@ export function runtime_suite(runes: boolean) {
 			return common_setup(cwd, runes, config);
 		},
 		async (config, cwd, variant, common) => {
-			await run_test_variant(cwd, config, variant, common);
+			await run_test_variant(cwd, config, variant, common, runes);
 		}
 	);
 }
@@ -147,7 +147,8 @@ async function run_test_variant(
 	cwd: string,
 	config: RuntimeTest,
 	variant: 'dom' | 'hydrate' | 'ssr',
-	compileOptions: CompileOptions
+	compileOptions: CompileOptions,
+	runes: boolean
 ) {
 	let unintended_error = false;
 
@@ -256,15 +257,35 @@ async function run_test_variant(
 				}
 			};
 
-			const instance = createClassComponent({
-				component: mod.default,
-				props: config.props,
-				target,
-				immutable: config.immutable,
-				intro: config.intro,
-				recover: config.recover ?? false,
-				hydrate: variant === 'hydrate'
-			});
+			let instance: any;
+			let props: any;
+
+			if (runes) {
+				props = $.proxy({ ...(config.props || {}) });
+
+				// TODO get rid
+				props.$set = (new_props: Record<string, any>) => {
+					Object.assign(props, new_props);
+				};
+
+				const render = variant === 'hydrate' ? hydrate : mount;
+				instance = render(mod.default, {
+					target,
+					props,
+					intro: config.intro,
+					recover: config.recover ?? false
+				});
+			} else {
+				instance = createClassComponent({
+					component: mod.default,
+					props: config.props,
+					target,
+					immutable: config.immutable,
+					intro: config.intro,
+					recover: config.recover ?? false,
+					hydrate: variant === 'hydrate'
+				});
+			}
 
 			// eslint-disable-next-line no-console
 			console.warn = warn;
@@ -303,7 +324,7 @@ async function run_test_variant(
 							htmlEqualWithOptions: assert_html_equal_with_options
 						},
 						variant,
-						component: instance,
+						component: runes ? props : instance,
 						mod,
 						target,
 						snapshot,
@@ -318,7 +339,12 @@ async function run_test_variant(
 					assert.fail('Expected a runtime error');
 				}
 			} finally {
-				instance.$destroy();
+				if (runes) {
+					unmount(instance);
+				} else {
+					instance.$destroy();
+				}
+
 				assert_html_equal(
 					target.innerHTML,
 					'',

packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js

@@ -1,6 +1,12 @@
 import { test } from '../../test';
 
 export default test({
+	get props() {
+		return {
+			items: [{ src: 'https://ds' }]
+		};
+	},
+
 	async test({ assert, target, component }) {
 		assert.equal(target.querySelector('img'), component.items[0].img);
 	}

packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte

@@ -1,5 +1,5 @@
 <script>
-	let { items = $bindable([{ src: 'https://ds' }]) } = $props();
+	let { items } = $props();
 </script>
 
 {#each items as item, i}

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { log } from './log.js';
 
@@ -32,7 +33,7 @@ export default test({
 
 		log.length = 0;
 
-		component.n += 1;
+		flushSync(() => (component.n += 1));
 
 		assert.deepEqual(log, [
 			'parent: $effect.pre 1',

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { log } from './log.js';
 
@@ -27,7 +28,7 @@ export default test({
 
 		log.length = 0;
 
-		component.n += 1;
+		flushSync(() => (component.n += 1));
 
 		assert.deepEqual(log, [
 			'parent: render 1',

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { log } from './log.js';
 
@@ -32,7 +33,7 @@ export default test({
 
 		log.length = 0;
 
-		component.n += 1;
+		flushSync(() => (component.n += 1));
 
 		assert.deepEqual(log, [
 			'parent: $effect.pre 1',

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-5/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { log } from './log.js';
 
@@ -14,7 +15,7 @@ export default test({
 		assert.deepEqual(log, ['$effect.pre 0', 'another $effect.pre 1', 'render n0', 'render i1']);
 
 		log.length = 0;
-		component.n += 1;
+		flushSync(() => (component.n += 1));
 
 		assert.deepEqual(log, ['$effect.pre 1', 'another $effect.pre 2', 'render n1', 'render i2']);
 	}

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { log } from './log.js';
 
@@ -28,7 +29,7 @@ export default test({
 
 		log.length = 0;
 
-		component.n += 1;
+		flushSync(() => (component.n += 1));
 
 		assert.deepEqual(log, [
 			'parent: $effect.pre 1',

packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from '../../../../src/index-client.js';
 import { test } from '../../test';
 
 // Tests that default values only fire lazily when the prop is undefined, and every time
@@ -8,22 +9,32 @@ export default test({
 		p2: 0,
 		p3: 0
 	},
+
 	html: `<p>props: 0 0 0 0 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn`,
+
 	async test({ assert, target, component }) {
-		component.p0 = undefined;
-		component.p1 = undefined;
-		component.p2 = undefined;
-		component.p3 = undefined;
-		// Nuance: these are already undefined in the props, but we're setting them to undefined again,
-		// which calls the fallback value again, even if it will result in the same value. There's no way
-		// to prevent this, and in practise it won't matter - and you shouldn't use accessors in runes mode anyway.
-		component.p4 = undefined;
-		component.p5 = undefined;
-		component.p6 = undefined;
-		component.p7 = undefined;
+		flushSync(() => {
+			component.p0 = undefined;
+			component.p1 = undefined;
+			component.p2 = undefined;
+			component.p3 = undefined;
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
+		);
+
+		flushSync(() => {
+			component.p4 = undefined;
+			component.p5 = undefined;
+			component.p6 = undefined;
+			component.p7 = undefined;
+		});
+
 		assert.htmlEqual(
 			target.innerHTML,
-			`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
+			`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
 		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/props-quoted/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -8,7 +9,7 @@ export default test({
 	html: `hello`,
 
 	async test({ assert, target, component }) {
-		component['kebab-case'] = 'goodbye';
+		flushSync(() => (component['kebab-case'] = 'goodbye'));
 		assert.htmlEqual(target.innerHTML, `goodbye`);
 	}
 });

packages/svelte/tests/runtime-runes/samples/props/_config.js

@@ -1,3 +1,4 @@
+import { flushSync } from '../../../../src/index-client.js';
 import { test } from '../../test';
 
 export default test({
@@ -9,10 +10,13 @@ export default test({
 			default2: undefined
 		};
 	},
+
 	html: `x 1 2 3 z`,
 
 	async test({ assert, target, component }) {
-		component.foo = 'y';
+		flushSync(() => {
+			component.foo = 'y';
+		});
 		assert.htmlEqual(target.innerHTML, `y 1 2 3 z`);
 
 		// rest props don't generate accessors, so we need to use $set

packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js

@@ -1,12 +1,15 @@
+import { flushSync } from '../../../../src/index-client.js';
 import { test } from '../../test';
 
 export default test({
 	test({ assert, component, target }) {
 		const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div'));
 
 		assert.equal(div.foo, undefined);
-		component.foo = 2;
-		component.visible = false;
+		flushSync(() => {
+			component.foo = 2;
+			component.visible = false;
+		});
 		assert.equal(div.foo, 2);
 	}
 });