import React from 'react'; import renderer from 'react-test-renderer'; import { Icon, iconExists } from '../../lib/iconify'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { provider, nextPrefix } from './load'; const iconData = { body: '', width: 24, height: 24, }; const iconData2 = { body: '', width: 32, height: 32, }; describe('Rendering icon', () => { test('changing icon property', (done) => { const prefix = nextPrefix(); const name = 'changing-prop'; const name2 = 'changing-prop2'; const iconName = `@${provider}:${prefix}:${name}`; const iconName2 = `@${provider}:${prefix}:${name2}`; mockAPIData({ 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(() => { 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', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); component.update(); }, 0); }, 0); }, }); mockAPIData({ 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', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData2.width + ' ' + iconData2.height, }, children: null, }); done(); }, 0); }, 0); }, }); // Check if icon has been loaded expect(iconExists(iconName)).toEqual(false); // Render component const component = renderer.create(); const tree = component.toJSON(); // Should render placeholder expect(tree).toMatchObject({ type: 'span', props: {}, children: null, }); }); test('changing multiple properties', (done) => { const prefix = nextPrefix(); const name = 'multiple-props'; const iconName = `@${provider}:${prefix}:${name}`; mockAPIData({ 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', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); // Add horizontal flip and style component.update( ); 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: `${iconData.body}`, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); done(); }, 0); }, 0); }, }); // Check if icon has been loaded expect(iconExists(iconName)).toEqual(false); // Render component with placeholder text const component = renderer.create( loading... ); const tree = component.toJSON(); // Should render placeholder expect(tree).toEqual('loading...'); }); });