118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
import { shallowMount } from '@vue/test-utils';
|
|
import { GlIcon } from '@gitlab/ui';
|
|
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
|
|
|
|
const changedFile = () => ({ changed: true });
|
|
const stagedFile = () => ({ changed: true, staged: true });
|
|
const newFile = () => ({ changed: true, tempFile: true });
|
|
const deletedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: 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,
|
|
},
|
|
});
|
|
};
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
const findIcon = () => wrapper.find(GlIcon);
|
|
const findIconName = () => findIcon().props('name');
|
|
const findIconClasses = () => findIcon().classes();
|
|
const findTooltipText = () => wrapper.attributes('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'} | ${'Modified'} | ${'with file changed'}
|
|
${stagedFile()} | ${'file-modified-solid'} | ${'Modified'} | ${'with file staged'}
|
|
${newFile()} | ${'file-addition'} | ${'Added'} | ${'with file new'}
|
|
${deletedFile()} | ${'file-deletion'} | ${'Deleted'} | ${'with file deleted'}
|
|
`('$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()).toBeFalsy();
|
|
});
|
|
});
|
|
|
|
it('with size set, sets icon size', () => {
|
|
const size = 8;
|
|
|
|
factory({
|
|
file: changedFile(),
|
|
size,
|
|
});
|
|
|
|
expect(findIcon().props('size')).toBe(size);
|
|
});
|
|
|
|
it.each`
|
|
showStagedIcon | iconName | desc
|
|
${true} | ${'file-modified-solid'} | ${'with showStagedIcon true, renders staged icon'}
|
|
${false} | ${'file-modified'} | ${'with showStagedIcon false, renders regular icon'}
|
|
`('$desc', ({ showStagedIcon, iconName }) => {
|
|
factory({
|
|
file: stagedFile(),
|
|
showStagedIcon,
|
|
});
|
|
|
|
expect(findIconName()).toEqual(iconName);
|
|
});
|
|
});
|