Update blueprints for angle bracket syntax

Prior to this change, the blueprints generated curly brace syntax for
the component-test.

This change will default to generating the angle bracket syntax unless
it finds the component being generated has any nesting (which is not
supported by angle bracket syntax) in which case it fallsback to the
curly bracket syntax.

Fixes emberjs#17625

blueprints/component-test/index.js

@@ -8,6 +8,15 @@ const getPathOption = require('ember-cli-get-component-path-option');
 const useTestFrameworkDetector = require('../test-framework-detector');
 const isModuleUnificationProject = require('../module-unification').isModuleUnificationProject;
 
+function needsCurlyBracketInvocation(options) {
+  let path = options.path || '';
+  let fullPaths = [...path.split('/'), ...options.entity.name.split('/')];
+  let ignoreClassicPrefix = !options.pod && options.path !== 'components';
+  let ignoreCommonPrefix = ['', 'components'].includes(fullPaths[0]);
+  if (ignoreClassicPrefix || ignoreCommonPrefix) fullPaths.shift();
+  return fullPaths.length > 1;
+}
+
 module.exports = useTestFrameworkDetector({
   description: 'Generates a component integration or unit test.',
 
@@ -72,7 +81,10 @@ module.exports = useTestFrameworkDetector({
   locals: function(options) {
     let dasherizedModuleName = stringUtil.dasherize(options.entity.name);
     let componentPathName = dasherizedModuleName;
+    let classifiedModuleName = stringUtil.classify(options.entity.name);
+    let templateInvocation = classifiedModuleName;
     let testType = options.testType || 'integration';
+    let componentName, openComponent, closeComponent, selfCloseComponent;
 
     let friendlyTestDescription = [
       testType === 'unit' ? 'Unit' : 'Integration',
@@ -85,15 +97,36 @@ module.exports = useTestFrameworkDetector({
     } else if (isModuleUnificationProject(this.project)) {
       if (options.inRepoAddon) {
         componentPathName = `${options.inRepoAddon}::${dasherizedModuleName}`;
+        templateInvocation = `${stringUtil.classify(options.inRepoAddon)}::${classifiedModuleName}`;
       } else if (this.project.isEmberCLIAddon()) {
         componentPathName = `${this.project.pkg.name}::${dasherizedModuleName}`;
+        templateInvocation = `${stringUtil.classify(
+          this.project.pkg.name
+        )}::${classifiedModuleName}`;
       }
     }
 
+    if (needsCurlyBracketInvocation(options)) {
+      componentName = componentPathName;
+      openComponent = descriptor => `{{#${descriptor}}}`;
+      closeComponent = descriptor => `{{/${descriptor}}}`;
+      selfCloseComponent = descriptor => `{{${descriptor}}}`;
+    } else {
+      componentName = templateInvocation;
+      openComponent = descriptor => `<${descriptor}>`;
+      closeComponent = descriptor => `</${descriptor}>`;
+      selfCloseComponent = descriptor => `<${descriptor} />`;
+    }
+
     return {
       path: getPathOption(options),
       testType: testType,
+      componentName: componentName,
       componentPathName: componentPathName,
+      templateInvocation: templateInvocation,
+      openComponent: openComponent,
+      closeComponent: closeComponent,
+      selfCloseComponent: selfCloseComponent,
       friendlyTestDescription: friendlyTestDescription,
     };
   },

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

@@ -13,15 +13,18 @@ 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
+    assert.equal(this.$().text().trim(), 'template block text');<% } else if(testType === 'unit') { %>// creates the component instance
     let component = this.subject();
     // renders the component on the page
     this.render();

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

@@ -12,15 +12,18 @@ 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
+      assert.equal(this.$().text().trim(), 'template block text');<% } else if(testType === 'unit') { %>// creates the component instance
       let component = this.subject();
       // renders the component on the page
       this.render();

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

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

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

@@ -11,15 +11,15 @@ 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 %>}}`);
+  this.render(hbs`<%= selfCloseComponent(componentName) %>`);
 
   assert.equal(this.$().text().trim(), '');
 
   // Template block usage:
   this.render(hbs`
-    {{#<%= componentPathName %>}}
+    <%= openComponent(componentName) %>
       template block text
-    {{/<%= componentPathName %>}}
+    <%= closeComponent(componentName) %>
   `);
 
   assert.equal(this.$().text().trim(), 'template block text');<% } else if(testType === 'unit') { %>

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

@@ -10,15 +10,15 @@ module('<%= friendlyTestDescription %>', function(hooks) {
     // 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');