Migrate tree_list_spec from karma to jest

spec/javascripts/diffs/components/tree_list_spec.js → spec/frontend/diffs/components/tree_list_spec.js

-import Vue from 'vue';
 import Vuex from 'vuex';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mount, createLocalVue } from '@vue/test-utils';
 import TreeList from '~/diffs/components/tree_list.vue';
 import createStore from '~/diffs/store/modules';
 
 describe('Diffs tree list component', () => {
-  let Component;
-  let vm;
-
-  beforeAll(() => {
-    Component = Vue.extend(TreeList);
-  });
-
-  beforeEach(() => {
-    Vue.use(Vuex);
+  let wrapper;
+  const getFileRows = () => wrapper.findAll('.file-row');
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
 
+  const createComponent = state => {
     const store = new Vuex.Store({
       modules: {
         diffs: createStore(),
@@ -22,26 +17,38 @@ describe('Diffs tree list component', () => {
     });
 
     // Setup initial state
-    store.state.diffs.addedLines = 10;
-    store.state.diffs.removedLines = 20;
     store.state.diffs.diffFiles.push('test');
+    store.state.diffs = {
+      addedLines: 10,
+      removedLines: 20,
+      ...store.state.diffs,
+      ...state,
+    };
+
+    wrapper = mount(TreeList, {
+      store,
+      localVue,
+      propsData: { hideFileStats: false },
+    });
+  };
 
+  beforeEach(() => {
     localStorage.removeItem('mr_diff_tree_list');
 
-    vm = mountComponentWithStore(Component, { store, props: { hideFileStats: false } });
+    createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders empty text', () => {
-    expect(vm.$el.textContent).toContain('No files found');
+    expect(wrapper.text()).toContain('No files found');
   });
 
   describe('with files', () => {
-    beforeEach(done => {
-      Object.assign(vm.$store.state.diffs.treeEntries, {
+    beforeEach(() => {
+      const treeEntries = {
         'index.js': {
           addedLines: 0,
           changed: true,
@@ -62,64 +69,69 @@ describe('Diffs tree list component', () => {
           type: 'tree',
           tree: [],
         },
+      };
+
+      createComponent({
+        treeEntries,
+        tree: [treeEntries['index.js'], treeEntries.app],
       });
-      vm.$store.state.diffs.tree = [
-        vm.$store.state.diffs.treeEntries['index.js'],
-        vm.$store.state.diffs.treeEntries.app,
-      ];
 
-      vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('renders tree', () => {
-      expect(vm.$el.querySelectorAll('.file-row').length).toBe(2);
-      expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js');
-      expect(vm.$el.querySelectorAll('.file-row')[1].textContent).toContain('app');
+      expect(getFileRows()).toHaveLength(2);
+      expect(
+        getFileRows()
+          .at(0)
+          .text(),
+      ).toContain('index.js');
+      expect(
+        getFileRows()
+          .at(1)
+          .text(),
+      ).toContain('app');
     });
 
-    it('hides file stats', done => {
-      vm.hideFileStats = true;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-row-stats')).toBe(null);
+    it('hides file stats', () => {
+      wrapper.setProps({ hideFileStats: true });
 
-        done();
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.file-row-stats').exists()).toBe(false);
       });
     });
 
     it('calls toggleTreeOpen when clicking folder', () => {
-      spyOn(vm.$store, 'dispatch').and.stub();
+      jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
 
-      vm.$el.querySelectorAll('.file-row')[1].click();
+      getFileRows()
+        .at(1)
+        .trigger('click');
 
-      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
+      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
     });
 
     it('calls scrollToFile when clicking blob', () => {
-      spyOn(vm.$store, 'dispatch').and.stub();
+      jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
 
-      vm.$el.querySelector('.file-row').click();
+      wrapper.find('.file-row').trigger('click');
 
-      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'app/index.js');
+      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'app/index.js');
     });
 
-    it('renders as file list when renderTreeList is false', done => {
-      vm.$store.state.diffs.renderTreeList = false;
+    it('renders as file list when renderTreeList is false', () => {
+      wrapper.vm.$store.state.diffs.renderTreeList = false;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelectorAll('.file-row').length).toBe(1);
-
-        done();
+      return wrapper.vm.$nextTick().then(() => {
+        expect(getFileRows()).toHaveLength(1);
       });
     });
 
-    it('renders file paths when renderTreeList is false', done => {
-      vm.$store.state.diffs.renderTreeList = false;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-row').textContent).toContain('index.js');
+    it('renders file paths when renderTreeList is false', () => {
+      wrapper.vm.$store.state.diffs.renderTreeList = false;
 
-        done();
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.file-row').text()).toContain('index.js');
       });
     });
   });