diff options
Diffstat (limited to 'spec/javascripts/boards/components/board_spec.js')
| -rw-r--r-- | spec/javascripts/boards/components/board_spec.js | 271 |
1 files changed, 208 insertions, 63 deletions
diff --git a/spec/javascripts/boards/components/board_spec.js b/spec/javascripts/boards/components/board_spec.js index 683783334c6..ccb657e0df1 100644 --- a/spec/javascripts/boards/components/board_spec.js +++ b/spec/javascripts/boards/components/board_spec.js @@ -5,21 +5,16 @@ import { mockBoardService } from '../mock_data'; describe('Board component', () => { let vm; - let el; - beforeEach(done => { - loadFixtures('boards/show.html'); - - el = document.createElement('div'); + 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'); document.body.appendChild(el); - gl.boardService = mockBoardService({ - boardsEndpoint: '/', - listsEndpoint: '/', - bulkUpdatePath: '/', - boardId: 1, - }); - vm = new Board({ propsData: { boardId: '1', @@ -30,94 +25,244 @@ describe('Board component', () => { id: 1, position: 0, title: 'test', - list_type: 'backlog', + list_type: listType, + collapsed, }), }, }).$mount(el); + }; + + const setUpTests = (done, opts = {}) => { + loadFixtures('boards/show.html'); + + gl.boardService = mockBoardService({ + boardsEndpoint: '/', + listsEndpoint: '/', + bulkUpdatePath: '/', + boardId: 1, + }); + + createComponent(opts); Vue.nextTick(done); - }); + }; + + const cleanUpTests = spy => { + if (spy) { + spy.calls.reset(); + } - afterEach(() => { vm.$destroy(); // remove the component from the DOM document.querySelector('.board').remove(); - localStorage.removeItem(`boards.${vm.boardId}.${vm.list.type}.expanded`); - }); + localStorage.removeItem(`${vm.uniqueKey}.expanded`); + }; - it('board is expandable when list type is backlog', () => { - expect(vm.$el.classList.contains('is-expandable')).toBe(true); - }); + describe('List', () => { + beforeEach(() => { + gl.boardService = mockBoardService({ + boardsEndpoint: '/', + listsEndpoint: '/', + bulkUpdatePath: '/', + boardId: 1, + }); + }); + + 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); + }); - it('board is expandable when list type is closed', () => { - expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true); + it('board is not expandable when list type is blank', () => { + expect(new List({ id: 1, list_type: 'blank' }).isExpandable).toBe(false); + }); }); - it('board is expandable when list type is label', () => { - expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true); + 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); + }); }); - it('board is not expandable when list type is blank', () => { - expect(new List({ id: 1, list_type: 'blank' }).isExpandable).toBe(false); + 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); + }); }); - it('does not collapse when clicking header', done => { - vm.list.isExpanded = true; - vm.$el.querySelector('.board-header').click(); + describe('when clicking the expand icon', () => { + beforeEach(done => { + setUpTests(done); + }); - Vue.nextTick(() => { - expect(vm.$el.classList.contains('is-collapsed')).toBe(false); + afterEach(() => { + cleanUpTests(); + }); + + it('expands', done => { + vm.list.isExpanded = false; - done(); + 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); }); }); - it('collapses when clicking the collapse icon', done => { - vm.list.isExpanded = true; + describe('when collapsed is false', () => { + beforeEach(done => { + setUpTests(done); + }); - Vue.nextTick() - .then(() => { - vm.$el.querySelector('.board-title-caret').click(); - }) - .then(() => { - expect(vm.$el.classList.contains('is-collapsed')).toBe(true); - done(); - }) - .catch(done.fail); + afterEach(() => { + cleanUpTests(); + }); + + it('is expanded when collapsed is false', () => { + expect(vm.list.isExpanded).toBe(true); + expect(vm.$el.classList.contains('is-collapsed')).toBe(false); + }); }); - it('expands when clicking the expand icon', done => { - vm.list.isExpanded = false; + 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(); - Vue.nextTick() - .then(() => { - vm.$el.querySelector('.board-title-caret').click(); - }) - .then(() => { - expect(vm.$el.classList.contains('is-collapsed')).toBe(false); done(); - }) - .catch(done.fail); + }); + }); }); - it('is expanded when created', () => { - expect(vm.list.isExpanded).toBe(true); - expect(vm.$el.classList.contains('is-collapsed')).toBe(false); + 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); + }); }); - it('does render add issue button', () => { - expect(vm.$el.querySelector('.issue-count-badge-add-button')).not.toBeNull(); + 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); + }); }); - it('does not render add issue button when list type is blank', done => { - vm.list.type = 'blank'; + describe('when logged out', () => { + let spy; + beforeEach(done => { + spy = spyOn(List.prototype, 'update'); + setUpTests(done, { collapsed: false }); + }); + + afterEach(() => { + cleanUpTests(spy); + }); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.issue-count-badge-add-button')).toBeNull(); + // 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); + }); - done(); + it('does render add issue button', () => { + expect(vm.$el.querySelector('.issue-count-badge-add-button')).not.toBeNull(); }); }); }); |