import { mount } from '@vue/test-utils';
import { Icon, addIcon, addCollection } from '../';
const iconData = {
body:
'',
width: 24,
height: 24,
};
const iconDataWithID = {
body:
'',
width: 128,
height: 128,
};
/*
Note: findComponent() tests are temporarily disabled because it is bugged in current version of test-utils
*/
describe('Mounting component', () => {
test('with wrapper', () => {
const Wrapper = {
components: { Icon },
template: ``,
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
});
test('without wrapper', () => {
const wrapper = mount(Icon, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
});
describe('Rendering icon', () => {
test('as object', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('as string', () => {
const iconName = 'test-string';
addIcon(iconName, iconData);
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconName,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('as string with icon set', () => {
const iconSet = {
prefix: 'mdi-light',
icons: {
account: {
body:
'',
},
home: {
body:
'',
},
},
width: 24,
height: 24,
};
addCollection(iconSet);
const Wrapper = {
components: { Icon },
template: ``,
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('as string with icon set with custom prefix', () => {
const iconSet = {
prefix: 'mdi-light',
icons: {
'account-alert': {
body:
'',
},
'link': {
body:
'',
},
},
width: 24,
height: 24,
};
addCollection(iconSet, 'custom-');
const Wrapper = {
components: { Icon },
template: ``,
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('replacing id (default behavior)', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconDataWithID,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).not.toMatch('id="ssvg-id-1st-place-medala"');
});
test('replacing id (custom generator)', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconDataWithID,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
let html = item.html();
// Generate expected body
let expected =
'';
const replacements = {
'ssvg-id-1st-place-medala': 'test-0',
'ssvg-id-1st-place-medald': 'test-1',
'ssvg-id-1st-place-medalf': 'test-2',
'ssvg-id-1st-place-medalh': 'test-3',
'ssvg-id-1st-place-medalj': 'test-4',
'ssvg-id-1st-place-medalm': 'test-5',
'ssvg-id-1st-place-medalp': 'test-6',
'ssvg-id-1st-place-medalb': 'test-7',
'ssvg-id-1st-place-medalk': 'test-8',
'ssvg-id-1st-place-medalo': 'test-9',
'ssvg-id-1st-place-medalc': 'test-10',
'ssvg-id-1st-place-medale': 'test-11',
'ssvg-id-1st-place-medalg': 'test-12',
'ssvg-id-1st-place-medali': 'test-13',
'ssvg-id-1st-place-medall': 'test-14',
'ssvg-id-1st-place-medaln': 'test-15',
};
Object.keys(replacements).forEach((search) => {
expected = expected.replace(
new RegExp(search, 'g'),
replacements[search]
);
});
['path', 'stop', 'use', 'circle'].forEach((tag) => {
// Replace with
html = html.replace(new RegExp('> {
test('title', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('aria-hidden', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('ariaHidden', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('attributes that cannot change', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
// same values, but different order
''
);
});
});
describe('Dimensions', () => {
test('height', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
height: 24,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('width and height', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
width: 32, // as number
height: '48', // as string
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
test('auto', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
height: 'auto',
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
''
);
});
});
describe('Rotation', () => {
test('number', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
rotate: 1,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('rotate(90 ');
});
test('string', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('rotate(-90 ');
});
});
describe('Flip', () => {
test('boolean', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
horizontalFlip: true,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(-1 1)');
});
test('string', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(1 -1)');
});
test('string and boolean', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
// horizontal + vertical = 180deg rotation
expect(item.html()).toMatch('rotate(180 ');
});
test('string for boolean attribute', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
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 = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('scale(-1 1)');
});
test('shorthand and boolean as string', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
// horizontal + vertical = 180deg rotation
expect(item.html()).toMatch('rotate(180 ');
});
test('wrong case', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
verticalflip: true,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).not.toMatch('scale(');
expect(item.html()).not.toMatch('rotate(');
});
});
describe('Alignment and slice', () => {
test('vAlign and slice', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('preserveAspectRatio="xMidYMin slice"');
});
test('string', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('preserveAspectRatio="xMinYMax meet"');
});
test('Alignment aliases', () => {
const Wrapper = {
components: { Icon },
template: ``,
data() {
return {
icon: iconData,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toMatch('preserveAspectRatio="xMaxYMin meet"');
});
});