Started specs [ci skip]

app/assets/javascripts/deploy_keys/components/keys_panel.vue

@@ -28,7 +28,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="deploy-keys-panel">
     <h5>
       {{ title }}
       ({{ keys.length }})

spec/javascripts/deploy_keys/components/app_spec.js

+import Vue from 'vue';
+import eventHub from '~/deploy_keys/eventhub';
+import deployKeysApp from '~/deploy_keys/components/app.vue';
+
+describe('Deploy keys app component', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  let vm;
+
+  const deployKeysResponse = (request, next) => {
+    next(request.respondWith(JSON.stringify(data), {
+      status: 200,
+    }));
+  };
+
+  beforeEach((done) => {
+    const Component = Vue.extend(deployKeysApp);
+
+    Vue.http.interceptors.push(deployKeysResponse);
+
+    vm = new Component({
+      propsData: {
+        endpoint: '/test',
+      },
+    }).$mount();
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, deployKeysResponse);
+  });
+
+  it('renders loading icon', (done) => {
+    vm.store.keys = {};
+    vm.isLoading = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.deploy-keys-panel').length,
+      ).toBe(0);
+
+      expect(
+        vm.$el.querySelector('.fa-spinner'),
+      ).toBeDefined();
+
+      done();
+    });
+  });
+
+  it('renders keys panels', () => {
+    expect(
+      vm.$el.querySelectorAll('.deploy-keys-panel').length,
+    ).toBe(3);
+  });
+
+  it('does not render key panels when keys object is empty', (done) => {
+    vm.store.keys = {};
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.deploy-keys-panel').length,
+      ).toBe(0);
+
+      done();
+    });
+  });
+
+  it('does not render public panel when empty', (done) => {
+    vm.store.keys.public_keys = [];
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.deploy-keys-panel').length,
+      ).toBe(2);
+
+      done();
+    });
+  });
+
+  it('re-fetches deploy keys when enabling a key', (done) => {
+    const key = data.public_keys[0];
+
+    spyOn(vm.service, 'getKeys');
+    spyOn(vm.service, 'enableKey').and.callFake(() => new Promise((resolve) => {
+      resolve();
+
+      setTimeout(() => {
+        expect(vm.service.getKeys).toHaveBeenCalled();
+
+        done();
+      });
+    }));
+
+    eventHub.$emit('enable.key', key);
+
+    expect(vm.service.enableKey).toHaveBeenCalledWith(key.id);
+  });
+
+  it('re-fetches deploy keys when disabling a key', (done) => {
+    const key = data.public_keys[0];
+
+    spyOn(window, 'confirm').and.returnValue(true);
+    spyOn(vm.service, 'getKeys');
+    spyOn(vm.service, 'disableKey').and.callFake(() => new Promise((resolve) => {
+      resolve();
+
+      setTimeout(() => {
+        expect(vm.service.getKeys).toHaveBeenCalled();
+
+        done();
+      });
+    }));
+
+    eventHub.$emit('disable.key', key);
+
+    expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+  });
+
+  it('calls disableKey when removing a key', () => {
+    const key = data.public_keys[0];
+
+    spyOn(window, 'confirm').and.returnValue(true);
+    spyOn(vm, 'disableKey');
+
+    eventHub.$emit('remove.key', key);
+
+    expect(vm.disableKey).toHaveBeenCalledWith(key);
+  });
+});

spec/javascripts/fixtures/deploy_keys.rb

+require 'spec_helper'
+
+describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project_empty_repo, namespace: namespace, path: 'todos-project') }
+  let(:project2) { create(:empty_project, :internal)}
+
+  before(:all) do
+    clean_frontend_fixtures('deploy_keys/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  render_views
+
+  it 'deploy_keys/keys.json' do |example|
+    create(:deploy_key, public: true)
+    project_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQCdMHEHyhRjbhEZVddFn6lTWdgEy5Q6Bz4nwGB76xWZI5YT/1WJOMEW+sL5zYd31kk7sd3FJ5L9ft8zWMWrr/iWXQikC2cqZK24H1xy+ZUmrRuJD4qGAaIVoyyzBL+avL+lF8J5lg6YSw8gwJY/lX64/vnJHUlWw2n5BF8IFOWhiw== dummy@gitlab.com')
+    internal_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQDNd/UJWhPrpb+b/G5oL109y57yKuCxE+WUGJGYaj7WQKsYRJmLYh1mgjrl+KVyfsWpq4ylOxIfFSnN9xBBFN8mlb0Fma5DC7YsSsibJr3MZ19ZNBprwNcdogET7aW9I0In7Wu5f2KqI6e5W/spJHCy4JVxzVMUvk6Myab0LnJ2iQ== dummy@gitlab.com')
+    create(:deploy_keys_project, project: project, deploy_key: project_key)
+    create(:deploy_keys_project, project: project2, deploy_key: internal_key)
+
+    get :index,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      format: :json
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end