chore: add tests

packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/Child.svelte

@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>

packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	html: '<custom></custom>',
+	async test({ assert, component, target }) {
+		const [div] = target.children[0].elements_children;
+		assert.instanceOf(div, HTMLDivElement);
+		assert.equal(div.outerHTML, '<div><span>hello from child</span></div>');
+
+		component.hide();
+		flushSync();
+
+		assert.isFalse(target.children[0].elements_children.includes(div));
+	}
+});

packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+</script>
+
+<custom>
+	{#if visible}
+		<Child message="hello from child"></Child>
+	{/if}
+</custom>

packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js

@@ -2,11 +2,11 @@ import { test } from '../../test-dom.test';
 
 export default test({
 	// this is the custom rendered component...it doesn't have anything inside because the part of the renderer
-	// responsible for the interleaving is the `before` function on the comment node which only push into `dom_elements` in this case
+	// responsible for the interleaving is the `before` function on the comment node which only push into `target.elements_children` in this case
 	html: '<custom></custom>',
-	test({ assert, dom_elements }) {
-		// we then get the element out of dom_elements
-		const [div] = dom_elements;
+	test({ assert, target }) {
+		// we then get the element out of target.elements_children
+		const [div] = target.children[0].elements_children;
 		// check that is an actual DOM element and that it has the expected content
 		assert.instanceOf(div, HTMLDivElement);
 		assert.equal(div.outerHTML, '<div><span>hello from child</span></div>');

packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/Child.svelte

@@ -0,0 +1 @@
+<text>something</text>

packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/_config.js

@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	hydrate: true,
+	test({ assert, component, target, warnings }) {
+		assert.instanceOf(target, HTMLElement);
+		assert.deepEqual(warnings, []);
+		assert.ok(target.querySelector('#keep-me'));
+		assert.ok(target.querySelector('custom-rendered'));
+
+		component.hide();
+		flushSync();
+
+		assert.ok(target.querySelector('#keep-me'));
+		assert.equal(target.querySelector('custom-rendered'), null);
+		assert.notInclude(target.textContent, 'Cool:');
+
+		component.show();
+		flushSync();
+
+		assert.ok(target.querySelector('#keep-me'));
+		assert.ok(target.querySelector('custom-rendered'));
+	}
+});

packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/main.svelte

@@ -0,0 +1,23 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+
+	export function show() {
+		visible = true;
+	}
+</script>
+
+<div>
+	{#if visible}
+		Cool: <Child />
+	{/if}
+</div>
+
+<div id="keep-me"></div>

packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/Child.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>

packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/_config.js

@@ -0,0 +1,44 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	test({ assert, component, target }) {
+		// we mounted the component in the root fragment so the div is in the target.elements_children
+		const [div] = target.elements_children;
+		assert.instanceOf(div, HTMLDivElement);
+
+		// find the custom-rendered element in the div and assert the json content
+		let custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+		assert.deepEqual(JSON.parse(custom_rendered.textContent), {
+			type: 'element',
+			name: 'div',
+			attributes: {},
+			children: [
+				{
+					type: 'element',
+					name: 'span',
+					attributes: {},
+					children: [{ type: 'text', value: 'hello from child' }],
+					elements_children: [],
+					listeners: {}
+				}
+			],
+			elements_children: [],
+			listeners: {}
+		});
+
+		component.hide();
+		flushSync();
+
+		// we unmounted the custom rendered component so the map is empty again
+		assert.equal(div.querySelector('custom-rendered'), null);
+
+		component.show();
+		flushSync();
+
+		// we mounted the custom rendered component into the div again so it's in the mounted_in_dom_elements map again
+		custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+	}
+});

packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/main.svelte

@@ -0,0 +1,20 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+	export function show() {
+		visible = true;
+	}
+</script>
+
+<div>
+	{#if visible}
+		test: <Child message="hello from child"></Child>
+	{/if}
+</div>

packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/Child.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>

packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/_config.js

@@ -0,0 +1,44 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	test({ assert, component, target }) {
+		// we mounted the component in the root fragment so the div is in the target.elements_children
+		const [div] = target.elements_children;
+		assert.instanceOf(div, HTMLDivElement);
+
+		// find the custom-rendered element in the div and assert the json content
+		let custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+		assert.deepEqual(JSON.parse(custom_rendered.textContent), {
+			type: 'element',
+			name: 'div',
+			attributes: {},
+			children: [
+				{
+					type: 'element',
+					name: 'span',
+					attributes: {},
+					children: [{ type: 'text', value: 'hello from child' }],
+					elements_children: [],
+					listeners: {}
+				}
+			],
+			elements_children: [],
+			listeners: {}
+		});
+
+		component.hide();
+		flushSync();
+
+		// we unmounted the custom rendered component so the map is empty again
+		assert.equal(div.querySelector('custom-rendered'), null);
+
+		component.show();
+		flushSync();
+
+		// we mounted the custom rendered component into the div again so it's in the mounted_in_dom_elements map again
+		custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+	}
+});

packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/main.svelte

@@ -0,0 +1,20 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+	export function show() {
+		visible = true;
+	}
+</script>
+
+<div>
+	{#if visible}
+		<Child message="hello from child"></Child>
+	{/if}
+</div>