add test for mutations on hydration

Author: adiguba

packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js

@@ -0,0 +1,44 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// This test count mutations on hydration
+// set_class() shoult not mutate class on hydration, except if mismatch
+export default test({
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	},
+
+	html: `
+        <main id="main" class="browser">
+            <div class="custom svelte-1cjqok6 foo bar"></div>
+            <span class="svelte-1cjqok6 foo bar"></span>
+            <b class="custom foo bar"></b>
+            <i class="foo bar"></i>
+        </main>
+    `,
+
+	ssrHtml: `
+        <main id="main">
+            <div class="custom svelte-1cjqok6 foo bar"></div>
+            <span class="svelte-1cjqok6 foo bar"></span>
+            <b class="custom foo bar"></b>
+            <i class="foo bar"></i>
+        </main>
+    `,
+
+	async test({ assert, component, instance, variant }) {
+		// only on hydration
+		if (variant === 'hydrate') {
+			flushSync();
+			assert.deepEqual(instance.get_and_clear_mutations(), ['MAIN']);
+
+			component.foo = false;
+			flushSync();
+			assert.deepEqual(instance.get_and_clear_mutations(), ['DIV', 'SPAN', 'B', 'I']);
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte

@@ -0,0 +1,49 @@
+<script>
+	let {
+        clazz = 'custom',
+        foo = true,
+        bar = true,
+        browser
+    } = $props();
+
+    let mutations = [];
+    let observer;
+
+    if (browser) {
+		observer = new MutationObserver(updateMutationRecords);
+        const main = document.querySelector('main#main');
+        if (main) {
+            observer.observe(main, { attributes: true, subtree: true });
+        }
+        
+	}
+    
+
+    function updateMutationRecords(results) {
+        for (const r of results) {
+			mutations.push(r.target.nodeName);
+		}
+    }
+
+    export function get_and_clear_mutations() {
+        updateMutationRecords(observer.takeRecords());
+        const result = mutations;
+        mutations = [];
+        return result;
+    }
+
+</script>
+
+<main id="main" class:browser>
+	<div class={clazz} class:foo class:bar></div>
+	<span class:foo class:bar></span>
+	<b class={clazz} class:foo class:bar></b>
+	<i class:foo class:bar></i>
+</main>
+
+<style>
+	div,
+	span {
+		color: red;
+	}
+</style>