1 files changed, 34 insertions, 44 deletions

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