Move template-only component tests

Author: chancancode

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}}' });
 

packages/ember-glimmer/tests/integration/components/local-lookup-test.js

@@ -263,7 +263,7 @@ if (EMBER_MODULE_UNIFICATION) {
       return new LocalLookupTestResolver();
     }
 
-    registerComponent(name, { ComponentClass = null, template = null }) {
+    registerComponent(name, { ComponentClass = Component, template = null }) {
       let { resolver } = this;
 
       if (ComponentClass) {

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 {});

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) {

packages/internal-test-helpers/lib/test-cases/test-resolver-application.js

@@ -1,5 +1,6 @@
 import AbstractApplicationTestCase from './abstract-application';
 import { ModuleBasedResolver } from '../test-resolver';
+import { Component } from 'ember-glimmer';
 import { assign } from 'ember-utils';
 
 export default class TestResolverApplicationTestCase extends AbstractApplicationTestCase {
@@ -20,7 +21,7 @@ export default class TestResolverApplicationTestCase extends AbstractApplication
     }));
   }
 
-  addComponent(name, { ComponentClass = null, template = null }) {
+  addComponent(name, { ComponentClass = Component, template = null }) {
     if (ComponentClass) {
       this.resolver.add(`component:${name}`, ComponentClass);
     }