diff --git a/packages/react/src/iconify.ts b/packages/react/src/iconify.ts index 06e4c6a..b705d7b 100644 --- a/packages/react/src/iconify.ts +++ b/packages/react/src/iconify.ts @@ -186,19 +186,23 @@ allowSimpleNames(true); // Set API coreModules.api = API; -let getAPIModule: GetIconifyAPIModule; +// Use Fetch API by default +let getAPIModule: GetIconifyAPIModule = getFetchAPIModule; try { - getAPIModule = - typeof fetch === 'function' && typeof Promise === 'function' - ? getFetchAPIModule - : getJSONPAPIModule; + if (typeof document !== 'undefined' && typeof window !== 'undefined') { + // If window and document exist, attempt to load whatever module is available, otherwise use Fetch API + getAPIModule = + typeof fetch === 'function' && typeof Promise === 'function' + ? getFetchAPIModule + : getJSONPAPIModule; + } } catch (err) { - getAPIModule = getJSONPAPIModule; + // } setAPIModule('', getAPIModule(getAPIConfig)); /** - * Enable node-fetch for getting icons on server side + * Function to enable node-fetch for getting icons on server side */ export function setNodeFetch(nodeFetch: typeof fetch) { setFetch(nodeFetch); @@ -288,10 +292,6 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') { /** * Component */ - -/** - * Generate icon - */ function component( props: IconProps, inline: boolean, diff --git a/packages/react/tests/api/10-api-mock.test.js b/packages/react/tests/api/10-api-mock.test.js new file mode 100644 index 0000000..39871e9 --- /dev/null +++ b/packages/react/tests/api/10-api-mock.test.js @@ -0,0 +1,40 @@ +import { loadIcons, iconExists } from '../../lib/iconify'; +import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; +import { provider, nextPrefix } from './load'; + +describe('Testing fake API', () => { + test('using fake API to load icon', (done) => { + const prefix = nextPrefix(); + const name = 'mock-test'; + const iconName = `@${provider}:${prefix}:${name}`; + mockAPIData({ + provider, + prefix, + response: { + prefix, + icons: { + [name]: { + body: '', + }, + }, + }, + }); + + // Check if icon has been loaded + expect(iconExists(iconName)).toEqual(false); + + // Load icon + loadIcons([iconName], (loaded, missing, pending) => { + expect(loaded).toMatchObject([ + { + provider, + prefix, + name, + }, + ]); + expect(missing).toMatchObject([]); + expect(pending).toMatchObject([]); + done(); + }); + }); +}); diff --git a/packages/react/tests/api/20-rendering-from-api.js b/packages/react/tests/api/20-rendering-from-api.js new file mode 100644 index 0000000..333034c --- /dev/null +++ b/packages/react/tests/api/20-rendering-from-api.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { Icon, loadIcons, 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, +}; + +describe('Rendering icon', () => { + test('rendering icon after loading it', (done) => { + const prefix = nextPrefix(); + const name = 'mock-test'; + const iconName = `@${provider}:${prefix}:${name}`; + mockAPIData({ + 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(); + 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, + }); + + done(); + }); + }); +}); diff --git a/packages/react/tests/api/load.js b/packages/react/tests/api/load.js new file mode 100644 index 0000000..e6483e9 --- /dev/null +++ b/packages/react/tests/api/load.js @@ -0,0 +1,15 @@ +import { _api, addAPIProvider } from '../../lib/iconify'; +import { mockAPIModule } from '@iconify/core/lib/api/modules/mock'; + +// API provider for tests +export const provider = 'mock-api'; + +// Set API module for provider +addAPIProvider(provider, { + resources: 'http://localhost', +}); +_api.setAPIModule(provider, mockAPIModule); + +// Prefix +let counter = 0; +export const nextPrefix = () => 'mock-' + counter++; diff --git a/packages/react/tests/iconify/10-basic.test.js b/packages/react/tests/iconify/10-basic.test.js index beaec32..6ddef24 100644 --- a/packages/react/tests/iconify/10-basic.test.js +++ b/packages/react/tests/iconify/10-basic.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, InlineIcon } from '../../dist/iconify'; +import { Icon, InlineIcon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/iconify/10-empty.test.js b/packages/react/tests/iconify/10-empty.test.js index 6216f70..4c2854a 100644 --- a/packages/react/tests/iconify/10-empty.test.js +++ b/packages/react/tests/iconify/10-empty.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '../../dist/iconify'; +import { Icon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; describe('Empty icon', () => { diff --git a/packages/react/tests/iconify/20-attributes.test.js b/packages/react/tests/iconify/20-attributes.test.js index f8fec54..e3623b7 100644 --- a/packages/react/tests/iconify/20-attributes.test.js +++ b/packages/react/tests/iconify/20-attributes.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, InlineIcon } from '../../dist/iconify'; +import { Icon, InlineIcon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/iconify/20-dimensions.test.js b/packages/react/tests/iconify/20-dimensions.test.js index 887ddf9..27f3718 100644 --- a/packages/react/tests/iconify/20-dimensions.test.js +++ b/packages/react/tests/iconify/20-dimensions.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { InlineIcon } from '../../dist/iconify'; +import { InlineIcon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/iconify/20-ids.test.js b/packages/react/tests/iconify/20-ids.test.js index 22100a0..f3bf3d8 100644 --- a/packages/react/tests/iconify/20-ids.test.js +++ b/packages/react/tests/iconify/20-ids.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '../../dist/iconify'; +import { Icon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; const iconDataWithID = { diff --git a/packages/react/tests/iconify/20-inline.test.js b/packages/react/tests/iconify/20-inline.test.js index 9d62fd9..c8a1d1c 100644 --- a/packages/react/tests/iconify/20-inline.test.js +++ b/packages/react/tests/iconify/20-inline.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '../../dist/iconify'; +import { Icon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/iconify/20-transformations.test.js b/packages/react/tests/iconify/20-transformations.test.js index 020d924..7a513f4 100644 --- a/packages/react/tests/iconify/20-transformations.test.js +++ b/packages/react/tests/iconify/20-transformations.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { InlineIcon } from '../../dist/iconify'; +import { InlineIcon } from '../../lib/iconify'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/offline/10-basic.test.js b/packages/react/tests/offline/10-basic.test.js index e78fdbf..168efd7 100644 --- a/packages/react/tests/offline/10-basic.test.js +++ b/packages/react/tests/offline/10-basic.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, InlineIcon } from '../../dist/offline'; +import { Icon, InlineIcon } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/offline/10-empty.test.js b/packages/react/tests/offline/10-empty.test.js index 5dd2b83..cae57a3 100644 --- a/packages/react/tests/offline/10-empty.test.js +++ b/packages/react/tests/offline/10-empty.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '../../dist/offline'; +import { Icon } from '../../lib/offline'; import renderer from 'react-test-renderer'; describe('Empty icon', () => { diff --git a/packages/react/tests/offline/20-attributes.test.js b/packages/react/tests/offline/20-attributes.test.js index bcb4e82..03051ed 100644 --- a/packages/react/tests/offline/20-attributes.test.js +++ b/packages/react/tests/offline/20-attributes.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, InlineIcon } from '../../dist/offline'; +import { Icon, InlineIcon } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/offline/20-dimensions.test.js b/packages/react/tests/offline/20-dimensions.test.js index 583bd74..0924f22 100644 --- a/packages/react/tests/offline/20-dimensions.test.js +++ b/packages/react/tests/offline/20-dimensions.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { InlineIcon } from '../../dist/offline'; +import { InlineIcon } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/offline/20-ids.test.js b/packages/react/tests/offline/20-ids.test.js index 2a3f863..948c4d0 100644 --- a/packages/react/tests/offline/20-ids.test.js +++ b/packages/react/tests/offline/20-ids.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '../../dist/offline'; +import { Icon } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconDataWithID = { diff --git a/packages/react/tests/offline/20-inline.test.js b/packages/react/tests/offline/20-inline.test.js index a476fa3..7d8ab68 100644 --- a/packages/react/tests/offline/20-inline.test.js +++ b/packages/react/tests/offline/20-inline.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '../../dist/offline'; +import { Icon } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/offline/20-storage.test.js b/packages/react/tests/offline/20-storage.test.js index 22769d0..fc79a39 100644 --- a/packages/react/tests/offline/20-storage.test.js +++ b/packages/react/tests/offline/20-storage.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, addIcon, addCollection } from '../../dist/offline'; +import { Icon, addIcon, addCollection } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconData = { diff --git a/packages/react/tests/offline/20-transformations.test.js b/packages/react/tests/offline/20-transformations.test.js index f55d85f..094a557 100644 --- a/packages/react/tests/offline/20-transformations.test.js +++ b/packages/react/tests/offline/20-transformations.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { InlineIcon } from '../../dist/offline'; +import { InlineIcon } from '../../lib/offline'; import renderer from 'react-test-renderer'; const iconData = {