Fixes Based on MR Discusssions

app/assets/javascripts/ide/components/repo_file.vue

@@ -95,7 +95,7 @@
         class="repo-file-name"
       >
         <file-icon
-          :fileName="file.name"
+          :file-name="file.name"
           :loading="file.loading"
           :folder="file.type === 'tree'"
           :opened="file.opened"

app/assets/javascripts/ide/components/repo_tab.vue

@@ -71,7 +71,7 @@ export default {
       :title="tab.url"
     >
       <file-icon
-        :fileName="tab.name"
+        :file-name="tab.name"
         :size="16"
       >
       </file-icon>

app/assets/javascripts/vue_shared/components/file_icon.vue

 <script>
-  import { getIconForFile } from './file_icon/file_icon_map';
+  import getIconForFile from './file_icon/file_icon_map';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import icon from '../../vue_shared/components/icon.vue';
 
@@ -43,7 +43,7 @@
       size: {
         type: Number,
         required: false,
-        default: 0,
+        default: 16,
       },
 
       cssClasses: {
@@ -82,7 +82,7 @@
     <icon
       v-if="!loading && folder"
       :name="folderIconName"
-      :size="size || 16"
+      :size="size"
     />
     <loading-icon
       v-if="loading"

app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js

@@ -582,9 +582,8 @@ const fileNameIcons = {
   '.drone.yml': 'drone',
 };
 
-export const getIconForFile = name =>
-  fileNameIcons[name] ||
-  fileExtensionIcons[name ? name.split('.').pop() : ''] ||
-  '';
-
-export default getIconForFile;
+export default function getIconForFile(name) {
+  return fileNameIcons[name] ||
+         fileExtensionIcons[name ? name.split('.').pop() : ''] ||
+         '';
+}

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 '../../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', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'test.js',
-      },
-    }).$mount();
-
-    expect(component.$el.tagName).toEqual('SPAN');
-    expect(component.$el.querySelector('span > svg')).toBeDefined();
+    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', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'test.js',
-      },
-    }).$mount();
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+    });
 
-    expect(component.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#javascript`);
+    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#javascript`);
   });
 
   it('should render a image icon based on file ending', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'test.png',
-      },
-    }).$mount();
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.png',
+    });
 
-    expect(component.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#image`);
+    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#image`);
   });
 
   it('should render a webpack icon based on file namer', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'webpack.js',
-      },
-    }).$mount();
+    vm = mountComponent(FileIcon, {
+      fileName: 'webpack.js',
+    });
 
-    expect(component.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#webpack`);
+    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#webpack`);
   });
 
   it('should render a standard folder icon', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'js',
-        folder: true,
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('span > svg > use').getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#folder`);
+    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', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'test.js',
-        loading: true,
-      },
-    }).$mount();
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+      loading: true,
+    });
 
     expect(
-      component.$el.querySelector('i').getAttribute('class'),
+      vm.$el.querySelector('i').getAttribute('class'),
     ).toEqual('fa fa-spin fa-spinner fa-1x');
   });
 
   it('should add a special class and a size class', () => {
-    const component = new FileIcon({
-      propsData: {
-        fileName: 'test.js',
-        cssClasses: 'extraclasses',
-        size: 120,
-      },
-    }).$mount();
-
-    const classList = component.$el.firstChild.classList;
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+      cssClasses: 'extraclasses',
+      size: 120,
+    });
+
+    const classList = vm.$el.firstChild.classList;
     const containsSizeClass = classList.contains('s120');
     const containsCustomClass = classList.contains('extraclasses');
     expect(containsSizeClass).toBe(true);