diff --git a/packages/ember-glimmer/tests/integration/components/curly-components-test.js b/packages/ember-glimmer/tests/integration/components/curly-components-test.js index 48f46553b30..bdb47d5e8a8 100644 --- a/packages/ember-glimmer/tests/integration/components/curly-components-test.js +++ b/packages/ember-glimmer/tests/integration/components/curly-components-test.js @@ -50,18 +50,6 @@ moduleFor('Components test: curly components', class extends RenderingTest { this.assertComponentElement(this.firstChild, { content: 'hello' }); } - ['@test it can render a template only component']() { - this.registerComponent('foo-bar', { template: 'hello' }); - - this.render('{{foo-bar}}'); - - this.assertComponentElement(this.firstChild, { content: 'hello' }); - - this.runTask(() => this.rerender()); - - this.assertComponentElement(this.firstChild, { content: 'hello' }); - } - ['@test it can have a custom id and it is not bound']() { this.registerComponent('foo-bar', { template: '{{id}} {{elementId}}' }); diff --git a/packages/ember-glimmer/tests/integration/components/template-only-components-test.js b/packages/ember-glimmer/tests/integration/components/template-only-components-test.js new file mode 100644 index 00000000000..e9488223dbe --- /dev/null +++ b/packages/ember-glimmer/tests/integration/components/template-only-components-test.js @@ -0,0 +1,108 @@ +import { moduleFor, RenderingTest } from '../../utils/test-case'; +import { classes } from '../../utils/test-helpers'; + +class TemplateOnlyComponentsTest extends RenderingTest { + registerComponent(name, template) { + super.registerComponent(name, { template, ComponentClass: null }); + } + + ['@test it can render a template-only component']() { + this.registerComponent('foo-bar', 'hello'); + + this.render('{{foo-bar}}'); + + this.assertComponentElement(this.firstChild, { content: 'hello' }); + + this.assertStableRerender(); + } + + ['@feature(ember-glimmer-named-arguments) it can render named arguments']() { + this.registerComponent('foo-bar', '|{{@foo}}|{{@bar}}|'); + + this.render('{{foo-bar foo=foo bar=bar}}', { + foo: 'foo', bar: 'bar' + }); + + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + + this.assertStableRerender(); + + this.runTask(() => this.context.set('foo', 'FOO')); + + this.assertComponentElement(this.firstChild, { content: '|FOO|bar|' }); + + this.runTask(() => this.context.set('bar', 'BAR')); + + this.assertComponentElement(this.firstChild, { content: '|FOO|BAR|' }); + + this.runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); + + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + } + + ['@test it renders named arguments as reflected properties']() { + this.registerComponent('foo-bar', '|{{foo}}|{{this.bar}}|'); + + this.render('{{foo-bar foo=foo bar=bar}}', { + foo: 'foo', bar: 'bar' + }); + + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + + this.assertStableRerender(); + + this.runTask(() => this.context.set('foo', 'FOO')); + + this.assertComponentElement(this.firstChild, { content: '|FOO|bar|' }); + + this.runTask(() => this.context.set('bar', null)); + + this.assertComponentElement(this.firstChild, { content: '|FOO||' }); + + this.runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); + + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + } + + ['@test it has curly component features']() { + this.registerComponent('foo-bar', 'hello'); + + this.render('{{foo-bar tagName="p" class=class}}', { + class: 'foo bar' + }); + + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('foo bar ember-view') }, + content: 'hello' + }); + + this.assertStableRerender(); + + this.runTask(() => this.context.set('class', 'foo')); + + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('foo ember-view') }, + content: 'hello' + }); + + this.runTask(() => this.context.set('class', null)); + + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('ember-view') }, + content: 'hello' + }); + + this.runTask(() => this.context.set('class', 'foo bar')); + + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('foo bar ember-view') }, + content: 'hello' + }); + } +} + +moduleFor('Components test: template-only components', class extends TemplateOnlyComponentsTest {}); diff --git a/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js b/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js index 56833587425..8dff854f386 100644 --- a/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js +++ b/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js @@ -103,7 +103,7 @@ export default class AbstractRenderingTestCase extends AbstractTestCase { } } - registerComponent(name, { ComponentClass = null, template = null }) { + registerComponent(name, { ComponentClass = Component, template = null }) { let { owner } = this; if (ComponentClass) {