Migrated file_row_spec.js from Karma to Jest

Migrated spec/javascripts/vue_shared/components/file_row_spec.js
from Karma to Jest

spec/javascripts/vue_shared/components/file_row_spec.js → spec/frontend/vue_shared/components/file_row_spec.js

-import Vue from 'vue';
-import { file } from 'spec/ide/helpers';
+import { file } from 'jest/ide/helpers';
 import FileRow from '~/vue_shared/components/file_row.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 
 describe('File row component', () => {
-  let vm;
+  let wrapper;
 
   function createComponent(propsData) {
-    const FileRowComponent = Vue.extend(FileRow);
-
-    vm = mountComponent(FileRowComponent, propsData);
+    wrapper = mount(FileRow, {
+      propsData,
+    });
   }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders name', () => {
+    const fileName = 't4';
     createComponent({
-      file: file('t4'),
+      file: file(fileName),
       level: 0,
     });
 
-    const name = vm.$el.querySelector('.file-row-name');
+    const name = wrapper.find('.file-row-name');
 
-    expect(name.textContent.trim()).toEqual(vm.file.name);
+    expect(name.text().trim()).toEqual(fileName);
   });
 
   it('emits toggleTreeOpen on click', () => {
+    const fileName = 't3';
     createComponent({
       file: {
-        ...file('t3'),
+        ...file(fileName),
         type: 'tree',
       },
       level: 0,
     });
-    spyOn(vm, '$emit').and.stub();
+    jest.spyOn(wrapper.vm, '$emit');
 
-    vm.$el.click();
+    wrapper.element.click();
 
-    expect(vm.$emit).toHaveBeenCalledWith('toggleTreeOpen', vm.file.path);
+    expect(wrapper.vm.$emit).toHaveBeenCalledWith('toggleTreeOpen', fileName);
   });
 
-  it('calls scrollIntoView if made active', done => {
+  it('calls scrollIntoView if made active', () => {
     createComponent({
       file: {
         ...file(),
@@ -52,14 +53,16 @@ describe('File row component', () => {
       level: 0,
     });
 
-    spyOn(vm, 'scrollIntoView').and.stub();
+    jest.spyOn(wrapper.vm, 'scrollIntoView');
 
-    vm.file.active = true;
-
-    vm.$nextTick(() => {
-      expect(vm.scrollIntoView).toHaveBeenCalled();
+    wrapper.setProps({
+      file: Object.assign({}, wrapper.props('file'), {
+        active: true,
+      }),
+    });
 
-      done();
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.vm.scrollIntoView).toHaveBeenCalled();
     });
   });
 
@@ -69,7 +72,7 @@ describe('File row component', () => {
       level: 2,
     });
 
-    expect(vm.$el.querySelector('.file-row-name').style.marginLeft).toBe('32px');
+    expect(wrapper.find('.file-row-name').element.style.marginLeft).toBe('32px');
   });
 
   it('renders header for file', () => {
@@ -82,6 +85,6 @@ describe('File row component', () => {
       level: 0,
     });
 
-    expect(vm.$el.classList).toContain('js-file-row-header');
+    expect(wrapper.element.classList).toContain('js-file-row-header');
   });
 });