Merge branch 'xanf-vtu-v1-monitoring' into 'master'

Upgrading VTU to v1: Remove deprecated `methods` from spec/frontend/monitoring

See merge request gitlab-org/gitlab!50511

spec/frontend/monitoring/components/dashboards_dropdown_spec.js

+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 
@@ -27,7 +28,6 @@ describe('DashboardsDropdown', () => {
         ...props,
         defaultBranch,
       },
-      sync: false,
       ...storeOpts,
       ...opts,
     });
@@ -72,22 +72,20 @@ describe('DashboardsDropdown', () => {
       expect(findNoItemsMsg().isVisible()).toBe(false);
     });
 
-    it('filters dropdown items when searched for item exists in the list', () => {
+    it('filters dropdown items when searched for item exists in the list', async () => {
       const searchTerm = 'Overview';
       setSearchTerm(searchTerm);
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findItems()).toHaveLength(1);
-      });
+      expect(findItems()).toHaveLength(1);
     });
 
-    it('shows no items found message when searched for item does not exists in the list', () => {
+    it('shows no items found message when searched for item does not exists in the list', async () => {
       const searchTerm = 'does-not-exist';
       setSearchTerm(searchTerm);
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findNoItemsMsg().isVisible()).toBe(true);
-      });
+      expect(findNoItemsMsg().isVisible()).toBe(true);
     });
   });
 

spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js

+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
 
@@ -9,7 +10,6 @@ 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,
   });
@@ -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);
     });
   });
 });

spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js

+import Vuex from 'vuex';
+import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
 
@@ -8,6 +10,8 @@ import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_
 
 import { dashboardGitResponse } from '../mock_data';
 
+Vue.use(Vuex);
+
 describe('duplicate dashboard modal', () => {
   let wrapper;
   let mockDashboards;
@@ -15,25 +19,28 @@ describe('duplicate dashboard modal', () => {
   let duplicateDashboardAction;
   let okEvent;
 
-  function createComponent(opts = {}) {
-    const storeOpts = {
-      methods: {
-        duplicateSystemDashboard: jest.fn(),
-      },
-      computed: {
-        allDashboards: () => mockDashboards,
-        selectedDashboard: () => mockSelectedDashboard,
+  function createComponent() {
+    const store = new Vuex.Store({
+      modules: {
+        monitoringDashboard: {
+          namespaced: true,
+          actions: {
+            duplicateSystemDashboard: duplicateDashboardAction,
+          },
+          getters: {
+            allDashboards: () => mockDashboards,
+            selectedDashboard: () => mockSelectedDashboard,
+          },
+        },
       },
-    };
+    });
 
     return shallowMount(DuplicateDashboardModal, {
       propsData: {
         defaultBranch: 'master',
         modalId: 'id',
       },
-      sync: false,
-      ...storeOpts,
-      ...opts,
+      store,
     });
   }
 
@@ -51,12 +58,7 @@ describe('duplicate dashboard modal', () => {
       preventDefault: jest.fn(),
     };
 
-    wrapper = createComponent({
-      methods: {
-        // Mock vuex actions
-        duplicateSystemDashboard: duplicateDashboardAction,
-      },
-    });
+    wrapper = createComponent();
 
     wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
   });
@@ -65,34 +67,33 @@ describe('duplicate dashboard modal', () => {
     expect(findDuplicateDashboardForm().exists()).toBe(true);
   });
 
-  it('saves a new dashboard', () => {
+  it('saves a new dashboard', async () => {
     findModal().vm.$emit('ok', okEvent);
 
-    return waitForPromises().then(() => {
-      expect(okEvent.preventDefault).toHaveBeenCalled();
-      expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
-      expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
-      expect(findAlert().exists()).toBe(false);
-    });
+    await waitForPromises();
+    expect(okEvent.preventDefault).toHaveBeenCalled();
+    expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
+    expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
+    expect(findAlert().exists()).toBe(false);
   });
 
-  it('handles error when a new dashboard is not saved', () => {
+  it('handles error when a new dashboard is not saved', async () => {
     const errMsg = 'An error occurred';
 
     duplicateDashboardAction.mockRejectedValueOnce(errMsg);
     findModal().vm.$emit('ok', okEvent);
 
-    return waitForPromises().then(() => {
-      expect(okEvent.preventDefault).toHaveBeenCalled();
+    await waitForPromises();
 
-      expect(findAlert().exists()).toBe(true);
-      expect(findAlert().text()).toBe(errMsg);
+    expect(okEvent.preventDefault).toHaveBeenCalled();
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
-    });
+    expect(findAlert().exists()).toBe(true);
+    expect(findAlert().text()).toBe(errMsg);
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
   });
 
   it('updates the form on changes', () => {