Skip to content

Commit e40800f

Browse files
bglwbglw
committed
test(live): testing nested dynamic component loops
1 parent d34d033 commit e40800f

File tree

1 file changed

+72
-14
lines changed

1 file changed

+72
-14
lines changed

‎javascript-modules/live/lib/app/live.test.js

+72-14
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const jekyllFiles = {
1313
[jekyllComponent('title-loop')]: "{% for t in include.titles %}{% bookshop title title=t %}{% endfor %}",
1414
[jekyllComponent('num-loop')]: "{% for t in (include.min..include.max) %}{% bookshop title title=t %}{% endfor %}",
1515
[jekyllComponent('wrapper')]: "{% bookshop {{include.component}} bind=page %}",
16+
[jekyllComponent('dynamic-loop')]: "{% for props in include.t %}{% bookshop {{props._bookshop_name}} bind=props %}{% endfor %}",
1617
}
1718

1819
const eleventyComponent = (k) => `components/${k}/${k}.eleventy.liquid`;
@@ -22,6 +23,7 @@ const eleventyFiles = {
2223
[eleventyComponent('title-loop')]: "{% for t in titles %}{% bookshop 'title' title: t %}{% endfor %}",
2324
[eleventyComponent('num-loop')]: "{% for t in (min..max) %}{% bookshop 'title' title: t %}{% endfor %}",
2425
[eleventyComponent('wrapper')]: "{% bookshop '{{component}}' bind: page %}",
26+
[eleventyComponent('dynamic-loop')]: "{% for props in t %}{% bookshop '{{props._bookshop_name}}' bind: props %}{% endfor %}",
2527
}
2628

