diff options
5 files changed, 53 insertions, 61 deletions
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index e9bb12627f7..c8b0441d81c 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -93,7 +93,7 @@ class="repo-file-name" > <file-icon - :fileName="file.name" + :file-name="file.name" :loading="file.loading" :folder="file.type === 'tree'" :opened="file.opened" diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue index 7cf43af2ece..e7684884b2c 100644 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -67,7 +67,7 @@ export default { :title="tab.url" > <file-icon - :fileName="tab.name" + :file-name="tab.name" :size="16" > </file-icon> diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue index b6a5246085f..65c64967fdc 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/file_icon.vue @@ -1,5 +1,5 @@ <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" diff --git a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js index f9ede3fb070..9ffbaae3ea5 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js +++ b/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() : ''] || + ''; +} diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js index b43c07ffa3e..d99b17bdc79 100644 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/file_icon_spec.js @@ -1,87 +1,80 @@ 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); |