1 files changed, 71 insertions, 53 deletions

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);
     });
   });
 });