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

Upgrading VTU to v1: Remove deprecate `methods` from `environments_dashboard`

See merge request gitlab-org/gitlab!50499

ee/app/assets/javascripts/vue_shared/dashboards/store/index.js

@@ -6,9 +6,10 @@ import * as actions from './actions';
 
 Vue.use(Vuex);
 
-export default () =>
-  new Vuex.Store({
-    state,
-    mutations,
-    actions,
-  });
+export const getStoreConfig = () => ({
+  state,
+  mutations,
+  actions,
+});
+
+export default () => new Vuex.Store(getStoreConfig());

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

 import { GlButton, GlEmptyState, GlModal, GlSprintf, GlLink, GlPagination } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import component from 'ee/environments_dashboard/components/dashboard/dashboard.vue';
 import Environment from 'ee/environments_dashboard/components/dashboard/environment.vue';
 import ProjectHeader from 'ee/environments_dashboard/components/dashboard/project_header.vue';
-import createStore from 'ee/vue_shared/dashboards/store/index';
+import { getStoreConfig } from 'ee/vue_shared/dashboards/store/index';
 import state from 'ee/vue_shared/dashboards/store/state';
 import { trimText } from 'helpers/text_helper';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
 
 import environment from './mock_environment.json';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('dashboard', () => {
   let actionSpies;
-  const store = createStore();
   let wrapper;
   let propsData;
+  let store;
 
   beforeEach(() => {
     actionSpies = {
@@ -31,6 +31,16 @@ describe('dashboard', () => {
       fetchNextPage: jest.fn(),
       fetchProjects: jest.fn(),
     };
+
+    const { actions, ...storeConfig } = getStoreConfig();
+    store = new Vuex.Store({
+      ...storeConfig,
+      actions: {
+        ...actions,
+        ...actionSpies,
+      },
+    });
+
     propsData = {
       addPath: 'mock-addPath',
       listPath: 'mock-listPath',
@@ -41,11 +51,7 @@ describe('dashboard', () => {
 
     wrapper = shallowMount(component, {
       propsData,
-      localVue,
       store,
-      methods: {
-        ...actionSpies,
-      },
       stubs: { GlSprintf },
     });
   });
@@ -143,7 +149,7 @@ describe('dashboard', () => {
     describe('project selector modal', () => {
       beforeEach(() => {
         wrapper.find(GlButton).trigger('click');
-        return wrapper.vm.$nextTick();
+        return nextTick();
       });
 
       it('should fire the add projects action on ok', () => {
@@ -158,7 +164,7 @@ describe('dashboard', () => {
 
       it('should set the search query when searching', () => {
         wrapper.find(ProjectSelector).vm.$emit('searched', 'test');
-        expect(actionSpies.setSearchQuery).toHaveBeenCalledWith('test');
+        expect(actionSpies.setSearchQuery).toHaveBeenCalledWith(expect.any(Object), 'test');
       });
 
       it('should fetch query results when searching', () => {
@@ -168,7 +174,10 @@ describe('dashboard', () => {
 
       it('should toggle a project when clicked', () => {
         wrapper.find(ProjectSelector).vm.$emit('projectClicked', { name: 'test', id: 1 });
-        expect(actionSpies.toggleSelectedProject).toHaveBeenCalledWith({ name: 'test', id: 1 });
+        expect(actionSpies.toggleSelectedProject).toHaveBeenCalledWith(expect.any(Object), {
+          name: 'test',
+          id: 1,
+        });
       });
 
       it('should fetch the next page when bottom is reached', () => {
@@ -176,12 +185,11 @@ describe('dashboard', () => {
         expect(actionSpies.fetchNextPage).toHaveBeenCalled();
       });
 
-      it('should get the page info from the state', () => {
+      it('should get the page info from the state', async () => {
         store.state.pageInfo = { totalResults: 100 };
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(ProjectSelector).props('totalResults')).toBe(100);
-        });
+        await nextTick();
+        expect(wrapper.find(ProjectSelector).props('totalResults')).toBe(100);
       });
     });