add spread to test

Author: adiguba

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

@@ -1,4 +1,4 @@
-import { flushSync } from 'svelte';
+import { flushSync, tick } from 'svelte';
 import { test } from '../../test';
 
 // This test counts mutations on hydration
@@ -16,7 +16,12 @@ export default test({
 
 	html: `
 		<main id="main" class="browser">
-			<div class="custom svelte-1cjqok6 foo bar"></div>
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
 			<span class="svelte-1cjqok6 foo bar"></span>
 			<b class="custom foo bar"></b>
 			<i class="foo bar"></i>
@@ -25,19 +30,97 @@ export default test({
 
 	ssrHtml: `
 		<main id="main">
-			<div class="custom svelte-1cjqok6 foo bar"></div>
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></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 }) {
+	async test({ target, assert, component, instance }) {
 		flushSync();
+		tick();
 		assert.deepEqual(instance.get_and_clear_mutations(), ['MAIN']);
 
 		component.foo = false;
 		flushSync();
-		assert.deepEqual(instance.get_and_clear_mutations(), ['DIV', 'SPAN', 'B', 'I']);
+		tick();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'SPAN', 'B', 'I', 'DIV', 'SPAN', 'B', 'I'],
+			'first mutation'
+		);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<main id="main" class="browser">
+				<div class="custom svelte-1cjqok6 bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar"></span>
+				<b class="custom bar"></b>
+				<i class="bar"></i>
+
+				<div class="custom svelte-1cjqok6 bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar"></span>
+				<b class="custom bar"></b>
+				<i class="bar"></i>
+			</main>
+			`
+		);
+
+		component.foo = true;
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'SPAN', 'B', 'I', 'DIV', 'SPAN', 'B', 'I'],
+			'second mutation'
+		);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<main id="main" class="browser">
+				<div class="custom svelte-1cjqok6 bar foo" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="custom bar foo"></b>
+				<i class="bar foo"></i>
+
+				<div class="custom svelte-1cjqok6 bar foo" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="custom bar foo"></b>
+				<i class="bar foo"></i>
+			</main>
+			`
+		);
+
+		component.classname = 'another';
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'B', 'DIV', 'B'],
+			'class mutation'
+		);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<main id="main" class="browser">
+				<div class="another svelte-1cjqok6 foo bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="another foo bar"></b>
+				<i class="bar foo"></i>
+
+				<div class="another svelte-1cjqok6 foo bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="another foo bar"></b>
+				<i class="bar foo"></i>
+			</main>
+			`
+		);
 	}
 });

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

@@ -33,10 +33,15 @@
 </script>
 
 <main id="main" class:browser>
-	<div class={classname} class:foo class:bar></div>
+	<div class={classname} title="a title" class:foo class:bar></div>
 	<span class:foo class:bar></span>
 	<b class={classname} class:foo class:bar></b>
 	<i class:foo class:bar></i>
+
+	<div {...{class:classname, title:"a title"}} class:foo class:bar></div>
+	<span {...{}} class:foo class:bar></span>
+	<b {...{class:classname}} class:foo class:bar></b>
+	<i {...{}} class:foo class:bar></i>	
 </main>
 
 <style>