import { mount } from '@vue/test-utils';
import IconifyIcon from '../';
const iconData = {
body:
'',
width: 24,
height: 24,
};
const iconDataWithID = {
body:
'',
width: 128,
height: 128,
};
// Spacing for HTML matches
const spacing = (count) => {
return '\n' + ' '.repeat(count);
};
describe('Mounting component', () => {
test('with wrapper', () => {
const Wrapper = {
components: { IconifyIcon },
template: ``,
};
const wrapper = mount(Wrapper, {});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
});
test('without wrapper', () => {
const wrapper = mount(IconifyIcon, {});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
});
describe('Rendering icon', () => {
test('as object', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('as string', () => {
const iconName = 'test-string';
IconifyIcon.addIcon(iconName, iconData);
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconName,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('replacing id', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconDataWithID,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).not.toMatch('id="ssvg-id-1st-place-medala"');
});
});
describe('Passing attributes', () => {
test('title', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
title: 'Icon!',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('aria-hidden', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
'icon': iconData,
'aria-hidden': false,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('ariaHidden', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
ariaHidden: false,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('attributes that cannot change', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
viewBox: '0 0 0 0',
preserveAspectRatio: 'none',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
// same values, but different order
''
);
});
});
describe('Dimensions', () => {
test('height', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
height: 24,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('width and height', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
width: 32, // as number
height: '48', // as string
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('auto', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
height: 'auto',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
});
describe('Rotation', () => {
test('number', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
rotate: 1,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('rotate(90 ');
});
test('string', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
rotate: '270deg',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('rotate(-90 ');
});
});
describe('Flip', () => {
test('boolean', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
horizontalFlip: true,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(-1 1)');
});
test('string', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
flip: 'vertical',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(1 -1)');
});
test('string and boolean', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
flip: 'horizontal',
verticalFlip: true,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
// horizontal + vertical = 180deg rotation
expect(item.html()).toMatch('rotate(180 ');
});
test('string for boolean attribute', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
horizontalFlip: 'true',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(-1 1)');
});
test('shorthand and boolean', () => {
// 'flip' is processed after 'hFlip', overwriting value
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
flip: 'horizontal',
hFlip: false,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(-1 1)');
});
test('shorthand and boolean as string', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
flip: 'vertical',
horizontalFlip: 'true',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
// horizontal + vertical = 180deg rotation
expect(item.html()).toMatch('rotate(180 ');
});
test('wrong case', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
verticalflip: true,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).not.toMatch('scale(');
});
});
describe('Alignment and slice', () => {
test('vAlign and slice', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
vAlign: 'top',
slice: true,
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('preserveAspectRatio="xMidYMin slice"');
});
test('string', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
align: 'left bottom',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('preserveAspectRatio="xMinYMax meet"');
});
test('Alignment aliases', () => {
const wrapper = mount(IconifyIcon, {
context: {
props: {
icon: iconData,
verticalAlign: 'top',
horizontalAlign: 'right',
},
},
});
const item = wrapper.find(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('preserveAspectRatio="xMaxYMin meet"');
});
});