diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-03-29 20:45:33 -0500 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-03-29 20:45:33 -0500 |
commit | 6bd0f8edb2d94b91eb70b0eeae1a2c4a12d6182b (patch) | |
tree | 385dfe3f00d55e73170419cea3df317537adfd4c /spec/javascripts/boards/issue_card_labels_spec.js | |
parent | ea5ed498952c492b36a8b974e33e17953ebd4430 (diff) | |
download | gitlab-ce-6bd0f8edb2d94b91eb70b0eeae1a2c4a12d6182b.tar.gz |
Add vue specsissue-board-cards-redesign
Diffstat (limited to 'spec/javascripts/boards/issue_card_labels_spec.js')
-rw-r--r-- | spec/javascripts/boards/issue_card_labels_spec.js | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/spec/javascripts/boards/issue_card_labels_spec.js b/spec/javascripts/boards/issue_card_labels_spec.js new file mode 100644 index 00000000000..50b1ee18423 --- /dev/null +++ b/spec/javascripts/boards/issue_card_labels_spec.js @@ -0,0 +1,227 @@ +import Vue from 'vue'; +import labelsComponent from '~/boards/components/issue_card_labels'; +import eventHub from '~/boards/eventhub'; +import '~/boards/stores/boards_store'; + +const propData = { + labels: [{ + color: 'rgb(0, 0, 0)', + textColor: 'rgb(255, 255, 255)', + description: '', + id: 1, + title: 'Frontend', + }, { + color: 'rgb(255, 255, 255)', + textColor: 'rgb(0, 0, 0)', + description: '', + id: 2, + title: 'Community Contribution', + }], + list: { + color: 'rgb(0, 0, 0)', + id: 3, + title: 'bug', + }, + updateFilters: true, +}; + +const createComponent = (propsData) => { + const Component = Vue.extend(labelsComponent); + + return new Component({ + el: document.createElement('div'), + propsData, + }); +}; + +describe('IssueCardLabels', () => { + describe('props', () => { + const props = labelsComponent.props; + + it('should have labels prop', () => { + const { labels } = props; + const LabelsClass = labels.type; + + expect(labels).toBeDefined(); + expect(new LabelsClass() instanceof Array).toBeTruthy(); + expect(labels.required).toBeTruthy(); + }); + + it('should have list prop', () => { + const { list } = props; + + expect(list).toBeDefined(); + expect(list instanceof Object).toBeTruthy(); + expect(list.required).toBeFalsy(); + }); + + it('should have updateFilters prop', () => { + const { updateFilters } = props; + const UpdateFiltersClass = updateFilters.type; + + expect(updateFilters).toBeDefined(); + expect(new UpdateFiltersClass() instanceof Boolean).toBeTruthy(); + expect(updateFilters.required).toBeFalsy(); + expect(updateFilters.default).toBeFalsy(); + }); + }); + + describe('methods', () => { + describe('showLabel', () => { + it('should return true if there is no list', () => { + const data = Object.assign({}, propData); + data.list = null; + const vm = createComponent(data); + + expect(vm.showLabel()).toEqual(true); + }); + + it('should return true if there is a list and no list.label', () => { + const vm = createComponent(propData); + + expect(vm.showLabel()).toEqual(true); + }); + + it('should return true if list.label.id does not match label.id', () => { + const data = Object.assign({}, propData); + data.list.label = { + id: 100, + }; + const vm = createComponent(data); + + const showLabel = vm.showLabel({ + id: 1, + }); + + expect(showLabel).toEqual(true); + }); + }); + + describe('filterByLabel', () => { + it('should not continue if there is no updateFilters set', () => { + const data = Object.assign({}, propData); + data.updateFilters = null; + + const spy = spyOn(gl.issueBoards.BoardsStore.filter.path, 'split').and.callThrough(); + const vm = createComponent(data); + vm.filterByLabel({ title: 'title' }, { currentTarget: '' }); + + expect(spy).not.toHaveBeenCalled(); + }); + + it('should hide tooltip', () => { + const spy = spyOn($.fn, 'tooltip').and.callFake(() => {}); + const vm = createComponent(propData); + + vm.filterByLabel({ title: 'title' }, { currentTarget: '' }); + expect(spy).toHaveBeenCalledWith('hide'); + }); + + it('should add/remove label to BoardsStore filter path', () => { + const originalPath = gl.issueBoards.BoardsStore.filter.path; + const vm = createComponent(propData); + + const label = { title: 'special' }; + vm.filterByLabel(label, { currentTarget: '' }); + + expect(gl.issueBoards.BoardsStore.filter.path).toEqual(`${originalPath}&label_name[]=${label.title}`); + + vm.filterByLabel(label, { currentTarget: '' }); + expect(gl.issueBoards.BoardsStore.filter.path).toEqual(originalPath); + }); + + it('should encode label title', () => { + const originalPath = gl.issueBoards.BoardsStore.filter.path; + const vm = createComponent(propData); + + const label = { title: '!@#$%^ &*()' }; + vm.filterByLabel(label, { currentTarget: '' }); + + expect(gl.issueBoards.BoardsStore.filter.path).toEqual(`${originalPath}&label_name[]=${encodeURIComponent(label.title)}`); + }); + + it('should updateFiltersUrl', () => { + spyOn(gl.issueBoards.BoardsStore, 'updateFiltersUrl').and.callFake(() => {}); + + const vm = createComponent(propData); + vm.filterByLabel({ title: 'title' }, { currentTarget: '' }); + + expect(gl.issueBoards.BoardsStore.updateFiltersUrl).toHaveBeenCalled(); + expect(gl.issueBoards.BoardsStore.updateFiltersUrl.calls.count()).toEqual(1); + }); + + it('should emit updateTokens to eventHub', (done) => { + const vm = createComponent(propData); + spyOn(eventHub, '$emit').and.callFake((message) => { + expect(message).toEqual('updateTokens'); + done(); + }); + + vm.filterByLabel({ title: 'title' }, { currentTarget: '' }); + }); + }); + + describe('labelStyle', () => { + it('should return style object with backgroundColor and color', () => { + const data = { + color: '#000000', + textColor: '#FFFFFF', + }; + + const vm = createComponent(propData); + const style = vm.labelStyle(data); + expect(style.backgroundColor).toEqual(data.color); + expect(style.color).toEqual(data.textColor); + }); + }); + }); + + describe('template', () => { + it('should have correct elements', () => { + const vm = createComponent(propData); + const el = vm.$el; + spyOn(vm, 'filterByLabel').and.callThrough(); + + expect(el.tagName).toEqual('DIV'); + expect(el.classList.contains('card-footer')).toEqual(true); + + const labels = el.querySelectorAll('button'); + expect(labels.length).toEqual(2); + + const firstLabel = labels[0]; + expect(firstLabel.getAttribute('type')).toEqual('button'); + expect(firstLabel.textContent.trim()).toEqual(propData.labels[0].title); + expect(firstLabel.getAttribute('title')).toEqual(propData.labels[0].description); + expect(firstLabel.style.backgroundColor).toEqual(propData.labels[0].color); + expect(firstLabel.style.color).toEqual(propData.labels[0].textColor); + + firstLabel.click(); + expect(vm.filterByLabel).toHaveBeenCalled(); + expect(vm.filterByLabel.calls.count()).toEqual(1); + vm.filterByLabel.calls.reset(); + + const secondLabel = labels[1]; + expect(secondLabel.getAttribute('type')).toEqual('button'); + expect(secondLabel.textContent.trim()).toEqual(propData.labels[1].title); + expect(secondLabel.getAttribute('title')).toEqual(propData.labels[1].description); + expect(secondLabel.style.backgroundColor).toEqual(propData.labels[1].color); + expect(secondLabel.style.color).toEqual(propData.labels[1].textColor); + + secondLabel.click(); + expect(vm.filterByLabel).toHaveBeenCalled(); + expect(vm.filterByLabel.calls.count()).toEqual(1); + }); + + it('should not display label if showLabel is false', () => { + const data = Object.assign({}, propData); + data.list.label = { + id: 1, + }; + const vm = createComponent(data); + const el = vm.$el; + + const labels = el.querySelectorAll('button'); + expect(labels.length).toEqual(1); + }); + }); +}); |