improve component blueprint for octane

Author: BryanCrotaz

blueprints/component-test/index.js

@@ -2,10 +2,17 @@
 
 const path = require('path');
 const stringUtil = require('ember-cli-string-utils');
+const isPackageMissing = require('ember-cli-is-package-missing');
 const getPathOption = require('ember-cli-get-component-path-option');
+const semver = require('semver');
 
 const useTestFrameworkDetector = require('../test-framework-detector');
 
+function invocationFor(options) {
+  let parts = options.entity.name.split('/');
+  return parts.map((p) => stringUtil.classify(p)).join('::');
+}
+
 module.exports = useTestFrameworkDetector({
   description: 'Generates a component integration or unit test.',
 
@@ -23,7 +30,7 @@ module.exports = useTestFrameworkDetector({
     },
   ],
 
-  fileMapTokens: function() {
+  fileMapTokens: function () {
     return {
       __root__() {
         return 'tests';
@@ -40,7 +47,7 @@ module.exports = useTestFrameworkDetector({
     };
   },
 
-  locals: function(options) {
+  locals: function (options) {
     let dasherizedModuleName = stringUtil.dasherize(options.entity.name);
     let componentPathName = dasherizedModuleName;
     let testType = options.testType || 'integration';
@@ -55,11 +62,50 @@ module.exports = useTestFrameworkDetector({
       componentPathName = [options.path, dasherizedModuleName].filter(Boolean).join('/');
     }
 
+    let hbsImportStatement = this._useNamedHbsImport()
+      ? "import { hbs } from 'ember-cli-htmlbars';"
+      : "import hbs from 'htmlbars-inline-precompile';";
+
+    let templateInvocation = invocationFor(options);
+    let componentName = templateInvocation;
+    let openComponent = (descriptor) => `<${descriptor}>`;
+    let closeComponent = (descriptor) => `</${descriptor}>`;
+    let selfCloseComponent = (descriptor) => `<${descriptor} />`;
+
     return {
       path: getPathOption(options),
       testType: testType,
-      componentPathName: componentPathName,
-      friendlyTestDescription: friendlyTestDescription,
+      componentName,
+      componentPathName,
+      templateInvocation,
+      openComponent,
+      closeComponent,
+      selfCloseComponent,
+      friendlyTestDescription,
+      hbsImportStatement,
     };
-  }
-});
+  },
+
+  _useNamedHbsImport() {
+    let htmlbarsAddon = this.project.addons.find((a) => a.name === 'ember-cli-htmlbars');
+
+    if (htmlbarsAddon && semver.gte(htmlbarsAddon.pkg.version, '4.0.0-alpha.1')) {
+      return true;
+    }
+
+    return false;
+  },
+
+  afterInstall: function (options) {
+    if (
+      !options.dryRun &&
+      options.testType === 'integration' &&
+      !this._useNamedHbsImport() &&
+      isPackageMissing(this, 'ember-cli-htmlbars-inline-precompile')
+    ) {
+      return this.addPackagesToProject([
+        { name: 'ember-cli-htmlbars-inline-precompile', target: '^0.3.1' },
+      ]);
+    }
+  },
+});

blueprints/component-test/mocha-0.12-files/__root__/__testType__/__path__/__test__.ts

@@ -13,19 +13,22 @@ describe('<%= friendlyTestDescription %>', function() {
   it('renders', function() {
     <% if (testType === 'integration' ) { %>// Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.on('myAction', function(val) { ... });
+
+    this.render(hbs`<%= selfCloseComponent(componentName) %>`);
+    expect(this.$()).to.have.length(1);
+
     // Template block usage:
-    // this.render(hbs`
-    //   {{#<%= dasherizedModuleName %>}}
-    //     template content
-    //   {{/<%= dasherizedModuleName %>}}
-    // `);
+    this.render(hbs`
+      <%= openComponent(componentName) %>
+        template block text
+      <%= closeComponent(componentName) %>
+    `);
 
-    this.render(hbs`{{<%= dasherizedModuleName %>}}`);
-    expect(this.$()).to.have.length(1);<% } else if(testType === 'unit') { %>// creates the component instance
+    expect(this.$().text().trim()).to.equal('template block text');<% } else if(testType === 'unit') { %>// creates the component instance
     let component = this.subject();
     // renders the component on the page
     this.render();
     expect(component).to.be.ok;
     expect(this.$()).to.have.length(1);<% } %>
   });
-});
+});

blueprints/component-test/mocha-files/__root__/__testType__/__path__/__test__.ts

@@ -12,20 +12,23 @@ describeComponent('<%= componentPathName %>', '<%= friendlyTestDescription %>',
     it('renders', function() {
       <% if (testType === 'integration' ) { %>// Set any properties with this.set('myProperty', 'value');
       // Handle any actions with this.on('myAction', function(val) { ... });
+
+      this.render(hbs`<%= selfCloseComponent(componentName) %>`);
+      expect(this.$()).to.have.length(1);
+
       // Template block usage:
-      // this.render(hbs`
-      //   {{#<%= dasherizedModuleName %>}}
-      //     template content
-      //   {{/<%= dasherizedModuleName %>}}
-      // `);
+      this.render(hbs`
+        <%= openComponent(componentName) %>
+          template block text
+        <%= closeComponent(componentName) %>
+      `);
 
-      this.render(hbs`{{<%= dasherizedModuleName %>}}`);
-      expect(this.$()).to.have.length(1);<% } else if(testType === 'unit') { %>// creates the component instance
+      expect(this.$().text().trim()).to.equal('template block text');<% } else if(testType === 'unit') { %>// creates the component instance
       let component = this.subject();
       // renders the component on the page
       this.render();
       expect(component).to.be.ok;
       expect(this.$()).to.have.length(1);<% } %>
     });
   }
-);
+);

