Changes for a more flexible Component

.gitignore

@@ -15,3 +15,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
+.idea

addon/components/bread-crumbs.js

@@ -10,8 +10,7 @@ const {
   assert,
   typeOf,
   setProperties,
-  A: emberArray,
-  String: { classify }
+  A: emberArray
 } = Ember;
 const {
   bool,
@@ -23,7 +22,6 @@ export default Component.extend({
   tagName: 'ol',
   linkable: true,
   reverse: false,
-  classNameBindings: ['breadCrumbClass'],
   hasBlock: bool('template').readOnly(),
   currentUrl: readOnly('applicationRoute.router.url'),
   currentRouteName: readOnly('applicationRoute.controller.currentRouteName'),
@@ -35,27 +33,12 @@ export default Component.extend({
       assert('[ember-crumbly] Could not find a curent route', currentRouteName);
 
       const routeNames = currentRouteName.split('.');
-      const filteredRouteNames = this._filterIndexAndLoadingRoutes(routeNames);
-      const crumbs = this._lookupBreadCrumb(routeNames, filteredRouteNames);
+      const crumbs = this._lookupBreadCrumb(routeNames, routeNames);
 
       return get(this, 'reverse') ? crumbs.reverse() : crumbs;
     }
   }).readOnly(),
 
-  breadCrumbClass: computed('outputStyle', {
-    get() {
-      let className = 'breadcrumb';
-      const outputStyle = getWithDefault(this, 'outputStyle', '');
-      const lowerCaseOutputStyle = outputStyle.toLowerCase();
-
-      if (lowerCaseOutputStyle === 'foundation') {
-        className = 'breadcrumbs';
-      }
-
-      return className;
-    }
-  }).readOnly(),
-
   _guessRoutePath(routeNames, name, index) {
     const routes = routeNames.slice(0, index + 1);
 
@@ -68,10 +51,6 @@ export default Component.extend({
     return routes.join('.');
   },
 
-  _filterIndexAndLoadingRoutes(routeNames) {
-    return routeNames.filter((name) => !(name === 'index' || name === 'loading'));
-  },
-
   _lookupRoute(routeName) {
     return getOwner(this).lookup(`route:${routeName}`);
   },
@@ -86,11 +65,9 @@ export default Component.extend({
 
       assert(`[ember-crumbly] \`route:${path}\` was not found`, route);
 
-      let breadCrumb = getWithDefault(route, 'breadCrumb', {
-        title: classify(name)
-      });
+      let breadCrumb = get(route, 'breadCrumb');
 
-      if (typeOf(breadCrumb) === 'null') {
+      if (!breadCrumb) {
         return;
       } else {
         setProperties(breadCrumb, {

addon/templates/components/bread-crumbs.hbs

@@ -1,6 +1,6 @@
 {{#each routeHierarchy as |route|}}
   {{#if hasBlock}}
-    {{yield this route}}
+    {{yield this route routeHierarchy}}
   {{else}}
     {{bread-crumb route=route breadCrumbs=this}}
   {{/if}}

tests/acceptance/integration-test.js

@@ -23,8 +23,8 @@ test('routeHierarchy returns the correct number of routes', function(assert) {
     const routeHierarchy = componentInstance.get('routeHierarchy');
     const numberOfRenderedBreadCrumbs = find('#bootstrapLinkable li').length;
     assert.equal(currentRouteName(), 'foo.bar.baz.index', 'correct current route name');
-    assert.equal(routeHierarchy.length, 3, 'returns correct number of routes');
-    assert.equal(numberOfRenderedBreadCrumbs, 3, 'renders the correct number of breadcrumbs');
+    assert.equal(routeHierarchy.length, 4, 'returns correct number of routes');
+    assert.equal(numberOfRenderedBreadCrumbs, 4, 'renders the correct number of breadcrumbs');
   });
 });
 
@@ -84,23 +84,8 @@ test('routes that are not linkable do not generate an <a> tag', function(assert)
     const listElementsLength = find('#bootstrapLinkable li').length;
     const listAnchorElementsLength = find('#bootstrapLinkable li a').length;
     assert.equal(currentRouteName(), 'foo.bar.baz.index', 'correct current route name');
-    assert.equal(listElementsLength, 3, 'returns the correct number of list elements');
-    assert.equal(listAnchorElementsLength, 2, 'returns the correct number of list anchor elements');
-  });
-});
-
-test('bread-crumbs component outputs the right class', function(assert) {
-  assert.expect(3);
-  visit('/foo');
-
-  andThen(() => {
-    const foundationList = find('ul#foundationLinkable');
-    const bootstrapList = find('ol#bootstrapLinkable');
-    const hasCorrectFoundationClass = foundationList.hasClass('breadcrumbs');
-    const hasCorrectBootstrapClass = bootstrapList.hasClass('breadcrumb');
-    assert.equal(currentRouteName(), 'foo.index', 'correct current route name');
-    assert.ok(hasCorrectFoundationClass, 'returns the correct Foundation class');
-    assert.ok(hasCorrectBootstrapClass, 'returns the correct Bootstrap class');
+    assert.equal(listElementsLength, 4, 'returns the correct number of list elements');
+    assert.equal(listAnchorElementsLength, 3, 'returns the correct number of list anchor elements');
   });
 });
 
@@ -115,37 +100,16 @@ test('bread-crumbs component accepts a block', function(assert) {
   });
 });
 
-test('routes with no breadcrumb should render with their capitalized inferred name', function(assert) {
-  assert.expect(4);
-  visit('/dessert/cookie');
-
-  andThen(() => {
-    const allListItems = find('ol#bootstrapLinkable li').text();
-    const allLinkItems = find('ol#bootstrapLinkable li a').text();
-
-    const hasDessertInallList = allListItems.indexOf('Dessert') >= 0;
-    const hasCookieTextInallList = allListItems.indexOf('Cookie') >= 0;
-
-    const hasDessertInLinkList = allLinkItems.indexOf('Dessert') >= 0;
-    const doesNotHaveCookieInLinkList = allLinkItems.indexOf('Cookie') === -1;
-
-    assert.ok(hasDessertInallList, 'renders the right inferred name');
-    assert.ok(hasCookieTextInallList, 'renders the right inferred name');
-    assert.ok(hasDessertInLinkList, 'renders the right inferred name');
-    assert.ok(doesNotHaveCookieInLinkList, 'renders the right inferred name');
-  });
-});
-
 test('absence of reverse option renders breadcrumb right to left', function(assert) {
   assert.expect(2);
   visit('/foo/bar/baz');
 
   andThen(() => {
     const numberOfRenderedBreadCrumbs = find('#bootstrapLinkable li').length;
-    assert.equal(numberOfRenderedBreadCrumbs, 3, 'renders the correct number of breadcrumbs');
+    assert.equal(numberOfRenderedBreadCrumbs, 4, 'renders the correct number of breadcrumbs');
     assert.deepEqual(
       Ember.$('#bootstrapLinkable li').map((idx, item) => item.innerText.trim()).toArray(),
-      ['I am Foo Index', 'I am Bar', 'I am Baz']);
+      ['I am Foo Index', 'I am Bar', 'I am Baz', 'I am Baz Index']);
   });
 });
 
@@ -155,10 +119,10 @@ test('reverse option = TRUE renders breadcrumb from left to right', function(ass
 
   andThen(() => {
     const numberOfRenderedBreadCrumbs = find('#reverseBootstrapLinkable li').length;
-    assert.equal(numberOfRenderedBreadCrumbs, 3, 'renders the correct number of breadcrumbs');
+    assert.equal(numberOfRenderedBreadCrumbs, 4, 'renders the correct number of breadcrumbs');
     assert.deepEqual(
       Ember.$('#reverseBootstrapLinkable li').map((idx, item) => item.innerText.trim()).toArray(),
-      ['I am Baz', 'I am Bar', 'I am Foo Index']);
+      ['I am Baz Index','I am Baz', 'I am Bar', 'I am Foo Index']);
   });
 });
 
@@ -196,7 +160,7 @@ test('bread-crumbs change when the route is changed', function(assert) {
     const lastCrumbText = find('#bootstrapLinkable li:last-child a').text().trim();
 
     assert.equal(currentRouteName(), 'foo.bar.baz.index', 'correct current route name');
-    assert.equal(lastCrumbText, 'I am Baz', 'renders the correct last breadcrumb');
+    assert.equal(lastCrumbText, 'I am Baz Index', 'renders the correct last breadcrumb');
   });
 
   click('#bootstrapLinkable li:first-child a');

tests/dummy/app/foo/bar/baz/index/route.js

@@ -6,6 +6,7 @@ const {
 
 export default Route.extend({
   breadCrumb: {
-    title: 'I am Baz Index'
+    title: 'I am Baz Index',
+    linkable: true
   }
 });