From d65da8d17442cddf380229a9fc4066ad6c7528d8 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 31 Oct 2021 17:27:51 +0900
Subject: [PATCH] add tests

---
 .../dynamic-element-attribute/_config.js      | 17 ++++++++++++++
 .../dynamic-element-attribute/main.svelte     |  5 ++++
 .../_config.js                                |  0
 .../main.svelte                               |  0
 .../dynamic-element-event-handler2/_config.js | 23 +++++++++++++++++++
 .../main.svelte                               |  6 +++++
 6 files changed, 51 insertions(+)
 create mode 100644 test/runtime/samples/dynamic-element-attribute/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-attribute/main.svelte
 rename test/runtime/samples/{dynamic-element-event-handler => dynamic-element-event-handler1}/_config.js (100%)
 rename test/runtime/samples/{dynamic-element-event-handler => dynamic-element-event-handler1}/main.svelte (100%)
 create mode 100644 test/runtime/samples/dynamic-element-event-handler2/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-event-handler2/main.svelte

diff --git a/test/runtime/samples/dynamic-element-attribute/_config.js b/test/runtime/samples/dynamic-element-attribute/_config.js
new file mode 100644
index 0000000000..6e7c340437
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		tag: 'div'
+	},
+	html: '<div style="color: red;">Foo</div>',
+
+	test({ assert, component, target }) {
+		component.tag = 'h1';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h1 style="color: red;">Foo</h1>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-attribute/main.svelte b/test/runtime/samples/dynamic-element-attribute/main.svelte
new file mode 100644
index 0000000000..2498e06de9
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let tag = 'div';
+</script>
+
+<svelte:element this={tag} style="color: red;">Foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-event-handler/_config.js b/test/runtime/samples/dynamic-element-event-handler1/_config.js
similarity index 100%
rename from test/runtime/samples/dynamic-element-event-handler/_config.js
rename to test/runtime/samples/dynamic-element-event-handler1/_config.js
diff --git a/test/runtime/samples/dynamic-element-event-handler/main.svelte b/test/runtime/samples/dynamic-element-event-handler1/main.svelte
similarity index 100%
rename from test/runtime/samples/dynamic-element-event-handler/main.svelte
rename to test/runtime/samples/dynamic-element-event-handler1/main.svelte
diff --git a/test/runtime/samples/dynamic-element-event-handler2/_config.js b/test/runtime/samples/dynamic-element-event-handler2/_config.js
new file mode 100644
index 0000000000..22cbe735a7
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-event-handler2/_config.js
@@ -0,0 +1,23 @@
+let clicked = false;
+function handler() {
+  clicked = true;
+}
+
+export default {
+	props: {
+		tag: 'div',
+		handler
+	},
+	html: '<div>Foo</div>',
+
+	test({ assert, component, target }) {
+		assert.equal(clicked, false);
+
+		component.tag = 'button';
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+		button.dispatchEvent(click);
+
+		assert.equal(clicked, true);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-event-handler2/main.svelte b/test/runtime/samples/dynamic-element-event-handler2/main.svelte
new file mode 100644
index 0000000000..f2534c1f62
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-event-handler2/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let tag;
+  export let handler;
+</script>
+
+<svelte:element this={tag} on:click={handler}>Foo</svelte:element>