2017-06-02 12:25:18 -04:00
|
|
|
import Vue from 'vue';
|
|
|
|
import '~/boards/services/board_service';
|
2018-10-10 13:08:43 -04:00
|
|
|
import Board from '~/boards/components/board';
|
2017-06-02 12:25:18 -04:00
|
|
|
import '~/boards/models/list';
|
2017-12-15 03:31:14 -05:00
|
|
|
import { mockBoardService } from '../mock_data';
|
2017-06-02 12:25:18 -04:00
|
|
|
|
|
|
|
describe('Board component', () => {
|
|
|
|
let vm;
|
|
|
|
let el;
|
|
|
|
|
2018-10-30 16:28:31 -04:00
|
|
|
beforeEach(done => {
|
2017-06-02 12:25:18 -04:00
|
|
|
loadFixtures('boards/show.html.raw');
|
|
|
|
|
|
|
|
el = document.createElement('div');
|
|
|
|
document.body.appendChild(el);
|
|
|
|
|
2017-09-06 02:49:19 -04:00
|
|
|
gl.boardService = mockBoardService({
|
|
|
|
boardsEndpoint: '/',
|
|
|
|
listsEndpoint: '/',
|
|
|
|
bulkUpdatePath: '/',
|
|
|
|
boardId: 1,
|
|
|
|
});
|
2017-06-02 12:25:18 -04:00
|
|
|
|
2018-10-10 13:08:43 -04:00
|
|
|
vm = new Board({
|
2017-06-02 12:25:18 -04:00
|
|
|
propsData: {
|
|
|
|
boardId: '1',
|
|
|
|
disabled: false,
|
|
|
|
issueLinkBase: '/',
|
|
|
|
rootPath: '/',
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
list: new List({
|
|
|
|
id: 1,
|
|
|
|
position: 0,
|
|
|
|
title: 'test',
|
|
|
|
list_type: 'backlog',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
}).$mount(el);
|
|
|
|
|
|
|
|
Vue.nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
|
|
|
|
// remove the component from the DOM
|
|
|
|
document.querySelector('.board').remove();
|
|
|
|
|
|
|
|
localStorage.removeItem(`boards.${vm.boardId}.${vm.list.type}.expanded`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('board is expandable when list type is backlog', () => {
|
2018-10-30 16:28:31 -04:00
|
|
|
expect(vm.$el.classList.contains('is-expandable')).toBe(true);
|
2017-06-02 12:25:18 -04:00
|
|
|
});
|
|
|
|
|
2018-10-30 16:28:31 -04:00
|
|
|
it('board is expandable when list type is closed', done => {
|
2017-06-02 12:25:18 -04:00
|
|
|
vm.list.type = 'closed';
|
|
|
|
|
|
|
|
Vue.nextTick(() => {
|
2018-10-30 16:28:31 -04:00
|
|
|
expect(vm.$el.classList.contains('is-expandable')).toBe(true);
|
2017-06-02 12:25:18 -04:00
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-10-30 16:28:31 -04:00
|
|
|
it('board is not expandable when list type is label', done => {
|
2017-06-02 12:25:18 -04:00
|
|
|
vm.list.type = 'label';
|
|
|
|
vm.list.isExpandable = false;
|
|
|
|
|
|
|
|
Vue.nextTick(() => {
|
2018-10-30 16:28:31 -04:00
|
|
|
expect(vm.$el.classList.contains('is-expandable')).toBe(false);
|
2017-06-02 12:25:18 -04:00
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-10-30 16:28:31 -04:00
|
|
|
it('collapses when clicking header', done => {
|
2017-06-02 12:25:18 -04:00
|
|
|
vm.$el.querySelector('.board-header').click();
|
|
|
|
|
|
|
|
Vue.nextTick(() => {
|
2018-10-30 16:28:31 -04:00
|
|
|
expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
|
2017-06-02 12:25:18 -04:00
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-10-30 16:28:31 -04:00
|
|
|
it('created sets isExpanded to true from localStorage', done => {
|
2017-06-02 12:25:18 -04:00
|
|
|
vm.$el.querySelector('.board-header').click();
|
|
|
|
|
|
|
|
return Vue.nextTick()
|
|
|
|
.then(() => {
|
2018-10-30 16:28:31 -04:00
|
|
|
expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
|
2017-06-02 12:25:18 -04:00
|
|
|
|
|
|
|
// call created manually
|
|
|
|
vm.$options.created[0].call(vm);
|
|
|
|
|
|
|
|
return Vue.nextTick();
|
|
|
|
})
|
|
|
|
.then(() => {
|
2018-10-30 16:28:31 -04:00
|
|
|
expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
|
2017-06-02 12:25:18 -04:00
|
|
|
|
|
|
|
done();
|
2018-10-30 16:28:31 -04:00
|
|
|
})
|
|
|
|
.catch(done.fail);
|
2017-06-02 12:25:18 -04:00
|
|
|
});
|
|
|
|
});
|