1 files changed, 16 insertions, 20 deletions

diff --git a/spec/frontend/ide/components/file_templates/dropdown_spec.js b/spec/frontend/ide/components/file_templates/dropdown_spec.js
index 44ac9aa954d..e54b322b9db 100644
--- a/spec/frontend/ide/components/file_templates/dropdown_spec.js
+++ b/spec/frontend/ide/components/file_templates/dropdown_spec.js
@@ -1,11 +1,11 @@
 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import $ from 'jquery';
 import Vuex from 'vuex';
 import Dropdown from '~/ide/components/file_templates/dropdown.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE file templates dropdown component', () => {
   let wrapper;
@@ -44,7 +44,6 @@ describe('IDE file templates dropdown component', () => {
         ...props,
       },
       store: fakeStore,
-      localVue,
     });
 
     ({ element } = wrapper);
@@ -55,15 +54,14 @@ describe('IDE file templates dropdown component', () => {
     wrapper = null;
   });
 
-  it('calls clickItem on click', () => {
+  it('calls clickItem on click', async () => {
     const itemData = { name: 'test.yml ' };
     createComponent({ props: { data: [itemData] } });
     const item = findItemButtons().at(0);
     item.trigger('click');
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.emitted().click[0][0]).toBe(itemData);
-    });
+    await nextTick();
+    expect(wrapper.emitted().click[0][0]).toBe(itemData);
   });
 
   it('renders dropdown title', () => {
@@ -112,7 +110,7 @@ describe('IDE file templates dropdown component', () => {
       expect(items.wrappers.map((x) => x.text())).toEqual(templates.map((x) => x.name));
     });
 
-    it('searches template data', () => {
+    it('searches template data', async () => {
       const templates = [{ name: 'match 1' }, { name: 'other' }, { name: 'match 2' }];
       const matches = ['match 1', 'match 2'];
       createComponent({
@@ -120,12 +118,11 @@ describe('IDE file templates dropdown component', () => {
         state: { templates },
       });
       findSearch().setValue('match');
-      return wrapper.vm.$nextTick().then(() => {
-        const items = findItemButtons();
+      await nextTick();
+      const items = findItemButtons();
 
-        expect(items.length).toBe(matches.length);
-        expect(items.wrappers.map((x) => x.text())).toEqual(matches);
-      });
+      expect(items.length).toBe(matches.length);
+      expect(items.wrappers.map((x) => x.text())).toEqual(matches);
     });
 
     it('does not render input when `searchable` is true & `showLoading` is true', () => {
@@ -160,17 +157,16 @@ describe('IDE file templates dropdown component', () => {
       expect(findSearch().exists()).toBe(true);
     });
 
-    it('searches data', () => {
+    it('searches data', async () => {
       const data = [{ name: 'match 1' }, { name: 'other' }, { name: 'match 2' }];
       const matches = ['match 1', 'match 2'];
       createComponent({ props: { searchable: true, data } });
       findSearch().setValue('match');
-      return wrapper.vm.$nextTick().then(() => {
-        const items = findItemButtons();
+      await nextTick();
+      const items = findItemButtons();
 
-        expect(items.length).toBe(matches.length);
-        expect(items.wrappers.map((x) => x.text())).toEqual(matches);
-      });
+      expect(items.length).toBe(matches.length);
+      expect(items.wrappers.map((x) => x.text())).toEqual(matches);
     });
   });
 });