Merge pull request #161 from sombriks/main

more explorative tests for webc:for

Author: zachleat

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
-playground
+playground
+.idea

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)
+	
+})

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]
+	}
+]

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>

test/stubs/looping/components/card-actions.webc

@@ -0,0 +1 @@
+<button :onclick="`alert('Hello ${info.name}')`">Say hello</button>

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>

test/stubs/looping/components/card-header.webc

@@ -0,0 +1 @@
+<div @text="info.name"></div>

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>