Skip to content

Commit 5020f54

Browse files
krisseldenkrisselden
committed
Merge pull request #13213 from kiwiupover/glimmer-yield-tests
[Glimmer2] Port {{yield}} test to ember-glimmer.
2 parents a7d5c8c + 2e8b89a commit 5020f54

File tree

2 files changed

+218
-266
lines changed

2 files changed

+218
-266
lines changed

‎packages/ember-glimmer/tests/integration/helpers/yield-test.js‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
import { RenderingTest, moduleFor } from '../../utils/test-case';
2+
import { set } from 'ember-metal/property_set';
3+
import { Component } from '../../utils/helpers';
4+
5+
moduleFor('Helpers test: {{yield}} helper', class extends RenderingTest {
6+
7+
['@test can yield to block']() {
8+
this.registerComponent('yield-comp', { template: '[In layout:] {{yield}}' });
9+
10+
this.render('{{#yield-comp}}[In Block:] {{object.title}}{{/yield-comp}}', { object: { title: 'Seattle' } });
11+
this.assertText('[In layout:] [In Block:] Seattle');
12+
13+
this.assertStableRerender();
14+
15+
this.runTask(() => set(this.context, 'object.title', 'Vancouver') );
16+
this.assertText('[In layout:] [In Block:] Vancouver');
17+
18+
this.runTask(() => set(this.context, 'object', { title: 'Seattle' }));
19+
this.assertText('[In layout:] [In Block:] Seattle');
20+
}
21+
22+
['@test templates should yield to block inside a nested component']() {
23+
this.registerComponent('outer-comp', { template: '<div>[In layout:] {{yield}}</div>' });
24+
this.registerComponent('inner-comp', { template: '{{#outer-comp}}[In Block:] {{object.title}}{{/outer-comp}}' });
25+
26+
this.render('{{inner-comp object=object}}', { object: { title: 'Seattle' } });
27+
this.assertText('[In layout:] [In Block:] Seattle');
28+
29+
this.assertStableRerender();
30+
31+
this.runTask(() => set(this.context, 'object.title', 'Vancouver') );
32+
this.assertText('[In layout:] [In Block:] Vancouver');
33+
34+
this.runTask(() => set(this.context, 'object', { title: 'Seattle' }));
35+
this.assertText('[In layout:] [In Block:] Seattle');
36+
}
37+
38+
['@test templates should yield to block, when the yield is embedded in a each helper']() {
39+
let list = [1, 2, 3];
40+
41+
this.registerComponent('outer-comp', { template: '{{#each list as |item|}}{{yield}}{{/each}}' });
42+
43+
this.render('{{#outer-comp list=list}}Hello{{/outer-comp}}', { list: list });
44+
this.assertText('HelloHelloHello');
45+
46+
this.assertStableRerender();
47+
48+
this.runTask(() => set(this.context, 'list', [4, 5]));
49+
this.assertText('HelloHello');
50+
51+
this.runTask(() => set(this.context, 'list', list));
52+
this.assertText('HelloHelloHello');
53+
}
54+
55+
['@test templates should yield to block, when the yield is embedded in a if helper']() {
56+
this.registerComponent('outer-comp', { template: '{{#if boolean}}{{yield}}{{/if}}' });
57+
58+
this.render('{{#outer-comp boolean=boolean}}Hello{{/outer-comp}}', { boolean: true });
59+
this.assertText('Hello');
60+
61+
this.assertStableRerender();
62+
63+
this.runTask(() => set(this.context, 'boolean', false));
64+
this.assertText('');
65+
66+
this.runTask(() => set(this.context, 'boolean', true));
67+
this.assertText('Hello');
68+
}
69+
70+
['@test simple curlies inside of a yielded clock should work when the yield is nested inside of another view']() {
71+
this.registerComponent('kiwi-comp', { template: '{{#if falsy}}{{else}}{{yield}}{{/if}}' });
72+
73+
this.render('{{#kiwi-comp}}{{text}}{{/kiwi-comp}}', { text: 'ohai' });
74+
this.assertText('ohai');
75+
76+
this.assertStableRerender();
77+
78+
this.runTask(() => set(this.context, 'text', 'portland'));
79+
this.assertText('portland');
80+
81+
this.runTask(() => set(this.context, 'text', 'ohai'));
82+
this.assertText('ohai');
83+
}
84+
85+
['@test nested simple curlies inside of a yielded block should work when the yield is nested inside of another view']() {
86+
this.registerComponent('parent-comp', { template: '{{#if falsy}}{{else}}{{yield}}{{/if}}' });
87+
this.registerComponent('child-comp', { template: '{{#if falsy}}{{else}}{{text}}{{/if}}' });
88+
89+
this.render('{{#parent-comp}}{{child-comp text=text}}{{/parent-comp}}', { text: 'ohai' });
90+
this.assertText('ohai');
91+
92+
this.assertStableRerender();
93+
94+
this.runTask(() => set(this.context, 'text', 'portland'));
95+
this.assertText('portland');
96+
97+
this.runTask(() => set(this.context, 'text', 'ohai'));
98+
this.assertText('ohai');
99+
}
100+
101+
['@test yielding to a non-existent block is not an error']() {
102+
this.registerComponent('yielding-comp', { template: 'Hello:{{yield}}' });
103+
this.registerComponent('outer-comp', { template: '{{yielding-comp}} {{title}}' });
104+
105+
this.render('{{outer-comp title=title}}', { title: 'Mr. Selden' });
106+
107+
this.assertText('Hello: Mr. Selden');
108+
109+
this.assertStableRerender();
110+
111+
this.runTask(() => set(this.context, 'title', 'Mr. Chag'));
112+
this.assertText('Hello: Mr. Chag');
113+
114+
this.runTask(() => set(this.context, 'title', 'Mr. Selden'));
115+
this.assertText('Hello: Mr. Selden');
116+
}
117+
118+
['@test yield uses the original context']() {
119+
let KiwiCompComponent = Component.extend({ boundText: 'Inner' });
120+
121+
this.registerComponent('kiwi-comp', { ComponentClass: KiwiCompComponent, template: '<p>{{boundText}}</p><p>{{yield}}</p>' });
122+
123+
this.render('{{#kiwi-comp}}{{boundText}}{{/kiwi-comp}}', { boundText: 'Original' });
124+
this.assertText('InnerOriginal');
125+
126+
this.assertStableRerender();
127+
128+
this.runTask(() => set(this.context, 'boundText', 'Otherworld'));
129+
this.assertText('InnerOtherworld');
130+
131+
this.runTask(() => set(this.context, 'boundText', 'Original'));
132+
this.assertText('InnerOriginal');
133+
}
134+
135+
['@test outer block param doesn\'t mask inner component property']() {
136+
let KiwiCompComponent = Component.extend({ boundText: 'Inner' });
137+
138+
this.registerComponent('kiwi-comp', { ComponentClass: KiwiCompComponent, template: '<p>{{boundText}}</p><p>{{yield}}</p>' });
139+
140+
this.render('{{#with boundText as |item|}}{{#kiwi-comp}}{{item}}{{/kiwi-comp}}{{/with}}', { boundText: 'Outer' });
141+
this.assertText('InnerOuter');
142+
143+
this.assertStableRerender();
144+
145+
this.runTask(() => set(this.context, 'boundText', 'Otherworld'));
146+
this.assertText('InnerOtherworld');
147+
148+
this.runTask(() => set(this.context, 'boundText', 'Outer'));
149+
this.assertText('InnerOuter');
150+
}
151+
152+
['@test inner block param doesn\'t mask yield property']() {
153+
let KiwiCompComponent = Component.extend({ boundText: 'Inner' });
154+
155+
this.registerComponent('kiwi-comp', { ComponentClass: KiwiCompComponent, template: '{{#with boundText as |item|}}<p>{{item}}</p><p>{{yield}}</p>{{/with}}' });
156+
157+
this.render('{{#kiwi-comp}}{{item}}{{/kiwi-comp}}', { item: 'Outer' });
158+
this.assertText('InnerOuter');
159+
160+
this.assertStableRerender();
161+
162+
this.runTask(() => set(this.context, 'item', 'Otherworld'));
163+
this.assertText('InnerOtherworld');
164+
165+
this.runTask(() => set(this.context, 'item', 'Outer'));
166+
this.assertText('InnerOuter');
167+
}
168+
169+
['@test can bind a block param to a component and use it in yield']() {
170+
this.registerComponent('kiwi-comp', { template: '<p>{{content}}</p><p>{{yield}}</p>' });
171+
172+
this.render('{{#with boundText as |item|}}{{#kiwi-comp content=item}}{{item}}{{/kiwi-comp}}{{/with}}', { boundText: 'Outer' });
173+
this.assertText('OuterOuter');
174+
175+
this.assertStableRerender();
176+
177+
this.runTask(() => set(this.context, 'boundText', 'Update'));
178+
this.assertText('UpdateUpdate');
179+
180+
this.runTask(() => set(this.context, 'boundText', 'Outer'));
181+
this.assertText('OuterOuter');
182+
}
183+
184+
// INUR not need with no data update
185+
['@htmlbars yield should not introduce a view']() {
186+
let ParentCompComponent = Component.extend({ isParentComponent: true });
187+
188+
let ChildCompComponent = Component.extend({
189+
didReceiveAttrs() {
190+
this._super();
191+
let parentView = this.get('parentView');
192+
193+
ok(parentView.get('isParentComponent'));
194+
}
195+
});
196+
197+
this.registerComponent('parent-comp', { ComponentClass: ParentCompComponent, template: '{{yield}}' });
198+
this.registerComponent('child-comp', { ComponentClass: ChildCompComponent });
199+
200+
this.render('{{#parent-comp}}{{child-comp}}{{/parent-comp}}');
201+
}
202+
203+
['@test yield with nested components (#3220)']() {
204+
this.registerComponent('inner-component', { template: '{{yield}}' });
205+
this.registerComponent('outer-component', { template: '{{#inner-component}}<span>{{yield}}</span>{{/inner-component}}' });
206+
207+
this.render('{{#outer-component}}Hello {{boundText}}{{/outer-component}}', { boundText: 'world' });
208+
this.assertText('Hello world');
209+
210+
this.assertStableRerender();
211+
212+
this.runTask(() => set(this.context, 'boundText', 'update'));
213+
this.assertText('Hello update');
214+
215+
this.runTask(() => set(this.context, 'boundText', 'world'));
216+
this.assertText('Hello world');
217+
}
218+
});

0 commit comments

Comments
 (0)