diff --git a/app/templates/components/add-ssh-key.hbs b/app/templates/components/add-ssh-key.hbs
index 900f7d4b..d0b25b61 100644
--- a/app/templates/components/add-ssh-key.hbs
+++ b/app/templates/components/add-ssh-key.hbs
@@ -5,7 +5,7 @@
   <div class="form-elem">
     {{textarea value=value class="ssh-value" rows="10" placeholder="SSH Key"}}
     {{#if valueError}}
-      <p>{{valueError}}</p>
+      <p class="form-error-message">{{valueError}}</p>
     {{/if}}
   </div>
   <div class="form-elem">
diff --git a/tests/integration/components/add-ssh-key-test.js b/tests/integration/components/add-ssh-key-test.js
new file mode 100644
index 00000000..8e47afe3
--- /dev/null
+++ b/tests/integration/components/add-ssh-key-test.js
@@ -0,0 +1,73 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import fillIn from '../../helpers/fill-in';
+
+
+moduleForComponent('add-ssh-key', 'Integration | Component | add ssh-key', {
+  integration: true
+});
+
+test('it adds an ssh key on submit', function(assert) {
+  assert.expect(6);
+
+  var store = this.container.lookup('store:main');
+
+  var repo;
+  Ember.run(function() {
+    repo  = store.push('repo', {id: 1, slug: 'travis-ci/travis-web'});
+  });
+
+  this.set('repo', repo);
+
+  this.render(hbs`{{add-ssh-key repo=repo sshKeyAdded="sshKeyAdded"}}`);
+
+  var sshKey = store.all('sshKey').objectAt(0);
+
+  assert.ok(! sshKey.get('description'), 'description should be blank');
+  assert.ok(! sshKey.get('value'), 'value should be blank');
+  assert.equal(sshKey.get('id'), 1, 'ssh key id is set to repo id');
+
+  fillIn(this.$('.ssh-description'), 'FOO');
+  fillIn(this.$('.ssh-value'), 'bar');
+
+  this.$('.form-submit').click();
+
+  assert.equal(sshKey.get('description'), 'FOO', 'description should be set');
+  assert.equal(sshKey.get('value'), 'bar', 'value should be set');
+  assert.equal(sshKey.get('id'), 1, 'ssh key id should still be repo id');
+
+});
+
+
+test('it throws an error if value for ssh key is blank', function(assert) {
+  assert.expect(5);
+
+  var store = this.container.lookup('store:main');
+
+  var repo;
+  Ember.run(function() {
+    repo  = store.push('repo', {id: 1, slug: 'travis-ci/travis-web'});
+  });
+
+  this.set('repo', repo);
+
+  this.render(hbs`{{add-ssh-key repo=repo sshKeyAdded="sshKeyAdded"}}`);
+
+  var sshKey = store.all('sshKey').objectAt(0);
+
+  assert.ok(! sshKey.get('description'), 'description should be blank');
+  assert.ok(! sshKey.get('value'), 'value should be blank');
+  assert.equal(sshKey.get('id'), 1, 'ssh key id is set to repo id');
+
+  fillIn(this.$('.ssh-description'), 'FOO');
+  fillIn(this.$('.ssh-value'), '');
+
+  this.$('.form-submit').click();
+
+  assert.ok(this.$('.form-error-message').length, 'there is an error message if value is blank');
+
+  fillIn(this.$('.ssh-value'), 'bar');
+  assert.ok(!this.$('.form-error-message').length, 'error message is removed if value is filled in');
+
+});
diff --git a/tests/integration/components/ssh-key-test.js b/tests/integration/components/ssh-key-test.js
new file mode 100644
index 00000000..9cb898d9
--- /dev/null
+++ b/tests/integration/components/ssh-key-test.js
@@ -0,0 +1,62 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import fillIn from '../../helpers/fill-in';
+
+
+moduleForComponent('ssh-key', 'Integration | Component | ssh-key', {
+  integration: true
+});
+
+test('it renders the default ssh key if no custom key is set', function(assert) {
+  assert.expect(2);
+
+  var store = this.container.lookup('store:main');
+
+  var key = Ember.Object.create({fingerprint: 'fingerprint'});
+  this.set('key', key);
+  this.render(hbs`{{ssh-key key=key sshKeyDeleted="sshKeyDeleted"}}`);
+
+  assert.equal(this.$('.ssh-key-name').text().trim(), 'no custom key set', 'should display that no custom key is set');
+  assert.equal(this.$('.ssh-key-value').text().trim(), 'fingerprint', 'should display default key fingerprint');
+
+});
+
+test('it renders the custom ssh key if custom key is set', function(assert) {
+  assert.expect(2);
+
+  var store = this.container.lookup('store:main');
+
+  var key;
+  Ember.run(function() {
+    key = store.push('sshKey', {description: 'fookey', fingerprint: 'somethingthing', id: 1});
+  });
+
+  this.set('key', key);
+  this.render(hbs`{{ssh-key key=key sshKeyDeleted="sshKeyDeleted"}}`);
+
+  assert.equal(this.$('.ssh-key-name').text().trim(), 'fookey', 'should display key description');
+  assert.equal(this.$('.ssh-key-value').text().trim(), 'somethingthing', 'should display custom key fingerprint');
+
+});
+
+
+test('it deletes a custom key', function(assert) {
+  assert.expect(1);
+
+  var store = this.container.lookup('store:main');
+
+  var key;
+  Ember.run(function() {
+    key = store.push('sshKey', {description: 'fookey', fingerprint: 'somethingthing', id: 1});
+  });
+
+  this.set('key', key);
+  this.render(hbs`{{ssh-key key=key sshKeyDeleted="sshKeyDeleted"}}`);
+  this.on('sshKeyDeleted', function() {})
+
+  this.$('.ssh-key-action a').click();
+
+  assert.ok(key.get('isDeleted'), 'key should be deleted')
+
+});