1 files changed, 26 insertions, 26 deletions

diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
index 29115ffb817..4abb5b2e27b 100644
--- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
 
@@ -9,20 +10,19 @@ const createMountedWrapper = (props = {}) => {
   // Use `mount` to render native input elements
   wrapper = mount(DuplicateDashboardForm, {
     propsData: { ...props },
-    sync: false,
     // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-    attachToDocument: true,
+    attachTo: document.body,
   });
 };
 
 describe('DuplicateDashboardForm', () => {
   const defaultBranch = 'master';
 
-  const findByRef = ref => wrapper.find({ ref });
+  const findByRef = (ref) => wrapper.find({ ref });
   const setValue = (ref, val) => {
     findByRef(ref).setValue(val);
   };
-  const setChecked = value => {
+  const setChecked = (value) => {
     const input = wrapper.find(`.form-check-input[value="${value}"]`);
     input.element.checked = true;
     input.trigger('click');
@@ -47,34 +47,34 @@ describe('DuplicateDashboardForm', () => {
   describe('validates the file name', () => {
     const findInvalidFeedback = () => findByRef('fileNameFormGroup').find('.invalid-feedback');
 
-    it('when is empty', () => {
+    it('when is empty', async () => {
       setValue('fileName', '');
-      return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
-        expect(findInvalidFeedback().exists()).toBe(false);
-      });
+      await nextTick();
+
+      expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
+      expect(findInvalidFeedback().exists()).toBe(false);
     });
 
-    it('when is valid', () => {
+    it('when is valid', async () => {
       setValue('fileName', 'my_dashboard.yml');
-      return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
-        expect(findInvalidFeedback().exists()).toBe(false);
-      });
+      await nextTick();
+
+      expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
+      expect(findInvalidFeedback().exists()).toBe(false);
     });
 
-    it('when is not valid', () => {
+    it('when is not valid', async () => {
       setValue('fileName', 'my_dashboard.exe');
-      return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid');
-        expect(findInvalidFeedback().text()).toBeTruthy();
-      });
+      await nextTick();
+
+      expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid');
+      expect(findInvalidFeedback().text()).toBeTruthy();
     });
   });
 
   describe('emits `change` event', () => {
     const lastChange = () =>
-      wrapper.vm.$nextTick().then(() => {
+      nextTick().then(() => {
         wrapper.find('form').trigger('change');
 
         // Resolves to the last emitted change
@@ -133,19 +133,19 @@ describe('DuplicateDashboardForm', () => {
         expect(lastChange()).resolves.toMatchObject({
           branch: defaultBranch,
         }),
-        wrapper.vm.$nextTick(() => {
+        nextTick(() => {
           expect(findByRef('branchName').isVisible()).toBe(false);
         }),
       ]);
     });
 
-    it('when `new` branch option is chosen, focuses on the branch name input', () => {
+    it('when `new` branch option is chosen, focuses on the branch name input', async () => {
       setChecked(wrapper.vm.$options.radioVals.NEW);
 
-      return wrapper.vm.$nextTick().then(() => {
-        wrapper.find('form').trigger('change');
-        expect(document.activeElement).toBe(findByRef('branchName').element);
-      });
+      await nextTick();
+
+      wrapper.find('form').trigger('change');
+      expect(document.activeElement).toBe(findByRef('branchName').element);
     });
   });
 });