From 0d75cc4bc2dc7a24ebb75adc77985e2b457328ee Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 19 Apr 2024 17:56:34 -0400
Subject: [PATCH] test

---
 .../each-keyed-child-effect/_config.js        | 43 +++++++++++++++++++
 .../each-keyed-child-effect/main.svelte       | 12 ++++++
 2 files changed, 55 insertions(+)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/main.svelte

diff --git a/packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/_config.js
new file mode 100644
index 0000000000..d4e13c3912
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/_config.js
@@ -0,0 +1,43 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+let ascending = `
+<button>reverse</button>
+<p>1</p>
+<p>(1)</p>
+<p>2</p>
+<p>(2)</p>
+<p>3</p>
+<p>(3)</p>
+`;
+
+let descending = `
+<button>reverse</button>
+<p>3</p>
+<p>(3)</p>
+<p>2</p>
+<p>(2)</p>
+<p>1</p>
+<p>(1)</p>
+`;
+
+export default test({
+	html: ascending,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		ok(btn);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, descending);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, ascending);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, descending);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, ascending);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/main.svelte
new file mode 100644
index 0000000000..9c6605084a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+<button onclick={() => array.reverse()}>reverse</button>
+
+{#each array as item (item)}
+	<p>{item}</p>
+	{#if true}
+		<p>({item})</p>
+	{/if}
+{/each}