add more legacy tests (#10881)

* add more legacy tests

* add more tests

* ts

Author: trueadm

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}