Skip to content

Commit 1c0e39c

Browse files
NullVoxPopuliNullVoxPopuli
committed
Commit from Devin
1 parent 809e52a commit 1c0e39c

File tree

5 files changed

+453
-0
lines changed

5 files changed

+453
-0
lines changed

‎packages/@glimmer-workspace/integration-tests/test/helpers/element-test.ts

+210
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import {
2+
GlimmerishComponent,
3+
jitSuite,
4+
RenderTest,
5+
strip,
6+
test,
7+
tracked,
8+
} from '@glimmer-workspace/integration-tests';
9+
10+
class ElementHelperTest extends RenderTest {
11+
static suiteName = 'Helpers test: {{element}}';
12+
13+
@test
14+
'renders a tag with the given tag name'() {
15+
this.render(strip`
16+
{{#let (element "h1") as |Tag|}}
17+
<Tag id="content">hello world!</Tag>
18+
{{/let}}
19+
`);
20+
21+
this.assertHTML('<h1 id="content">hello world!</h1>');
22+
this.assertStableRerender();
23+
}
24+
25+
@test
26+
'does not render any tags when passed an empty string'() {
27+
this.render(strip`
28+
{{#let (element "") as |Tag|}}
29+
<Tag id="content">hello world!</Tag>
30+
{{/let}}
31+
`);
32+
33+
this.assertHTML('hello world!');
34+
this.assertStableRerender();
35+
}
36+
37+
@test
38+
'does not render anything when passed null'() {
39+
this.render(strip`
40+
{{#let (element null) as |Tag|}}
41+
<Tag id="content">hello world!</Tag>
42+
{{/let}}
43+
`);
44+
45+
this.assertHTML('<!---->');
46+
this.assertStableRerender();
47+
}
48+
49+
@test
50+
'does not render anything when passed undefined'() {
51+
this.render(strip`
52+
{{#let (element undefined) as |Tag|}}
53+
<Tag id="content">hello world!</Tag>
54+
{{/let}}
55+
`);
56+
57+
this.assertHTML('<!---->');
58+
this.assertStableRerender();
59+
}
60+
61+
@test
62+
'works with element modifiers'() {
63+
let clicked = 0;
64+
this.registerHelper('increment', () => () => clicked++);
65+
66+
this.render(strip`
67+
{{#let (element "button") as |Tag|}}
68+
<Tag type="button" id="action" {{on "click" (helper "increment")}}>hello world!</Tag>
69+
{{/let}}
70+
`);
71+
72+
this.assertHTML('<button type="button" id="action">hello world!</button>');
73+
this.assert.strictEqual(clicked, 0, 'never clicked');
74+
75+
this.click('button#action');
76+
this.assert.strictEqual(clicked, 1, 'clicked once');
77+
78+
this.click('button#action');
79+
this.assert.strictEqual(clicked, 2, 'clicked twice');
80+
}
81+
82+
@test
83+
'can be rendered multiple times'() {
84+
this.render(strip`
85+
{{#let (element "h1") as |Tag|}}
86+
<Tag id="content-1">hello</Tag>
87+
<Tag id="content-2">world</Tag>
88+
<Tag id="content-3">!!!!!</Tag>
89+
{{/let}}
90+
`);
91+
92+
this.assertHTML('<h1 id="content-1">hello</h1><h1 id="content-2">world</h1><h1 id="content-3">!!!!!</h1>');
93+
this.assertStableRerender();
94+
}
95+
96+
@test
97+
'renders when the tag name changes'() {
98+
this.registerHelper('tag-name', () => this.context.tagName);
99+
100+
this.context = { tagName: 'h1' };
101+
this.render(strip`
102+
{{#let (element (helper "tag-name")) as |Tag|}}
103+
<Tag id="content">hello world!</Tag>
104+
{{/let}}
105+
`);
106+
107+
this.assertHTML('<h1 id="content">hello world!</h1>');
108+
this.assertStableRerender();
109+
110+
this.context = { tagName: 'h2' };
111+
this.rerender();
112+
113+
this.assertHTML('<h2 id="content">hello world!</h2>');
114+
115+
this.context = { tagName: 'h3' };
116+
this.rerender();
117+
118+
this.assertHTML('<h3 id="content">hello world!</h3>');
119+
120+
this.context = { tagName: '' };
121+
this.rerender();
122+
123+
this.assertHTML('hello world!');
124+
125+
this.context = { tagName: 'h1' };
126+
this.rerender();
127+
128+
this.assertHTML('<h1 id="content">hello world!</h1>');
129+
}
130+
131+
@test
132+
'throws when passed a non-string value'() {
133+
this.render(strip`
134+
{{#let (element 123) as |Tag|}}
135+
<Tag id="content">hello world!</Tag>
136+
{{/let}}
137+
`);
138+
139+
this.assertThrows(() => this.rerender(), /The argument passed to the `element` helper must be a string/);
140+
}
141+
}
142+
143+
class ElementHelperStrictModeTest extends RenderTest {
144+
static suiteName = 'strict mode: {{element}} helper';
145+
146+
@test
147+
'renders a tag with the given tag name'() {
148+
this.render(strip`
149+
{{#let (element "h1") as |Tag|}}
150+
<Tag id="content">hello world!</Tag>
151+
{{/let}}
152+
`);
153+
154+
this.assertHTML('<h1 id="content">hello world!</h1>');
155+
this.assertStableRerender();
156+
}
157+
158+
@test
159+
'works with dynamic tag names'() {
160+
this.context = { tagName: 'h1' };
161+
this.render(strip`
162+
{{#let (element this.tagName) as |Tag|}}
163+
<Tag id="content">hello world!</Tag>
164+
{{/let}}
165+
`);
166+
167+
this.assertHTML('<h1 id="content">hello world!</h1>');
168+
this.assertStableRerender();
169+
170+
this.rerender({ tagName: 'h2' });
171+
this.assertHTML('<h2 id="content">hello world!</h2>');
172+
173+
this.rerender({ tagName: '' });
174+
this.assertHTML('hello world!');
175+
176+
this.rerender({ tagName: 'h1' });
177+
this.assertHTML('<h1 id="content">hello world!</h1>');
178+
}
179+
180+
@test
181+
'can be used with component helper'() {
182+
this.render(strip`
183+
{{#let (component (element "h1")) as |Tag|}}
184+
<Tag id="content">hello world!</Tag>
185+
{{/let}}
186+
`);
187+
188+
this.assertHTML('<h1 id="content">hello world!</h1>');
189+
this.assertStableRerender();
190+
}
191+
192+
@test
193+
'can be used with if helper'() {
194+
this.context = { useDiv: true };
195+
this.render(strip`
196+
{{#let (element (if this.useDiv "div" "span")) as |Tag|}}
197+
<Tag id="content">hello world!</Tag>
198+
{{/let}}
199+
`);
200+
201+
this.assertHTML('<div id="content">hello world!</div>');
202+
this.assertStableRerender();
203+
204+
this.rerender({ useDiv: false });
205+
this.assertHTML('<span id="content">hello world!</span>');
206+
}
207+
}
208+
209+
jitSuite(ElementHelperTest);
210+
jitSuite(ElementHelperStrictModeTest);

‎packages/@glimmer/integration-tests/test/element-helper-test.ts

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { module, test, QUnit } from './utils/qunit';
2+
import { RenderingTest } from './utils/rendering-test';
3+
import { strip } from './utils/strip';
4+
5+
module('Element Helper Tests', () => {
6+
class ElementHelperTest extends RenderingTest {
7+
static suiteName = 'element helper';
8+
9+
@test
10+
'renders a tag with the given tag name'() {
11+
this.render(strip`
12+
{{#let (element "h1") as |Tag|}}
13+
<Tag id="content">hello world!</Tag>
14+
{{/let}}
15+
`);
16+
17+
this.assertHTML('<h1 id="content">hello world!</h1>');
18+
}
19+
20+
@test
21+
'does not render any tags when passed an empty string'() {
22+
this.render(strip`
23+
{{#let (element "") as |Tag|}}
24+
<Tag id="content">hello world!</Tag>
25+
{{/let}}
26+
`);
27+
28+
this.assertHTML('hello world!');
29+
}
30+
31+
@test
32+
'does not render anything when passed null'() {
33+
this.render(strip`
34+
{{#let (element null) as |Tag|}}
35+
<Tag id="content">hello world!</Tag>
36+
{{/let}}
37+
`);
38+
39+
this.assertHTML('<!---->');
40+
}
41+
42+
@test
43+
'does not render anything when passed undefined'() {
44+
this.render(strip`
45+
{{#let (element undefined) as |Tag|}}
46+
<Tag id="content">hello world!</Tag>
47+
{{/let}}
48+
`);
49+
50+
this.assertHTML('<!---->');
51+
}
52+
53+
@test
54+
'works with element modifiers'() {
55+
let clicked = 0;
56+
this.registerHelper('increment', () => () => clicked++);
57+
58+
this.render(strip`
59+
{{#let (element "button") as |Tag|}}
60+
<Tag type="button" id="action" {{on "click" (helper "increment")}}>hello world!</Tag>
61+
{{/let}}
62+
`);
63+
64+
this.assertHTML('<button type="button" id="action">hello world!</button>');
65+
this.assert.strictEqual(clicked, 0, 'never clicked');
66+
67+
this.click('button#action');
68+
this.assert.strictEqual(clicked, 1, 'clicked once');
69+
70+
this.click('button#action');
71+
this.assert.strictEqual(clicked, 2, 'clicked twice');
72+
}
73+
74+
@test
75+
'can be rendered multiple times'() {
76+
this.render(strip`
77+
{{#let (element "h1") as |Tag|}}
78+
<Tag id="content-1">hello</Tag>
79+
<Tag id="content-2">world</Tag>
80+
<Tag id="content-3">!!!!!</Tag>
81+
{{/let}}
82+
`);
83+
84+
this.assertHTML('<h1 id="content-1">hello</h1><h1 id="content-2">world</h1><h1 id="content-3">!!!!!</h1>');
85+
}
86+
87+
@test
88+
'renders when the tag name changes'() {
89+
this.registerHelper('tag-name', () => this.context.tagName);
90+
91+
this.context = { tagName: 'h1' };
92+
this.render(strip`
93+
{{#let (element (helper "tag-name")) as |Tag|}}
94+
<Tag id="content">hello world!</Tag>
95+
{{/let}}
96+
`);
97+
98+
this.assertHTML('<h1 id="content">hello world!</h1>');
99+
100+
this.context = { tagName: 'h2' };
101+
this.rerender();
102+
103+
this.assertHTML('<h2 id="content">hello world!</h2>');
104+
105+
this.context = { tagName: 'h3' };
106+
this.rerender();
107+
108+
this.assertHTML('<h3 id="content">hello world!</h3>');
109+
110+
this.context = { tagName: '' };
111+
this.rerender();
112+
113+
this.assertHTML('hello world!');
114+
115+
this.context = { tagName: 'h1' };
116+
this.rerender();
117+
118+
this.assertHTML('<h1 id="content">hello world!</h1>');
119+
}
120+
121+
@test
122+
'throws when passed a non-string value'() {
123+
this.render(strip`
124+
{{#let (element 123) as |Tag|}}
125+
<Tag id="content">hello world!</Tag>
126+
{{/let}}
127+
`);
128+
129+
this.assertThrows(() => this.rerender(), /The argument passed to the `element` helper must be a string/);
130+
}
131+
}
132+
133+
module('Element Helper Tests', {
134+
beforeEach() {
135+
QUnit.config.current.testEnvironment.owner = {};
136+
}
137+
});
138+
139+
ElementHelperTest.run();
140+
});

‎packages/@glimmer/runtime/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ export {
1717
templateOnlyComponent,
1818
TemplateOnlyComponentManager,
1919
} from './lib/component/template-only';
20+
export {
21+
DynamicTagComponent,
22+
DynamicTagComponentManager,
23+
DYNAMIC_TAG_COMPONENT_MANAGER,
24+
} from './lib/component/dynamic-tag';
2025
export { CurriedValue, curry } from './lib/curried-value';
2126
export {
2227
DOMChanges,
@@ -33,6 +38,7 @@ export {
3338
} from './lib/environment';
3439
export { array } from './lib/helpers/array';
3540
export { concat } from './lib/helpers/concat';
41+
export { element } from './lib/helpers/element';
3642
export { fn } from './lib/helpers/fn';
3743
export { get } from './lib/helpers/get';
3844
export { hash } from './lib/helpers/hash';

0 commit comments

Comments
 (0)