Commit 33318a56 authored by Simon Knox's avatar Simon Knox

update milestone select spec

parent c42728f0
<script> <script>
/* global BoardService, MilestoneSelect */ /* global BoardService, MilestoneSelect */
import '~/milestone_select';
import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import loadingIcon from '~/vue_shared/components/loading_icon.vue';
const ANY_MILESTONE = 'Any Milestone'; const ANY_MILESTONE = 'Any Milestone';
......
...@@ -2,134 +2,154 @@ ...@@ -2,134 +2,154 @@
/* global boardObj */ /* global boardObj */
/* global BoardService */ /* global BoardService */
/* global mockBoardService */ /* global mockBoardService */
/* global IssuableContext */
import Vue from 'vue'; import Vue from 'vue';
import MilestoneSelect from '~/boards/components/milestone_select.vue'; import MilestoneSelect from '~/boards/components/milestone_select.vue';
import '~/boards/services/board_service'; import '~/boards/services/board_service';
import '~/boards/stores/boards_store'; import '~/boards/stores/boards_store';
import '~/issuable_context';
import './mock_data'; import './mock_data';
describe('Milestone select component', () => { let vm;
let selectMilestoneSpy;
let vm;
beforeEach(() => { function selectedText() {
Vue.http.interceptors.push(boardsMockInterceptor); return vm.$el.querySelector('.value').innerText.trim();
}
function activeDropdownItem(index) {
const items = document.querySelectorAll('.is-active');
if (!items[index]) return '';
return items[index].innerText.trim();
}
const milestone = {
id: 1,
title: 'first milestone',
name: 'first milestone',
};
const milestone2 = {
id: 2,
title: 'second milestone',
name: 'second milestone',
};
describe('Milestone select component', () => {
beforeEach((done) => {
setFixtures('<div class="test-container"></div>');
gl.boardService = mockBoardService(); gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create(); gl.issueBoards.BoardsStore.create();
selectMilestoneSpy = jasmine.createSpy('selectMilestone').and.callFake((milestone) => { // eslint-disable-next-line no-new
vm.board.milestone_id = milestone.id; new IssuableContext();
});
vm = new MilestoneSelect({ const Component = Vue.extend(MilestoneSelect);
vm = new Component({
propsData: { propsData: {
board: boardObj, board: boardObj,
milestonePath: '/test/issue-boards/milestones.json', milestonePath: '/test/issue-boards/milestones.json',
selectMilestone: selectMilestoneSpy, canEdit: true,
}, },
}); }).$mount('.test-container');
});
afterEach(() => { setTimeout(done);
Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
}); });
describe('before mount', () => { describe('canEdit', () => {
it('sets default data', () => { it('hides Edit button', (done) => {
expect(vm.loading).toBe(false); vm.canEdit = false;
expect(vm.milestones.length).toBe(0); Vue.nextTick(() => {
expect(vm.extraMilestones.length).toBe(3); expect(document.querySelector('.edit-link')).toBeFalsy();
expect(vm.extraMilestones[0].title).toBe('Any Milestone'); done();
expect(vm.extraMilestones[1].title).toBe('Upcoming');
expect(vm.extraMilestones[2].title).toBe('Started');
}); });
}); });
describe('mounted', () => { it('shows Edit button if true', (done) => {
describe('without board milestone', () => { vm.canEdit = true;
beforeEach((done) => { Vue.nextTick(() => {
vm.$mount(); expect(document.querySelector('.edit-link')).toBeTruthy();
setTimeout(() => {
done(); done();
}); });
}); });
it('loads data', () => {
expect(vm.milestones.length).toBe(1);
}); });
it('renders the milestone list', () => { describe('selected value', () => {
expect(vm.$el.querySelector('.fa-spinner')).toBeNull(); it('defaults to Any Milestone', () => {
expect(vm.$el.querySelectorAll('.board-milestone-list li').length).toBe(5); expect(selectedText()).toContain('Any Milestone');
expect(
vm.$el.querySelectorAll('.board-milestone-list li')[4].textContent,
).toContain('test');
}); });
it('selects any milestone', () => { it('shows No Milestone', (done) => {
vm.$el.querySelectorAll('.board-milestone-list a')[0].click(); vm.board.milestone_id = 0;
Vue.nextTick(() => {
expect(selectMilestoneSpy).toHaveBeenCalledWith({ expect(selectedText()).toContain('No Milestone');
id: null, done();
title: 'Any Milestone',
}); });
}); });
it('selects upcoming milestone', () => { it('shows selected milestone title', (done) => {
vm.$el.querySelectorAll('.board-milestone-list a')[1].click(); vm.board.milestone_id = 20;
vm.board.milestone = {
expect(selectMilestoneSpy).toHaveBeenCalledWith({ id: 20,
id: -2, title: 'Selected milestone',
title: 'Upcoming', };
Vue.nextTick(() => {
expect(selectedText()).toContain('Selected milestone');
done();
}); });
}); });
it('selects started milestone', () => { describe('clicking dropdown items', () => {
vm.$el.querySelectorAll('.board-milestone-list a')[2].click(); beforeEach(() => {
const deferred = new jQuery.Deferred();
expect(selectMilestoneSpy).toHaveBeenCalledWith({ spyOn($, 'ajax').and.returnValue(deferred.resolve([
id: -3, milestone,
title: 'Started', milestone2,
}); ]));
}); });
it('selects fetched milestone', () => { it('sets Any Milestone', (done) => {
vm.$el.querySelectorAll('.board-milestone-list a')[3].click(); vm.board.milestone_id = 0;
vm.$el.querySelector('.edit-link').click();
expect(selectMilestoneSpy).toHaveBeenCalledWith({ setTimeout(() => {
id: 1, vm.$el.querySelectorAll('li a')[0].click();
title: 'test',
});
}); });
it('changes selected milestone', (done) => { setTimeout(() => {
const firstLink = vm.$el.querySelectorAll('.board-milestone-list a')[0]; expect(activeDropdownItem(0)).toEqual('Any Milestone');
expect(selectedText()).toEqual('Any Milestone');
done();
});
});
firstLink.click(); it('sets No Milestone', (done) => {
vm.$el.querySelector('.edit-link').click();
Vue.nextTick(() => { setTimeout(() => {
expect(firstLink.querySelector('.fa-check')).toBeDefined(); vm.$el.querySelectorAll('li a')[1].click();
});
setTimeout(() => {
expect(activeDropdownItem(0)).toEqual('No Milestone');
expect(selectedText()).toEqual('No Milestone');
done(); done();
}); });
}); });
});
describe('with board milestone', () => { it('sets milestone', (done) => {
beforeEach((done) => { vm.$el.querySelector('.edit-link').click();
vm.board.milestone_id = 1;
vm.$mount();
setTimeout(() => { setTimeout(() => {
done(); vm.$el.querySelectorAll('li a')[4].click();
});
}); });
it('renders the selected milestone', () => { setTimeout(() => {
expect(vm.$el.querySelector('.board-milestone-list .fa-check')).not.toBeNull(); expect(activeDropdownItem(0)).toEqual('first milestone');
expect(vm.$el.querySelectorAll('.board-milestone-list .fa-check').length).toBe(1); expect(selectedText()).toEqual('first milestone');
expect(vm.board.milestone).toEqual(milestone);
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