Merge pull request #167 from ember-learn/bugfix/enabled-nested-components

[bugfix] Enable nested components

Author: pzuraq

lib/broccoli/docs-compiler.js

@@ -84,26 +84,29 @@ const RESOLVED_TYPES = [
 function generateResolvedTypeNavigationItems(modules, type) {
   let items = modules.map(m => {
     let segments = m.file.split('/');
-    let fileName = segments.pop();
+    segments = segments.slice(segments.indexOf(type) + 1);
 
-    if (type.match(fileName)) {
-      fileName = segments.pop();
+    if (type.match(segments[segments.length - 1])) {
+      segments.pop();
     }
 
+    let path = segments.join('/');
     let name;
+
     if (['components', 'helpers'].includes(type)) {
-      name = `{{${fileName}}}`;
+      name = `{{${path}}}`;
     } else {
+      let fileName = segments.pop();
       name = _.upperFirst(_.camelCase(fileName));
     }
 
     return {
-      path: `${type}/${fileName}`,
+      path: `${type}/${path}`,
       name
     };
   });
 
-  return _.sortBy(items, ['name']);
+  return _.sortBy(items, ['path']);
 }
 
 function generateModuleNavigationItems(modules, type) {

sandbox/app/components/simple-list/component.js

@@ -0,0 +1,29 @@
+/** @documenter esdoc */
+
+import Component from '@ember/component';
+import { argument } from '@ember-decorators/argument';
+import { type } from '@ember-decorators/argument/type';
+
+/**
+  Pretty cool component, right?
+
+  To use it, you could enter the following in your template:
+
+  ```handlebars
+  {{#simple-list items=(arr 1 2 3) as |item|}}
+    {{#item as |value|}}
+      {{value}}
+    {{/item}}
+  {{/simple-list}}
+  ```
+
+  @yield {SimpleListItem} item
+*/
+export default class SimpleList extends Component {
+  /**
+    The items for the list
+  */
+  @argument
+  @type('object')
+  items;
+}

sandbox/app/components/simple-list/item/component.js

@@ -0,0 +1,25 @@
+/** @documenter esdoc */
+
+import Component from '@ember/component';
+import { argument } from '@ember-decorators/argument';
+import { type } from '@ember-decorators/argument/type';
+
+/**
+  Pretty cool component, right?
+
+  To use it, you could enter the following in your template:
+
+  ```handlebars
+    {{simple-list/item value=1}}
+  ```
+
+  @yield {object} value
+*/
+export default class SimpleListItem extends Component {
+  /**
+    The count
+  */
+  @argument
+  @type('object')
+  value;
+}

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

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { currentURL, visit } from '@ember/test-helpers';
+
+import modulePage from '../../../pages/api/module';
+
+module('Acceptance | API | components', function(hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  test('nested components work', async function(assert) {
+    await visit('/sandbox');
+    await modulePage.navItems.findOne({ text: `{{simple-list}}` }).click();
+
+    assert.equal(currentURL(), `/sandbox/api/components/simple-list`, 'correct url');
+
+    await modulePage.navItems.findOne({ text: `{{simple-list/item}}` }).click();
+
+    assert.equal(currentURL(), `/sandbox/api/components/simple-list/item`, 'correct url');
+  });
+});