diff --git a/test-app/tests/integration/setup-rendering-context-test.js b/test-app/tests/integration/setup-rendering-context-test.js
index c7e058c6b..ca974db91 100644
--- a/test-app/tests/integration/setup-rendering-context-test.js
+++ b/test-app/tests/integration/setup-rendering-context-test.js
@@ -65,11 +65,15 @@ const ClickMeButtonComponent = Component.extend({
module('setupRenderingContext "real world"', function (hooks) {
hooks.beforeEach(async function () {
setResolverRegistry({
- 'component:promise-wrapper': PromiseWrapper,
- 'template:components/promise-wrapper': PromiseWrapperTemplate,
-
- 'component:click-me-button': ClickMeButtonComponent,
- 'template:components/click-me-button': ClickMeButtonTemplate,
+ 'component:promise-wrapper': setComponentTemplate(
+ PromiseWrapperTemplate,
+ class extends PromiseWrapper {}
+ ),
+
+ 'component:click-me-button': setComponentTemplate(
+ ClickMeButtonTemplate,
+ class extends ClickMeButtonComponent {}
+ ),
});
await setupContext(this);
diff --git a/test-app/tests/unit/setup-rendering-context-test.js b/test-app/tests/unit/setup-rendering-context-test.js
index 646d5c9e7..1e20b1ce0 100644
--- a/test-app/tests/unit/setup-rendering-context-test.js
+++ b/test-app/tests/unit/setup-rendering-context-test.js
@@ -80,13 +80,22 @@ module('setupRenderingContext', function (hooks) {
hooks.beforeEach(async function () {
setResolverRegistry({
'service:foo': Service.extend({ isFoo: true }),
- 'template:components/template-only': hbs`template-only component here`,
+ 'component:template-only': setComponentTemplate(
+ hbs`template-only component here`,
+ class extends Component {}
+ ),
'component:js-only': Component.extend({
classNames: ['js-only'],
}),
'helper:jax': helper(([name]) => `${name}-jax`),
- 'template:components/outer-comp': hbs`outer{{inner-comp}}outer`,
- 'template:components/inner-comp': hbs`inner`,
+ 'component:outer-comp': setComponentTemplate(
+ hbs`outer{{inner-comp}}outer`,
+ class extends Component {}
+ ),
+ 'component:inner-comp': setComponentTemplate(
+ hbs`inner`,
+ class extends Component {}
+ ),
});
await setupContext(this);
@@ -113,10 +122,16 @@ module('setupRenderingContext', function (hooks) {
}
let alternateOwner = await buildEngineOwner(this.owner, {
- 'template:components/foo': hbs`hello!`,
+ 'component:foo': setComponentTemplate(
+ hbs`hello!`,
+ class extends Component {}
+ ),
});
- this.owner.register('template:components/foo', hbs`noooooooo!`);
+ this.owner.register(
+ 'component:foo',
+ setComponentTemplate(hbs`noooooooo!`, class extends Component {})
+ );
await render(hbs``, { owner: alternateOwner });
@@ -292,7 +307,10 @@ module('setupRenderingContext', function (hooks) {
});
test('can use the component helper in its layout', async function (assert) {
- this.owner.register('template:components/x-foo', hbs`x-foo here`);
+ this.owner.register(
+ 'component:x-foo',
+ setComponentTemplate(hbs`x-foo here`, class extends Component {})
+ );
await render(hbs`{{component 'x-foo'}}`);
@@ -319,15 +337,14 @@ module('setupRenderingContext', function (hooks) {
this.owner.register(
'component:x-foo',
- Component.extend({
- click() {
- assert.ok(true, 'click was fired');
- },
- })
- );
- this.owner.register(
- 'template:components/x-foo',
- hbs``
+ setComponentTemplate(
+ hbs``,
+ Component.extend({
+ click() {
+ assert.ok(true, 'click was fired');
+ },
+ })
+ )
);
await render(hbs`{{x-foo}}`);
@@ -345,17 +362,15 @@ module('setupRenderingContext', function (hooks) {
this.owner.register(
'component:x-foo',
- Component.extend({
- actions: {
- clicked() {
+ setComponentTemplate(
+ hbs``,
+
+ class extends Component {
+ clicked = () => {
assert.ok(true, 'click was fired');
- },
- },
- })
- );
- this.owner.register(
- 'template:components/x-foo',
- hbs``
+ };
+ }
+ )
);
await render(hbs`{{x-foo}}`);
@@ -371,10 +386,12 @@ module('setupRenderingContext', function (hooks) {
test('can pass function to be used as a "closure action"', async function (assert) {
assert.expect(2);
- this.owner.register('component:x-foo', Component.extend());
this.owner.register(
- 'template:components/x-foo',
- hbs``
+ 'component:x-foo',
+ setComponentTemplate(
+ hbs``,
+ Component.extend()
+ )
);
this.set('clicked', () => assert.ok(true, 'action was triggered'));
@@ -391,9 +408,12 @@ module('setupRenderingContext', function (hooks) {
test('can pass function to be used as a "closure action" to a template only component', async function (assert) {
assert.expect(2);
- let template = hbs``;
+ let template = hbs``;
- this.owner.register('template:components/x-foo', template);
+ this.owner.register(
+ 'component:x-foo',
+ setComponentTemplate(template, class extends Component {})
+ );
this.set('clicked', () => assert.ok(true, 'action was triggered'));
await render(hbs`{{x-foo clicked=this.clicked}}`);
@@ -408,8 +428,11 @@ module('setupRenderingContext', function (hooks) {
test('can update a passed in argument with an ', async function (assert) {
this.owner.register(
- 'template:components/my-input',
- hbs`{{input value=@value}}`
+ 'component:my-input',
+ setComponentTemplate(
+ hbs`{{input value=@value}}`,
+ class extends Component {}
+ )
);
await render(hbs``);
@@ -436,8 +459,11 @@ module('setupRenderingContext', function (hooks) {
test('it supports dom triggered focus events', async function (assert) {
this.owner.register(
- 'template:components/x-input',
- hbs``
+ 'component:x-input',
+ setComponentTemplate(
+ hbs``,
+ class extends Component {}
+ )
);
await render(hbs``);
@@ -463,17 +489,14 @@ module('setupRenderingContext', function (hooks) {
test('two way bound arguments are updated', async function (assert) {
this.owner.register(
'component:my-component',
- Component.extend({
- actions: {
- clicked() {
+ setComponentTemplate(
+ hbs``,
+ class extends Component {
+ clicked = () => {
this.set('foo', 'updated!');
- },
- },
- })
- );
- this.owner.register(
- 'template:components/my-component',
- hbs``
+ };
+ }
+ )
);
this.set('foo', 'original');
@@ -496,18 +519,15 @@ module('setupRenderingContext', function (hooks) {
test('two way bound arguments are available after clearRender is called', async function (assert) {
this.owner.register(
'component:my-component',
- Component.extend({
- actions: {
- clicked() {
+ setComponentTemplate(
+ hbs``,
+ class extends Component {
+ clicked = () => {
this.set('foo', 'updated!');
this.set('bar', 'updated bar!');
- },
- },
- })
- );
- this.owner.register(
- 'template:components/my-component',
- hbs``
+ };
+ }
+ )
);
// using two arguments here to ensure the two way binding