blueprints/component-test/mocha-rfc-232-files/__root__/__testType__/__path__/__test__.ts

@@ -2,7 +2,7 @@
 import { describe, it } from 'mocha';
 import { setupRenderingTest } from 'ember-mocha';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+<%= hbsImportStatement %>
 
 describe('<%= friendlyTestDescription %>', function() {
   setupRenderingTest();
@@ -11,15 +11,15 @@ describe('<%= friendlyTestDescription %>', function() {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.set('myAction', function(val) { ... });
 
-    await render(hbs`{{<%= componentPathName %>}}`);
+    await render(hbs`<%= selfCloseComponent(componentName) %>`);
 
     expect(this.element.textContent.trim()).to.equal('');
 
     // Template block usage:
     await render(hbs`
-      {{#<%= componentPathName %>}}
+      <%= openComponent(componentName) %>
         template block text
-      {{/<%= componentPathName %>}}
+      <%= closeComponent(componentName) %>
     `);
 
     expect(this.element.textContent.trim()).to.equal('template block text');
@@ -35,4 +35,4 @@ describe('<%= friendlyTestDescription %>', function() {
     let component = this.owner.factoryFor('component:<%= componentPathName %>').create();
     expect(component).to.be.ok;
   });
-});<% } %>
+});<% } %>

blueprints/component-test/qunit-files/__root__/__testType__/__path__/__test__.ts

@@ -1,31 +1,37 @@
 import { moduleForComponent, test } from 'ember-qunit';<% if (testType === 'integration') { %>
-import hbs from 'htmlbars-inline-precompile';<% } %>
-
-moduleForComponent('<%= componentPathName %>', '<%= friendlyTestDescription %>', {
-  <% if (testType === 'integration' ) { %>integration: true<% } else if(testType === 'unit') { %>// Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar'],
-  unit: true<% } %>
-});
-
-test('it renders', function(assert) {
-  <% if (testType === 'integration' ) { %>// Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
-
-  this.render(hbs`{{<%= componentPathName %>}}`);
-
-  assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:
-  this.render(hbs`
-    {{#<%= componentPathName %>}}
-      template block text
-    {{/<%= componentPathName %>}}
-  `);
-
-  assert.equal(this.$().text().trim(), 'template block text');<% } else if(testType === 'unit') { %>
-  // Creates the component instance
-  /*let component =*/ this.subject();
-  // Renders the component to the page
-  this.render();
-  assert.equal(this.$().text().trim(), '');<% } %>
-});
+  import hbs from 'htmlbars-inline-precompile';<% } %>
+  import { TestContext } from 'ember-test-helpers';
+  
+  type Context = TestContext & {
+    <% if (testType === 'integration') { %>element: HTMLElement<% } %>
+    // add your test properties here
+  }
+  
+  moduleForComponent('<%= componentPathName %>', '<%= friendlyTestDescription %>', {
+    <% if (testType === 'integration' ) { %>integration: true<% } else if(testType === 'unit') { %>// Specify the other units that are required for this test
+    // needs: ['component:foo', 'helper:bar'],
+    unit: true<% } %>
+  });
+  
+  test('it renders', function(this: Context, assert: Assert) {
+    <% if (testType === 'integration' ) { %>// Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.on('myAction', function(val) { ... });
+  
+    this.render(hbs`<%= selfCloseComponent(componentName) %>`);
+  
+    assert.equal(this.$().text().trim(), '');
+  
+    // Template block usage:
+    this.render(hbs`
+      <%= openComponent(componentName) %>
+        template block text
+      <%= closeComponent(componentName) %>
+    `);
+  
+    assert.equal(this.$().text().trim(), 'template block text');<% } else if(testType === 'unit') { %>
+    // Creates the component instance
+    /*let component =*/ this.subject();
+    // Renders the component to the page
+    this.render();
+    assert.equal(this.$().text().trim(), '');<% } %>
+  });

