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('');
     });
   });
 });