Refactored Karma spec to Jest for file_icon

spec/frontend/vue_shared/components/file_icon_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+describe('File Icon component', () => {
+  let wrapper;
+  const findIcon = () => wrapper.find('svg');
+  const getIconName = () =>
+    findIcon()
+      .find('use')
+      .element.getAttribute('xlink:href')
+      .replace(`${gon.sprite_file_icons}#`, '');
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(FileIcon, {
+      sync: false,
+      propsData: { ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render a span element and an icon', () => {
+    createComponent({
+      fileName: 'test.js',
+    });
+
+    expect(wrapper.element.tagName).toEqual('SPAN');
+    expect(findIcon().exists()).toBeDefined();
+  });
+
+  it.each`
+    fileName        | iconName
+    ${'test.js'}    | ${'javascript'}
+    ${'test.png'}   | ${'image'}
+    ${'webpack.js'} | ${'webpack'}
+  `('should render a $iconName icon based on file ending', ({ fileName, iconName }) => {
+    createComponent({ fileName });
+    expect(getIconName()).toBe(iconName);
+  });
+
+  it('should render a standard folder icon', () => {
+    createComponent({
+      fileName: 'js',
+      folder: true,
+    });
+
+    expect(findIcon().exists()).toBe(false);
+    expect(wrapper.find(Icon).props('cssClasses')).toContain('folder-icon');
+  });
+
+  it('should render a loading icon', () => {
+    createComponent({
+      fileName: 'test.js',
+      loading: true,
+    });
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  });
+
+  it('should add a special class and a size class', () => {
+    const size = 120;
+    createComponent({
+      fileName: 'test.js',
+      cssClasses: 'extraclasses',
+      size,
+    });
+
+    expect(findIcon().classes()).toContain(`s${size}`);
+    expect(findIcon().classes()).toContain('extraclasses');
+  });
+});

spec/javascripts/vue_shared/components/file_icon_spec.js

-import Vue from 'vue';
-import fileIcon from '~/vue_shared/components/file_icon.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('File Icon component', () => {
-  let vm;
-  let FileIcon;
-
-  beforeEach(() => {
-    FileIcon = Vue.extend(fileIcon);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('should render a span element with an svg', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'test.js',
-    });
-
-    expect(vm.$el.tagName).toEqual('SPAN');
-    expect(vm.$el.querySelector('span > svg')).toBeDefined();
-  });
-
-  it('should render a javascript icon based on file ending', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'test.js',
-    });
-
-    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(
-      `${gon.sprite_file_icons}#javascript`,
-    );
-  });
-
-  it('should render a image icon based on file ending', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'test.png',
-    });
-
-    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(
-      `${gon.sprite_file_icons}#image`,
-    );
-  });
-
-  it('should render a webpack icon based on file namer', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'webpack.js',
-    });
-
-    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(
-      `${gon.sprite_file_icons}#webpack`,
-    );
-  });
-
-  it('should render a standard folder icon', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'js',
-      folder: true,
-    });
-
-    expect(vm.$el.querySelector('span > svg > use').getAttribute('xlink:href')).toBe(
-      `${gon.sprite_file_icons}#folder`,
-    );
-  });
-
-  it('should render a loading icon', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'test.js',
-      loading: true,
-    });
-
-    const { classList } = vm.$el.querySelector('.loading-container span');
-
-    expect(classList.contains('gl-spinner')).toEqual(true);
-  });
-
-  it('should add a special class and a size class', () => {
-    vm = mountComponent(FileIcon, {
-      fileName: 'test.js',
-      cssClasses: 'extraclasses',
-      size: 120,
-    });
-
-    const { classList } = vm.$el.firstChild;
-    const containsSizeClass = classList.contains('s120');
-    const containsCustomClass = classList.contains('extraclasses');
-
-    expect(containsSizeClass).toBe(true);
-    expect(containsCustomClass).toBe(true);
-  });
-});