Add latest changes from gitlab-org/gitlab@master

3 files changed, 144 insertions, 134 deletions

diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js
index 39fe2c7e723..a97e883a8bf 100644
--- a/spec/frontend/ide/components/activity_bar_spec.js
+++ b/spec/frontend/ide/components/activity_bar_spec.js
@@ -1,86 +1,82 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import ActivityBar from '~/ide/components/activity_bar.vue';
 import { leftSidebarViews } from '~/ide/constants';
 import { createStore } from '~/ide/stores';
 
-describe('IDE activity bar', () => {
-  const Component = Vue.extend(ActivityBar);
-  let vm;
+describe('IDE ActivityBar component', () => {
+  let wrapper;
   let store;
 
-  const findChangesBadge = () => vm.$el.querySelector('.badge');
+  const findChangesBadge = () => wrapper.findComponent(GlBadge);
 
-  beforeEach(() => {
+  const mountComponent = (state) => {
     store = createStore();
-
-    Vue.set(store.state.projects, 'abcproject', {
-      web_url: 'testing',
+    store.replaceState({
+      ...store.state,
+      projects: { abcproject: { web_url: 'testing' } },
+      currentProjectId: 'abcproject',
+      ...state,
     });
-    Vue.set(store.state, 'currentProjectId', 'abcproject');
 
-    vm = createComponentWithStore(Component, store);
-  });
+    wrapper = shallowMount(ActivityBar, { store });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('updateActivityBarView', () => {
     beforeEach(() => {
-      jest.spyOn(vm, 'updateActivityBarView').mockImplementation(() => {});
-
-      vm.$mount();
+      mountComponent();
+      jest.spyOn(wrapper.vm, 'updateActivityBarView').mockImplementation(() => {});
     });
 
     it('calls updateActivityBarView with edit value on click', () => {
-      vm.$el.querySelector('.js-ide-edit-mode').click();
+      wrapper.find('.js-ide-edit-mode').trigger('click');
 
-      expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name);
+      expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name);
     });
 
     it('calls updateActivityBarView with commit value on click', () => {
-      vm.$el.querySelector('.js-ide-commit-mode').click();
+      wrapper.find('.js-ide-commit-mode').trigger('click');
 
-      expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name);
+      expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name);
     });
 
     it('calls updateActivityBarView with review value on click', () => {
-      vm.$el.querySelector('.js-ide-review-mode').click();
+      wrapper.find('.js-ide-review-mode').trigger('click');
 
-      expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.review.name);
+      expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.review.name);
     });
   });
 
   describe('active item', () => {
-    beforeEach(() => {
-      vm.$mount();
-    });
-
     it('sets edit item active', () => {
-      expect(vm.$el.querySelector('.js-ide-edit-mode').classList).toContain('active');
+      mountComponent();
+
+      expect(wrapper.find('.js-ide-edit-mode').classes()).toContain('active');
     });
 
-    it('sets commit item active', async () => {
-      vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
+    it('sets commit item active', () => {
+      mountComponent({ currentActivityView: leftSidebarViews.commit.name });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.js-ide-commit-mode').classList).toContain('active');
+      expect(wrapper.find('.js-ide-commit-mode').classes()).toContain('active');
     });
   });
 
   describe('changes badge', () => {
     it('is rendered when files are staged', () => {
-      store.state.stagedFiles = [{ path: '/path/to/file' }];
-      vm.$mount();
+      mountComponent({ stagedFiles: [{ path: '/path/to/file' }] });
 
-      expect(findChangesBadge()).toBeTruthy();
-      expect(findChangesBadge().textContent.trim()).toBe('1');
+      expect(findChangesBadge().exists()).toBe(true);
+      expect(findChangesBadge().text()).toBe('1');
     });
 
     it('is not rendered when no changes are present', () => {
-      vm.$mount();
-      expect(findChangesBadge()).toBeFalsy();
+      mountComponent();
+
+      expect(findChangesBadge().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/ide/components/ide_status_bar_spec.js b/spec/frontend/ide/components/ide_status_bar_spec.js
index 17a5aa17b1f..e6e0ebaf1e8 100644
--- a/spec/frontend/ide/components/ide_status_bar_spec.js
+++ b/spec/frontend/ide/components/ide_status_bar_spec.js
@@ -1,8 +1,8 @@
+import { mount } from '@vue/test-utils';
 import _ from 'lodash';
-import Vue, { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import IdeStatusBar from '~/ide/components/ide_status_bar.vue';
+import IdeStatusMR from '~/ide/components/ide_status_mr.vue';
 import { rightSidebarViews } from '~/ide/constants';
 import { createStore } from '~/ide/stores';
 import { projectData } from '../mock_data';
@@ -13,42 +13,48 @@ const TEST_MERGE_REQUEST_URL = `${TEST_HOST}merge-requests/${TEST_MERGE_REQUEST_
 
 jest.mock('~/lib/utils/poll');
 
-describe('ideStatusBar', () => {
-  let store;
-  let vm;
+describe('IdeStatusBar component', () => {
+  let wrapper;
+
+  const findMRStatus = () => wrapper.findComponent(IdeStatusMR);
+
+  const mountComponent = (state = {}) => {
+    const store = createStore();
+    store.replaceState({
+      ...store.state,
+      currentBranchId: 'main',
+      currentProjectId: TEST_PROJECT_ID,
+      projects: {
+        ...store.state.projects,
+        [TEST_PROJECT_ID]: _.clone(projectData),
+      },
+      ...state,
+    });
 
-  const createComponent = () => {
-    vm = createComponentWithStore(Vue.extend(IdeStatusBar), store).$mount();
+    wrapper = mount(IdeStatusBar, { store });
   };
-  const findMRStatus = () => vm.$el.querySelector('.js-ide-status-mr');
-
-  beforeEach(() => {
-    store = createStore();
-    store.state.currentProjectId = TEST_PROJECT_ID;
-    store.state.projects[TEST_PROJECT_ID] = _.clone(projectData);
-    store.state.currentBranchId = 'main';
-  });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('default', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
     it('triggers a setInterval', () => {
-      expect(vm.intervalId).not.toBe(null);
+      mountComponent();
+
+      expect(wrapper.vm.intervalId).not.toBe(null);
     });
 
     it('renders the statusbar', () => {
-      expect(vm.$el.className).toBe('ide-status-bar');
+      mountComponent();
+
+      expect(wrapper.classes()).toEqual(['ide-status-bar']);
     });
 
     describe('commitAgeUpdate', () => {
       beforeEach(() => {
-        jest.spyOn(vm, 'commitAgeUpdate').mockImplementation(() => {});
+        mountComponent();
+        jest.spyOn(wrapper.vm, 'commitAgeUpdate').mockImplementation(() => {});
       });
 
       afterEach(() => {
@@ -56,70 +62,82 @@ describe('ideStatusBar', () => {
       });
 
       it('gets called every second', () => {
-        expect(vm.commitAgeUpdate).not.toHaveBeenCalled();
+        expect(wrapper.vm.commitAgeUpdate).not.toHaveBeenCalled();
 
         jest.advanceTimersByTime(1000);
 
-        expect(vm.commitAgeUpdate.mock.calls.length).toEqual(1);
+        expect(wrapper.vm.commitAgeUpdate.mock.calls).toHaveLength(1);
 
         jest.advanceTimersByTime(1000);
 
-        expect(vm.commitAgeUpdate.mock.calls.length).toEqual(2);
+        expect(wrapper.vm.commitAgeUpdate.mock.calls).toHaveLength(2);
       });
     });
 
     describe('getCommitPath', () => {
       it('returns the path to the commit details', () => {
-        expect(vm.getCommitPath('abc123de')).toBe('/commit/abc123de');
+        mountComponent();
+
+        expect(wrapper.vm.getCommitPath('abc123de')).toBe('/commit/abc123de');
       });
     });
 
     describe('pipeline status', () => {
-      it('opens right sidebar on clicking icon', async () => {
-        jest.spyOn(vm, 'openRightPane').mockImplementation(() => {});
-        Vue.set(vm.$store.state.pipelines, 'latestPipeline', {
-          details: {
-            status: {
-              text: 'success',
-              details_path: 'test',
-              icon: 'status_success',
+      it('opens right sidebar on clicking icon', () => {
+        const pipelines = {
+          latestPipeline: {
+            details: {
+              status: {
+                text: 'success',
+                details_path: 'test',
+                icon: 'status_success',
+              },
+            },
+            commit: {
+              author_gravatar_url: 'www',
             },
           },
-          commit: {
-            author_gravatar_url: 'www',
-          },
-        });
+        };
+        mountComponent({ pipelines });
+        jest.spyOn(wrapper.vm, 'openRightPane').mockImplementation(() => {});
 
-        await nextTick();
-        vm.$el.querySelector('.ide-status-pipeline button').click();
+        wrapper.find('button').trigger('click');
 
-        expect(vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines);
+        expect(wrapper.vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines);
       });
     });
 
     it('does not show merge request status', () => {
-      expect(findMRStatus()).toBe(null);
+      mountComponent();
+
+      expect(findMRStatus().exists()).toBe(false);
     });
   });
 
   describe('with merge request in store', () => {
     beforeEach(() => {
-      store.state.projects[TEST_PROJECT_ID].mergeRequests = {
-        [TEST_MERGE_REQUEST_ID]: {
-          web_url: TEST_MERGE_REQUEST_URL,
-          references: {
-            short: `!${TEST_MERGE_REQUEST_ID}`,
+      const state = {
+        currentMergeRequestId: TEST_MERGE_REQUEST_ID,
+        projects: {
+          [TEST_PROJECT_ID]: {
+            ..._.clone(projectData),
+            mergeRequests: {
+              [TEST_MERGE_REQUEST_ID]: {
+                web_url: TEST_MERGE_REQUEST_URL,
+                references: {
+                  short: `!${TEST_MERGE_REQUEST_ID}`,
+                },
+              },
+            },
           },
         },
       };
-      store.state.currentMergeRequestId = TEST_MERGE_REQUEST_ID;
-
-      createComponent();
+      mountComponent(state);
     });
 
     it('shows merge request status', () => {
-      expect(findMRStatus().textContent.trim()).toEqual(`Merge request !${TEST_MERGE_REQUEST_ID}`);
-      expect(findMRStatus().querySelector('a').href).toEqual(TEST_MERGE_REQUEST_URL);
+      expect(findMRStatus().text()).toBe(`Merge request !${TEST_MERGE_REQUEST_ID}`);
+      expect(findMRStatus().find('a').attributes('href')).toBe(TEST_MERGE_REQUEST_URL);
     });
   });
 });
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('');
     });
   });
 });