1 files changed, 142 insertions, 0 deletions
diff --git a/spec/frontend/deploy_keys/components/app_spec.js b/spec/frontend/deploy_keys/components/app_spec.js
new file mode 100644
index 00000000000..291502c9ed7
--- /dev/null
+++ b/spec/frontend/deploy_keys/components/app_spec.js
@@ -0,0 +1,142 @@
+import { mount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import { TEST_HOST } from 'spec/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
+import axios from '~/lib/utils/axios_utils';
+import eventHub from '~/deploy_keys/eventhub';
+import deployKeysApp from '~/deploy_keys/components/app.vue';
+
+const TEST_ENDPOINT = `${TEST_HOST}/dummy/`;
+
+describe('Deploy keys app component', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  let wrapper;
+  let mock;
+
+  const mountComponent = () => {
+    wrapper = mount(deployKeysApp, {
+      propsData: {
+        endpoint: TEST_ENDPOINT,
+        projectId: '8',
+      },
+    });
+
+    return waitForPromises();
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(TEST_ENDPOINT).reply(200, data);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mock.restore();
+  });
+
+  const findLoadingIcon = () => wrapper.find('.gl-spinner');
+  const findKeyPanels = () => wrapper.findAll('.deploy-keys .nav-links li');
+
+  it('renders loading icon while waiting for request', () => {
+    mock.onGet(TEST_ENDPOINT).reply(() => new Promise());
+
+    mountComponent();
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  it('renders keys panels', () => {
+    return mountComponent().then(() => {
+      expect(findKeyPanels().length).toBe(3);
+    });
+  });
+
+  it.each`
+    selector                                       | label                                 | count
+    ${'.js-deployKeys-tab-enabled_keys'}           | ${'Enabled deploy keys'}              | ${1}
+    ${'.js-deployKeys-tab-available_project_keys'} | ${'Privately accessible deploy keys'} | ${0}
+    ${'.js-deployKeys-tab-public_keys'}            | ${'Publicly accessible deploy keys'}  | ${1}
+  `('$selector title is $label with keys count equal to $count', ({ selector, label, count }) => {
+    return mountComponent().then(() => {
+      const element = wrapper.find(selector);
+      expect(element.exists()).toBe(true);
+      expect(element.text().trim()).toContain(label);
+
+      expect(
+        element
+          .find('.badge')
+          .text()
+          .trim(),
+      ).toBe(count.toString());
+    });
+  });
+
+  it('does not render key panels when keys object is empty', () => {
+    mock.onGet(TEST_ENDPOINT).reply(200, []);
+
+    return mountComponent().then(() => {
+      expect(findKeyPanels().length).toBe(0);
+    });
+  });
+
+  it('re-fetches deploy keys when enabling a key', () => {
+    const key = data.public_keys[0];
+    return mountComponent()
+      .then(() => {
+        jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
+        jest.spyOn(wrapper.vm.service, 'enableKey').mockImplementation(() => Promise.resolve());
+
+        eventHub.$emit('enable.key', key);
+
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        expect(wrapper.vm.service.enableKey).toHaveBeenCalledWith(key.id);
+        expect(wrapper.vm.service.getKeys).toHaveBeenCalled();
+      });
+  });
+
+  it('re-fetches deploy keys when disabling a key', () => {
+    const key = data.public_keys[0];
+    return mountComponent()
+      .then(() => {
+        jest.spyOn(window, 'confirm').mockReturnValue(true);
+        jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
+        jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve());
+
+        eventHub.$emit('disable.key', key);
+
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        expect(wrapper.vm.service.disableKey).toHaveBeenCalledWith(key.id);
+        expect(wrapper.vm.service.getKeys).toHaveBeenCalled();
+      });
+  });
+
+  it('calls disableKey when removing a key', () => {
+    const key = data.public_keys[0];
+    return mountComponent()
+      .then(() => {
+        jest.spyOn(window, 'confirm').mockReturnValue(true);
+        jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
+        jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve());
+
+        eventHub.$emit('remove.key', key);
+
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        expect(wrapper.vm.service.disableKey).toHaveBeenCalledWith(key.id);
+        expect(wrapper.vm.service.getKeys).toHaveBeenCalled();
+      });
+  });
+
+  it('hasKeys returns true when there are keys', () => {
+    return mountComponent().then(() => {
+      expect(wrapper.vm.hasKeys).toEqual(3);
+    });
+  });
+});