mirror of
https://github.com/iconify/iconify.git
synced 2024-09-21 01:39:00 +00:00
415 lines
9.6 KiB
JavaScript
415 lines
9.6 KiB
JavaScript
import React from 'react';
|
|
import renderer from 'react-test-renderer';
|
|
import { Icon, iconExists } from '../../dist/iconify';
|
|
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
|
|
import { provider, nextPrefix } from './load';
|
|
|
|
const iconData = {
|
|
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
|
width: 24,
|
|
height: 24,
|
|
};
|
|
|
|
const iconData2 = {
|
|
body: '<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
|
|
width: 32,
|
|
height: 32,
|
|
};
|
|
|
|
describe('Rendering icon', () => {
|
|
test('changing icon property', () => {
|
|
return new Promise((fulfill) => {
|
|
const prefix = nextPrefix();
|
|
const name = 'changing-prop';
|
|
const name2 = 'changing-prop2';
|
|
const iconName = `@${provider}:${prefix}:${name}`;
|
|
const iconName2 = `@${provider}:${prefix}:${name2}`;
|
|
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
|
let onLoadCalled = ''; // Name of icon from last onLoad call
|
|
|
|
const onLoad = (name) => {
|
|
// onLoad should be called only once per icon
|
|
switch (name) {
|
|
// First onLoad call
|
|
case iconName:
|
|
expect(onLoadCalled).toEqual('');
|
|
break;
|
|
|
|
// Second onLoad call
|
|
case iconName2:
|
|
expect(onLoadCalled).toEqual(iconName);
|
|
break;
|
|
|
|
default:
|
|
throw new Error(`Unexpected onLoad('${name}') call`);
|
|
}
|
|
onLoadCalled = name;
|
|
};
|
|
|
|
mockAPIData({
|
|
type: 'icons',
|
|
provider,
|
|
prefix,
|
|
response: {
|
|
prefix,
|
|
icons: {
|
|
[name]: iconData,
|
|
},
|
|
},
|
|
delay: (next) => {
|
|
// Icon should not have loaded yet
|
|
expect(iconExists(iconName)).toEqual(false);
|
|
|
|
// onLoad should not have been called yet
|
|
expect(onLoadCalled).toEqual('');
|
|
|
|
// Send icon data
|
|
next();
|
|
|
|
// Test it again
|
|
expect(iconExists(iconName)).toEqual(true);
|
|
|
|
// Check if state was changed
|
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
const tree = component.toJSON();
|
|
|
|
expect(tree).toMatchObject({
|
|
type: 'svg',
|
|
props: {
|
|
'xmlns': 'http://www.w3.org/2000/svg',
|
|
'xmlnsXlink':
|
|
'http://www.w3.org/1999/xlink',
|
|
'aria-hidden': true,
|
|
'role': 'img',
|
|
'style': {},
|
|
'dangerouslySetInnerHTML': {
|
|
__html: iconData.body,
|
|
},
|
|
'width': '1em',
|
|
'height': '1em',
|
|
'viewBox':
|
|
'0 0 ' +
|
|
iconData.width +
|
|
' ' +
|
|
iconData.height,
|
|
className,
|
|
},
|
|
children: null,
|
|
});
|
|
|
|
// onLoad should have been called
|
|
expect(onLoadCalled).toEqual(iconName);
|
|
|
|
// Change property
|
|
component.update(
|
|
<Icon icon={iconName2} onLoad={onLoad} />
|
|
);
|
|
}, 0);
|
|
}, 0);
|
|
},
|
|
});
|
|
|
|
mockAPIData({
|
|
type: 'icons',
|
|
provider,
|
|
prefix,
|
|
response: {
|
|
prefix,
|
|
icons: {
|
|
[name2]: iconData2,
|
|
},
|
|
},
|
|
delay: (next) => {
|
|
// Icon should not have loaded yet
|
|
expect(iconExists(iconName2)).toEqual(false);
|
|
|
|
// Send icon data
|
|
next();
|
|
|
|
// Test it again
|
|
expect(iconExists(iconName2)).toEqual(true);
|
|
|
|
// Check if state was changed
|
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
const tree = component.toJSON();
|
|
|
|
expect(tree).toMatchObject({
|
|
type: 'svg',
|
|
props: {
|
|
'xmlns': 'http://www.w3.org/2000/svg',
|
|
'xmlnsXlink':
|
|
'http://www.w3.org/1999/xlink',
|
|
'aria-hidden': true,
|
|
'role': 'img',
|
|
'style': {},
|
|
'dangerouslySetInnerHTML': {
|
|
__html: iconData2.body,
|
|
},
|
|
'width': '1em',
|
|
'height': '1em',
|
|
'viewBox':
|
|
'0 0 ' +
|
|
iconData2.width +
|
|
' ' +
|
|
iconData2.height,
|
|
className,
|
|
},
|
|
children: null,
|
|
});
|
|
|
|
// onLoad should have been called for second icon
|
|
expect(onLoadCalled).toEqual(iconName2);
|
|
|
|
fulfill(true);
|
|
}, 0);
|
|
}, 0);
|
|
},
|
|
});
|
|
|
|
// Check if icon has been loaded
|
|
expect(iconExists(iconName)).toEqual(false);
|
|
|
|
// Render component
|
|
const component = renderer.create(
|
|
<Icon icon={iconName} onLoad={onLoad} />
|
|
);
|
|
const tree = component.toJSON();
|
|
|
|
// Should render placeholder
|
|
expect(tree).toMatchObject({
|
|
type: 'span',
|
|
props: {},
|
|
children: null,
|
|
});
|
|
|
|
// onLoad should not have been called yet
|
|
expect(onLoadCalled).toEqual('');
|
|
});
|
|
});
|
|
|
|
test('changing icon property while loading', () => {
|
|
return new Promise((fulfill) => {
|
|
const prefix = nextPrefix();
|
|
const name = 'changing-prop';
|
|
const name2 = 'changing-prop2';
|
|
const iconName = `@${provider}:${prefix}:${name}`;
|
|
const iconName2 = `@${provider}:${prefix}:${name2}`;
|
|
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
|
let isSync = true;
|
|
|
|
mockAPIData({
|
|
type: 'icons',
|
|
provider,
|
|
prefix,
|
|
response: {
|
|
prefix,
|
|
icons: {
|
|
[name]: iconData,
|
|
},
|
|
},
|
|
delay: (next) => {
|
|
// Should have been called asynchronously, which means icon name has changed
|
|
expect(isSync).toEqual(false);
|
|
|
|
// Send icon data
|
|
next();
|
|
},
|
|
});
|
|
|
|
mockAPIData({
|
|
type: 'icons',
|
|
provider,
|
|
prefix,
|
|
response: {
|
|
prefix,
|
|
icons: {
|
|
[name2]: iconData2,
|
|
},
|
|
},
|
|
delay: (next) => {
|
|
// Should have been called asynchronously
|
|
expect(isSync).toEqual(false);
|
|
|
|
// Icon should not have loaded yet
|
|
expect(iconExists(iconName2)).toEqual(false);
|
|
|
|
// Send icon data
|
|
next();
|
|
|
|
// Test it again
|
|
expect(iconExists(iconName2)).toEqual(true);
|
|
|
|
// Check if state was changed
|
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
const tree = component.toJSON();
|
|
|
|
expect(tree).toMatchObject({
|
|
type: 'svg',
|
|
props: {
|
|
'xmlns': 'http://www.w3.org/2000/svg',
|
|
'xmlnsXlink':
|
|
'http://www.w3.org/1999/xlink',
|
|
'aria-hidden': true,
|
|
'role': 'img',
|
|
'style': {},
|
|
'dangerouslySetInnerHTML': {
|
|
__html: iconData2.body,
|
|
},
|
|
'width': '1em',
|
|
'height': '1em',
|
|
'viewBox':
|
|
'0 0 ' +
|
|
iconData2.width +
|
|
' ' +
|
|
iconData2.height,
|
|
className,
|
|
},
|
|
children: null,
|
|
});
|
|
|
|
fulfill(true);
|
|
}, 0);
|
|
}, 0);
|
|
},
|
|
});
|
|
|
|
// Check if icon has been loaded
|
|
expect(iconExists(iconName)).toEqual(false);
|
|
|
|
// Render component
|
|
const component = renderer.create(<Icon icon={iconName} />);
|
|
const tree = component.toJSON();
|
|
|
|
// Should render placeholder
|
|
expect(tree).toMatchObject({
|
|
type: 'span',
|
|
props: {},
|
|
children: null,
|
|
});
|
|
|
|
// Change icon name
|
|
component.update(<Icon icon={iconName2} />);
|
|
|
|
// Async
|
|
isSync = false;
|
|
});
|
|
});
|
|
|
|
test('changing multiple properties', () => {
|
|
return new Promise((fulfill) => {
|
|
const prefix = nextPrefix();
|
|
const name = 'multiple-props';
|
|
const iconName = `@${provider}:${prefix}:${name}`;
|
|
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
|
|
|
mockAPIData({
|
|
type: 'icons',
|
|
provider,
|
|
prefix,
|
|
response: {
|
|
prefix,
|
|
icons: {
|
|
[name]: iconData,
|
|
},
|
|
},
|
|
delay: (next) => {
|
|
// Icon should not have loaded yet
|
|
expect(iconExists(iconName)).toEqual(false);
|
|
|
|
// Send icon data
|
|
next();
|
|
|
|
// Test it again
|
|
expect(iconExists(iconName)).toEqual(true);
|
|
|
|
// Check if state was changed
|
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
let tree = component.toJSON();
|
|
expect(tree).toMatchObject({
|
|
type: 'svg',
|
|
props: {
|
|
'xmlns': 'http://www.w3.org/2000/svg',
|
|
'xmlnsXlink':
|
|
'http://www.w3.org/1999/xlink',
|
|
'aria-hidden': true,
|
|
'role': 'img',
|
|
'style': {},
|
|
'dangerouslySetInnerHTML': {
|
|
__html: iconData.body,
|
|
},
|
|
'width': '1em',
|
|
'height': '1em',
|
|
'viewBox':
|
|
'0 0 ' +
|
|
iconData.width +
|
|
' ' +
|
|
iconData.height,
|
|
className,
|
|
},
|
|
children: null,
|
|
});
|
|
|
|
// Add horizontal flip and style
|
|
component.update(
|
|
<Icon
|
|
icon={iconName}
|
|
hFlip={true}
|
|
style={{ color: 'red' }}
|
|
/>
|
|
);
|
|
|
|
tree = component.toJSON();
|
|
expect(tree).toMatchObject({
|
|
type: 'svg',
|
|
props: {
|
|
'xmlns': 'http://www.w3.org/2000/svg',
|
|
'xmlnsXlink':
|
|
'http://www.w3.org/1999/xlink',
|
|
'aria-hidden': true,
|
|
'role': 'img',
|
|
'style': {
|
|
color: 'red',
|
|
},
|
|
'dangerouslySetInnerHTML': {
|
|
__html: `<g transform="translate(${iconData.width} 0) scale(-1 1)">${iconData.body}</g>`,
|
|
},
|
|
'width': '1em',
|
|
'height': '1em',
|
|
'viewBox':
|
|
'0 0 ' +
|
|
iconData.width +
|
|
' ' +
|
|
iconData.height,
|
|
className,
|
|
},
|
|
children: null,
|
|
});
|
|
fulfill(true);
|
|
}, 0);
|
|
}, 0);
|
|
},
|
|
});
|
|
|
|
// Check if icon has been loaded
|
|
expect(iconExists(iconName)).toEqual(false);
|
|
|
|
// Render component with placeholder text
|
|
const component = renderer.create(
|
|
<Icon icon={iconName}>loading...</Icon>
|
|
);
|
|
const tree = component.toJSON();
|
|
|
|
// Should render placeholder
|
|
expect(tree).toEqual('loading...');
|
|
});
|
|
});
|
|
});
|