Skip to content

Commit a0dba08

Browse files
WindvisWindvis
committed
Add some TS component blueprint tests
This setup can verify that the .ts blueprints are working as expected.
1 parent c005496 commit a0dba08

File tree

4 files changed

+372
-3
lines changed

4 files changed

+372
-3
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ blueprints/*/*files/**/*.js
22
blueprints-js/*/*files/**/*.js
33
blueprints/*/*files/**/*.ts
44
node-tests/fixtures/**/*.js
5+
node-tests/fixtures/**/*.ts
56
/docs/
67
dist/
78
tmp/

‎node-tests/blueprints-ts/component-test.js‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
'use strict';
2+
3+
const blueprintHelpers = require('ember-cli-blueprint-test-helpers/helpers');
4+
const setupTestHooks = blueprintHelpers.setupTestHooks;
5+
const emberNew = blueprintHelpers.emberNew;
6+
const emberGenerateDestroy = blueprintHelpers.emberGenerateDestroy;
7+
8+
const chai = require('ember-cli-blueprint-test-helpers/chai');
9+
const expect = chai.expect;
10+
11+
const fixture = require('../helpers/fixture');
12+
13+
const setupTestEnvironment = require('../helpers/setup-test-environment');
14+
const enableOctane = setupTestEnvironment.enableOctane;
15+
16+
function glimmerComponentContents(componentName = 'Foo') {
17+
return `import Component from '@glimmer/component';
18+
19+
export interface ${componentName}Signature {
20+
// The arguments accepted by the component
21+
Args: {};
22+
// Any blocks yielded by the component
23+
Blocks: {
24+
default: []
25+
};
26+
// The element to which \`...attributes\` is applied in the component template
27+
Element: null;
28+
}
29+
30+
export default class ${componentName} extends Component<${componentName}Signature> {}
31+
`;
32+
}
33+
34+
const emberComponentContents = `import Component from '@ember/component';
35+
36+
37+
export default Component.extend({});
38+
`;
39+
40+
const templateOnlyContents = `import templateOnly from '@ember/component/template-only';
41+
42+
export interface FooSignature {
43+
// The arguments accepted by the component
44+
Args: {};
45+
// Any blocks yielded by the component
46+
Blocks: {
47+
default: []
48+
};
49+
// The element to which \`...attributes\` is applied in the component template
50+
Element: null;
51+
}
52+
53+
export default templateOnly<FooSignature>();
54+
`;
55+
56+
describe('TS Blueprint: component', function () {
57+
setupTestHooks(this);
58+
59+
describe('in app - octane', function () {
60+
enableOctane();
61+
62+
beforeEach(function () {
63+
return emberNew({ cliArgs: ['--typescript'] });
64+
});
65+
66+
it('component foo', function () {
67+
return emberGenerateDestroy(['component', 'foo'], (_file) => {
68+
expect(_file('app/components/foo.ts')).to.not.exist;
69+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
70+
71+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
72+
fixture('component-test/rfc232-template.ts', {
73+
replace: {
74+
component: 'foo',
75+
componentInvocation: 'Foo',
76+
},
77+
})
78+
);
79+
});
80+
});
81+
82+
// classic default
83+
it('component foo --component-structure=classic --component-class=@ember/component', function () {
84+
return emberGenerateDestroy(
85+
[
86+
'component',
87+
'foo',
88+
'--component-structure',
89+
'classic',
90+
'--component-class',
91+
'@ember/component',
92+
],
93+
(_file) => {
94+
expect(_file('app/components/foo.ts')).to.equal(emberComponentContents);
95+
96+
expect(_file('app/templates/components/foo.hbs')).to.equal('{{yield}}');
97+
98+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
99+
fixture('component-test/rfc232-template.ts', {
100+
replace: {
101+
component: 'foo',
102+
componentInvocation: 'Foo',
103+
},
104+
})
105+
);
106+
}
107+
);
108+
});
109+
110+
// Octane default
111+
it('component foo --component-structure=flat --component-class=@glimmer/component', function () {
112+
return emberGenerateDestroy(
113+
[
114+
'component',
115+
'--component-structure',
116+
'flat',
117+
'--component-class',
118+
'@glimmer/component',
119+
'foo',
120+
],
121+
(_file) => {
122+
expect(_file('app/components/foo.ts')).to.equal(glimmerComponentContents());
123+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
124+
125+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
126+
fixture('component-test/rfc232-template.ts', {
127+
replace: {
128+
component: 'foo',
129+
componentInvocation: 'Foo',
130+
},
131+
})
132+
);
133+
}
134+
);
135+
});
136+
137+
it('component foo --component-structure=flat', function () {
138+
return emberGenerateDestroy(
139+
['component', '--component-structure', 'flat', 'foo'],
140+
(_file) => {
141+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
142+
143+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
144+
fixture('component-test/rfc232-template.ts', {
145+
replace: {
146+
component: 'foo',
147+
componentInvocation: 'Foo',
148+
},
149+
})
150+
);
151+
}
152+
);
153+
});
154+
155+
it('component foo --component-structure=nested', function () {
156+
return emberGenerateDestroy(
157+
['component', '--component-structure', 'nested', 'foo'],
158+
(_file) => {
159+
expect(_file('app/components/foo/index.hbs')).to.equal('{{yield}}');
160+
161+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
162+
fixture('component-test/rfc232-template.ts', {
163+
replace: {
164+
component: 'foo',
165+
componentInvocation: 'Foo',
166+
},
167+
})
168+
);
169+
}
170+
);
171+
});
172+
173+
it('component foo --component-structure=classic', function () {
174+
return emberGenerateDestroy(
175+
['component', '--component-structure', 'classic', 'foo'],
176+
(_file) => {
177+
expect(_file('app/templates/components/foo.hbs')).to.equal('{{yield}}');
178+
179+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
180+
fixture('component-test/rfc232-template.ts', {
181+
replace: {
182+
component: 'foo',
183+
componentInvocation: 'Foo',
184+
},
185+
})
186+
);
187+
}
188+
);
189+
});
190+
191+
it('component foo --component-class=@ember/component', function () {
192+
return emberGenerateDestroy(
193+
['component', '--component-class', '@ember/component', 'foo'],
194+
(_file) => {
195+
expect(_file('app/components/foo.ts')).to.equal(emberComponentContents);
196+
197+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
198+
199+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
200+
fixture('component-test/rfc232-template.ts', {
201+
replace: {
202+
component: 'foo',
203+
componentInvocation: 'Foo',
204+
},
205+
})
206+
);
207+
}
208+
);
209+
});
210+
211+
it('component foo --component-class=@glimmer/component', function () {
212+
return emberGenerateDestroy(
213+
['component', '--component-class', '@glimmer/component', 'foo'],
214+
(_file) => {
215+
expect(_file('app/components/foo.ts')).to.equal(glimmerComponentContents());
216+
217+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
218+
219+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
220+
fixture('component-test/rfc232-template.ts', {
221+
replace: {
222+
component: 'foo',
223+
componentInvocation: 'Foo',
224+
},
225+
})
226+
);
227+
}
228+
);
229+
});
230+
231+
it('component foo --component-class=@ember/component/template-only', function () {
232+
return emberGenerateDestroy(
233+
['component', '--component-class', '@ember/component/template-only', 'foo'],
234+
(_file) => {
235+
expect(_file('app/components/foo.ts')).to.equal(templateOnlyContents);
236+
237+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
238+
239+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
240+
fixture('component-test/rfc232-template.ts', {
241+
replace: {
242+
component: 'foo',
243+
componentInvocation: 'Foo',
244+
},
245+
})
246+
);
247+
}
248+
);
249+
});
250+
251+
it('component foo --no-component-class', function () {
252+
return emberGenerateDestroy(['component', '--no-component-class', 'foo'], (_file) => {
253+
expect(_file('app/components/foo.ts')).to.not.exist;
254+
255+
expect(_file('app/components/foo.hbs')).to.equal('{{yield}}');
256+
257+
expect(_file('tests/integration/components/foo-test.ts')).to.equal(
258+
fixture('component-test/rfc232-template.ts', {
259+
replace: {
260+
component: 'foo',
261+
componentInvocation: 'Foo',
262+
},
263+
})
264+
);
265+
});
266+
});
267+
268+
it('component x-foo', function () {
269+
return emberGenerateDestroy(['component', 'x-foo'], (_file) => {
270+
expect(_file('app/components/x-foo.ts')).to.not.exist;
271+
expect(_file('app/components/x-foo.hbs')).to.equal('{{yield}}');
272+
273+
expect(_file('tests/integration/components/x-foo-test.ts')).to.equal(
274+
fixture('component-test/rfc232-template.ts', {
275+
replace: {
276+
component: 'x-foo',
277+
componentInvocation: 'XFoo',
278+
},
279+
})
280+
);
281+
});
282+
});
283+
284+
it('component x-foo.ts', function () {
285+
return emberGenerateDestroy(['component', 'x-foo.ts'], (_file) => {
286+
expect(_file('app/components/x-foo.ts')).to.not.exist;
287+
expect(_file('app/components/x-foo.js.js')).to.not.exist;
288+
expect(_file('app/templates/components/x-foo.ts.hbs')).to.not.exist;
289+
expect(_file('tests/integration/components/x-foo-test.ts.ts')).to.not.exist;
290+
291+
expect(_file('app/components/x-foo.hbs')).to.equal('{{yield}}');
292+
293+
expect(_file('tests/integration/components/x-foo-test.ts')).to.equal(
294+
fixture('component-test/rfc232-template.ts', {
295+
replace: {
296+
component: 'x-foo',
297+
componentInvocation: 'XFoo',
298+
},
299+
})
300+
);
301+
});
302+
});
303+
304+
it('component foo/x-foo', function () {
305+
return emberGenerateDestroy(['component', 'foo/x-foo'], (_file) => {
306+
expect(_file('app/components/foo/x-foo.ts')).to.not.exist;
307+
expect(_file('app/components/foo/x-foo.hbs')).to.equal('{{yield}}');
308+
309+
expect(_file('tests/integration/components/foo/x-foo-test.ts')).to.equal(
310+
fixture('component-test/rfc232-template.ts', {
311+
replace: {
312+
component: 'foo/x-foo',
313+
componentInvocation: 'Foo::XFoo',
314+
},
315+
})
316+
);
317+
});
318+
});
319+
320+
it('component foo/x-foo --component-class="@glimmer/component"', function () {
321+
return emberGenerateDestroy(
322+
['component', 'foo/x-foo', '--component-class', '@glimmer/component'],
323+
(_file) => {
324+
expect(_file('app/components/foo/x-foo.ts')).to.equal(
325+
glimmerComponentContents('FooXFoo')
326+
);
327+
expect(_file('app/components/foo/x-foo.hbs')).to.equal('{{yield}}');
328+
329+
expect(_file('tests/integration/components/foo/x-foo-test.ts')).to.equal(
330+
fixture('component-test/rfc232-template.ts', {
331+
replace: {
332+
component: 'foo/x-foo',
333+
componentInvocation: 'Foo::XFoo',
334+
},
335+
})
336+
);
337+
}
338+
);
339+
});
340+
});
341+
});

‎node-tests/fixtures/component-test/rfc232-template.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'my-app/tests/helpers';
3+
import { render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
6+
module('Integration | Component | <%= component =%>', function (hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function (assert) {
10+
// Set any properties with this.set('myProperty', 'value');
11+
// Handle any actions with this.set('myAction', function(val) { ... });
12+
13+
await render(hbs`<<%= componentInvocation =%> />`);
14+
15+
assert.dom().hasText('');
16+
17+
// Template block usage:
18+
await render(hbs`
19+
<<%= componentInvocation =%>>
20+
template block text
21+
</<%= componentInvocation =%>>
22+
`);
23+
24+
assert.dom().hasText('template block text');
25+
});
26+
});

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@
5151
"lint:eslint:fix": "npm-run-all \"lint:eslint --fix\"",
5252
"lint:fix": "npm-run-all lint:*:fix",
5353
"test": "node bin/run-tests.js",
54-
"test:blueprints:js": "EMBER_TYPESCRIPT_BLUEPRINTS=false pnpm test:blueprints:ts",
55-
"test:blueprints:ts": "mocha node-tests/blueprints/**/*-test.js",
56-
"test:blueprints": "pnpm test:blueprints:js && pnpm test:blueprints:ts",
54+
"test:blueprints:js": "EMBER_TYPESCRIPT_BLUEPRINTS=false pnpm test:blueprints:transpiled-js",
55+
"test:blueprints:transpiled-js": "mocha node-tests/blueprints/**/*-test.js",
56+
"test:blueprints:ts": "mocha node-tests/blueprints-ts/**/*-test.js",
57+
"test:blueprints": "npm-run-all test:blueprints:*",
5758
"test:node": "qunit tests/node/**/*-test.js",
5859
"test:browserstack": "node bin/run-browserstack-tests.js",
5960
"test:wip": "vite build --mode development --minify false && testem ci",

0 commit comments

Comments
 (0)