2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-14 06:28:24 +00:00
iconify/components/svelte/tests/api/20-rendering-from-api.test.ts

215 lines
5.3 KiB
TypeScript
Raw Normal View History

/**
* @jest-environment jsdom
*/
2022-02-28 09:48:59 +00:00
import { tick } from 'svelte';
2021-05-01 20:38:56 +00:00
import { render } from '@testing-library/svelte';
import Icon, { loadIcons, iconExists } from '../../';
2021-05-01 20:38:56 +00:00
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"/>',
2021-05-01 20:38:56 +00:00
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;
2021-05-01 20:38:56 +00:00
mockAPIData({
type: 'icons',
2021-05-01 20:38:56 +00:00
provider,
prefix,
response: {
prefix,
icons: {
[name]: iconData,
},
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toBe(false);
2021-05-01 20:38:56 +00:00
// 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)).toBe(true);
2021-05-01 20:38:56 +00:00
// Render component
const component = render(Icon, {
icon: iconName,
onLoad: (name: string) => {
expect(name).toBe(iconName);
expect(onLoadCalled).toBe(false);
onLoadCalled = true;
},
});
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement).innerHTML;
2021-05-01 20:38:56 +00:00
2022-02-28 09:48:59 +00:00
// Check HTML immediately
expect(html).toBe(
2022-04-30 20:12:34 +00:00
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
2021-05-01 20:38:56 +00:00
);
// Make sure onLoad has been called
expect(onLoadCalled).toBe(true);
2021-05-01 20:38:56 +00:00
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;
2021-05-01 20:38:56 +00:00
mockAPIData({
type: 'icons',
2021-05-01 20:38:56 +00:00
provider,
prefix,
response: {
prefix,
icons: {
[name]: iconData,
},
},
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toBe(false);
2021-05-01 20:38:56 +00:00
// onLoad should not have been called yet
expect(onLoadCalled).toBe(false);
2021-05-01 20:38:56 +00:00
// Send icon data
next();
// Test it again
expect(iconExists(iconName)).toBe(true);
2021-05-01 20:38:56 +00:00
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toBe(false);
2021-05-01 20:38:56 +00:00
// Render component
const component = render(Icon, {
icon: iconName,
// Also testing simple class
class: 'test',
onLoad: (name: string) => {
expect(name).toBe(iconName);
expect(onLoadCalled).toBe(false);
onLoadCalled = true;
2022-02-28 09:48:59 +00:00
// Check component on next tick
tick()
.then(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
className +
2022-04-30 20:12:34 +00:00
'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
2022-02-28 09:48:59 +00:00
);
done();
})
.catch(done);
},
});
2021-05-01 20:38:56 +00:00
// Should render empty icon
const html = component.container.innerHTML;
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
// onLoad should not have been called yet
expect(onLoadCalled).toBe(false);
2021-05-01 20:38:56 +00:00
});
test('missing icon', (done) => {
const prefix = nextPrefix();
const name = 'missing-icon';
const iconName = `@${provider}:${prefix}:${name}`;
2021-05-01 20:38:56 +00:00
mockAPIData({
type: 'icons',
2021-05-01 20:38:56 +00:00
provider,
prefix,
response: 404,
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toBe(false);
2021-05-01 20:38:56 +00:00
// Send icon data
next();
// Test it again
expect(iconExists(iconName)).toBe(false);
2021-05-01 20:38:56 +00:00
2022-02-28 09:48:59 +00:00
// Check if state was changed on next few ticks
tick()
.then(() => {
const html = component.container.innerHTML;
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<div></div>'
);
2022-02-28 09:48:59 +00:00
return tick();
})
.then(() => {
const html = component.container.innerHTML;
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<div></div>'
);
2022-02-28 09:48:59 +00:00
return tick();
})
.then(() => {
2021-05-01 20:38:56 +00:00
const html = component.container.innerHTML;
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<div></div>'
);
2021-05-01 20:38:56 +00:00
done();
2022-02-28 09:48:59 +00:00
})
.catch(done);
2021-05-01 20:38:56 +00:00
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toBe(false);
2021-05-01 20:38:56 +00:00
// Render component
const component = render(Icon, {
icon: iconName,
onLoad: () => {
throw new Error('onLoad called for empty icon!');
},
});
2021-05-01 20:38:56 +00:00
// Should render empty icon
const html = component.container.innerHTML;
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
2021-05-01 20:38:56 +00:00
});
});