diff options
-rw-r--r-- | spec/frontend/vue_shared/components/file_icon_spec.js | 75 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/file_icon_spec.js | 92 |
2 files changed, 75 insertions, 92 deletions
diff --git a/spec/frontend/vue_shared/components/file_icon_spec.js b/spec/frontend/vue_shared/components/file_icon_spec.js new file mode 100644 index 00000000000..328eec0a80a --- /dev/null +++ b/spec/frontend/vue_shared/components/file_icon_spec.js @@ -0,0 +1,75 @@ +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'); + }); +}); diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js deleted file mode 100644 index 1f61e19fa84..00000000000 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ /dev/null @@ -1,92 +0,0 @@ -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); - }); -}); |