Component specs

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

@@ -7,11 +7,6 @@
         type: Object,
         required: true,
       },
-      enabled: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
       store: {
         type: Object,
         required: true,

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

@@ -37,7 +37,7 @@
       v-if="keys.length">
       <li
         v-for="deployKey in keys"
-        key="deployKey.id">
+        :key="deployKey.id">
         <key
           :deploy-key="deployKey"
           :store="store" />

spec/javascripts/deploy_keys/components/action_btn_spec.js

@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import eventHub from '~/deploy_keys/eventhub';
+import actionBtn from '~/deploy_keys/components/action_btn.vue';
+
+describe('Deploy keys action btn', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  const deployKey = data.enabled_keys[0];
+  let vm;
+
+  beforeEach((done) => {
+    const ActionBtnComponent = Vue.extend(actionBtn);
+
+    vm = new ActionBtnComponent({
+      propsData: {
+        deployKey,
+        type: 'enable',
+      },
+    }).$mount();
+
+    setTimeout(done);
+  });
+
+  it('renders the type as uppercase', () => {
+    expect(
+      vm.$el.textContent.trim(),
+    ).toBe('Enable');
+  });
+
+  it('sends eventHub event with btn type', (done) => {
+    spyOn(eventHub, '$emit');
+
+    vm.$el.click();
+
+    setTimeout(() => {
+      expect(
+        eventHub.$emit,
+      ).toHaveBeenCalledWith('enable.key', deployKey);
+
+      done();
+    });
+  });
+
+  it('shows loading spinner after click', (done) => {
+    vm.$el.click();
+
+    setTimeout(() => {
+      expect(
+        vm.$el.querySelector('.fa'),
+      ).toBeDefined();
+
+      done();
+    });
+  });
+
+  it('disables button after click', (done) => {
+    vm.$el.click();
+
+    setTimeout(() => {
+      expect(
+        vm.$el.classList.contains('disabled'),
+      ).toBeTruthy();
+
+      expect(
+        vm.$el.getAttribute('disabled'),
+      ).toBe('disabled');
+
+      done();
+    });
+  });
+});

spec/javascripts/deploy_keys/components/app_spec.js

@@ -126,4 +126,8 @@ describe('Deploy keys app component', () => {
 
     expect(vm.disableKey).toHaveBeenCalledWith(key);
   });
+
+  it('hasKeys returns true when there are keys', () => {
+    expect(vm.hasKeys).toEqual(3);
+  });
 });

spec/javascripts/deploy_keys/components/key_spec.js

@@ -0,0 +1,92 @@
+import Vue from 'vue';
+import DeployKeysStore from '~/deploy_keys/store';
+import key from '~/deploy_keys/components/key.vue';
+
+describe('Deploy keys key', () => {
+  let vm;
+  const KeyComponent = Vue.extend(key);
+  const data = getJSONFixture('deploy_keys/keys.json');
+  const createComponent = (deployKey) => {
+    const store = new DeployKeysStore();
+    store.keys = data;
+
+    vm = new KeyComponent({
+      propsData: {
+        deployKey,
+        store,
+      },
+    }).$mount();
+  };
+
+  describe('enabled key', () => {
+    const deployKey = data.enabled_keys[0];
+
+    beforeEach((done) => {
+      createComponent(deployKey);
+
+      setTimeout(done);
+    });
+
+    it('renders the keys title', () => {
+      expect(
+        vm.$el.querySelector('.title').textContent.trim(),
+      ).toContain('My title');
+    });
+
+    it('renders human friendly formatted created date', () => {
+      expect(
+        vm.$el.querySelector('.key-created-at').textContent.trim(),
+      ).toBe(`created ${gl.utils.getTimeago().format(deployKey.created_at)}`);
+    });
+
+    it('shows remove button', () => {
+      expect(
+        vm.$el.querySelector('.btn').textContent.trim(),
+      ).toBe('Remove');
+    });
+
+    it('shows write access text when key has write access', (done) => {
+      vm.deployKey.can_push = true;
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.write-access-allowed'),
+        ).not.toBeNull();
+
+        expect(
+          vm.$el.querySelector('.write-access-allowed').textContent.trim(),
+        ).toBe('Write access allowed');
+
+        done();
+      });
+    });
+  });
+
+  describe('public keys', () => {
+    const deployKey = data.public_keys[0];
+
+    beforeEach((done) => {
+      createComponent(deployKey);
+
+      setTimeout(done);
+    });
+
+    it('shows enable button', () => {
+      expect(
+        vm.$el.querySelector('.btn').textContent.trim(),
+      ).toBe('Enable');
+    });
+
+    it('shows disable button when key is enabled', (done) => {
+      vm.store.keys.enabled_keys.push(deployKey);
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.btn').textContent.trim(),
+        ).toBe('Disable');
+
+        done();
+      });
+    });
+  });
+});

spec/javascripts/deploy_keys/components/keys_panel_spec.js

@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import DeployKeysStore from '~/deploy_keys/store';
+import deployKeysPanel from '~/deploy_keys/components/keys_panel.vue';
+
+describe('Deploy keys panel', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  let vm;
+
+  beforeEach((done) => {
+    const DeployKeysPanelComponent = Vue.extend(deployKeysPanel);
+    const store = new DeployKeysStore();
+    store.keys = data;
+
+    vm = new DeployKeysPanelComponent({
+      propsData: {
+        title: 'test',
+        keys: data.enabled_keys,
+        showHelpBox: true,
+        store,
+      },
+    }).$mount();
+
+    setTimeout(done);
+  });
+
+  it('renders the title with keys count', () => {
+    expect(
+      vm.$el.querySelector('h5').textContent.trim(),
+    ).toContain('test');
+
+    expect(
+      vm.$el.querySelector('h5').textContent.trim(),
+    ).toContain('(1)');
+  });
+
+  it('renders list of keys', () => {
+    expect(
+      vm.$el.querySelectorAll('li').length,
+    ).toBe(1);
+  });
+
+  it('renders help box if keys are empty', (done) => {
+    vm.keys = [];
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.settings-message'),
+      ).toBeDefined();
+
+      expect(
+        vm.$el.querySelector('.settings-message').textContent.trim(),
+      ).toBe('No deploy keys found. Create one with the form above.');
+
+      done();
+    });
+  });
+
+  it('does not render help box if keys are empty & showHelpBox is false', (done) => {
+    vm.keys = [];
+    vm.showHelpBox = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.settings-message'),
+      ).toBeNull();
+
+      done();
+    });
+  });
+});