Strain name markup

app/pods/components/scientific-name/template.hbs

@@ -1 +1 @@
-<em>{{strain.species.speciesName}}</em> (strain {{strain.strainName}})
+<em>{{strain.species.speciesName}}</em> (strain {{strain-name strain=strain}})

app/pods/components/species-details/template.hbs

@@ -5,7 +5,7 @@
         {{#if isEditing}}
           {{input value=species.speciesName}}
         {{else}}
-          {{species.speciesName}}
+          <em>{{species.speciesName}}</em>
         {{/if}}
         {{display-errors a=species.errors.speciesName}}
     </legend>
@@ -18,7 +18,7 @@
           {{#each species.strains as |strain index|}}
             {{if index ","}}
             {{#link-to 'strains.show' strain.id}}
-              {{strain.strainName}}
+              {{strain-name strain=strain}}
             {{/link-to}}
           {{/each}}
           {{#unless species.isNew}}

app/pods/components/species-index-row/template.hbs

@@ -9,7 +9,7 @@
   {{#each data.strains as |strain index|}}
     {{if index ","}}
     {{#link-to 'strains.show' strain.id}}
-      {{strain.strainName}}
+      {{strain-name strain=strain}}
     {{/link-to}}
   {{/each}}
 </td>

app/pods/components/strain-details/template.hbs

@@ -5,7 +5,7 @@
         {{#if isEditing}}
           {{input value=strain.strainName}}
         {{else}}
-          {{strain.strainName}}
+          <em>{{strain.strainName}}</em>
         {{/if}}
         {{display-errors a=strain.errors.strainName}}
     </legend>

app/pods/components/strain-index-row/template.hbs

@@ -1,5 +1,5 @@
 <td>
-  {{#link-to 'strains.show' data.id}}
+  {{#link-to 'strains.show' data.id classBinding="data.typeStrain:type-strain"}}
     {{scientific-name strain=data}}
   {{/link-to}}
 </td>

app/pods/components/strain-name/component.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'span',
+});

app/pods/components/strain-name/template.hbs

@@ -0,0 +1 @@
+{{strain.strainName}}{{{if strain.typeStrain '<sup>T</sup>'}}}

app/styles/app.css

@@ -10,6 +10,10 @@
   background-color: #FFFCE2;
 }
 
+.type-strain {
+  color: #5CA934;
+}
+
 /* BEGIN https://github.com/tobiasahlin/SpinKit */
 .spinner {
   width: 40px;

tests/unit/pods/components/strain-name/component-test.js

@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('strain-name', 'Unit | Component | strain name', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar'],
+  unit: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});