fixes #195 use angle bracket component names (#1016)

* use angle bracket names

* fix tests

* fix node tests

* reverse comparison members

Author: miguelcobain

lib/broccoli/docs-compiler/navigation-index-generator.js

@@ -115,7 +115,11 @@ module.exports = class NavigationIndexGenerator {
     let path = segments.join('/');
     let name;
 
-    if (['components', 'helpers'].includes(type)) {
+    if (type === 'components') {
+      let parts = segments.map((s) => _.upperFirst(_.camelCase(s)));
+      let angleBracketName = parts.join('::');
+      name = `<${angleBracketName}/>`;
+    } else if (type === 'helpers') {
       name = `{{${path}}}`;
     } else {
       let fileName = segments.pop();

tests-node/unit/navigation-index-generator/test.js

@@ -17,7 +17,7 @@ describe('Unit | NavigationIndexGenerator', function (hooks) {
           {
             id: 'ember-cli-addon-docs/components/docs-demo/component',
             path: 'components/docs-demo',
-            name: '{{docs-demo}}',
+            name: '<DocsDemo/>',
           },
         ],
       },
@@ -35,12 +35,12 @@ describe('Unit | NavigationIndexGenerator', function (hooks) {
           {
             id: 'ember-cli-addon-docs/components/docs-demo/component',
             path: 'components/docs-demo',
-            name: '{{docs-demo}}',
+            name: '<DocsDemo/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-header/component',
             path: 'components/docs-header',
-            name: '{{docs-header}}',
+            name: '<DocsHeader/>',
           },
         ],
       },
@@ -94,47 +94,47 @@ describe('Unit | NavigationIndexGenerator', function (hooks) {
           {
             id: 'ember-cli-addon-docs/components/docs-demo/component',
             path: 'components/docs-demo',
-            name: '{{docs-demo}}',
+            name: '<DocsDemo/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-header/component',
             path: 'components/docs-header',
-            name: '{{docs-header}}',
+            name: '<DocsHeader/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-hero/component',
             path: 'components/docs-hero',
-            name: '{{docs-hero}}',
+            name: '<DocsHero/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-keyboard-shortcuts/component',
             path: 'components/docs-keyboard-shortcuts',
-            name: '{{docs-keyboard-shortcuts}}',
+            name: '<DocsKeyboardShortcuts/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-link/component',
             path: 'components/docs-link',
-            name: '{{docs-link}}',
+            name: '<DocsLink/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-logo/component',
             path: 'components/docs-logo',
-            name: '{{docs-logo}}',
+            name: '<DocsLogo/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-snippet/component',
             path: 'components/docs-snippet',
-            name: '{{docs-snippet}}',
+            name: '<DocsSnippet/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-svg-icon/component',
             path: 'components/docs-svg-icon',
-            name: '{{docs-svg-icon}}',
+            name: '<DocsSvgIcon/>',
           },
           {
             id: 'ember-cli-addon-docs/components/docs-viewer/component',
             path: 'components/docs-viewer',
-            name: '{{docs-viewer}}',
+            name: '<DocsViewer/>',
           },
         ],
       },
@@ -164,20 +164,20 @@ describe('Unit | NavigationIndexGenerator', function (hooks) {
       {
         type: 'components',
         items: [
-          {
-            id: 'sandbox/components/simple-list/item/component',
-            path: 'components/simple-list/item',
-            name: '{{simple-list/item}}',
-          },
           {
             id: 'sandbox/components/simple-list/component',
             path: 'components/simple-list',
-            name: '{{simple-list}}',
+            name: '<SimpleList/>',
+          },
+          {
+            id: 'sandbox/components/simple-list/item/component',
+            path: 'components/simple-list/item',
+            name: '<SimpleList::Item/>',
           },
           {
             id: 'sandbox/components/yuidoc-component',
             path: 'components/yuidoc-component',
-            name: '{{yuidoc-component}}',
+            name: '<YuidocComponent/>',
           },
         ],
       },

tests/acceptance/docs-route-test.js

@@ -15,7 +15,7 @@ module('Acceptance | Docs route test', function (hooks) {
 
   test('I can visit an autogenerated docs route', async function (assert) {
     await visit('/docs');
-    await click('[data-test-label="{{docs-hero}}"]');
+    await click('[data-test-label="<DocsHero/\u200B>"]');
 
     assert.dom('h1').hasText('DocsHero');
   });

tests/acceptance/sandbox/api/components-test.js

@@ -12,7 +12,7 @@ module('Acceptance | Sandbox | API | components', function (hooks) {
 
   test('nested components work', async function (assert) {
     await visit('/sandbox');
-    await modulePage.navItems.findOne({ text: '{{simple-list}}' }).click();
+    await modulePage.navItems.findOne({ text: '<SimpleList/\u200B>' }).click();
 
     assert.equal(
       currentURL(),
@@ -21,7 +21,7 @@ module('Acceptance | Sandbox | API | components', function (hooks) {
     );
 
     await modulePage.navItems
-      .findOne({ text: '{{simple-list/\u200Bitem}}' })
+      .findOne({ text: '<SimpleList::Item/\u200B>' })
       .click();
 
     assert.equal(