mirror of
https://github.com/iconify/iconify.git
synced 2024-12-12 21:57:50 +00:00
Update Vue unit tests: replace deprecated find() with findComponent()
This commit is contained in:
Vjacheslav Trushkin
parent
02b208f7c2
commit
b6b4a3b6f6
@ -28,12 +28,14 @@ describe('Mounting component', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('without wrapper', () => {
|
||||
test('without wrapper (deprecated)', () => {
|
||||
const wrapper = mount(IconifyIcon, {});
|
||||
// Should trigger deprecation notice, but test should pass. Remove this test when
|
||||
// find() is gone. This is a problem with testing environment, not with component.
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
@ -44,14 +46,18 @@ describe('Mounting component', () => {
|
||||
|
||||
describe('Rendering icon', () => {
|
||||
test('as object', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -66,14 +72,18 @@ describe('Rendering icon', () => {
|
||||
const iconName = 'test-string';
|
||||
IconifyIcon.addIcon(iconName, iconData);
|
||||
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconName,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -85,14 +95,18 @@ describe('Rendering icon', () => {
|
||||
});
|
||||
|
||||
test('replacing id', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconDataWithID,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).not.toMatch('id="ssvg-id-1st-place-medala"');
|
||||
});
|
||||
@ -100,15 +114,18 @@ describe('Rendering icon', () => {
|
||||
|
||||
describe('Passing attributes', () => {
|
||||
test('title', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' title='Icon!' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
title: 'Icon!',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" title="Icon!" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -120,15 +137,18 @@ describe('Passing attributes', () => {
|
||||
});
|
||||
|
||||
test('aria-hidden', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
'icon': iconData,
|
||||
'aria-hidden': false,
|
||||
},
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :aria-hidden='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -140,15 +160,18 @@ describe('Passing attributes', () => {
|
||||
});
|
||||
|
||||
test('ariaHidden', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :ariaHidden='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
ariaHidden: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -160,16 +183,18 @@ describe('Passing attributes', () => {
|
||||
});
|
||||
|
||||
test('attributes that cannot change', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' viewBox='0 0 0 0' preserveAspectRatio='none' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
viewBox: '0 0 0 0',
|
||||
preserveAspectRatio: 'none',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
// same values, but different order
|
||||
@ -184,15 +209,19 @@ describe('Passing attributes', () => {
|
||||
|
||||
describe('Dimensions', () => {
|
||||
test('height', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
height: 24,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -204,16 +233,20 @@ describe('Dimensions', () => {
|
||||
});
|
||||
|
||||
test('width and height', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :width='width' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
width: 32, // as number
|
||||
height: '48', // as string
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="48" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -225,15 +258,19 @@ describe('Dimensions', () => {
|
||||
});
|
||||
|
||||
test('auto', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
height: 'auto',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
@ -247,29 +284,36 @@ describe('Dimensions', () => {
|
||||
|
||||
describe('Rotation', () => {
|
||||
test('number', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :rotate='rotate' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
rotate: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('rotate(90 ');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' rotate='270deg' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
rotate: '270deg',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('rotate(-90 ');
|
||||
});
|
||||
@ -277,151 +321,179 @@ describe('Rotation', () => {
|
||||
|
||||
describe('Flip', () => {
|
||||
test('boolean', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :horizontalFlip='horizontalFlip' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
horizontalFlip: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='vertical' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
flip: 'vertical',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(1 -1)');
|
||||
});
|
||||
|
||||
test('string and boolean', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='horizontal' :verticalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
flip: 'horizontal',
|
||||
verticalFlip: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(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: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' horizontalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
horizontalFlip: 'true',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(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: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='horizontal' :hFlip='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
flip: 'horizontal',
|
||||
hFlip: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(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: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='vertical' horizontalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
flip: 'vertical',
|
||||
horizontalFlip: 'true',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(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: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :verticalflip='verticalflip' :horizontalflip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
verticalflip: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
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 = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' vAlign='top' :slice='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
vAlign: 'top',
|
||||
slice: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMidYMin slice"');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' align='left bottom' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
align: 'left bottom',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMinYMax meet"');
|
||||
});
|
||||
|
||||
test('Alignment aliases', () => {
|
||||
const wrapper = mount(IconifyIcon, {
|
||||
context: {
|
||||
props: {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' verticalAlign='top' horizontalAlign='right' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'right',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const item = wrapper.find(IconifyIcon);
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMaxYMin meet"');
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user