Add more tests (#10882)

* Add more tests

* ts

Author: trueadm

packages/svelte/tests/runtime-legacy/samples/component-binding-blowback/Widget.svelte

@@ -0,0 +1 @@
+<p>does nothing</p>

packages/svelte/tests/runtime-legacy/samples/component-binding-blowback/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+// @ts-nocheck
+
+export default test({
+	test({ assert, component }) {
+		let count = 0;
+
+		// @ts-ignore
+		component.$on('state', ({ changed }) => {
+			if (changed.bar) count += 1;
+		});
+
+		component.x = true;
+		assert.equal(count, 0);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-binding-blowback/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let x = false;
+	export let bar = {
+		baz: 42
+	};
+</script>
+
+{#if x}
+	<Widget bind:foo={bar.baz}/>
+{/if}

packages/svelte/tests/runtime-legacy/samples/component-nested-deep/Level1.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Level2 from './Level2.svelte';
+	import Level3 from './Level3.svelte';
+</script>
+
+<Level2>
+	<Level3 />
+</Level2>

packages/svelte/tests/runtime-legacy/samples/component-nested-deep/Level2.svelte

@@ -0,0 +1,6 @@
+<script>
+	import Level3 from './Level3.svelte';
+</script>
+
+<span>level 2</span>
+<slot></slot>

packages/svelte/tests/runtime-legacy/samples/component-nested-deep/Level3.svelte

@@ -0,0 +1 @@
+<span>level 3</span>

packages/svelte/tests/runtime-legacy/samples/component-nested-deep/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+import { unmount } from 'svelte';
+
+export default test({
+	test({ component }) {
+		unmount(component.l1);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-nested-deep/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Level1 from './Level1.svelte';
+
+	export let l1;
+</script>
+
+<Level1 bind:this={l1} />

packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/ChildComponent.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { getContext } from 'svelte';
+	const value = getContext('foo');
+</script>
+
+<div>Value in child component: {value}</div>

packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+	html: `
+		<div><div>Value in child component: </div></div>
+	`
+});

packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { setContext, mount } from 'svelte';
+	import ChildComponent from './ChildComponent.svelte';
+
+	setContext('foo', true);
+
+	function render(node) {
+		mount(ChildComponent, {
+			target: node,
+			context: new Map()
+		});
+	}
+</script>
+
+<div use:render />

packages/svelte/tests/runtime-legacy/samples/destroy-twice/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+import { unmount } from 'svelte';
+
+export default test({
+	test({ component }) {
+		unmount(component);
+		unmount(component);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/destroy-twice/main.svelte

@@ -0,0 +1 @@
+<div/>

packages/svelte/tests/runtime-legacy/samples/dev-warning-each-block-require-arraylike/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	compileOptions: {
+		dev: true
+	},
+	error: '{#each} only works with iterable values.'
+});

packages/svelte/tests/runtime-legacy/samples/dev-warning-each-block-require-arraylike/main.svelte

@@ -0,0 +1,3 @@
+{#each {} as item}
+	<div>{item}</div>
+{/each}

packages/svelte/tests/runtime-legacy/samples/dev-warning-readonly-computed/_config.js

@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing, error message is wrong
+
+	compileOptions: {
+		dev: true
+	},
+
+	get props() {
+		return { a: 42 };
+	},
+
+	test({ assert, component }) {
+		try {
+			component.foo = 1;
+			throw new Error('Expected an error');
+		} catch (err) {
+			// @ts-ignore
+			assert.equal(err.message, "<Main>: Cannot set read-only property 'foo'");
+		}
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dev-warning-readonly-computed/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let a;
+
+	export function foo() {
+		return a + 1;
+	}
+</script>

packages/svelte/tests/runtime-legacy/samples/dynamic-component-evals-props-once/Comp1.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value;
+</script>
+
+<p>value(1) = {value}</p>

packages/svelte/tests/runtime-legacy/samples/dynamic-component-evals-props-once/Comp2.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value;
+</script>
+
+<p>value(2) = {value}</p>

packages/svelte/tests/runtime-legacy/samples/dynamic-component-evals-props-once/_config.js

@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>value(1) = 1</p>
+		<button>Toggle Component</button>
+	`,
+
+	async test({ assert, component, window, target }) {
+		const button = target.querySelector('button');
+		// @ts-ignore
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(2) = 2</p>
+				<button>Toggle Component</button>
+			`
+		);
+		assert.equal(component.n, 2);
+		// @ts-ignore
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(1) = 3</p>
+				<button>Toggle Component</button>
+			`
+		);
+		assert.equal(component.n, 3);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-component-evals-props-once/main.svelte

@@ -0,0 +1,12 @@
+<script>
+  import Comp1 from './Comp1.svelte';
+  import Comp2 from './Comp2.svelte';
+
+  export let n = 0;
+  let view = { comp: Comp1, fn: () => ++n };
+</script>
+
+<svelte:component this={view.comp} value={view.fn()}/>
+
+<button on:click={e => view.comp = view.comp === Comp1 ? Comp2 : Comp1}>Toggle Component</button>
+

packages/svelte/tests/runtime-legacy/samples/dynamic-component-spread-props/Comp1.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let value;
+  export let foo;
+  export let cb;
+</script>
+
+<p>value(1) = {value}</p>
+<p>foo={foo}</p>
+<p>typeof cb={typeof cb}</p>

packages/svelte/tests/runtime-legacy/samples/dynamic-component-spread-props/Comp2.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let value;
+  export let foo;
+  export let cb;
+</script>
+
+<p>value(2) = {value}</p>
+<p>foo={foo}</p>
+<p>typeof cb={typeof cb}</p>

packages/svelte/tests/runtime-legacy/samples/dynamic-component-spread-props/_config.js

@@ -0,0 +1,36 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>value(1) = 1</p>
+		<p>foo=bar</p>
+		<p>typeof cb=function</p>
+		<button>Toggle Component</button>
+	`,
+
+	async test({ assert, window, target }) {
+		const button = target.querySelector('button');
+		// @ts-ignore
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(2) = 2</p>
+				<p>foo=bar</p>
+				<p>typeof cb=function</p>
+				<button>Toggle Component</button>
+			`
+		);
+		// @ts-ignore
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(1) = 1</p>
+				<p>foo=bar</p>
+				<p>typeof cb=function</p>
+				<button>Toggle Component</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-component-spread-props/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Comp1 from './Comp1.svelte';
+	import Comp2 from './Comp2.svelte';
+
+	let view = Comp1;
+
+	$: props = view === Comp1 ? { value: 1 } : { value: 2 };
+	const bar = "bar";
+	function cb() {}
+</script>
+
+<svelte:component this={view} {...props} foo={bar} {cb} />
+
+<button on:click={(e) => (view = view === Comp1 ? Comp2 : Comp1)}>Toggle Component</button>

packages/svelte/tests/runtime-legacy/samples/empty-component-destroy/Empty.svelte

@@ -0,0 +1,8 @@
+
+<script>
+  import { onDestroy } from 'svelte';
+
+	onDestroy(() => {
+		console.log('destroy');
+	});
+</script>

packages/svelte/tests/runtime-legacy/samples/empty-component-destroy/_config.js

@@ -0,0 +1,38 @@
+import { test } from '../../test';
+
+/**
+ * @type {{ (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; }}
+ */
+let log;
+
+export default test({
+	html: `
+	  <button>destroy component</button>
+	`,
+
+	before_test() {
+		log = console.log;
+	},
+	after_test() {
+		console.log = log;
+	},
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		/**
+		 * @type {any[]}
+		 */
+		const messages = [];
+		console.log = (msg) => messages.push(msg);
+		// @ts-ignore
+		await button.dispatchEvent(event);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>destroy component</button>
+		`
+		);
+		assert.deepEqual(messages, ['destroy']);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/empty-component-destroy/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Empty from './Empty.svelte';
+	let active = true;
+</script>
+
+<button on:click='{() => active = false }'>destroy component</button>
+
+<svelte:component this={active ? Empty : null} />

packages/svelte/tests/runtime-legacy/samples/event-handler-each-this/_config.js

@@ -0,0 +1,33 @@
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return { items: ['foo', 'bar', 'baz'] };
+	},
+
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<button>baz</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		/**
+		 * @type {any[]}
+		 */
+		const clicked = [];
+
+		component.$on('clicked', (/** @type {{ detail: { node: any; }; }} */ event) => {
+			clicked.push(event.detail.node);
+		});
+
+		buttons[1].dispatchEvent(event);
+
+		assert.equal(clicked.length, 1);
+		assert.equal(clicked[0].nodeName, 'BUTTON');
+		assert.equal(clicked[0].textContent, 'bar');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/event-handler-each-this/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let items;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+{#each items as item}
+	<button on:click='{e => dispatch("clicked", { node: e.target })}'>{item}</button>
+{/each}

packages/svelte/tests/runtime-legacy/samples/event-handler-shorthand-component/Widget.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("foo", { answer: 42 })}'>click me</button>