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