1 files changed, 64 insertions, 61 deletions

diff --git a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
index dea920ecb5e..c9571d39acb 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
@@ -1,133 +1,136 @@
+import { mount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import listItem from '~/ide/components/commit_sidebar/list_item.vue';
+import ListItem from '~/ide/components/commit_sidebar/list_item.vue';
 import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
 import { file } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list item', () => {
-  let vm;
-  let f;
+  let wrapper;
+  let testFile;
   let findPathEl;
   let store;
   let router;
 
   beforeEach(() => {
     store = createStore();
-    router = createRouter(store);
+    jest.spyOn(store, 'dispatch');
 
-    const Component = Vue.extend(listItem);
+    router = createRouter(store);
 
-    f = file('test-file');
+    testFile = file('test-file');
 
-    store.state.entries[f.path] = f;
+    store.state.entries[testFile.path] = testFile;
 
-    vm = createComponentWithStore(Component, store, {
-      file: f,
-      activeFileKey: `staged-${f.key}`,
-    }).$mount();
+    wrapper = mount(ListItem, {
+      store,
+      propsData: {
+        file: testFile,
+        activeFileKey: `staged-${testFile.key}`,
+      },
+    });
 
-    findPathEl = vm.$el.querySelector('.multi-file-commit-list-path');
+    findPathEl = wrapper.find('.multi-file-commit-list-path');
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  const findPathText = () => trimText(findPathEl.textContent);
+  const findPathText = () => trimText(findPathEl.text());
 
   it('renders file path', () => {
-    expect(findPathText()).toContain(f.path);
+    expect(findPathText()).toContain(testFile.path);
   });
 
   it('correctly renders renamed entries', async () => {
-    Vue.set(vm.file, 'prevName', 'Old name');
-
+    Vue.set(testFile, 'prevName', 'Old name');
     await nextTick();
-    expect(findPathText()).toEqual(`Old name → ${f.name}`);
+
+    expect(findPathText()).toEqual(`Old name → ${testFile.name}`);
   });
 
   it('correctly renders entry, the name of which did not change after rename (as within a folder)', async () => {
-    Vue.set(vm.file, 'prevName', f.name);
-
+    Vue.set(testFile, 'prevName', testFile.name);
     await nextTick();
-    expect(findPathText()).toEqual(f.name);
+
+    expect(findPathText()).toEqual(testFile.name);
   });
 
   it('opens a closed file in the editor when clicking the file path', async () => {
-    jest.spyOn(vm, 'openPendingTab');
     jest.spyOn(router, 'push').mockImplementation(() => {});
 
-    findPathEl.click();
-
-    await nextTick();
+    await findPathEl.trigger('click');
 
-    expect(vm.openPendingTab).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', expect.anything());
     expect(router.push).toHaveBeenCalled();
   });
 
   it('calls updateViewer with diff when clicking file', async () => {
-    jest.spyOn(vm, 'openFileInEditor');
-    jest.spyOn(vm, 'updateViewer');
     jest.spyOn(router, 'push').mockImplementation(() => {});
 
-    findPathEl.click();
-
+    await findPathEl.trigger('click');
     await waitForPromises();
 
-    expect(vm.updateViewer).toHaveBeenCalledWith('diff');
+    expect(store.dispatch).toHaveBeenCalledWith('updateViewer', 'diff');
   });
 
-  describe('computed', () => {
-    describe('iconName', () => {
-      it('returns modified when not a tempFile', () => {
-        expect(vm.iconName).toBe('file-modified');
-      });
+  describe('icon name', () => {
+    const getIconName = () => wrapper.findComponent(GlIcon).props('name');
+
+    it('is modified when not a tempFile', () => {
+      expect(getIconName()).toBe('file-modified');
+    });
 
-      it('returns addition when not a tempFile', () => {
-        f.tempFile = true;
+    it('is addition when is a tempFile', async () => {
+      testFile.tempFile = true;
+      await nextTick();
 
-        expect(vm.iconName).toBe('file-addition');
-      });
+      expect(getIconName()).toBe('file-addition');
+    });
 
-      it('returns deletion', () => {
-        f.deleted = true;
+    it('is deletion when is deleted', async () => {
+      testFile.deleted = true;
+      await nextTick();
 
-        expect(vm.iconName).toBe('file-deletion');
-      });
+      expect(getIconName()).toBe('file-deletion');
     });
+  });
 
-    describe('iconClass', () => {
-      it('returns modified when not a tempFile', () => {
-        expect(vm.iconClass).toContain('ide-file-modified');
-      });
+  describe('icon class', () => {
+    const getIconClass = () => wrapper.findComponent(GlIcon).classes();
 
-      it('returns addition when not a tempFile', () => {
-        f.tempFile = true;
+    it('is modified when not a tempFile', () => {
+      expect(getIconClass()).toContain('ide-file-modified');
+    });
 
-        expect(vm.iconClass).toContain('ide-file-addition');
-      });
+    it('is addition when is a tempFile', async () => {
+      testFile.tempFile = true;
+      await nextTick();
 
-      it('returns deletion', () => {
-        f.deleted = true;
+      expect(getIconClass()).toContain('ide-file-addition');
+    });
 
-        expect(vm.iconClass).toContain('ide-file-deletion');
-      });
+    it('returns deletion when is deleted', async () => {
+      testFile.deleted = true;
+      await nextTick();
+
+      expect(getIconClass()).toContain('ide-file-deletion');
     });
   });
 
   describe('is active', () => {
     it('does not add active class when dont keys match', () => {
-      expect(vm.$el.querySelector('.is-active')).toBe(null);
+      expect(wrapper.find('.is-active').exists()).toBe(false);
     });
 
     it('adds active class when keys match', async () => {
-      vm.keyPrefix = 'staged';
+      await wrapper.setProps({ keyPrefix: 'staged' });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.is-active')).not.toBe(null);
+      expect(wrapper.find('.is-active').exists()).toBe(true);
     });
   });
 });