summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/ide/components/repo_file.vue2
-rw-r--r--app/assets/javascripts/ide/components/repo_tab.vue2
-rw-r--r--app/assets/javascripts/vue_shared/components/file_icon.vue6
-rw-r--r--app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js11
-rw-r--r--spec/javascripts/vue_shared/components/file_icon_spec.js93
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);