iconify/components/react/tests/api/20-rendering-from-api.test.js

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: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
	width: 24,
	height: 24,
};

describe('Rendering icon', () => {
	test('rendering icon after loading it', () => {
		return new Promise((fulfill) => {
			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(
					<Icon
						icon={iconName}
						onLoad={(name) => {
							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',
						'viewBox':
							'0 0 ' + iconData.width + ' ' + iconData.height,
						className,
					},
					children: null,
				});

				// Make sure onLoad has been called
				expect(onLoadCalled).toEqual(true);

				fulfill(true);
			});
		});
	});

	test('rendering icon before loading it', () => {
		return new Promise((fulfill) => {
			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',
									'viewBox':
										'0 0 ' +
										iconData.width +
										' ' +
										iconData.height,
									'className': 'test ' + className,
								},
								children: null,
							});

							// onLoad should have been called
							expect(onLoadCalled).toEqual(true);

							fulfill(true);
						}, 0);
					}, 0);
				},
			});

			// Check if icon has been loaded
			expect(iconExists(iconName)).toEqual(false);

			// Render component
			const component = renderer.create(
				<Icon
					icon={iconName}
					className="test"
					onLoad={(name) => {
						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', () => {
		return new Promise((fulfill) => {
			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,
							});

							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={() => {
						throw new Error('onLoad called for empty icon!');
					}}
				></Icon>
			);
			const tree = component.toJSON();

			// Should render placeholder
			expect(tree).toMatchObject({
				type: 'span',
				props: {},
				children: null,
			});
		});
	});
});