1 files changed, 126 insertions, 88 deletions

diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js
index a7b07a9f0e2..ff3852b6775 100644
--- a/spec/frontend/ide/components/ide_spec.js
+++ b/spec/frontend/ide/components/ide_spec.js
@@ -1,127 +1,165 @@
-import Vue from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { createStore } from '~/ide/stores';
+import ErrorMessage from '~/ide/components/error_message.vue';
+import FindFile from '~/vue_shared/components/file_finder/index.vue';
+import CommitEditorHeader from '~/ide/components/commit_sidebar/editor_header.vue';
+import RepoTabs from '~/ide/components/repo_tabs.vue';
+import IdeStatusBar from '~/ide/components/ide_status_bar.vue';
+import RightPane from '~/ide/components/panes/right.vue';
+import NewModal from '~/ide/components/new_dropdown/modal.vue';
+
 import ide from '~/ide/components/ide.vue';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
-import extendStore from '~/ide/stores/extend';
-
-let store;
 
-function bootstrap(projData) {
-  store = createStore();
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
-  extendStore(store, document.createElement('div'));
+describe('WebIDE', () => {
+  const emptyProjData = { ...projectData, empty_repo: true, branches: {} };
 
-  const Component = Vue.extend(ide);
+  let wrapper;
 
-  store.state.currentProjectId = 'abcproject';
-  store.state.currentBranchId = 'master';
-  store.state.projects.abcproject = { ...projData };
-  Vue.set(store.state.trees, 'abcproject/master', {
-    tree: [],
-    loading: false,
-  });
-
-  return createComponentWithStore(Component, store, {
-    emptyStateSvgPath: 'svg',
-    noChangesStateSvgPath: 'svg',
-    committedStateSvgPath: 'svg',
-  });
-}
+  function createComponent({ projData = emptyProjData, state = {} } = {}) {
+    const store = createStore();
 
-describe('ide component, empty repo', () => {
-  let vm;
+    store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = 'master';
+    store.state.projects.abcproject = { ...projData };
+    store.state.trees['abcproject/master'] = {
+      tree: [],
+      loading: false,
+    };
+    Object.keys(state).forEach(key => {
+      store.state[key] = state[key];
+    });
 
-  beforeEach(() => {
-    const emptyProjData = { ...projectData, empty_repo: true, branches: {} };
-    vm = bootstrap(emptyProjData);
-    vm.$mount();
-  });
+    return shallowMount(ide, {
+      store,
+      localVue,
+      stubs: {
+        ErrorMessage,
+        GlButton,
+        GlLoadingIcon,
+        CommitEditorHeader,
+        RepoTabs,
+        IdeStatusBar,
+        FindFile,
+        RightPane,
+        NewModal,
+      },
+    });
+  }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('renders "New file" button in empty repo', done => {
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.ide-empty-state button[title="New file"]')).not.toBeNull();
-      done();
+  describe('ide component, empty repo', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        projData: {
+          empty_repo: true,
+        },
+      });
     });
-  });
-});
-
-describe('ide component, non-empty repo', () => {
-  let vm;
 
-  beforeEach(() => {
-    vm = bootstrap(projectData);
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
+    it('renders "New file" button in empty repo', async () => {
+      expect(wrapper.find('[title="New file"]').exists()).toBe(true);
+    });
   });
 
-  it('shows error message when set', done => {
-    expect(vm.$el.querySelector('.gl-alert')).toBe(null);
+  describe('ide component, non-empty repo', () => {
+    describe('error message', () => {
+      it('does not show error message when it is not set', () => {
+        wrapper = createComponent({
+          state: {
+            errorMessage: null,
+          },
+        });
 
-    vm.$store.state.errorMessage = {
-      text: 'error',
-    };
+        expect(wrapper.find(ErrorMessage).exists()).toBe(false);
+      });
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.gl-alert')).not.toBe(null);
+      it('shows error message when set', () => {
+        wrapper = createComponent({
+          state: {
+            errorMessage: {
+              text: 'error',
+            },
+          },
+        });
 
-      done();
+        expect(wrapper.find(ErrorMessage).exists()).toBe(true);
+      });
     });
-  });
 
-  describe('onBeforeUnload', () => {
-    it('returns undefined when no staged files or changed files', () => {
-      expect(vm.onBeforeUnload()).toBe(undefined);
-    });
+    describe('onBeforeUnload', () => {
+      it('returns undefined when no staged files or changed files', () => {
+        wrapper = createComponent();
+        expect(wrapper.vm.onBeforeUnload()).toBe(undefined);
+      });
 
-    it('returns warning text when their are changed files', () => {
-      vm.$store.state.changedFiles.push(file());
+      it('returns warning text when their are changed files', () => {
+        wrapper = createComponent({
+          state: {
+            changedFiles: [file()],
+          },
+        });
 
-      expect(vm.onBeforeUnload()).toBe('Are you sure you want to lose unsaved changes?');
-    });
+        expect(wrapper.vm.onBeforeUnload()).toBe('Are you sure you want to lose unsaved changes?');
+      });
 
-    it('returns warning text when their are staged files', () => {
-      vm.$store.state.stagedFiles.push(file());
+      it('returns warning text when their are staged files', () => {
+        wrapper = createComponent({
+          state: {
+            stagedFiles: [file()],
+          },
+        });
 
-      expect(vm.onBeforeUnload()).toBe('Are you sure you want to lose unsaved changes?');
-    });
+        expect(wrapper.vm.onBeforeUnload()).toBe('Are you sure you want to lose unsaved changes?');
+      });
 
-    it('updates event object', () => {
-      const event = {};
-      vm.$store.state.stagedFiles.push(file());
+      it('updates event object', () => {
+        const event = {};
+        wrapper = createComponent({
+          state: {
+            stagedFiles: [file()],
+          },
+        });
 
-      vm.onBeforeUnload(event);
+        wrapper.vm.onBeforeUnload(event);
 
-      expect(event.returnValue).toBe('Are you sure you want to lose unsaved changes?');
+        expect(event.returnValue).toBe('Are you sure you want to lose unsaved changes?');
+      });
     });
-  });
 
-  describe('non-existent branch', () => {
-    it('does not render "New file" button for non-existent branch when repo is not empty', done => {
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-empty-state button[title="New file"]')).toBeNull();
-        done();
+    describe('non-existent branch', () => {
+      it('does not render "New file" button for non-existent branch when repo is not empty', () => {
+        wrapper = createComponent({
+          state: {
+            projects: {},
+          },
+        });
+
+        expect(wrapper.find('[title="New file"]').exists()).toBe(false);
       });
     });
-  });
 
-  describe('branch with files', () => {
-    beforeEach(() => {
-      store.state.trees['abcproject/master'].tree = [file()];
-    });
+    describe('branch with files', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          projData: {
+            empty_repo: false,
+          },
+        });
+      });
 
-    it('does not render "New file" button', done => {
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-empty-state button[title="New file"]')).toBeNull();
-        done();
+      it('does not render "New file" button', () => {
+        expect(wrapper.find('[title="New file"]').exists()).toBe(false);
       });
     });
   });