Clean up delete button and tests

Fixes #59

app/mirage/config.js

@@ -19,11 +19,13 @@ export function testConfig() {
   this.post('/species');
   this.get('/species/:id');
   this.put('/species/:id');
+  this.delete('/species/:id');
 
   this.get('/characteristics');
   this.post('/characteristics');
   this.get('/characteristics/:id');
   this.put('/characteristics/:id');
+  this.delete('/characteristics/:id');
 
   this.get('/strains', function(db /*, request*/) {
     return {
@@ -39,4 +41,5 @@ export function testConfig() {
     };
   });
   this.put('/strains/:id');
+  this.delete('/strains/:id');
 }

app/pods/components/delete-button/component.js

@@ -1,16 +1,23 @@
 import Ember from 'ember';
 
-export default Ember.Component.extend({
+const { Component } = Ember;
-  tagName: 'button',
+
-  classNames: ["button-red", "smaller", "delete"],
+export default Component.extend({
+  tagName: 'span',
   showConfirmDelete: false,
 
-  click: function() {
+  actions: {
-    if (!this.get('showConfirmDelete')) {
+    initialClick: function() {
       this.set('showConfirmDelete', true);
-    } else {
+    },
+
+    cancelDelete: function() {
+      this.set('showConfirmDelete', false);
+    },
+
+    confirmDelete: function() {
       this.attrs.delete();
-    }
+    },
   },
 
 });

app/pods/components/delete-button/template.hbs

@@ -1,5 +1,12 @@
-{{#if showConfirmDelete}}
+{{#unless showConfirmDelete}}
-  Are you sure?
+  <button class="button-red smaller delete" {{action "initialClick"}}>
+    Delete
+  </button>
 {{else}}
-  Delete
+  <button class="button-red smaller delete-confirm" {{action "confirmDelete"}}>
-{{/if}}
+    Confirm Delete
+  </button>
+  <button class="button-gray smaller delete-cancel" {{action "cancelDelete"}}>
+    Cancel Delete
+  </button>
+{{/unless}}

tests/acceptance/characteristics-test.js

@@ -6,10 +6,10 @@ import { authenticateSession } from '../helpers/ember-simple-auth';
 module('Acceptance | characteristics', {
   beforeEach: function() {
     this.application = startApp();
+    server.create('users', { role: 'A', canEdit: true, sub: 1 });
     authenticateSession(this.application, {
       access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJiYWN0ZGIiLCJzdWIiOiIxIiwiZXhwIjoxNDQ2NTAyMjI2LCJpYXQiOjE0NDY0OTg2MjZ9.vIjKHAsp2TkCV505EbtCo2xQT-2oQkB-Nv5y0b6E7Mg"
     });
-    server.create('users', { role: 'A', canEdit: true });
   },
 
   afterEach: function() {
@@ -70,3 +70,22 @@ test('creating /characteristics/new', function(assert) {
     });
   });
 });
+
+test('deleting /characteristics/:id', function(assert) {
+  const characteristic = server.create('characteristics', { 'canEdit': true });
+  visit(`/characteristics/${characteristic.id}`);
+
+  andThen(function() {
+    assert.equal(currentURL(), `/characteristics/${characteristic.id}`);
+    click('button.delete');
+
+    andThen(function() {
+      click('button.delete-confirm');
+
+      andThen(function() {
+        assert.equal(currentURL(), `/characteristics`);
+        assert.equal(server.db.characteristics.length, 0);
+      });
+    });
+  });
+});

tests/acceptance/species-test.js

@@ -6,10 +6,10 @@ import { authenticateSession } from '../helpers/ember-simple-auth';
 module('Acceptance | species', {
   beforeEach: function() {
     this.application = startApp();
+    server.create('users', { role: 'A', canEdit: true, sub: 1 });
     authenticateSession(this.application, {
       access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJiYWN0ZGIiLCJzdWIiOiIxIiwiZXhwIjoxNDQ2NTAyMjI2LCJpYXQiOjE0NDY0OTg2MjZ9.vIjKHAsp2TkCV505EbtCo2xQT-2oQkB-Nv5y0b6E7Mg"
     });
-    server.create('users', { role: 'A', canEdit: true });
   },
 
   afterEach: function() {
@@ -69,3 +69,22 @@ test('creating /species/new', function(assert) {
     });
   });
 });
+
+test('deleting /species/:id', function(assert) {
+  const species = server.create('species', { 'canEdit': true });
+  visit(`/species/${species.id}`);
+
+  andThen(function() {
+    assert.equal(currentURL(), `/species/${species.id}`);
+    click('button.delete');
+
+    andThen(function() {
+      click('button.delete-confirm');
+
+      andThen(function() {
+        assert.equal(currentURL(), `/species`);
+        assert.equal(server.db.species.length, 0);
+      });
+    });
+  });
+});

tests/acceptance/strains-test.js

@@ -6,10 +6,10 @@ import { authenticateSession } from '../helpers/ember-simple-auth';
 module('Acceptance | strains', {
   beforeEach: function() {
     this.application = startApp();
+    server.create('users', { role: 'A', canEdit: true, sub: 1 });
     authenticateSession(this.application, {
       access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJiYWN0ZGIiLCJzdWIiOiIxIiwiZXhwIjoxNDQ2NTAyMjI2LCJpYXQiOjE0NDY0OTg2MjZ9.vIjKHAsp2TkCV505EbtCo2xQT-2oQkB-Nv5y0b6E7Mg"
     });
-    server.create('users', { role: 'A', canEdit: true });
   },
 
   afterEach: function() {
@@ -74,3 +74,23 @@ test('creating /strains/new', function(assert) {
     });
   });
 });
+
+test('deleting /strains/:id', function(assert) {
+  const species = server.create('species');
+  const strain = server.create('strains', { canEdit: true , species: species.id });
+  visit(`/strains/${strain.id}`);
+
+  andThen(function() {
+    assert.equal(currentURL(), `/strains/${strain.id}`);
+    click('button.delete');
+
+    andThen(function() {
+      click('button.delete-confirm');
+
+      andThen(function() {
+        assert.equal(currentURL(), `/strains`);
+        assert.equal(server.db.strains.length, 0);
+      });
+    });
+  });
+});

tests/acceptance/users-test.js

@@ -6,10 +6,10 @@ import { invalidateSession, authenticateSession } from '../helpers/ember-simple-
 module('Acceptance | users', {
   beforeEach: function() {
     this.application = startApp();
+    server.create('users', { role: 'A', canEdit: true, sub: 1 });
     authenticateSession(this.application, {
       access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJiYWN0ZGIiLCJzdWIiOiIxIiwiZXhwIjoxNDQ2NTAyMjI2LCJpYXQiOjE0NDY0OTg2MjZ9.vIjKHAsp2TkCV505EbtCo2xQT-2oQkB-Nv5y0b6E7Mg"
     });
-    server.create('users', { role: 'A', canEdit: true });
   },
 
   afterEach: function() {