debian-mirror-gitlab/spec/javascripts/boards/components/board_spec.js

252 lines
5.8 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
import Vue from 'vue';
2018-12-13 13:39:08 +05:30
import Board from '~/boards/components/board';
2019-09-30 21:07:59 +05:30
import List from '~/boards/models/list';
2017-09-10 17:25:29 +05:30
describe('Board component', () => {
let vm;
2019-12-04 20:38:33 +05:30
const createComponent = ({ gon = {}, collapsed = false, listType = 'backlog' } = {}) => {
if (Object.prototype.hasOwnProperty.call(gon, 'current_user_id')) {
window.gon = gon;
} else {
window.gon = {};
}
const el = document.createElement('div');
2017-09-10 17:25:29 +05:30
document.body.appendChild(el);
2018-12-13 13:39:08 +05:30
vm = new Board({
2017-09-10 17:25:29 +05:30
propsData: {
boardId: '1',
disabled: false,
issueLinkBase: '/',
rootPath: '/',
list: new List({
id: 1,
position: 0,
title: 'test',
2019-12-04 20:38:33 +05:30
list_type: listType,
collapsed,
2017-09-10 17:25:29 +05:30
}),
},
}).$mount(el);
2019-12-04 20:38:33 +05:30
};
const setUpTests = (done, opts = {}) => {
loadFixtures('boards/show.html');
createComponent(opts);
2017-09-10 17:25:29 +05:30
Vue.nextTick(done);
2019-12-04 20:38:33 +05:30
};
const cleanUpTests = spy => {
if (spy) {
spy.calls.reset();
}
2017-09-10 17:25:29 +05:30
vm.$destroy();
// remove the component from the DOM
document.querySelector('.board').remove();
2019-12-04 20:38:33 +05:30
localStorage.removeItem(`${vm.uniqueKey}.expanded`);
};
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
describe('List', () => {
it('board is expandable when list type is closed', () => {
expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
});
it('board is expandable when list type is label', () => {
expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
});
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
it('board is not expandable when list type is blank', () => {
expect(new List({ id: 1, list_type: 'blank' }).isExpandable).toBe(false);
});
2017-09-10 17:25:29 +05:30
});
2019-12-04 20:38:33 +05:30
describe('when clicking the header', () => {
beforeEach(done => {
setUpTests(done);
});
afterEach(() => {
cleanUpTests();
});
it('does not collapse', done => {
vm.list.isExpanded = true;
vm.$el.querySelector('.board-header').click();
Vue.nextTick()
.then(() => {
expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
})
.then(done)
.catch(done.fail);
});
2019-09-30 21:07:59 +05:30
});
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
describe('when clicking the collapse icon', () => {
beforeEach(done => {
setUpTests(done);
});
afterEach(() => {
cleanUpTests();
});
it('collapses', done => {
Vue.nextTick()
.then(() => {
vm.$el.querySelector('.board-title-caret').click();
})
.then(() => {
expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
})
.then(done)
.catch(done.fail);
});
2017-09-10 17:25:29 +05:30
});
2019-12-04 20:38:33 +05:30
describe('when clicking the expand icon', () => {
beforeEach(done => {
setUpTests(done);
});
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
afterEach(() => {
cleanUpTests();
});
it('expands', done => {
vm.list.isExpanded = false;
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
Vue.nextTick()
.then(() => {
vm.$el.querySelector('.board-title-caret').click();
})
.then(() => {
expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
})
.then(done)
.catch(done.fail);
2017-09-10 17:25:29 +05:30
});
});
2019-12-04 20:38:33 +05:30
describe('when collapsed is false', () => {
beforeEach(done => {
setUpTests(done);
});
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
afterEach(() => {
cleanUpTests();
});
it('is expanded when collapsed is false', () => {
expect(vm.list.isExpanded).toBe(true);
expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
});
2019-09-30 21:07:59 +05:30
});
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
describe('when list type is blank', () => {
beforeEach(done => {
setUpTests(done, { listType: 'blank' });
});
afterEach(() => {
cleanUpTests();
});
it('does not render add issue button when list type is blank', done => {
Vue.nextTick(() => {
expect(vm.$el.querySelector('.issue-count-badge-add-button')).toBeNull();
2017-09-10 17:25:29 +05:30
done();
2019-12-04 20:38:33 +05:30
});
});
2017-09-10 17:25:29 +05:30
});
2019-07-07 11:18:12 +05:30
2019-12-04 20:38:33 +05:30
describe('when list type is backlog', () => {
beforeEach(done => {
setUpTests(done);
});
afterEach(() => {
cleanUpTests();
});
it('board is expandable', () => {
expect(vm.$el.classList.contains('is-expandable')).toBe(true);
});
2019-09-30 21:07:59 +05:30
});
2019-12-04 20:38:33 +05:30
describe('when logged in', () => {
let spy;
beforeEach(done => {
spy = spyOn(List.prototype, 'update');
setUpTests(done, { gon: { current_user_id: 1 } });
});
afterEach(() => {
cleanUpTests(spy);
});
it('calls list update', done => {
Vue.nextTick()
.then(() => {
vm.$el.querySelector('.board-title-caret').click();
})
.then(() => {
expect(vm.list.update).toHaveBeenCalledTimes(1);
})
.then(done)
.catch(done.fail);
});
2019-07-07 11:18:12 +05:30
});
2019-12-04 20:38:33 +05:30
describe('when logged out', () => {
let spy;
beforeEach(done => {
spy = spyOn(List.prototype, 'update');
setUpTests(done, { collapsed: false });
});
afterEach(() => {
cleanUpTests(spy);
});
2019-07-07 11:18:12 +05:30
2019-12-04 20:38:33 +05:30
// can only be one or the other cant toggle window.gon.current_user_id states.
it('clicking on the caret does not call list update', done => {
Vue.nextTick()
.then(() => {
vm.$el.querySelector('.board-title-caret').click();
})
.then(() => {
expect(vm.list.update).toHaveBeenCalledTimes(0);
})
.then(done)
.catch(done.fail);
});
it('sets expanded to be the opposite of its value when toggleExpanded is called', done => {
const expanded = true;
vm.list.isExpanded = expanded;
vm.toggleExpanded();
Vue.nextTick()
.then(() => {
expect(vm.list.isExpanded).toBe(!expanded);
expect(localStorage.getItem(`${vm.uniqueKey}.expanded`)).toBe(String(!expanded));
})
.then(done)
.catch(done.fail);
});
2019-07-07 11:18:12 +05:30
2019-12-04 20:38:33 +05:30
it('does render add issue button', () => {
expect(vm.$el.querySelector('.issue-count-badge-add-button')).not.toBeNull();
2019-07-07 11:18:12 +05:30
});
});
2017-09-10 17:25:29 +05:30
});