import Vue from 'vue'; import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; const createComponent = ({ issuableId = 1, issuableType = 'epic', isTodo, isActionActive, collapsed, }) => { const Component = Vue.extend(SidebarTodos); return mountComponent(Component, { issuableId, issuableType, isTodo, isActionActive, collapsed, }); }; describe('SidebarTodo', () => { let vm; beforeEach(() => { vm = createComponent({}); }); afterEach(() => { vm.$destroy(); }); describe('computed', () => { describe('buttonClasses', () => { it('returns todo button classes for when `collapsed` prop is `false`', () => { expect(vm.buttonClasses).toBe('btn btn-default btn-todo issuable-header-btn float-right'); }); it('returns todo button classes for when `collapsed` prop is `true`', done => { vm.collapsed = true; Vue.nextTick() .then(() => { expect(vm.buttonClasses).toBe( 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state', ); }) .then(done) .catch(done.fail); }); }); describe('buttonLabel', () => { it('returns todo button text for marking todo as done when `isTodo` prop is `true`', () => { expect(vm.buttonLabel).toBe('Mark as done'); }); it('returns todo button text for add todo when `isTodo` prop is `false`', done => { vm.isTodo = false; Vue.nextTick() .then(() => { expect(vm.buttonLabel).toBe('Add a To Do'); }) .then(done) .catch(done.fail); }); }); describe('collapsedButtonIconClasses', () => { it('returns collapsed button icon class when `isTodo` prop is `true`', () => { expect(vm.collapsedButtonIconClasses).toBe('todo-undone'); }); it('returns empty string when `isTodo` prop is `false`', done => { vm.isTodo = false; Vue.nextTick() .then(() => { expect(vm.collapsedButtonIconClasses).toBe(''); }) .then(done) .catch(done.fail); }); }); describe('collapsedButtonIcon', () => { it('returns button icon name when `isTodo` prop is `true`', () => { expect(vm.collapsedButtonIcon).toBe('todo-done'); }); it('returns button icon name when `isTodo` prop is `false`', done => { vm.isTodo = false; Vue.nextTick() .then(() => { expect(vm.collapsedButtonIcon).toBe('todo-add'); }) .then(done) .catch(done.fail); }); }); }); describe('methods', () => { describe('handleButtonClick', () => { it('emits `toggleTodo` event on component', () => { spyOn(vm, '$emit'); vm.handleButtonClick(); expect(vm.$emit).toHaveBeenCalledWith('toggleTodo'); }); }); }); describe('template', () => { it('renders component container element', () => { const dataAttributes = { issuableId: '1', issuableType: 'epic', originalTitle: '', placement: 'left', container: 'body', boundary: 'viewport', }; expect(vm.$el.nodeName).toBe('BUTTON'); const elDataAttrs = vm.$el.dataset; Object.keys(elDataAttrs).forEach(attr => { expect(elDataAttrs[attr]).toBe(dataAttributes[attr]); }); }); it('check button label computed property', () => { expect(vm.buttonLabel).toEqual('Mark as done'); }); it('renders button label element when `collapsed` prop is `false`', () => { const buttonLabelEl = vm.$el.querySelector('span.issuable-todo-inner'); expect(buttonLabelEl).not.toBeNull(); expect(buttonLabelEl.innerText.trim()).toBe('Mark as done'); }); it('renders button icon when `collapsed` prop is `true`', done => { vm.collapsed = true; Vue.nextTick() .then(() => { const buttonIconEl = vm.$el.querySelector('svg'); expect(buttonIconEl).not.toBeNull(); expect(buttonIconEl.querySelector('use').getAttribute('xlink:href')).toContain( 'todo-done', ); }) .then(done) .catch(done.fail); }); it('renders loading icon when `isActionActive` prop is true', done => { vm.isActionActive = true; Vue.nextTick() .then(() => { const loadingEl = vm.$el.querySelector('span.loading-container'); expect(loadingEl).not.toBeNull(); }) .then(done) .catch(done.fail); }); }); });