Commit 79bdb155 authored by Paul Slaughter's avatar Paul Slaughter Committed by Filipa Lacerda

Rewrite changed_file_icon_spec in Jest

- Uses vue-test-utils
- More complete coverage with parameterized tests
parent a0ec8e9c
......@@ -87,7 +87,6 @@ export default {
:file="file"
:show-tooltip="true"
:show-staged-icon="true"
:force-modified-icon="true"
/>
<new-dropdown
:type="file.type"
......
......@@ -26,11 +26,6 @@ export default {
required: false,
default: false,
},
forceModifiedIcon: {
type: Boolean,
required: false,
default: false,
},
size: {
type: Number,
required: false,
......@@ -48,8 +43,6 @@ export default {
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
const suffix = !this.file.changed && this.file.staged && !this.showStagedIcon ? '-solid' : '';
if (this.forceModifiedIcon) return `file-modified${suffix}`;
return `${getCommitIconMap(this.file).icon}${suffix}`;
},
changedIconClass() {
......@@ -88,7 +81,7 @@ export default {
v-gl-tooltip.right
:title="tooltipTitle"
:class="{ 'ml-auto': isCentered }"
class="file-changed-icon"
class="file-changed-icon d-inline-block"
>
<icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
</span>
......
---
title: Fix IDE new files icon in tree
merge_request: 31560
author:
type: fixed
import { shallowMount } from '@vue/test-utils';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';
const changedFile = () => ({ changed: true });
const stagedFile = () => ({ changed: false, staged: true });
const changedAndStagedFile = () => ({ changed: true, staged: true });
const newFile = () => ({ changed: true, tempFile: true });
const unchangedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: false });
describe('Changed file icon', () => {
let wrapper;
const factory = (props = {}) => {
wrapper = shallowMount(ChangedFileIcon, {
propsData: {
file: changedFile(),
showTooltip: true,
...props,
},
sync: false,
});
};
afterEach(() => {
wrapper.destroy();
});
const findIcon = () => wrapper.find(Icon);
const findIconName = () => findIcon().props('name');
const findIconClasses = () =>
findIcon()
.props('cssClasses')
.split(' ');
const findTooltipText = () => wrapper.attributes('data-original-title');
it('with isCentered true, adds center class', () => {
factory({
isCentered: true,
});
expect(wrapper.classes('ml-auto')).toBe(true);
});
it('with isCentered false, does not center', () => {
factory({
isCentered: false,
});
expect(wrapper.classes('ml-auto')).toBe(false);
});
it('with showTooltip false, does not show tooltip', () => {
factory({
showTooltip: false,
});
expect(findTooltipText()).toBeFalsy();
});
describe.each`
file | iconName | tooltipText | desc
${changedFile()} | ${'file-modified'} | ${'Unstaged modification'} | ${'with file changed'}
${stagedFile()} | ${'file-modified-solid'} | ${'Staged modification'} | ${'with file staged'}
${changedAndStagedFile()} | ${'file-modified'} | ${'Unstaged and staged modification'} | ${'with file changed and staged'}
${newFile()} | ${'file-addition'} | ${'Unstaged addition'} | ${'with file new'}
`('$desc', ({ file, iconName, tooltipText }) => {
beforeEach(() => {
factory({ file });
});
it('renders icon', () => {
expect(findIconName()).toBe(iconName);
expect(findIconClasses()).toContain(iconName);
});
it('renders tooltip text', () => {
expect(findTooltipText()).toBe(tooltipText);
});
});
describe('with file unchanged', () => {
beforeEach(() => {
factory({
file: unchangedFile(),
});
});
it('does not show icon', () => {
expect(findIcon().exists()).toBe(false);
});
it('does not have tooltip text', () => {
expect(findTooltipText()).toBe('');
});
});
it('with size set, sets icon size', () => {
const size = 8;
factory({
file: changedFile(),
size,
});
expect(findIcon().props('size')).toBe(size);
});
// NOTE: It looks like 'showStagedIcon' behavior is backwards to what the name suggests
// https://gitlab.com/gitlab-org/gitlab-ce/issues/66071
it.each`
showStagedIcon | iconName | desc
${false} | ${'file-modified-solid'} | ${'with showStagedIcon false, renders staged icon'}
${true} | ${'file-modified'} | ${'with showStagedIcon true, renders regular icon'}
`('$desc', ({ showStagedIcon, iconName }) => {
factory({
file: stagedFile(),
showStagedIcon,
});
expect(findIconName()).toEqual(iconName);
});
});
import Vue from 'vue';
import changedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
import createComponent from 'spec/helpers/vue_mount_component_helper';
describe('Changed file icon', () => {
let vm;
function factory(props = {}) {
const component = Vue.extend(changedFileIcon);
vm = createComponent(component, {
...props,
file: {
tempFile: false,
changed: true,
},
});
}
afterEach(() => {
vm.$destroy();
});
it('centers icon', () => {
factory({
isCentered: true,
});
expect(vm.$el.classList).toContain('ml-auto');
});
describe('changedIcon', () => {
it('equals file-modified when not a temp file and has changes', () => {
factory();
expect(vm.changedIcon).toBe('file-modified');
});
it('equals file-addition when a temp file', () => {
factory();
vm.file.tempFile = true;
expect(vm.changedIcon).toBe('file-addition');
});
});
describe('changedIconClass', () => {
it('includes file-modified when not a temp file', () => {
factory();
expect(vm.changedIconClass).toContain('file-modified');
});
it('includes file-addition when a temp file', () => {
factory();
vm.file.tempFile = true;
expect(vm.changedIconClass).toContain('file-addition');
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment