Commit 4134d700 authored by Phil Hughes's avatar Phil Hughes

Component specs

parent 96ea2220
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
type: Object, type: Object,
required: true, required: true,
}, },
enabled: {
type: Boolean,
required: false,
default: true,
},
store: { store: {
type: Object, type: Object,
required: true, required: true,
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
v-if="keys.length"> v-if="keys.length">
<li <li
v-for="deployKey in keys" v-for="deployKey in keys"
key="deployKey.id"> :key="deployKey.id">
<key <key
:deploy-key="deployKey" :deploy-key="deployKey"
:store="store" /> :store="store" />
......
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();
});
});
});
...@@ -126,4 +126,8 @@ describe('Deploy keys app component', () => { ...@@ -126,4 +126,8 @@ describe('Deploy keys app component', () => {
expect(vm.disableKey).toHaveBeenCalledWith(key); expect(vm.disableKey).toHaveBeenCalledWith(key);
}); });
it('hasKeys returns true when there are keys', () => {
expect(vm.hasKeys).toEqual(3);
});
}); });
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();
});
});
});
});
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();
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment