iconify/packages/vue/tests/api/20-rendering-from-api-test.ts

import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon, loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
import { defaultIconResult } from '../empty';

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', (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 Wrapper = {
				components: { Icon },
				// Also test class string
				template: `<Icon icon="${iconName}" :onLoad="onLoad" class="test" />`,
				methods: {
					onLoad(name) {
						expect(name).toEqual(iconName);
						expect(onLoadCalled).toEqual(false);
						onLoadCalled = true;
					},
				},
			};
			const wrapper = mount(Wrapper, {});

			// Check HTML on next tick
			nextTick()
				.then(() => {
					const html = wrapper.html().replace(/\s*\n\s*/g, '');
					expect(html).toEqual(
						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
							className +
							'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
					);

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

					done();
				})
				.catch(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 icon has been loaded
		expect(iconExists(iconName)).toEqual(false);

		// Render component
		const Wrapper = {
			components: { Icon },
			template: `<Icon icon="${iconName}" :onLoad="onLoad" :class="testClass" />`,
			methods: {
				onLoad(name) {
					expect(name).toEqual(iconName);
					expect(onLoadCalled).toEqual(false);
					onLoadCalled = true;

					// Test component on next tick
					nextTick()
						.then(() => {
							// Check HTML
							expect(
								wrapper.html().replace(/\s*\n\s*/g, '')
							).toEqual(
								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="foo ' +
									className +
									'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
							);

							done();
						})
						.catch(done);
				},
			},
			data() {
				// Test dynamic class
				return {
					testClass: {
						foo: true,
						bar: false,
					},
				};
			},
		};
		const wrapper = mount(Wrapper, {});

		// 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 on next few ticks
				nextTick()
					.then(() => {
						expect(wrapper.html()).toEqual(defaultIconResult);
						return nextTick();
					})
					.then(() => {
						expect(wrapper.html()).toEqual(defaultIconResult);
						return nextTick();
					})
					.then(() => {
						expect(wrapper.html()).toEqual(defaultIconResult);
						done();
					})
					.catch(done);
			},
		});

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

		// Render component
		const Wrapper = {
			components: { Icon },
			template: `<Icon icon="${iconName}" :onLoad='onLoad' />`,
			methods: {
				onLoad() {
					throw new Error('onLoad called for empty icon!');
				},
			},
		};
		const wrapper = mount(Wrapper, {});
	});
});