2729
const initial = async (liveInstance, component, props) => {
@@ -36,8 +38,8 @@ const initialSub = async (liveInstance, component, props) => {
3638
await liveInstance.engines[0].render(
3739
document.querySelector('body'),
3840
'wrapper',
39-
{component},
40-
{page: props}
41+
{ component },
42+
{ page: props }
4143
);
4244
}
4345

@@ -47,21 +49,21 @@ const setBody = (h) => document.querySelector('body').innerHTML = Array.isArray(
4749
test.beforeEach(async t => {
4850
setBody('');
4951
t.context = {
50-
jekyll: new (getLive([new JekyllEngine({files: jekyllFiles})]))(),
51-
eleventy: new (getLive([new EleventyEngine({files: eleventyFiles})]))()
52+
jekyll: new (getLive([new JekyllEngine({ files: jekyllFiles })]))(),
53+
eleventy: new (getLive([new EleventyEngine({ files: eleventyFiles })]))()
5254
};
5355
})
5456

5557
for (const impl of ['jekyll', 'eleventy']) {
5658
test.serial(`[${impl}]: Re-renders a simple component`, async t => {
57-
await initialSub(t.context[impl], 'title', {title: 'Bookshop'});
59+
await initialSub(t.context[impl], 'title', { title: 'Bookshop' });
5860
t.is(getBody(), [
5961
`<!--bookshop-live name(title) params(bind: page)-->`,
6062
`<h1>Bookshop<\/h1>`,
6163
`<!--bookshop-live end-->`
6264
].join(''));
6365

64-
await t.context[impl].update({page: {title: 'Live Love Laugh'}})
66+
await t.context[impl].update({ page: { title: 'Live Love Laugh' } })
6567
t.is(getBody(), [
6668
`<!--bookshop-live name(title) params(bind: page)-->`,
6769
`<h1>Live Love Laugh<\/h1>`,
@@ -70,14 +72,14 @@ for (const impl of ['jekyll', 'eleventy']) {
7072
});
7173

7274
test.serial(`[${impl}]: Re-renders in a loop`, async t => {
73-
await initialSub(t.context[impl], 'title-loop', {titles: ['Bookshop', 'Jekyll', 'Eleventy']});
75+
await initialSub(t.context[impl], 'title-loop', { titles: ['Bookshop', 'Jekyll', 'Eleventy'] });
7476
t.regex(getBody(), /<h1>Jekyll<\/h1>/);
7577

7678
let trigger = false;
7779
// Add event listener to the first h1 'Bookshop'
7880
document.querySelectorAll('h1')[0].addEventListener('click', () => trigger = true);
7981

80-
await t.context[impl].update({page: {titles: ['Bookshop', 'Hugo', 'Eleventy']}})
82+
await t.context[impl].update({ page: { titles: ['Bookshop', 'Hugo', 'Eleventy'] } })
8183
t.regex(getBody(), /<h1>Hugo<\/h1>/);
8284
t.notRegex(getBody(), /<h1>Jekyll<\/h1>/);
8385

@@ -90,33 +92,89 @@ for (const impl of ['jekyll', 'eleventy']) {
9092
});
9193

9294
test.serial(`[${impl}]: Re-renders top-level loop`, async t => {
93-
await initial(t.context[impl], 'title-loop', {titles: ['Bookshop', 'Jekyll', 'Eleventy']});
95+
await initial(t.context[impl], 'title-loop', { titles: ['Bookshop', 'Jekyll', 'Eleventy'] });
9496
t.regex(getBody(), /<h1>Jekyll<\/h1>/);
9597

96-
await t.context[impl].update({titles: ['Bookshop', 'Hugo', 'Eleventy']})
98+
await t.context[impl].update({ titles: ['Bookshop', 'Hugo', 'Eleventy'] })
9799
t.regex(getBody(), /<h1>Hugo<\/h1>/);
98100
t.notRegex(getBody(), /<h1>Jekyll<\/h1>/);
99101
});
100102

101103
test.serial(`[${impl}]: Re-renders range loop`, async t => {
102-
await initial(t.context[impl], 'num-loop', {min: 0, max: 1});
104+
await initial(t.context[impl], 'num-loop', { min: 0, max: 1 });
103105
t.regex(getBody(), /<h1>0<\/h1>.*<h1>1<\/h1>/);
104106
t.notRegex(getBody(), /<h1>2<\/h1>/);
105107

106-
await t.context[impl].update({min: 4, max: 5});
108+
await t.context[impl].update({ min: 4, max: 5 });
107109
t.regex(getBody(), /<h1>4<\/h1>.*<h1>5<\/h1>/);
108110
t.notRegex(getBody(), /<h1>0<\/h1>/);
109111
});
110112

113+
test.serial(`[${impl}]: Re-renders dynamic loop`, async t => {
114+
await initial(t.context[impl], 'dynamic-loop', {
115+
t: [
116+
{
117+
_bookshop_name: 'title',
118+
title: 'Outer Hello World'
119+
},
120+
{
121+
_bookshop_name: 'dynamic-loop',
122+
t: [
123+
{
124+
_bookshop_name: 'title',
125+
title: 'First Inner Hello World'
126+
},
127+
{
128+
_bookshop_name: 'title',
129+
title: 'Second Inner Hello World'
130+
}
131+
]
132+
}
133+
]
134+
});
135+
t.regex(getBody(), /<h1>Outer Hello World<\/h1>/);
136+
t.regex(getBody(), /<h1>First Inner Hello World<\/h1>/);
137+
t.regex(getBody(), /<h1>Second Inner Hello World<\/h1>/);
138+
139+
await t.context[impl].update({
140+
t: [
141+
{
142+
_bookshop_name: 'title',
143+
title: 'Outer Hello World'
144+
},
145+
{
146+
_bookshop_name: 'dynamic-loop',
147+
t: [
148+
{
149+
_bookshop_name: 'title',
150+
title: 'First Changed Inner Hello World'
151+
},
152+
{
153+
_bookshop_name: 'title',
154+
title: 'Second Inner Hello World'
155+
},
156+
{
157+
_bookshop_name: 'title',
158+
title: 'Third Inner Hello World'
159+
}
160+
]
161+
}
162+
]
163+
})
164+
t.regex(getBody(), /<h1>First Changed Inner Hello World<\/h1>/);
165+
t.notRegex(getBody(), /<h1>First Inner Hello World<\/h1>/);
166+
t.regex(getBody(), /<h1>Third Inner Hello World<\/h1>/);
167+
});
168+
111169
test.serial(`[${impl}]: Re-renders depth first`, async t => {
112-
await initialSub(t.context[impl], 'super-title', {one: "One", two: "Two", three: "Three"});
170+
await initialSub(t.context[impl], 'super-title', { one: "One", two: "Two", three: "Three" });
113171
t.regex(getBody(), /<h1>One<\/h1>/);
114172

115173
let trigger = false;
116174
// Add event listener to h1 not rendered from a subcomponent 'Two'
117175
document.querySelectorAll('h1')[1].addEventListener('click', () => trigger = true);
118176

119-
await t.context[impl].update({page: {one: "Uno", two: "Two", three: "Tres"}})
177+
await t.context[impl].update({ page: { one: "Uno", two: "Two", three: "Tres" } })
120178
t.regex(getBody(), /<h1>Uno<\/h1>/);
121179
t.regex(getBody(), /<h1>Two<\/h1>/);
122180
t.regex(getBody(), /<h1>Tres<\/h1>/);

0 commit comments

Comments
 (0)