add more legacy tests (#10881)

* add more legacy tests

* add more tests

* ts

packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/Component.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { afterUpdate, onDestroy } from "svelte";
+
+  export let id;
+	export let items;
+
+  let item = $items[id];
+	let selected = true;
+
+  function onClick() {
+    selected = !selected;
+    items.set({});
+  }
+
+  onDestroy(() => {
+		console.log("onDestroy");
+  });
+
+  afterUpdate(() => {
+    console.log("afterUpdate");
+  });
+</script>
+
+<button on:click="{onClick}">Click Me</button>
+{#if selected}
+  <div>{item.id}</div>
+{/if}

packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js

@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	html: `
+		<button>Click Me</button>
+		<div>1</div>
+	`,
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		/**
+		 * @type {any[]}
+		 */
+		const messages = [];
+		const log = console.log;
+		console.log = (msg) => messages.push(msg);
+
+		flushSync(() => {
+			// @ts-ignore
+			button.dispatchEvent(event);
+		});
+
+		console.log = log;
+		assert.deepEqual(messages, ['afterUpdate', 'onDestroy']);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { writable } from 'svelte/store';
+  import Component from "./Component.svelte";
+
+	let items = writable({ 1: { id: 1 } });
+</script>
+
+{#each Object.values($items) as item (item.id)}
+  <Component id="{item.id}" {items} />
+{/each}

packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js

@@ -0,0 +1,25 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+
+	get props() {
+		return { value: 'hello!' };
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.value = 'goodbye!';
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let value;
+	let mirror;
+
+	afterUpdate(() => {
+		mirror = value;
+	});
+</script>
+
+<p>{value}</p>
+<p>{mirror}</p>

packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js

@@ -0,0 +1,25 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+
+	get props() {
+		return { value: 'hello!' };
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.value = 'goodbye!';
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let a;
+	export let b;
+
+	export let value;
+
+	afterUpdate(() => {
+		b.textContent = a.textContent;
+	});
+</script>
+
+<p bind:this={a}>{value}</p>
+<p bind:this={b}></p>

packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	get props() {
+		return {
+			things: [
+				{ id: 1, name: 'a' },
+				{ id: 2, name: 'b' },
+				{ id: 3, name: 'c' },
+				{ id: 4, name: 'd' },
+				{ id: 5, name: 'e' }
+			]
+		};
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		let divs = target.querySelectorAll('div');
+		divs.forEach((div) => {
+			div.getBoundingClientRect = function () {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = target.querySelectorAll('div');
+		assert.ok(~divs[0].style.animation.indexOf('__svelte'));
+		assert.equal(divs[1].style.animation, '');
+		assert.equal(divs[2].style.animation, '');
+		assert.equal(divs[3].style.animation, '');
+		assert.ok(~divs[4].style.animation.indexOf('__svelte'));
+
+		raf.tick(100);
+		assert.deepEqual([divs[0].style.animation, divs[4].style.animation], ['', '']);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/animation-css/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}

packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import { ok, test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	get props() {
+		return {
+			things: [
+				{ id: 1, name: 'a' },
+				{ id: 2, name: 'b' },
+				{ id: 3, name: 'c' },
+				{ id: 4, name: 'd' },
+				{ id: 5, name: 'e' }
+			]
+		};
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, window, raf }) {
+		let divs = window.document.querySelectorAll('div');
+		divs.forEach((div) => {
+			div.getBoundingClientRect = function () {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = window.document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(divs[0].dy, 108);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(divs[0].dy, 48);
+		assert.equal(divs[4].dy, 0);
+
+		raf.tick(150);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+
+		component.things = [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		];
+
+		divs = document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(200);
+		assert.equal(divs[0].dy, 108);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(250);
+		assert.equal(divs[0].dy, 48);
+		assert.equal(divs[4].dy, 0);
+
+		raf.tick(300);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/animation-js-delay/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			delay: params.delay,
+			duration: 100,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing, i (thing.id)}
+	<div animate:flip="{{delay: i * 10}}">{thing.name}</div>
+{/each}

packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { ok, test } from '../../test';
+
+export default test({
+	get props() {
+		return {
+			things: [
+				{ id: 1, name: 'a' },
+				{ id: 2, name: 'b' },
+				{ id: 3, name: 'c' },
+				{ id: 4, name: 'd' },
+				{ id: 5, name: 'e' }
+			]
+		};
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, raf }) {
+		let divs = document.querySelectorAll('div');
+		divs.forEach((div) => {
+			div.getBoundingClientRect = function () {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(divs[0].dy, 60);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/animation-js-easing/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	export let things;
+
+	export function linear(t) {
+		return t;
+	}
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			easing: linear,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}

packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return {
+			things: [
+				{ id: 1, name: 'a' },
+				{ id: 2, name: 'b' },
+				{ id: 3, name: 'c' },
+				{ id: 4, name: 'd' },
+				{ id: 5, name: 'e' }
+			]
+		};
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, raf }) {
+		let divs = document.querySelectorAll('div');
+		divs.forEach((div) => {
+			div.getBoundingClientRect = function () {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(divs[0].dy, 60);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+
+		component.things = [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		];
+
+		divs = document.querySelectorAll('div');
+
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(150);
+		assert.equal(divs[0].dy, 60);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(200);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/animation-js/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}

packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js

@@ -0,0 +1,24 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	html: `
+		<page horizontalAlignment="center">
+			<button textWrap="true" text="button"></button>
+			<text wordWrap="true"></text>
+		</page>
+	`,
+	skip_if_hydrate: true,
+
+	compileOptions: {
+		namespace: 'foreign'
+	},
+	test({ assert, target }) {
+		// @ts-ignore
+		const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;
+		assert.equal(attr('page'), 'horizontalAlignment');
+		assert.equal(attr('button'), 'textWrap');
+		assert.equal(attr('text'), 'wordWrap');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte

@@ -0,0 +1,4 @@
+<page horizontalAlignment="center">
+	<button textWrap="true" text="button" />
+	<text wordWrap="true" />
+</page>

packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js

@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	html: `
+		<page horizontalAlignment="center">
+			<button textWrap="true" text="button">
+		</page>
+	`,
+	skip_if_hydrate: true,
+
+	test({ assert, target }) {
+		// @ts-ignore
+		const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;
+		assert.equal(attr('page'), 'horizontalAlignment');
+		assert.equal(attr('button'), 'textWrap');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/main.svelte

@@ -0,0 +1,4 @@
+<svelte:options namespace="foreign" />
+<page horizontalAlignment="center">
+	<button textWrap="true" text="button">
+</page>

packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js

@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	html: `
+		<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>
+	`
+});

packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/main.svelte

@@ -0,0 +1,33 @@
+<script>
+	class MyCustomElement extends HTMLElement {
+		constructor() {
+			super();
+			this._obj = null;
+			this._text = null;
+		}
+
+		set text(text) {
+			this._text = text;
+			this.render();
+		}
+
+		set camelCase(obj) {
+			this._obj = obj;
+			this.render();
+		}
+
+		connectedCallback() {
+			this.render();
+		}
+
+		render() {
+			this.innerHTML = 'Hello ' + this._obj.text + this._text;
+		}
+	}
+
+	class Extended extends MyCustomElement {}
+
+	window.customElements.define('my-custom-inheritance-element', Extended);
+</script>
+
+<my-custom-inheritance-element camelCase={{ text: 'World' }} text="!" />

packages/svelte/tests/runtime-legacy/samples/before-render-chain/Item.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let item;
+	export let foo = 'XX';
+
+	beforeUpdate(() => {
+		foo = item;
+	});
+</script>
+
+<span>{foo}</span>

packages/svelte/tests/runtime-legacy/samples/before-render-chain/List.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Item from './Item.svelte';
+
+	export let items = [3, 2, 1];
+
+	export function update() {
+		items = [1, 2, 3, 4, 5];
+	}
+</script>
+
+{#each items as item}
+	<Item item={item} />
+{/each}

packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js

@@ -0,0 +1,28 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO: needs fixing
+
+	skip_if_ssr: true,
+
+	html: `
+		<span>3</span>
+		<span>2</span>
+		<span>1</span>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.list.update();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+			<span>4</span>
+			<span>5</span>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/before-render-chain/main.svelte

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

packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/_config.js

@@ -0,0 +1,25 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+
+	get props() {
+		return { value: 'hello!' };
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.value = 'goodbye!';
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let value;
+	let mirror;
+
+	beforeUpdate(() => {
+		mirror = value;
+	});
+</script>
+
+<p>{value}</p>
+<p>{mirror}</p>

packages/svelte/tests/runtime-legacy/samples/binding-select-from-let-2/Parent.svelte

@@ -0,0 +1,6 @@
+<script>
+	const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
+</script>
+
+<slot {tasks} />
+

packages/svelte/tests/runtime-legacy/samples/binding-select-from-let-2/_config.js

@@ -0,0 +1,28 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<select>
+			<option value='do laundry'>do laundry</option>
+			<option value='do taxes'>do taxes</option>
+			<option value='cook food'>cook food</option>
+			<option value='watch the kids'>watch the kids</option>
+		</select>
+		<p>1</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		assert.equal(component.tasks_touched, 1);
+
+		const change = new window.Event('change');
+		options[1].selected = true;
+		// @ts-ignore
+		await select.dispatchEvent(change);
+
+		assert.equal(component.selected, options[1].value);
+		assert.equal(component.tasks_touched, 1);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/binding-select-from-let-2/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	import Parent from "./Parent.svelte";
+	export let selected;
+	export let tasks = ['do nothing'];
+	export let tasks_touched = 0;
+
+	$: {
+		tasks, tasks_touched++;
+	}
+</script>
+
+<Parent let:tasks={tasks}>
+	<select bind:value={selected}>
+		{#each tasks as task}
+			<option value={task}>{task}</option>
+		{/each}
+	</select>
+</Parent>
+<p>{tasks_touched}</p>

packages/svelte/tests/runtime-legacy/samples/binding-select-from-let/Parent.svelte

@@ -0,0 +1,6 @@
+<script>
+	const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
+</script>
+
+<slot {tasks} />
+

packages/svelte/tests/runtime-legacy/samples/binding-select-from-let/_config.js

@@ -0,0 +1,24 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<select>
+			<option value='do laundry'>do laundry</option>
+			<option value='do taxes'>do taxes</option>
+			<option value='cook food'>cook food</option>
+			<option value='watch the kids'>watch the kids</option>
+		</select>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		const change = new window.Event('change');
+		options[1].selected = true;
+		// @ts-ignore
+		await select.dispatchEvent(change);
+
+		assert.equal(component.selected, options[1].value);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/binding-select-from-let/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Parent from "./Parent.svelte";
+	export let selected;
+</script>
+
+<Parent let:tasks={tasks}>
+	<select bind:value={selected}>
+		{#each tasks as task}
+			<option value={task}>{task}</option>
+		{/each}
+	</select>
+</Parent>