Skip to content

G
gitlab-ce
Commit b3ceabdd authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

Merge branch 'leipert-refactor-datepicker-spec' into 'master' 

Refactor datepicker specs to use vue test utils

See merge request gitlab-org/gitlab!34386
parents 9e9916ac 2011cc23
Show whitespace changes
Inline Side-by-side
Showing with 120 additions and 80 deletions
spec/frontend/vue_shared/components/pikaday_spec.js
View file @ b3ceabdd
import Vue from 'vue'; import { shallowMount } from '@vue/test-utils';
import mountComponent from 'helpers/vue_mount_component_helper';
import datePicker from '~/vue_shared/components/pikaday.vue'; import datePicker from '~/vue_shared/components/pikaday.vue';
describe('datePicker', () => { describe('datePicker', () => {
let vm; let wrapper;
beforeEach(() => { beforeEach(() => {
const DatePicker = Vue.extend(datePicker); wrapper = shallowMount(datePicker, {
vm = mountComponent(DatePicker, { propsData: {
label: 'label', label: 'label',
},
attachToDocument: true,
}); });
}); });
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('should render label text', () => { it('should render label text', () => {
expect(vm.$el.querySelector('.dropdown-toggle-text').innerText.trim()).toEqual('label'); expect(
wrapper
.find('.dropdown-toggle-text')
.text()
.trim(),
).toEqual('label');
}); });
it('should show calendar', () => { it('should show calendar', () => {
expect(vm.$el.querySelector('.pika-single')).toBeDefined(); expect(wrapper.find('.pika-single').element).toBeDefined();
}); });
it('should toggle when dropdown is clicked', () => { it('should emit hidePicker event when dropdown is clicked', () => {
const hidePicker = jest.fn(); // Removing the bootstrap data-toggle property,
vm.$on('hidePicker', hidePicker); // because it interfers with our click event
delete wrapper.find('.dropdown-menu-toggle').element.dataset.toggle;
vm.$el.querySelector('.dropdown-menu-toggle').click(); wrapper.find('.dropdown-menu-toggle').trigger('click');
expect(hidePicker).toHaveBeenCalled(); expect(wrapper.emitted('hidePicker')).toEqual([[]]);
}); });
}); });
spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
View file @ b3ceabdd
import Vue from 'vue'; import { mount } from '@vue/test-utils';
import mountComponent from 'helpers/vue_mount_component_helper'; import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue'; import DatePicker from '~/vue_shared/components/pikaday.vue';
describe('sidebarDatePicker', () => { describe('SidebarDatePicker', () => {
let vm; let wrapper;
beforeEach(() => {
const SidebarDatePicker = Vue.extend(sidebarDatePicker); const mountComponent = (propsData = {}, data = {}) => {
vm = mountComponent(SidebarDatePicker, { if (wrapper) {
label: 'label', throw new Error('tried to call mountComponent without d');
isLoading: true, }
wrapper = mount(SidebarDatePicker, {
stubs: {
DatePicker: true,
},
propsData,
data: () => data,
}); });
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
}); });
it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => { it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => {
const toggleCollapse = jest.fn(); mountComponent();
vm.$on('toggleCollapse', toggleCollapse);
vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click(); wrapper.find('.issuable-sidebar-header .gutter-toggle').element.click();
expect(toggleCollapse).toHaveBeenCalled(); expect(wrapper.emitted('toggleCollapse')).toEqual([[]]);
}); });
it('should render collapsed-calendar-icon', () => { it('should render collapsed-calendar-icon', () => {
expect(vm.$el.querySelector('.sidebar-collapsed-icon')).toBeDefined(); mountComponent();
});
it('should render label', () => { expect(wrapper.find('.sidebar-collapsed-icon').element).toBeDefined();
expect(vm.$el.querySelector('.title').innerText.trim()).toEqual('label');
});
it('should render loading-icon when isLoading', () => {
expect(vm.$el.querySelector('.fa-spin')).toBeDefined();
}); });
it('should render value when not editing', () => { it('should render value when not editing', () => {
expect(vm.$el.querySelector('.value-content')).toBeDefined(); mountComponent();
expect(wrapper.find('.value-content').element).toBeDefined();
}); });
it('should render None if there is no selectedDate', () => { it('should render None if there is no selectedDate', () => {
expect(vm.$el.querySelector('.value-content span').innerText.trim()).toEqual('None'); mountComponent();
expect(
wrapper
.find('.value-content span')
.text()
.trim(),
).toEqual('None');
}); });
it('should render date-picker when editing', done => { it('should render date-picker when editing', () => {
vm.editing = true; mountComponent({}, { editing: true });
Vue.nextTick(() => {
expect(vm.$el.querySelector('.pika-label')).toBeDefined(); expect(wrapper.find(DatePicker).element).toBeDefined();
done();
}); });
it('should render label', () => {
const label = 'label';
mountComponent({ label });
expect(
wrapper
.find('.title')
.text()
.trim(),
).toEqual(label);
});
it('should render loading-icon when isLoading', () => {
mountComponent({ isLoading: true });
expect(wrapper.find('.gl-spinner').element).toBeDefined();
}); });
describe('editable', () => { describe('editable', () => {
beforeEach(done => { beforeEach(() => {
vm.editable = true; mountComponent({ editable: true });
Vue.nextTick(done);
}); });
it('should render edit button', () => { it('should render edit button', () => {
expect(vm.$el.querySelector('.title .btn-blank').innerText.trim()).toEqual('Edit'); expect(
wrapper
.find('.title .btn-blank')
.text()
.trim(),
).toEqual('Edit');
}); });
it('should enable editing when edit button is clicked', done => { it('should enable editing when edit button is clicked', async () => {
vm.isLoading = false; wrapper.find('.title .btn-blank').element.click();
Vue.nextTick(() => {
vm.$el.querySelector('.title .btn-blank').click();
expect(vm.editing).toEqual(true); await wrapper.vm.$nextTick();
done();
}); expect(wrapper.vm.editing).toEqual(true);
}); });
}); });
it('should render date if selectedDate', done => { it('should render date if selectedDate', () => {
vm.selectedDate = new Date('07/07/2017'); mountComponent({ selectedDate: new Date('07/07/2017') });
Vue.nextTick(() => {
expect(vm.$el.querySelector('.value-content strong').innerText.trim()).toEqual('Jul 7, 2017'); expect(
done(); wrapper
}); .find('.value-content strong')
.text()
.trim(),
).toEqual('Jul 7, 2017');
}); });
describe('selectedDate and editable', () => { describe('selectedDate and editable', () => {
beforeEach(done => { beforeEach(() => {
vm.selectedDate = new Date('07/07/2017'); mountComponent({ selectedDate: new Date('07/07/2017'), editable: true });
vm.editable = true;
Vue.nextTick(done);
}); });
it('should render remove button if selectedDate and editable', () => { it('should render remove button if selectedDate and editable', () => {
expect(vm.$el.querySelector('.value-content .btn-blank').innerText.trim()).toEqual('remove'); expect(
wrapper
.find('.value-content .btn-blank')
.text()
.trim(),
).toEqual('remove');
}); });
it('should emit saveDate when remove button is clicked', () => { it('should emit saveDate with null when remove button is clicked', () => {
const saveDate = jest.fn(); wrapper.find('.value-content .btn-blank').element.click();
vm.$on('saveDate', saveDate);
vm.$el.querySelector('.value-content .btn-blank').click(); expect(wrapper.emitted('saveDate')).toEqual([[null]]);
expect(saveDate).toHaveBeenCalled();
}); });
}); });
describe('showToggleSidebar', () => { describe('showToggleSidebar', () => {
beforeEach(done => { beforeEach(() => {
vm.showToggleSidebar = true; mountComponent({ showToggleSidebar: true });
Vue.nextTick(done);
}); });
it('should render toggle-sidebar when showToggleSidebar', () => { it('should render toggle-sidebar when showToggleSidebar', () => {
expect(vm.$el.querySelector('.title .gutter-toggle')).toBeDefined(); expect(wrapper.find('.title .gutter-toggle').element).toBeDefined();
}); });
it('should emit toggleCollapse when toggle sidebar is clicked', () => { it('should emit toggleCollapse when toggle sidebar is clicked', () => {
const toggleCollapse = jest.fn(); wrapper.find('.title .gutter-toggle').element.click();
vm.$on('toggleCollapse', toggleCollapse);
vm.$el.querySelector('.title .gutter-toggle').click();
expect(toggleCollapse).toHaveBeenCalled(); expect(wrapper.emitted('toggleCollapse')).toEqual([[]]);
}); });
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7