diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-02 14:03:58 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-02 14:03:58 +0300 |
commit | 4134d700623404948f163349882caf4a6d940cf3 (patch) | |
tree | 2733ce4a500527c33dbcc88298044045f6b3d689 /spec/javascripts/deploy_keys | |
parent | 96ea22208ffced8a8a82d182fe29172d0b60ce29 (diff) |
Component specs
Diffstat (limited to 'spec/javascripts/deploy_keys')
4 files changed, 236 insertions, 0 deletions
diff --git a/spec/javascripts/deploy_keys/components/action_btn_spec.js b/spec/javascripts/deploy_keys/components/action_btn_spec.js new file mode 100644 index 00000000000..5b93fbc5575 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/spec/javascripts/deploy_keys/components/app_spec.js b/spec/javascripts/deploy_keys/components/app_spec.js index e061992b2bd..43b8f718508 100644 --- a/spec/javascripts/deploy_keys/components/app_spec.js +++ b/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); + }); }); diff --git a/spec/javascripts/deploy_keys/components/key_spec.js b/spec/javascripts/deploy_keys/components/key_spec.js new file mode 100644 index 00000000000..793ab8c451d --- /dev/null +++ b/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(); + }); + }); + }); +}); diff --git a/spec/javascripts/deploy_keys/components/keys_panel_spec.js b/spec/javascripts/deploy_keys/components/keys_panel_spec.js new file mode 100644 index 00000000000..416b80525fc --- /dev/null +++ b/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(); + }); + }); +}); |