Merge a4e630d into 1774f66

addon/components/nav-route.js

@@ -1,5 +1,6 @@
 import Ember from 'ember'
 const {inject} = Ember
+import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {PropTypes} from 'ember-prop-types'
 
@@ -34,6 +35,16 @@ export default Component.extend({
     }
   },
 
+  // == Computed Properties ===================================================
+
+  @readOnly
+  @computed('icon')
+  iconHref (icon) {
+    if (icon && icon.includes('/')) {
+      return icon.includes('#') ? icon : `${icon}#root`
+    }
+  },
+
   // == Functions =============================================================
 
   // == DOM Events ============================================================

addon/templates/components/nav-route.hbs

@@ -10,13 +10,20 @@
   }}
     <div class='content'>
       <div class='nav-route-icon'>
-        {{#if icon}}
-          {{frost-icon
-            hook=(concat hookPrefix '-link-icon')
-            hookQualifiers=hookQualifiers
-            pack=pack
-            icon=icon
-          }}
+        {{#if iconHref}}
+          <svg
+            class='frost-icon'
+            data-test={{hook (concat hookPrefix '-link-icon') hookQualifiers}}
+          >
+            <use xlink:href="{{iconHref}}" />
+          </svg>
+         {{else if icon}}
+            {{frost-icon
+              hook=(concat hookPrefix '-link-icon')
+              hookQualifiers=hookQualifiers
+              pack=pack
+              icon=icon
+            }}
         {{/if}}
       </div>
       <div>
@@ -34,10 +41,17 @@
     class='frost-link'
     href='{{url}}'
     target="{{if tabbed '_blank'}}"
-    data-test={{hook (concat hookPrefix '-link') hookQualifiers=hookQualifiers}}>
+    data-test={{hook (concat hookPrefix '-link') hookQualifiers}}>
     <div class='content'>
       <div class='nav-route-icon'>
-        {{#if icon}}
+        {{#if iconHref}}
+          <svg
+            class='frost-icon'
+            data-test={{hook (concat hookPrefix '-link-icon') hookQualifiers}}
+          >
+            <use xlink:href="{{iconHref}}" />
+          </svg>
+        {{else if icon}}
           {{frost-icon
             hook=(concat hookPrefix '-link-icon')
             hookQualifiers=hookQualifiers

tests/dummy/app/pods/demo/controller.js

@@ -19,13 +19,22 @@ export default Controller.extend({
       routeModels: ['id0'],
       routeQueryParams: {count: 0}
     })
+    const iconLinkExample = Ember.Object.extend({}).create({
+      description: 'Icon is referenced by URI',
+      icon: '/svgs/pinpoint/nav/fiberplant.svg#Layer_1',
+      name: 'Custom Route',
+      route: 'test',
+      routeModels: ['id0'],
+      routeQueryParams: {count: 0}
+    })
     set(this, 'customRouteObject', customRouteObject)
     let columns = [
       [
         {
           title: 'Custom Column',
           routes: [
-            customRouteObject
+            customRouteObject,
+            iconLinkExample
           ]
         }
       ]

tests/integration/components/nav-route-test.js

@@ -1,4 +1,6 @@
 import {expect} from 'chai'
+import {$hook} from 'ember-hook'
+import wait from 'ember-test-helpers/wait'
 import {integration} from 'ember-test-utils/test-support/setup-component-test'
 import hbs from 'htmlbars-inline-precompile'
 import {beforeEach, describe, it} from 'mocha'
@@ -8,15 +10,129 @@ describe(test.label, function () {
   test.setup()
 
   beforeEach(function () {
-    this.render(hbs`{{nav-route}}`)
+    this.render(hbs`
+      {{nav-route
+        hook='hook'
+        hookQualifiers=(hash fizz='bang')
+        icon=icon
+        route=route
+      }}
+    `)
   })
 
-  it('should render a single element in the DOM', function () {
-    expect(this.$()).to.have.length(1)
+  describe('when route is undefined', function () {
+    beforeEach(function () {
+      this.set('route', undefined)
+      return wait()
+    })
+
+    describe('when icon not a path', function () {
+      beforeEach(function () {
+        this.set('icon', 'add')
+        return wait()
+      })
+
+      it('should have frost-icon class', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.attr('class').split(' ')).to.include('frost-icon')
+      })
+
+      it('should have the expected xlink:href', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.find('use')).to.have.attr('xlink:href', 'assets/icon-packs/frost.svg#add')
+      })
+    })
+
+    describe('when icon is a path without an id', function () {
+      beforeEach(function () {
+        this.set('icon', '/my/icon/path')
+        return wait()
+      })
+
+      it('should have frost-icon class', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.attr('class').split(' ')).to.include('frost-icon')
+      })
+
+      it('should have the expected xlink:href', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.find('use')).to.have.attr('xlink:href', '/my/icon/path#root')
+      })
+    })
+
+    describe('when icon is a path with an id', function () {
+      beforeEach(function () {
+        this.set('icon', '/my/icon/path#Layer_1')
+        return wait()
+      })
+
+      it('should have frost-icon class', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.attr('class').split(' ')).to.include('frost-icon')
+      })
+
+      it('should have the expected xlink:href', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.find('use')).to.have.attr('xlink:href', '/my/icon/path#Layer_1')
+      })
+    })
   })
 
-  // FIXME: add real tests
-  it.skip('should have real tests', function () {
-    expect(true).to.equal(false)
+  describe('when route is defined', function () {
+    beforeEach(function () {
+      this.set('route', 'test')
+      return wait()
+    })
+
+    describe('when icon not a path', function () {
+      beforeEach(function () {
+        this.set('icon', 'add')
+        return wait()
+      })
+
+      it('should have frost-icon class', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.attr('class').split(' ')).to.include('frost-icon')
+      })
+
+      it('should have the expected xlink:href', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.find('use')).to.have.attr('xlink:href', 'assets/icon-packs/frost.svg#add')
+      })
+    })
+
+    describe('when icon is a path without an id', function () {
+      beforeEach(function () {
+        this.set('icon', '/my/icon/path')
+        return wait()
+      })
+
+      it('should have frost-icon class', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.attr('class').split(' ')).to.include('frost-icon')
+      })
+
+      it('should have the expected xlink:href', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.find('use')).to.have.attr('xlink:href', '/my/icon/path#root')
+      })
+    })
+
+    describe('when icon is a path with an id', function () {
+      beforeEach(function () {
+        this.set('icon', '/my/icon/path#Layer_1')
+        return wait()
+      })
+
+      it('should have frost-icon class', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.attr('class').split(' ')).to.include('frost-icon')
+      })
+
+      it('should have the expected xlink:href', function () {
+        const $icon = $hook('hook-link-icon', {fizz: 'bang'})
+        expect($icon.find('use')).to.have.attr('xlink:href', '/my/icon/path#Layer_1')
+      })
+    })
   })
 })