import { mount } from '@vue/test-utils';
import { Icon, addIcon } 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('replacing id', () => {
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"');
});
});
describe('Passing attributes', () => {
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"');
});
});