diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-06-06 10:36:45 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-06-06 10:36:45 +0300 |
commit | 39a27b7c467c5e72484463e0a7b4e3423268def4 (patch) | |
tree | c9391eed6c43bbe8ab5eec173cd5ca74f2432ff6 /spec | |
parent | 4bb63a8caa67ec52ad0b7dcd4ca13e1a26a54b3a (diff) |
CE Backport: Show tree within Epic containing child Epics and Issues
Diffstat (limited to 'spec')
-rw-r--r-- | spec/frontend/vue_shared/droplab_dropdown_button_spec.js | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/droplab_dropdown_button_spec.js b/spec/frontend/vue_shared/droplab_dropdown_button_spec.js new file mode 100644 index 00000000000..22295721328 --- /dev/null +++ b/spec/frontend/vue_shared/droplab_dropdown_button_spec.js @@ -0,0 +1,136 @@ +import { mount, createLocalVue } from '@vue/test-utils'; + +import DroplabDropdownButton from '~/vue_shared/components/droplab_dropdown_button.vue'; + +const mockActions = [ + { + title: 'Foo', + description: 'Some foo action', + }, + { + title: 'Bar', + description: 'Some bar action', + }, +]; + +const createComponent = ({ + size = '', + dropdownClass = '', + actions = mockActions, + defaultAction = 0, +}) => { + const localVue = createLocalVue(); + + return mount(DroplabDropdownButton, { + localVue, + propsData: { + size, + dropdownClass, + actions, + defaultAction, + }, + }); +}; + +describe('DroplabDropdownButton', () => { + let wrapper; + + beforeEach(() => { + wrapper = createComponent({}); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('data', () => { + it('contains `selectedAction` representing value of `defaultAction` prop', () => { + expect(wrapper.vm.selectedAction).toBe(0); + }); + }); + + describe('computed', () => { + describe('selectedActionTitle', () => { + it('returns string containing title of selected action', () => { + wrapper.setData({ selectedAction: 0 }); + + expect(wrapper.vm.selectedActionTitle).toBe(mockActions[0].title); + + wrapper.setData({ selectedAction: 1 }); + + expect(wrapper.vm.selectedActionTitle).toBe(mockActions[1].title); + }); + }); + + describe('buttonSizeClass', () => { + it('returns string containing button sizing class based on `size` prop', done => { + const wrapperWithSize = createComponent({ + size: 'sm', + }); + + wrapperWithSize.vm.$nextTick(() => { + expect(wrapperWithSize.vm.buttonSizeClass).toBe('btn-sm'); + + done(); + wrapperWithSize.destroy(); + }); + }); + }); + }); + + describe('methods', () => { + describe('handlePrimaryActionClick', () => { + it('emits `onActionClick` event on component with selectedAction object as param', () => { + jest.spyOn(wrapper.vm, '$emit'); + + wrapper.setData({ selectedAction: 0 }); + wrapper.vm.handlePrimaryActionClick(); + + expect(wrapper.vm.$emit).toHaveBeenCalledWith('onActionClick', mockActions[0]); + }); + }); + + describe('handleActionClick', () => { + it('emits `onActionSelect` event on component with selectedAction index as param', () => { + jest.spyOn(wrapper.vm, '$emit'); + + wrapper.vm.handleActionClick(1); + + expect(wrapper.vm.$emit).toHaveBeenCalledWith('onActionSelect', 1); + }); + }); + }); + + describe('template', () => { + it('renders default action button', () => { + const defaultButton = wrapper.findAll('.btn').at(0); + + expect(defaultButton.text()).toBe(mockActions[0].title); + }); + + it('renders dropdown button', () => { + const dropdownButton = wrapper.findAll('.dropdown-toggle').at(0); + + expect(dropdownButton.isVisible()).toBe(true); + }); + + it('renders dropdown actions', () => { + const dropdownActions = wrapper.findAll('.dropdown-menu li button'); + + Array(dropdownActions.length) + .fill() + .forEach((_, index) => { + const actionContent = dropdownActions.at(index).find('.description'); + + expect(actionContent.find('strong').text()).toBe(mockActions[index].title); + expect(actionContent.find('p').text()).toBe(mockActions[index].description); + }); + }); + + it('renders divider between dropdown actions', () => { + const dropdownDivider = wrapper.find('.dropdown-menu .divider'); + + expect(dropdownDivider.isVisible()).toBe(true); + }); + }); +}); |