import React from 'react'; import renderer from 'react-test-renderer'; import { Icon, loadIcons, iconExists } from '../../dist/iconify'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { provider, nextPrefix } from './load'; const iconData = { body: '', width: 24, height: 24, }; describe('Rendering icon', () => { test('rendering icon after loading it', (done) => { const prefix = nextPrefix(); const name = 'render-test'; const iconName = `@${provider}:${prefix}:${name}`; const className = `iconify iconify--${prefix} iconify--${provider}`; let onLoadCalled = false; mockAPIData({ type: 'icons', provider, prefix, response: { prefix, icons: { [name]: iconData, }, }, }); // Check if icon has been loaded expect(iconExists(iconName)).toEqual(false); // Load icon loadIcons([iconName], (loaded, missing, pending) => { // Make sure icon has been loaded expect(loaded).toMatchObject([ { provider, prefix, name, }, ]); expect(missing).toMatchObject([]); expect(pending).toMatchObject([]); expect(iconExists(iconName)).toEqual(true); // Render component const component = renderer.create( { expect(name).toEqual(iconName); expect(onLoadCalled).toEqual(false); onLoadCalled = true; }} /> ); 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, className, }, children: null, }); // Make sure onLoad has been called expect(onLoadCalled).toEqual(true); done(); }); }); test('rendering icon before loading it', (done) => { const prefix = nextPrefix(); const name = 'mock-test'; const iconName = `@${provider}:${prefix}:${name}`; const className = `iconify iconify--${prefix} iconify--${provider}`; let onLoadCalled = false; 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(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, 'className': 'test ' + className, }, children: null, }); // onLoad should have been called expect(onLoadCalled).toEqual(true); done(); }, 0); }, 0); }, }); // Check if icon has been loaded expect(iconExists(iconName)).toEqual(false); // Render component const component = renderer.create( { expect(name).toEqual(iconName); expect(onLoadCalled).toEqual(false); onLoadCalled = true; }} /> ); 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(false); }); test('missing icon', (done) => { const prefix = nextPrefix(); const name = 'missing-icon'; const iconName = `@${provider}:${prefix}:${name}`; mockAPIData({ type: 'icons', provider, prefix, response: 404, delay: (next) => { // Icon should not have loaded yet expect(iconExists(iconName)).toEqual(false); // Send icon data next(); // Test it again expect(iconExists(iconName)).toEqual(false); // 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: 'span', props: {}, children: null, }); done(); }, 0); }, 0); }, }); // Check if icon has been loaded expect(iconExists(iconName)).toEqual(false); // Render component const component = renderer.create( { throw new Error('onLoad called for empty icon!'); }} > ); const tree = component.toJSON(); // Should render placeholder expect(tree).toMatchObject({ type: 'span', props: {}, children: null, }); }); });