From d7214c330d83e278112c365e3cd68420fbbebcf0 Mon Sep 17 00:00:00 2001
From: baseballyama <xydybaseball@gmail.com>
Date: Wed, 4 May 2022 13:23:18 +0900
Subject: [PATCH] add more test

---
 .../{Slider.svelte => Slider1.svelte}         |  4 +-
 .../Slider2.svelte                            | 17 ++++++
 .../_config.js                                | 56 ++++++++++++++----
 .../main.svelte                               | 13 ++--
 .../Slider1.svelte                            | 17 ++++++
 .../Slider2.svelte                            | 17 ++++++
 .../_config.js                                | 59 +++++++++++++++++++
 .../main.svelte                               | 22 +++++++
 8 files changed, 185 insertions(+), 20 deletions(-)
 rename test/runtime-puppeteer/samples/svelte-component-css-custom-properties/{Slider.svelte => Slider1.svelte} (86%)
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte

diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
similarity index 86%
rename from test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider.svelte
rename to test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
index 4863966f85..f9c9048fee 100644
--- a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider.svelte
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div {id}>
-  <p>Slider</p>
+  <p>Slider1</p>
   <span>Track</span>
 </div>
 
@@ -14,4 +14,4 @@
   span {
     color: var(--track-color);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
index 9c3b7cbdea..efbf225f25 100644
--- a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
@@ -1,27 +1,57 @@
 export default {
+	props: {
+		componentName: 'Slider1'
+	},
 	html: `
 		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
-			<div id="slider-1">
-				<p class="svelte-17ay6rc">Slider</p>
+			<div id="component1">
+				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
 		</div>
 		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
-			<div id="slider-2">
-				<p class="svelte-17ay6rc">Slider</p>
+			<div id="component2">
+				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
 		</div>
 	`,
-	test({ target, window, assert }) {
-		const railColor1 = target.querySelector('#slider-1 p');
-		const trackColor1 = target.querySelector('#slider-1 span');
-		const railColor2 = target.querySelector('#slider-2 p');
-		const trackColor2 = target.querySelector('#slider-2 span');
+	test({ target, window, assert, component }) {
 
-		assert.htmlEqual(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
-		assert.htmlEqual(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
-		assert.htmlEqual(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
-		assert.htmlEqual(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
 	}
 };
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
index 47fc997b73..2c6d05dc25 100644
--- a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
@@ -1,17 +1,20 @@
 <script>
-	import Slider from './Slider.svelte';
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
 </script>
 
 <svelte:component
-	this={Slider}
-	id="slider-1"
+	this={slider}
+	id="component1"
 	--rail-color="rgb(0, 0, 0)"
 	--track-color="rgb(255, 0, 0)"
 />
 
 <svelte:component
-	this={Slider}
-	id="slider-2"
+	this={slider}
+	id="component2"
 	--rail-color="rgb(0, 255, 0)"
 	--track-color="rgb(0, 0, 255)"
 />
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5aa30c7aa4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
@@ -0,0 +1,59 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<section>
+			<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+				<div id="component1">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+				<div id="component2">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</section>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..dded9b8f5c
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<section>
+	<svelte:component
+		this={slider}
+		id="component1"
+		--rail-color="rgb(0, 0, 0)"
+		--track-color="rgb(255, 0, 0)"
+	/>
+
+	<svelte:component
+		this={slider}
+		id="component2"
+		--rail-color="rgb(0, 255, 0)"
+		--track-color="rgb(0, 0, 255)"
+	/>
+</section>