Merge branch 'ce-xanf-move-file-icon-spec-to-jest' into 'master'
Resolve "Migrate spec/javascripts/vue_shared/components/file_icon_spec.js to Jest" See merge request gitlab-org/gitlab-ce!32278
This commit is contained in:
commit
1ca42a2479
|
@ -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');
|
||||
});
|
||||
});
|
|
@ -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);
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue