Add latest changes from gitlab-org/gitlab@master

5 files changed, 84 insertions, 115 deletions

diff --git a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
index 4f81c0aa5d3..7c48c0e6f95 100644
--- a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
@@ -1,29 +1,21 @@
-import Vue from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import emptyState from '~/ide/components/commit_sidebar/empty_state.vue';
+import { shallowMount } from '@vue/test-utils';
+import EmptyState from '~/ide/components/commit_sidebar/empty_state.vue';
 import { createStore } from '~/ide/stores';
 
-describe('IDE commit panel empty state', () => {
-  let vm;
-  let store;
+describe('IDE commit panel EmptyState component', () => {
+  let wrapper;
 
   beforeEach(() => {
-    store = createStore();
-
-    const Component = Vue.extend(emptyState);
-
-    Vue.set(store.state, 'noChangesStateSvgPath', 'no-changes');
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$mount();
+    const store = createStore();
+    store.state.noChangesStateSvgPath = 'no-changes';
+    wrapper = shallowMount(EmptyState, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders no changes text when last commit message is empty', () => {
-    expect(vm.$el.textContent).toContain('No changes');
+    expect(wrapper.find('h4').text()).toBe('No changes');
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js
index 1d42512c9ee..81c81fc0a9f 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js
@@ -1,51 +1,47 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
-import { createStore } from '~/ide/stores';
+import { shallowMount } from '@vue/test-utils';
+import CommitSidebarList from '~/ide/components/commit_sidebar/list.vue';
+import ListItem from '~/ide/components/commit_sidebar/list_item.vue';
 import { file } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list', () => {
-  let store;
-  let vm;
-
-  beforeEach(() => {
-    store = createStore();
-
-    const Component = Vue.extend(commitSidebarList);
-
-    vm = createComponentWithStore(Component, store, {
-      title: 'Staged',
-      fileList: [],
-      action: 'stageAllChanges',
-      actionBtnText: 'stage all',
-      actionBtnIcon: 'history',
-      activeFileKey: 'staged-testing',
-      keyPrefix: 'staged',
+  let wrapper;
+
+  const mountComponent = ({ fileList }) =>
+    shallowMount(CommitSidebarList, {
+      propsData: {
+        title: 'Staged',
+        fileList,
+        action: 'stageAllChanges',
+        actionBtnText: 'stage all',
+        actionBtnIcon: 'history',
+        activeFileKey: 'staged-testing',
+        keyPrefix: 'staged',
+      },
     });
 
-    vm.$mount();
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('with a list of files', () => {
     beforeEach(async () => {
       const f = file('file name');
       f.changed = true;
-      vm.fileList.push(f);
-      await nextTick();
+      wrapper = mountComponent({ fileList: [f] });
     });
 
     it('renders list', () => {
-      expect(vm.$el.querySelectorAll('.multi-file-commit-list > li').length).toBe(1);
+      expect(wrapper.findAllComponents(ListItem)).toHaveLength(1);
     });
   });
 
-  describe('empty files array', () => {
-    it('renders no changes text when empty', () => {
-      expect(vm.$el.textContent).toContain('No changes');
+  describe('with empty files array', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ fileList: [] });
+    });
+
+    it('renders no changes text ', () => {
+      expect(wrapper.text()).toContain('No changes');
     });
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
index 52e35bdbb73..63d51953915 100644
--- a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
@@ -1,32 +1,22 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import successMessage from '~/ide/components/commit_sidebar/success_message.vue';
+import { shallowMount } from '@vue/test-utils';
+import SuccessMessage from '~/ide/components/commit_sidebar/success_message.vue';
 import { createStore } from '~/ide/stores';
 
 describe('IDE commit panel successful commit state', () => {
-  let vm;
-  let store;
+  let wrapper;
 
   beforeEach(() => {
-    store = createStore();
-
-    const Component = Vue.extend(successMessage);
-
-    vm = createComponentWithStore(Component, store, {
-      committedStateSvgPath: 'committed-state',
-    });
-
-    vm.$mount();
+    const store = createStore();
+    store.state.committedStateSvgPath = 'committed-state';
+    store.state.lastCommitMsg = 'testing commit message';
+    wrapper = shallowMount(SuccessMessage, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('renders last commit message when it exists', async () => {
-    vm.$store.state.lastCommitMsg = 'testing commit message';
-
-    await nextTick();
-    expect(vm.$el.textContent).toContain('testing commit message');
+  it('renders last commit message when it exists', () => {
+    expect(wrapper.text()).toContain('testing commit message');
   });
 });
diff --git a/spec/frontend/ide/components/ide_tree_list_spec.js b/spec/frontend/ide/components/ide_tree_list_spec.js
index a85c52f5e86..0f61aa80e53 100644
--- a/spec/frontend/ide/components/ide_tree_list_spec.js
+++ b/spec/frontend/ide/components/ide_tree_list_spec.js
@@ -1,82 +1,72 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { GlSkeletonLoader } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import IdeTreeList from '~/ide/components/ide_tree_list.vue';
 import { createStore } from '~/ide/stores';
+import FileTree from '~/vue_shared/components/file_tree.vue';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
-describe('IDE tree list', () => {
-  const Component = Vue.extend(IdeTreeList);
-  const normalBranchTree = [file('fileName')];
-  const emptyBranchTree = [];
-  let vm;
-  let store;
+describe('IdeTreeList component', () => {
+  let wrapper;
 
-  const bootstrapWithTree = (tree = normalBranchTree) => {
+  const mountComponent = ({ tree, loading = false } = {}) => {
+    const store = createStore();
     store.state.currentProjectId = 'abcproject';
     store.state.currentBranchId = 'main';
     store.state.projects.abcproject = { ...projectData };
-    Vue.set(store.state.trees, 'abcproject/main', {
-      tree,
-      loading: false,
-    });
+    Vue.set(store.state.trees, 'abcproject/main', { tree, loading });
 
-    vm = createComponentWithStore(Component, store, {
-      viewerType: 'edit',
+    wrapper = shallowMount(IdeTreeList, {
+      propsData: {
+        viewerType: 'edit',
+      },
+      store,
     });
   };
 
-  beforeEach(() => {
-    store = createStore();
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('normal branch', () => {
-    beforeEach(() => {
-      bootstrapWithTree();
-
-      jest.spyOn(vm, '$emit').mockImplementation(() => {});
-
-      vm.$mount();
-    });
+    const tree = [file('fileName')];
 
     it('emits tree-ready event', () => {
-      expect(vm.$emit).toHaveBeenCalledTimes(1);
-      expect(vm.$emit).toHaveBeenCalledWith('tree-ready');
+      mountComponent({ tree });
+
+      expect(wrapper.emitted('tree-ready')).toEqual([[]]);
     });
 
-    it('renders loading indicator', async () => {
-      store.state.trees['abcproject/main'].loading = true;
+    it('renders loading indicator', () => {
+      mountComponent({ tree, loading: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
+      expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(3);
     });
 
     it('renders list of files', () => {
-      expect(vm.$el.textContent).toContain('fileName');
+      mountComponent({ tree });
+
+      expect(wrapper.findAllComponents(FileTree)).toHaveLength(1);
+      expect(wrapper.findComponent(FileTree).props('file')).toEqual(tree[0]);
     });
   });
 
   describe('empty-branch state', () => {
     beforeEach(() => {
-      bootstrapWithTree(emptyBranchTree);
-
-      jest.spyOn(vm, '$emit').mockImplementation(() => {});
+      mountComponent({ tree: [] });
+    });
 
-      vm.$mount();
+    it('emits tree-ready event', () => {
+      expect(wrapper.emitted('tree-ready')).toEqual([[]]);
     });
 
-    it('still emits tree-ready event', () => {
-      expect(vm.$emit).toHaveBeenCalledWith('tree-ready');
+    it('does not render files', () => {
+      expect(wrapper.findAllComponents(FileTree)).toHaveLength(0);
     });
 
-    it('does not load files if the branch is empty', () => {
-      expect(vm.$el.textContent).not.toContain('fileName');
-      expect(vm.$el.textContent).toContain('No files');
+    it('renders empty state text', () => {
+      expect(wrapper.text()).toBe('No files');
     });
   });
 });
diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js
index b44651481e9..593fe6bf5a8 100644
--- a/spec/frontend/ide/components/repo_editor_spec.js
+++ b/spec/frontend/ide/components/repo_editor_spec.js
@@ -1,3 +1,4 @@
+import { GlTab } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { editor as monacoEditor, Range } from 'monaco-editor';
 import Vue, { nextTick } from 'vue';
@@ -125,7 +126,7 @@ describe('RepoEditor', () => {
   };
 
   const findEditor = () => wrapper.find('[data-testid="editor-container"]');
-  const findTabs = () => wrapper.findAll('.ide-mode-tabs .nav-links li');
+  const findTabs = () => wrapper.findAllComponents(GlTab);
   const findPreviewTab = () => wrapper.find('[data-testid="preview-tab"]');
 
   beforeEach(() => {
@@ -201,12 +202,12 @@ describe('RepoEditor', () => {
         const tabs = findTabs();
 
         expect(tabs).toHaveLength(2);
-        expect(tabs.at(0).text()).toBe('Edit');
-        expect(tabs.at(1).text()).toBe('Preview Markdown');
+        expect(tabs.at(0).element.dataset.testid).toBe('edit-tab');
+        expect(tabs.at(1).element.dataset.testid).toBe('preview-tab');
       });
 
       it('renders markdown for tempFile', async () => {
-        findPreviewTab().trigger('click');
+        findPreviewTab().vm.$emit('click');
         await waitForPromises();
         expect(wrapper.find(ContentViewer).html()).toContain(dummyFile.text.content);
       });