Refactor species/show

app/mirage/config.js

@@ -16,4 +16,8 @@ export function testConfig() {
   this.get('/species', function(db) {
     return { 'species': db.species };
   });
+
+  this.get('/species/:id', function(db, request) {
+    return { 'species': db.species.find(request.params.id) };
+  });
 }

app/mirage/factories/species.js

@@ -1,11 +1,11 @@
 import Mirage, { faker } from 'ember-cli-mirage';
 
 export default Mirage.Factory.extend({
-  speciesName: faker.lorem.words,
+  speciesName() { return faker.lorem.words().join(' '); },
-  typeSpecies: faker.random.boolean,
+  typeSpecies: faker.random.boolean(),
-  etymology: faker.lorem.sentences,
+  etymology: faker.lorem.sentences(),
   genusName: 'hymenobacter',
   strains: [],
   totalStrains: 0,
-  sortOrder: faker.random.number,
+  sortOrder: faker.random.number(),
 });

app/pods/protected/species/show/controller.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
+const { Controller } = Ember;
+
+export default Controller.extend({
   actions: {
     delete: function() {
       this.get('model').destroyRecord().then(() => {

app/pods/protected/species/show/route.js

@@ -1,8 +1,10 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+const { Route } = Ember;
+
+export default Route.extend({
   model: function(params) {
-    return this.store.findRecord('species', params.species_id, { reload: true });
+    return this.store.findRecord('species', params.species_id);
   },
 
 });

app/pods/protected/species/show/species-card/component.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  species: null,
+  "on-delete": null,
+
+  actions: {
+    deleteSpecies: function() {
+      return this.attrs['on-delete']();
+    },
+  },
+});

app/pods/protected/species/show/species-card/template.hbs

@@ -0,0 +1,62 @@
+<div class="grid-1">
+  <div class="span-1">
+    <fieldset class="flakes-information-box">
+      <legend>
+        Species <em>{{species.speciesName}}</em>
+      </legend>
+
+      {{! ROW 1 }}
+      <div class="grid-2 gutter-20">
+        <dl class="span-1">
+          <dt>Strains</dt>
+          <dd>
+            <ul>
+              {{#each species.strains as |strain index|}}
+                <li>
+                  {{#link-to 'protected.strains.show' strain.id}}
+                    {{{strain.strainNameMU}}}
+                  {{/link-to}}
+                </li>
+              {{/each}}
+            </ul>
+          </dd>
+        </dl>
+        <dl class="span-1">
+          <dt>Type Species?</dt>
+          <dd>
+            {{if species.typeSpecies 'Yes' 'No'}}
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 2 }}
+      <div class="grid-1 gutter-20">
+        <dl class="span-1">
+          <dt>Etymology</dt>
+          <dd>
+            {{{species.etymology}}}
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 3 }}
+      <div class="grid-2 gutter-20">
+        <dl class="span-1">
+          <dt>Record Created</dt>
+          <dd>{{null-time species.createdAt 'LL'}}</dd>
+        </dl>
+        <dl class="span-1">
+          <dt>Record Updated</dt>
+          <dd>{{null-time species.updatedAt 'LL'}}</dd>
+        </dl>
+      </div>
+    </fieldset>
+  </div>
+</div>
+{{#if species.canEdit}}
+  <br>
+  {{#link-to 'protected.species.edit' species class="button-gray smaller"}}
+    Edit
+  {{/link-to}}
+  {{delete-button delete=(action 'deleteSpecies')}}
+{{/if}}

app/pods/protected/species/show/template.hbs

@@ -1,62 +1,5 @@
-<div class="grid-1">
+{{
-  <div class="span-1">
+  protected/species/show/species-card
-    <fieldset class="flakes-information-box">
+  species=model
-      <legend>
+  on-delete=(action 'delete')
-        Species <em>{{model.speciesName}}</em>
+}}
-      </legend>
-
-      {{! ROW 1 }}
-      <div class="grid-2 gutter-20">
-        <dl class="span-1">
-          <dt>Strains</dt>
-          <dd>
-            <ul>
-              {{#each model.strains as |strain index|}}
-                <li>
-                  {{#link-to 'protected.strains.show' strain.id}}
-                    {{{strain.strainNameMU}}}
-                  {{/link-to}}
-                </li>
-              {{/each}}
-            </ul>
-          </dd>
-        </dl>
-        <dl class="span-1">
-          <dt>Type Species?</dt>
-          <dd>
-            {{if model.typeSpecies 'Yes' 'No'}}
-          </dd>
-        </dl>
-      </div>
-
-      {{! ROW 2 }}
-      <div class="grid-1 gutter-20">
-        <dl class="span-1">
-          <dt>Etymology</dt>
-          <dd>
-            {{{model.etymology}}}
-          </dd>
-        </dl>
-      </div>
-
-      {{! ROW 3 }}
-      <div class="grid-2 gutter-20">
-        <dl class="span-1">
-          <dt>Record Created</dt>
-          <dd>{{null-time model.createdAt 'LL'}}</dd>
-        </dl>
-        <dl class="span-1">
-          <dt>Record Updated</dt>
-          <dd>{{null-time model.updatedAt 'LL'}}</dd>
-        </dl>
-      </div>
-    </fieldset>
-  </div>
-</div>
-{{#if model.canEdit}}
-  <br>
-  {{#link-to 'protected.species.edit' model class="button-gray smaller"}}
-    Edit
-  {{/link-to}}
-  {{delete-button delete=(action 'delete')}}
-{{/if}}

tests/acceptance/species-test.js

@@ -27,3 +27,13 @@ test('visiting /species', function(assert) {
     assert.equal(find("#total-species").text(), "Total species: 20");
   });
 });
+
+test('visiting /species/:id', function(assert) {
+  const species = server.create('species');
+  visit(`/species/${species.id}`);
+
+  andThen(function() {
+    assert.equal(currentURL(), `/species/${species.id}`);
+    assert.equal(find(".flakes-information-box > legend > em").text().trim(), species.speciesName);
+  });
+});