blueprints/component-test/qunit-rfc-232-files/__root__/__testType__/__path__/__test__.ts

@@ -1,36 +1,47 @@
 <% if (testType === 'integration') { %>import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
+import { TestContext } from 'ember-test-helpers';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+<%= hbsImportStatement %>
+
+type Context = TestContext & {
+  <% if (testType === 'integration') { %>element: HTMLElement<% } %>
+  // add your test properties here
+}
 
 module('<%= friendlyTestDescription %>', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
+  test('it renders', async function(this: Context, assert: Assert) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.set('myAction', function(val) { ... });
 
-    await render(hbs`{{<%= componentPathName %>}}`);
+    await render(hbs`<%= selfCloseComponent(componentName) %>`);
 
     assert.equal(this.element.textContent.trim(), '');
 
     // Template block usage:
     await render(hbs`
-      {{#<%= componentPathName %>}}
+      <%= openComponent(componentName) %>
         template block text
-      {{/<%= componentPathName %>}}
+      <%= closeComponent(componentName) %>
     `);
 
     assert.equal(this.element.textContent.trim(), 'template block text');
   });
 });<% } else if (testType === 'unit') { %>import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
+import { TestContext } from 'ember-test-helpers';
+
+type Context = TestContext & {
+  // add your test properties here
+}
 
 module('<%= friendlyTestDescription %>', function(hooks) {
   setupTest(hooks);
 
-  test('it exists', function(assert) {
+  test('it exists', function(this: Context, assert: Assert) {
     let component = this.owner.factoryFor('component:<%= componentPathName %>').create();
     assert.ok(component);
   });
-});<% } %>
+});<% } %>

blueprints/component/files/__root__/__path__/__name__.ts

@@ -1,7 +1,5 @@
 import Component from '@ember/component';
 <%= importTemplate %>
-export default class <%= classifiedModuleName %> extends Component.extend({
-  // anything which *must* be merged to prototype here
-}) {<%= contents %>
-  // normal class body definition here
+export default class <%= classifiedModuleName %> extends Component {
+  // class body definition here
 };

blueprints/component/glimmer-files/__root__/__templatepath__/__templatename__.hbs renamed to blueprints/component/glimmer-files/__root__/__path__/__name__.hbs

@@ -2,4 +2,6 @@ import Component from '@glimmer/component';
 
 interface <%= classifiedModuleName %>Args {}
 
-export default class <%= classifiedModuleName %> extends Component<<%= classifiedModuleName %>Args> {}
+export default class <%= classifiedModuleName %> extends Component<<%= classifiedModuleName %>Args> {
+  // class body definition here
+};

blueprints/component/glimmer-files/__root__/__path__/__name__.ts

@@ -1,7 +1,5 @@
 import Component from '@ember/component';
 
-export default class <%= classifiedModuleName %> extends Component.extend({
-  // anything which *must* be merged to prototype here
-}) {
-  // normal class body definition here
+export default class <%= classifiedModuleName %> extends Component {
+  // class body definition here
 };