Add test for passing props and fix test vars

Author: Alfred Ringstad

test/runtime/samples/dynamic-element-expression/_config.js

@@ -1,3 +1,3 @@
 export default {
-	html: '<div>Test</div>'
+	html: '<div>Foo</div>'
 };

test/runtime/samples/dynamic-element-expression/main.svelte

@@ -1 +1 @@
-<svelte:element tag={"div"}>Test</svelte:element>
+<svelte:element tag={"div"}>Foo</svelte:element>

test/runtime/samples/dynamic-element-pass-props/_config.js

@@ -0,0 +1,16 @@
+let clicked = false;
+
+export default {
+	props: {
+		tag: 'div',
+		onClick: () => clicked = true
+	},
+	html: '<div style="display: inline;">Foo</div>',
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		await div.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.equal(clicked, true);
+	}
+};

test/runtime/samples/dynamic-element-pass-props/main.svelte

@@ -0,0 +1,6 @@
+<script>
+  const tag = "div";
+  export let onClick;
+</script>
+
+<svelte:element tag={tag} style="display: inline;" on:click={onClick}>Foo</svelte:element>

test/runtime/samples/dynamic-element-string/_config.js

@@ -1,3 +1,3 @@
 export default {
-	html: '<div>Test</div>'
+	html: '<div>Foo</div>'
 };

test/runtime/samples/dynamic-element-string/main.svelte

@@ -1 +1 @@
-<svelte:element tag="div">Test</svelte:element>
+<svelte:element tag="div">Foo</svelte:element>

test/runtime/samples/dynamic-element-variable-2/_config.js

@@ -1,22 +1,22 @@
 export default {
 	props: {
 		tag: 'div',
-		text: 'Test'
+		text: 'Foo'
 	},
-	html: '<div>Test</div>',
+	html: '<div>Foo</div>',
 
 	test({ assert, component, target }) {
 		const div = target.firstChild;
-		component.text = 'Wow';
+		component.text = 'Bar';
 
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div>Wow</div>
+			<div>Bar</div>
 		`
 		);
 
-		// Svelte is reusing element
+		// Re-use element since tag has not changed
 		assert.equal(div, target.firstChild);
 	}
 };

test/runtime/samples/dynamic-element-variable-2/main.svelte

@@ -1,6 +1,6 @@
 <script>
   const tag = "div";
-  export let text = "Test";
+  export let text = "Foo";
 </script>
 
 <svelte:element tag={tag}>{text}</svelte:element>

test/runtime/samples/dynamic-element-variable/_config.js

@@ -1,17 +1,17 @@
 export default {
 	props: {
 		tag: 'div',
-		text: 'Test'
+		text: 'Foo'
 	},
-	html: '<div>Test</div>',
+	html: '<div>Foo</div>',
 
 	test({ assert, component, target }) {
 		const div = target.firstChild;
 		component.tag = 'h1';
-		component.text = 'Wow';
+		component.text = 'Bar';
 
 		assert.htmlEqual(target.innerHTML, `
-			<h1>Wow</h1>
+			<h1>Bar</h1>
 		`);
 
 		const h1 = target.firstChild;

test/runtime/samples/dynamic-element-variable/main.svelte

@@ -1,6 +1,6 @@
 <script>
   export let tag = "div";
-  export let text = "Test";
+  export let text = "Foo";
 </script>
 
 <svelte:element tag={tag}>{text}</svelte:element>