From 88c8ac8634f9e56f35ffc37c2bf39b55664401ec Mon Sep 17 00:00:00 2001
From: Leonardo Silveira <sombriks@gmail.com>
Date: Tue, 4 Apr 2023 22:02:46 -0300
Subject: [PATCH] more explorative tests for webc:for

---
 .gitignore                                    |  3 +-
 test/looping-test.js                          | 17 ++++++++++
 test/stubs/looping/complex/data.js            | 32 +++++++++++++++++++
 test/stubs/looping/complex/entry-point.webc   |  6 ++++
 .../looping/components/card-actions.webc      |  1 +
 .../looping/components/card-content.webc      |  5 +++
 .../stubs/looping/components/card-header.webc |  1 +
 test/stubs/looping/components/card-thing.webc |  9 ++++++
 8 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 test/stubs/looping/complex/data.js
 create mode 100644 test/stubs/looping/complex/entry-point.webc
 create mode 100644 test/stubs/looping/components/card-actions.webc
 create mode 100644 test/stubs/looping/components/card-content.webc
 create mode 100644 test/stubs/looping/components/card-header.webc
 create mode 100644 test/stubs/looping/components/card-thing.webc

diff --git a/.gitignore b/.gitignore
index e9691b3..b0b8131 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
-playground
\ No newline at end of file
+playground
+.idea
diff --git a/test/looping-test.js b/test/looping-test.js
index 9dc3068..a2d9f1d 100644
--- a/test/looping-test.js
+++ b/test/looping-test.js
@@ -110,3 +110,20 @@ test("script webc:setup feeds data for looping", async t => {
 <b>2</b>
 <b>3</b>`);
 });
+
+test("nesting webc:for over component hierarchy", async t => {
+	let component = new WebC();
+	let {contacts} = await import("./stubs/looping/complex/data.js");
+
+	component.defineComponents("./test/stubs/looping/components/*.webc");
+	component.setInputPath("./test/stubs/looping/complex/entry-point.webc");
+
+	let { html } = await component.compile({data:{contacts}});
+	
+	t.true(html.indexOf(`<button onclick="alert('Hello Monica')">Say hello</button>`) > -1)
+	t.true(html.indexOf(`<li>Ross - 1</li>`) > -1)
+	t.true(html.indexOf(`<div style="border-color:violet">`) > -1)
+	t.true(html.indexOf(`<div>Chandler</div>`) > -1)
+	t.true(html.indexOf(`border: 1px solid green;`) > -1)
+	
+})
diff --git a/test/stubs/looping/complex/data.js b/test/stubs/looping/complex/data.js
new file mode 100644
index 0000000..8f50195
--- /dev/null
+++ b/test/stubs/looping/complex/data.js
@@ -0,0 +1,32 @@
+export const contacts = [
+	{
+		"name":"Joey",
+		"color":"blue",
+		"numbers":[1,2,3]
+	},
+	{
+		"name":"Phoebe",
+		"color":"pink",
+		"numbers":[1,2,3]
+	},
+	{
+		"name":"Chandler",
+		"color":"orange",
+		"numbers":[1,2,3]
+	},
+	{
+		"name":"Rachel",
+		"color":"violet",
+		"numbers":[1,2,3]
+	},
+	{
+		"name":"Monica",
+		"color":"green",
+		"numbers":[1,2,3]
+	},
+	{
+		"name":"Ross",
+		"color":"red",
+		"numbers":[1,2,3]
+	}
+]
\ No newline at end of file
diff --git a/test/stubs/looping/complex/entry-point.webc b/test/stubs/looping/complex/entry-point.webc
new file mode 100644
index 0000000..0910ad0
--- /dev/null
+++ b/test/stubs/looping/complex/entry-point.webc
@@ -0,0 +1,6 @@
+<!--- correct notation to pass down the js object and call it 'info' --->
+<card-thing webc:for="c of contacts" :@info="c">
+	<card-header :@info="c"></card-header>
+	<card-content :@info="c"></card-content>
+	<card-actions :@info="c"></card-actions>
+</card-thing>
diff --git a/test/stubs/looping/components/card-actions.webc b/test/stubs/looping/components/card-actions.webc
new file mode 100644
index 0000000..5191231
--- /dev/null
+++ b/test/stubs/looping/components/card-actions.webc
@@ -0,0 +1 @@
+<button :onclick="`alert('Hello ${info.name}')`">Say hello</button>
\ No newline at end of file
diff --git a/test/stubs/looping/components/card-content.webc b/test/stubs/looping/components/card-content.webc
new file mode 100644
index 0000000..9b75f3e
--- /dev/null
+++ b/test/stubs/looping/components/card-content.webc
@@ -0,0 +1,5 @@
+<!--- loop variable should be accessible here? --->
+<div @text="c.name"></div>
+<ul>
+	<li webc:for="num of info.numbers" @text="`${info.name} - ${num}`"></li>
+</ul>
\ No newline at end of file
diff --git a/test/stubs/looping/components/card-header.webc b/test/stubs/looping/components/card-header.webc
new file mode 100644
index 0000000..03db026
--- /dev/null
+++ b/test/stubs/looping/components/card-header.webc
@@ -0,0 +1 @@
+<div @text="info.name"></div>
\ No newline at end of file
diff --git a/test/stubs/looping/components/card-thing.webc b/test/stubs/looping/components/card-thing.webc
new file mode 100644
index 0000000..9911858
--- /dev/null
+++ b/test/stubs/looping/components/card-thing.webc
@@ -0,0 +1,9 @@
+<!--- card --->
+<div :style="`border-color:${info.color}`">
+	<slot></slot>
+</div>
+<style>
+	div {
+		border: 1px solid green;
+	}
+</style>
\ No newline at end of file