diff options
Diffstat (limited to 'spec/frontend/ide/components/new_dropdown/index_spec.js')
-rw-r--r-- | spec/frontend/ide/components/new_dropdown/index_spec.js | 82 |
1 files changed, 39 insertions, 43 deletions
diff --git a/spec/frontend/ide/components/new_dropdown/index_spec.js b/spec/frontend/ide/components/new_dropdown/index_spec.js index 19dcd9569b3..747c099db33 100644 --- a/spec/frontend/ide/components/new_dropdown/index_spec.js +++ b/spec/frontend/ide/components/new_dropdown/index_spec.js @@ -1,70 +1,66 @@ -import Vue, { nextTick } from 'vue'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import newDropdown from '~/ide/components/new_dropdown/index.vue'; +import { mount } from '@vue/test-utils'; +import NewDropdown from '~/ide/components/new_dropdown/index.vue'; +import Button from '~/ide/components/new_dropdown/button.vue'; import { createStore } from '~/ide/stores'; describe('new dropdown component', () => { - let store; - let vm; - - beforeEach(() => { - store = createStore(); - - const component = Vue.extend(newDropdown); - - vm = createComponentWithStore(component, store, { - branch: 'main', - path: '', - mouseOver: false, - type: 'tree', + let wrapper; + + const findAllButtons = () => wrapper.findAllComponents(Button); + + const mountComponent = () => { + const store = createStore(); + store.state.currentProjectId = 'abcproject'; + store.state.path = ''; + store.state.trees['abcproject/mybranch'] = { tree: [] }; + + wrapper = mount(NewDropdown, { + store, + propsData: { + branch: 'main', + path: '', + mouseOver: false, + type: 'tree', + }, }); + }; - vm.$store.state.currentProjectId = 'abcproject'; - vm.$store.state.path = ''; - vm.$store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - - vm.$mount(); - - jest.spyOn(vm.$refs.newModal, 'open').mockImplementation(() => {}); + beforeEach(() => { + mountComponent(); + jest.spyOn(wrapper.vm.$refs.newModal, 'open').mockImplementation(() => {}); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('renders new file, upload and new directory links', () => { - const buttons = vm.$el.querySelectorAll('.dropdown-menu button'); - - expect(buttons[0].textContent.trim()).toBe('New file'); - expect(buttons[1].textContent.trim()).toBe('Upload file'); - expect(buttons[2].textContent.trim()).toBe('New directory'); + expect(findAllButtons().at(0).text()).toBe('New file'); + expect(findAllButtons().at(1).text()).toBe('Upload file'); + expect(findAllButtons().at(2).text()).toBe('New directory'); }); describe('createNewItem', () => { it('opens modal for a blob when new file is clicked', () => { - vm.$el.querySelectorAll('.dropdown-menu button')[0].click(); + findAllButtons().at(0).trigger('click'); - expect(vm.$refs.newModal.open).toHaveBeenCalledWith('blob', ''); + expect(wrapper.vm.$refs.newModal.open).toHaveBeenCalledWith('blob', ''); }); it('opens modal for a tree when new directory is clicked', () => { - vm.$el.querySelectorAll('.dropdown-menu button')[2].click(); + findAllButtons().at(2).trigger('click'); - expect(vm.$refs.newModal.open).toHaveBeenCalledWith('tree', ''); + expect(wrapper.vm.$refs.newModal.open).toHaveBeenCalledWith('tree', ''); }); }); describe('isOpen', () => { it('scrolls dropdown into view', async () => { - jest.spyOn(vm.$refs.dropdownMenu, 'scrollIntoView').mockImplementation(() => {}); - - vm.isOpen = true; + jest.spyOn(wrapper.vm.$refs.dropdownMenu, 'scrollIntoView').mockImplementation(() => {}); - await nextTick(); + await wrapper.setProps({ isOpen: true }); - expect(vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({ + expect(wrapper.vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', }); }); @@ -72,11 +68,11 @@ describe('new dropdown component', () => { describe('delete entry', () => { it('calls delete action', () => { - jest.spyOn(vm, 'deleteEntry').mockImplementation(() => {}); + jest.spyOn(wrapper.vm, 'deleteEntry').mockImplementation(() => {}); - vm.$el.querySelectorAll('.dropdown-menu button')[4].click(); + findAllButtons().at(4).trigger('click'); - expect(vm.deleteEntry).toHaveBeenCalledWith(''); + expect(wrapper.vm.deleteEntry).toHaveBeenCalledWith(''); }); }); }); |