agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-12 21:57:50 +00:00
Code Issues Releases Activity

Update Vue 2 component for new core structure

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-09-27 17:28:22 +03:00
parent e77de11118
commit 4288be3301
32 changed files with 4204 additions and 8912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vue2/.babelrc
View File

@ -1,8 +1,3 @@
{ {
"presets": [["env", { "modules": false }]], "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
"env": {
"test": {
"presets": [["env", { "targets": { "node": "current" } }]]
}
}
} }

3
packages/vue2/api-extractor.iconify.json
View File

@ -5,7 +5,8 @@
"@iconify/types", "@iconify/types",
"@iconify/core", "@iconify/core",
"@iconify/utils", "@iconify/utils",
"@cyberalien/redundancy" "@cyberalien/redundancy",
"@iconify/api-redundancy"
], ],
"compiler": {}, "compiler": {},
"apiReport": { "apiReport": {

37
packages/vue2/api-extractor.offline.json
View File

@ -1,44 +1,9 @@
{ {
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"extends": "./api-extractor.iconify.json",
"mainEntryPointFilePath": "lib/offline.d.ts", "mainEntryPointFilePath": "lib/offline.d.ts",
"bundledPackages": [
"@iconify/types",
"@iconify/core",
"@iconify/utils",
"@cyberalien/redundancy"
],
"compiler": {},
"apiReport": {
"enabled": false
},
"docModel": {
"enabled": false
},
"dtsRollup": { "dtsRollup": {
"enabled": true, "enabled": true,
"untrimmedFilePath": "<projectFolder>/dist/offline.d.ts" "untrimmedFilePath": "<projectFolder>/dist/offline.d.ts"
},
"tsdocMetadata": {
"enabled": false
},
"messages": {
"compilerMessageReporting": {
"default": {
"logLevel": "warning"
}
},
"extractorMessageReporting": {
"default": {
"logLevel": "warning"
},
"ae-missing-release-tag": {
"logLevel": "none"
}
},
"tsdocMessageReporting": {
"default": {
"logLevel": "warning"
}
}
} }
} }

6
packages/vue2/jest.config.js
View File

@ -1,10 +1,8 @@
module.exports = { module.exports = {
verbose: true,
moduleFileExtensions: ['js', 'json', 'vue'], moduleFileExtensions: ['js', 'json', 'vue'],
transform: { transform: {
'.*\\.(vue)$': 'vue-jest', '^.+\\.js$': 'babel-jest',
'^.+\\.js$': '<rootDir>/node_modules/babel-jest', '^.+\\.vue$': '@vue/vue2-jest',
}, },
collectCoverage: false,
testMatch: ['**/tests/**/*.test.js'], testMatch: ['**/tests/**/*.test.js'],
}; };

14
packages/vue2/offline/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "@iconify/vue2/offline",
"module": "../dist/offline.mjs",
"main": "../dist/offline.js",
"types": "../dist/offline.d.ts",
"exports": {
"./*": "./*",
".": {
"import": "../dist/offline.mjs",
"types": "../dist/offline.d.ts",
"default": "../dist/offline.js"
}
}
}

5
packages/vue2/offline/readme.md Normal file
View File

@ -0,0 +1,5 @@
# @iconify/react/offline
This sub-directory contains `package.json` with entry points for importing `@iconify/react/offline`.
There is a duplicate entry in `exports` section of `package.json` in the parent directory, but at moment of coding this, TypeScript does not support conditional exports properly, so this directory is used as a duplicate to make everything work with TypeScript.

12524
packages/vue2/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
packages/vue2/package.json
View File

@ -18,31 +18,37 @@
"build:dist": "rollup -c rollup.config.js", "build:dist": "rollup -c rollup.config.js",
"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json", "prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json", "build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
"pretest": "npm run build",
"test": "jest" "test": "jest"
}, },
"main": "dist/iconify.js", "main": "dist/iconify.js",
"module": "dist/iconify.mjs", "module": "dist/iconify.mjs",
"types": "dist/iconify.d.ts", "types": "dist/iconify.d.ts",
"exports": {
"./*": "./*",
".": {
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./offline": {
"import": "./dist/offline.mjs",
"types": "./dist/offline.d.ts",
"default": "./dist/offline.js"
}
},
"devDependencies": { "devDependencies": {
"@iconify/core": "^1.2.0-beta.2", "@babel/preset-env": "^7.15.6",
"@iconify/types": "^1.0.6", "@iconify/core": "^1.2.0-beta.3",
"@iconify/utils": "^1.0.7",
"@microsoft/api-extractor": "^7.15.1", "@microsoft/api-extractor": "^7.15.1",
"@rollup/plugin-commonjs": "^18.1.0",
"@rollup/plugin-node-resolve": "^13.0.0", "@rollup/plugin-node-resolve": "^13.0.0",
"@types/jest": "^26.0.23", "@types/jest": "^27.0.2",
"@vue/test-utils": "^1.2.0", "@vue/test-utils": "^1.2.2",
"babel-eslint": "^10.1.0", "@vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^26.6.3", "babel-jest": "^27.2.2",
"babel-preset-env": "^1.7.0", "jest": "^27.2.2",
"jest": "^26.6.3", "rollup": "^2.57.0",
"rollup": "^2.47.0", "typescript": "^4.4.3",
"rollup-plugin-terser": "^7.0.2", "vue": "^2.6.14"
"typescript": "^4.2.4",
"vue": "^2.6.12",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.12"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "2.x" "vue": "2.x"

5
packages/vue2/rollup.config.js
View File

@ -1,5 +1,4 @@
import resolve from '@rollup/plugin-node-resolve'; import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
const names = ['offline', 'iconify']; const names = ['offline', 'iconify'];
const component = 'Icon'; const component = 'Icon';
@ -19,7 +18,7 @@ names.forEach((name) => {
}, },
], ],
external: ['vue'], external: ['vue'],
plugins: [resolve(), commonjs()], plugins: [resolve()],
}); });
// UMD module // UMD module
@ -37,7 +36,7 @@ names.forEach((name) => {
}, },
], ],
external: ['vue'], external: ['vue'],
plugins: [resolve(), commonjs()], plugins: [resolve()],
}); });
}); });

173
packages/vue2/src/iconify.ts
View File

@ -1,71 +1,77 @@
import Vue, { CreateElement, VNode } from 'vue'; import Vue from 'vue';
import { ExtendedVue } from 'vue/types/vue'; import type { CreateElement, VNode } from 'vue';
import { IconifyJSON } from '@iconify/types'; import type { ExtendedVue } from 'vue/types/vue';
import type { IconifyJSON, IconifyIcon } from '@iconify/types';
// Core // Core
import { IconifyIconName, stringToIcon } from '@iconify/utils/lib/icon/name'; import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
import { import { stringToIcon } from '@iconify/utils/lib/icon/name';
import type {
IconifyIconSize, IconifyIconSize,
IconifyHorizontalIconAlignment, IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment, IconifyVerticalIconAlignment,
} from '@iconify/utils/lib/customisations'; } from '@iconify/utils/lib/customisations';
import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
import { import {
IconifyStorageFunctions, iconExists,
storageFunctions, getIcon,
addIcon,
addCollection,
getIconData, getIconData,
allowSimpleNames, allowSimpleNames,
} from '@iconify/core/lib/storage/functions'; } from '@iconify/core/lib/storage/functions';
import { import { listIcons } from '@iconify/core/lib/storage/storage';
IconifyBuilderFunctions, import type { IconifyBuilderFunctions } from '@iconify/core/lib/builder/functions';
builderFunctions, import { buildIcon } from '@iconify/core/lib/builder/functions';
} from '@iconify/core/lib/builder/functions'; import { replaceIDs } from '@iconify/utils/lib/svg/id';
import { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; import { calculateSize } from '@iconify/utils/lib/svg/size';
import { fullIcon, IconifyIcon } from '@iconify/utils/lib/icon'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
import { fullIcon } from '@iconify/utils/lib/icon';
// API // API
import { import type {
IconifyAPIFunctions, IconifyAPIFunctions,
IconifyAPIInternalFunctions, IconifyAPIInternalFunctions,
APIFunctions,
APIInternalFunctions,
IconifyAPIQueryParams, IconifyAPIQueryParams,
IconifyAPICustomQueryParams, IconifyAPICustomQueryParams,
IconifyAPIMergeQueryParams, IconifyAPIMergeQueryParams,
} from '@iconify/core/lib/api/functions'; } from '@iconify/core/lib/api/functions';
import { import type {
setAPIModule,
IconifyAPIModule, IconifyAPIModule,
IconifyAPISendQuery, IconifyAPISendQuery,
IconifyAPIPrepareIconsQuery, IconifyAPIPrepareIconsQuery,
} from '@iconify/core/lib/api/modules'; } from '@iconify/core/lib/api/modules';
import { jsonpAPIModule } from '@iconify/core/lib/api/modules/jsonp'; import { setAPIModule } from '@iconify/core/lib/api/modules';
import { import type {
fetchAPIModule,
getFetch,
setFetch,
} from '@iconify/core/lib/api/modules/fetch';
import {
setAPIConfig,
PartialIconifyAPIConfig, PartialIconifyAPIConfig,
IconifyAPIConfig, IconifyAPIConfig,
GetAPIConfig, GetAPIConfig,
} from '@iconify/core/lib/api/config'; } from '@iconify/core/lib/api/config';
import { import {
addAPIProvider,
getAPIConfig,
listAPIProviders,
} from '@iconify/core/lib/api/config';
import { fetchAPIModule, setFetch } from '@iconify/core/lib/api/modules/fetch';
import type {
IconifyIconLoaderCallback, IconifyIconLoaderCallback,
IconifyIconLoaderAbort, IconifyIconLoaderAbort,
} from '@iconify/core/lib/api/icons'; } from '@iconify/core/lib/api/icons';
import { loadIcons } from '@iconify/core/lib/api/icons';
import { sendAPIQuery } from '@iconify/core/lib/api/query';
import { mergeParams } from '@iconify/core/lib/api/params';
// Cache // Cache
import { cache } from '@iconify/core/lib/cache'; import { cache } from '@iconify/core/lib/cache';
import { storeCache, loadCache } from '@iconify/core/lib/browser-storage'; import { storeCache, loadCache } from '@iconify/core/lib/browser-storage';
import { toggleBrowserCache } from '@iconify/core/lib/browser-storage/functions'; import { toggleBrowserCache } from '@iconify/core/lib/browser-storage/functions';
import { import type {
IconifyBrowserCacheType, IconifyBrowserCacheType,
IconifyBrowserCacheFunctions, IconifyBrowserCacheFunctions,
} from '@iconify/core/lib/browser-storage/functions'; } from '@iconify/core/lib/browser-storage/functions';
// Properties // Properties
import { import type {
RawIconCustomisations, RawIconCustomisations,
IconifyIconOnLoad, IconifyIconOnLoad,
IconProps, IconProps,
@ -124,71 +130,18 @@ export { RawIconCustomisations, IconifyIconBuildResult };
export { IconifyBrowserCacheType }; export { IconifyBrowserCacheType };
/** /**
* Enable and disable browser cache * Enable cache
*/ */
export const enableCache = (storage: IconifyBrowserCacheType) => function enableCache(storage: IconifyBrowserCacheType): void {
toggleBrowserCache(storage, true); toggleBrowserCache(storage, true);
}
export const disableCache = (storage: IconifyBrowserCacheType) => /**
* Disable cache
*/
function disableCache(storage: IconifyBrowserCacheType): void {
toggleBrowserCache(storage, false); toggleBrowserCache(storage, false);
}
/* Storage functions */
/**
* Check if icon exists
*/
export const iconExists = storageFunctions.iconExists;
/**
* Get icon data
*/
export const getIcon = storageFunctions.getIcon;
/**
* List available icons
*/
export const listIcons = storageFunctions.listIcons;
/**
* Add one icon
*/
export const addIcon = storageFunctions.addIcon;
/**
* Add icon set
*/
export const addCollection = storageFunctions.addCollection;
/* Builder functions */
/**
* Calculate icon size
*/
export const calculateSize = builderFunctions.calculateSize;
/**
* Replace unique ids in content
*/
export const replaceIDs = builderFunctions.replaceIDs;
/**
* Build SVG
*/
export const buildIcon = builderFunctions.buildIcon;
/* API functions */
/**
* Load icons
*/
export const loadIcons = APIFunctions.loadIcons;
/**
* Add API provider
*/
export const addAPIProvider = APIFunctions.addAPIProvider;
/**
* Export internal functions that can be used by third party implementations
*/
export const _api = APIInternalFunctions;
/** /**
* Initialise stuff * Initialise stuff
@ -197,15 +150,7 @@ export const _api = APIInternalFunctions;
allowSimpleNames(true); allowSimpleNames(true);
// Set API module // Set API module
setAPIModule('', getFetch() ? fetchAPIModule : jsonpAPIModule); setAPIModule('', fetchAPIModule);
/**
* Function to enable node-fetch for getting icons on server side
*/
_api.setFetch = (nodeFetch: typeof fetch) => {
setFetch(nodeFetch);
setAPIModule('', fetchAPIModule);
};
/** /**
* Browser stuff * Browser stuff
@ -263,7 +208,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
) { ) {
continue; continue;
} }
if (!setAPIConfig(key, value)) { if (!addAPIProvider(key, value)) {
console.error(err); console.error(err);
} }
} catch (e) { } catch (e) {
@ -434,3 +379,33 @@ export const Icon = Vue.extend({
return render(createElement, props, context, icon.data); return render(createElement, props, context, icon.data);
}, },
}); });
/**
* Internal API
*/
const _api: IconifyAPIInternalFunctions = {
getAPIConfig,
setAPIModule,
sendAPIQuery,
setFetch,
listAPIProviders,
mergeParams,
};
/**
* Export functions
*/
// IconifyAPIInternalFunctions
export { _api };
// IconifyAPIFunctions
export { addAPIProvider, loadIcons };
// IconifyStorageFunctions
export { iconExists, getIcon, listIcons, addIcon, addCollection };
// IconifyBuilderFunctions
export { replaceIDs, calculateSize, buildIcon };
// IconifyBrowserCacheFunctions
export { enableCache, disableCache };

11
packages/vue2/src/offline.ts
View File

@ -1,14 +1,15 @@
import Vue, { CreateElement, VNode } from 'vue'; import Vue from 'vue';
import { ExtendedVue } from 'vue/types/vue'; import type { CreateElement, VNode } from 'vue';
import { IconifyIcon, IconifyJSON } from '@iconify/types'; import type { ExtendedVue } from 'vue/types/vue';
import { import type { IconifyIcon, IconifyJSON } from '@iconify/types';
import type {
IconifyHorizontalIconAlignment, IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment, IconifyVerticalIconAlignment,
IconifyIconSize, IconifyIconSize,
} from '@iconify/utils/lib/customisations'; } from '@iconify/utils/lib/customisations';
import { fullIcon } from '@iconify/utils/lib/icon'; import { fullIcon } from '@iconify/utils/lib/icon';
import { parseIconSet } from '@iconify/utils/lib/icon-set/parse'; import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
import { import type {
IconifyIconCustomisations, IconifyIconCustomisations,
IconifyIconProps, IconifyIconProps,
IconProps, IconProps,

4
packages/vue2/src/props.ts
View File

@ -1,5 +1,5 @@
import { IconifyIcon } from '@iconify/types'; import type { IconifyIcon } from '@iconify/types';
import { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations'; import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations';
export { RawIconCustomisations }; export { RawIconCustomisations };

9
packages/vue2/src/render.ts
View File

@ -1,7 +1,8 @@
import _Vue, { VNode, VNodeData, RenderContext } from 'vue'; import type _Vue from 'vue';
import { IconifyIcon } from '@iconify/types'; import type { VNode, VNodeData, RenderContext } from 'vue';
import type { IconifyIcon } from '@iconify/types';
import type { FullIconCustomisations } from '@iconify/utils/lib/customisations';
import { import {
FullIconCustomisations,
defaults, defaults,
mergeCustomisations, mergeCustomisations,
} from '@iconify/utils/lib/customisations'; } from '@iconify/utils/lib/customisations';
@ -12,7 +13,7 @@ import {
import { rotateFromString } from '@iconify/utils/lib/customisations/rotate'; import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { replaceIDs } from '@iconify/utils/lib/svg/id';
import { IconifyIconCustomisations, IconProps } from './props'; import type { IconifyIconCustomisations, IconProps } from './props';
/** /**
* Default SVG attributes * Default SVG attributes

9
packages/vue2/tests/api/10-api-mock.test.js
View File

@ -1,9 +1,12 @@
import { loadIcons, iconExists } from '../../dist/iconify'; /**
* @jest-environment jsdom
*/
import { loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load'; import { provider, nextPrefix } from './load';
describe('Testing fake API', () => { describe('Testing fake API', () => {
test('using fake API to load icon', (done) => { test('using fake API to load icon', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'mock-test'; const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -22,7 +25,7 @@ describe('Testing fake API', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Load icon // Load icon
loadIcons([iconName], (loaded, missing, pending) => { loadIcons([iconName], (loaded, missing, pending) => {

60
packages/vue2/tests/api/20-rendering-from-api.test.js
View File

@ -1,16 +1,20 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon, loadIcons, iconExists } from '../../dist/iconify'; import { Icon, loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load'; import { provider, nextPrefix } from './load';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };
describe('Rendering icon', () => { describe('Rendering icon', () => {
test('rendering icon after loading it', (done) => { test('rendering icon after loading it', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'render-test'; const name = 'render-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -30,7 +34,7 @@ describe('Rendering icon', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Load icon // Load icon
loadIcons([iconName], (loaded, missing, pending) => { loadIcons([iconName], (loaded, missing, pending) => {
@ -44,7 +48,7 @@ describe('Rendering icon', () => {
]); ]);
expect(missing).toMatchObject([]); expect(missing).toMatchObject([]);
expect(pending).toMatchObject([]); expect(pending).toMatchObject([]);
expect(iconExists(iconName)).toEqual(true); expect(iconExists(iconName)).toBe(true);
// Render component // Render component
const Wrapper = { const Wrapper = {
@ -53,8 +57,8 @@ describe('Rendering icon', () => {
template: `<Icon icon="${iconName}" :onLoad="onLoad" class="test" />`, template: `<Icon icon="${iconName}" :onLoad="onLoad" class="test" />`,
methods: { methods: {
onLoad(name) { onLoad(name) {
expect(name).toEqual(iconName); expect(name).toBe(iconName);
expect(onLoadCalled).toEqual(false); expect(onLoadCalled).toBe(false);
onLoadCalled = true; onLoadCalled = true;
}, },
}, },
@ -63,20 +67,20 @@ describe('Rendering icon', () => {
const html = wrapper.html().replace(/\s*\n\s*/g, ''); const html = wrapper.html().replace(/\s*\n\s*/g, '');
// Check HTML // Check HTML
expect(html).toEqual( expect(html).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="test ' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="test ' +
className + className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
// Make sure onLoad has been called // Make sure onLoad has been called
expect(onLoadCalled).toEqual(true); expect(onLoadCalled).toBe(true);
done(); done();
}); });
}); });
test('rendering icon before loading it', (done) => { test('rendering icon before loading it', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'mock-test'; const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -93,25 +97,25 @@ describe('Rendering icon', () => {
[name]: iconData, [name]: iconData,
}, },
}, },
delay: (next) => { delay: next => {
// Icon should not have loaded yet // Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toEqual(false); expect(onLoadCalled).toBe(false);
// Send icon data // Send icon data
next(); next();
// Test it again // Test it again
expect(iconExists(iconName)).toEqual(true); expect(iconExists(iconName)).toBe(true);
// Check if state was changed // Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks // Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => { setTimeout(() => {
setTimeout(() => { setTimeout(() => {
// Check HTML // Check HTML
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className + className +
// 'foo' is appended because of weird Vue 2 behavior. Fixed in Vue 3 // 'foo' is appended because of weird Vue 2 behavior. Fixed in Vue 3
@ -119,7 +123,7 @@ describe('Rendering icon', () => {
); );
// onLoad should have been called // onLoad should have been called
expect(onLoadCalled).toEqual(true); expect(onLoadCalled).toBe(true);
done(); done();
}, 0); }, 0);
@ -128,7 +132,7 @@ describe('Rendering icon', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Render component // Render component
const Wrapper = { const Wrapper = {
@ -136,8 +140,8 @@ describe('Rendering icon', () => {
template: `<Icon icon="${iconName}" :onLoad="onLoad" :class="testClass" />`, template: `<Icon icon="${iconName}" :onLoad="onLoad" :class="testClass" />`,
methods: { methods: {
onLoad(name) { onLoad(name) {
expect(name).toEqual(iconName); expect(name).toBe(iconName);
expect(onLoadCalled).toEqual(false); expect(onLoadCalled).toBe(false);
onLoadCalled = true; onLoadCalled = true;
}, },
}, },
@ -154,13 +158,13 @@ describe('Rendering icon', () => {
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
// Should render empty icon // Should render empty icon
expect(wrapper.html()).toEqual(''); expect(wrapper.html()).toBe('');
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toEqual(false); expect(onLoadCalled).toBe(false);
}); });
test('missing icon', (done) => { test('missing icon', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'missing-icon'; const name = 'missing-icon';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -169,21 +173,21 @@ describe('Rendering icon', () => {
provider, provider,
prefix, prefix,
response: 404, response: 404,
delay: (next) => { delay: next => {
// Icon should not have loaded yet // Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Send icon data // Send icon data
next(); next();
// Test it again // Test it again
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Check if state was changed // Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks // Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => { setTimeout(() => {
setTimeout(() => { setTimeout(() => {
expect(wrapper.html()).toEqual(''); expect(wrapper.html()).toBe('');
done(); done();
}, 0); }, 0);
@ -192,7 +196,7 @@ describe('Rendering icon', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Render component // Render component
const Wrapper = { const Wrapper = {
@ -207,6 +211,6 @@ describe('Rendering icon', () => {
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
// Should render empty icon // Should render empty icon
expect(wrapper.html()).toEqual(''); expect(wrapper.html()).toBe('');
}); });
}); });

85
packages/vue2/tests/api/30-changing-props.test.js
View File

@ -1,22 +1,27 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon, iconExists } from '../../dist/iconify'; import { Icon, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load'; import { provider, nextPrefix } from './load';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };
const iconData2 = { const iconData2 = {
body: '<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>', body:
'<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
width: 32, width: 32,
height: 32, height: 32,
}; };
describe('Rendering icon', () => { describe('Rendering icon', () => {
test('changing icon property', (done) => { test('changing icon property', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'changing-prop'; const name = 'changing-prop';
const name2 = 'changing-prop2'; const name2 = 'changing-prop2';
@ -25,17 +30,17 @@ describe('Rendering icon', () => {
const className = `iconify iconify--${prefix} iconify--${provider}`; const className = `iconify iconify--${prefix} iconify--${provider}`;
let onLoadCalled = ''; // Name of icon from last onLoad call let onLoadCalled = ''; // Name of icon from last onLoad call
const onLoad = (name) => { const onLoad = name => {
// onLoad should be called only once per icon // onLoad should be called only once per icon
switch (name) { switch (name) {
// First onLoad call // First onLoad call
case iconName: case iconName:
expect(onLoadCalled).toEqual(''); expect(onLoadCalled).toBe('');
break; break;
// Second onLoad call // Second onLoad call
case iconName2: case iconName2:
expect(onLoadCalled).toEqual(iconName); expect(onLoadCalled).toBe(iconName);
break; break;
default: default:
@ -54,31 +59,31 @@ describe('Rendering icon', () => {
[name]: iconData, [name]: iconData,
}, },
}, },
delay: (next) => { delay: next => {
// Icon should not have loaded yet // Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toEqual(''); expect(onLoadCalled).toBe('');
// Send icon data // Send icon data
next(); next();
// Test it again // Test it again
expect(iconExists(iconName)).toEqual(true); expect(iconExists(iconName)).toBe(true);
// Check if state was changed // Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render) // Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
setTimeout(() => { setTimeout(() => {
setTimeout(() => { setTimeout(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className + className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
// onLoad should have been called // onLoad should have been called
expect(onLoadCalled).toEqual(iconName); expect(onLoadCalled).toBe(iconName);
wrapper.setProps({ wrapper.setProps({
icon: iconName2, icon: iconName2,
@ -98,31 +103,31 @@ describe('Rendering icon', () => {
[name2]: iconData2, [name2]: iconData2,
}, },
}, },
delay: (next) => { delay: next => {
// Icon should not have loaded yet // Icon should not have loaded yet
expect(iconExists(iconName2)).toEqual(false); expect(iconExists(iconName2)).toBe(false);
// onLoad should have been called only once for previous icon // onLoad should have been called only once for previous icon
expect(onLoadCalled).toEqual(iconName); expect(onLoadCalled).toBe(iconName);
// Send icon data // Send icon data
next(); next();
// Test it again // Test it again
expect(iconExists(iconName2)).toEqual(true); expect(iconExists(iconName2)).toBe(true);
// Check if state was changed // Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks // Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => { setTimeout(() => {
setTimeout(() => { setTimeout(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
className + className +
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>' '"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
); );
// onLoad should have been called for second icon // onLoad should have been called for second icon
expect(onLoadCalled).toEqual(iconName2); expect(onLoadCalled).toBe(iconName2);
done(); done();
}, 0); }, 0);
@ -131,7 +136,7 @@ describe('Rendering icon', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Render component // Render component
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
@ -142,13 +147,13 @@ describe('Rendering icon', () => {
}); });
// Should render placeholder // Should render placeholder
expect(wrapper.html()).toEqual(''); expect(wrapper.html()).toBe('');
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toEqual(''); expect(onLoadCalled).toBe('');
}); });
test('changing icon property while loading', (done) => { test('changing icon property while loading', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'changing-prop'; const name = 'changing-prop';
const name2 = 'changing-prop2'; const name2 = 'changing-prop2';
@ -167,9 +172,9 @@ describe('Rendering icon', () => {
[name]: iconData, [name]: iconData,
}, },
}, },
delay: (next) => { delay: next => {
// Should have been called asynchronously, which means icon name has changed // Should have been called asynchronously, which means icon name has changed
expect(isSync).toEqual(false); expect(isSync).toBe(false);
// Send icon data // Send icon data
next(); next();
@ -186,24 +191,24 @@ describe('Rendering icon', () => {
[name2]: iconData2, [name2]: iconData2,
}, },
}, },
delay: (next) => { delay: next => {
// Should have been called asynchronously // Should have been called asynchronously
expect(isSync).toEqual(false); expect(isSync).toBe(false);
// Icon should not have loaded yet // Icon should not have loaded yet
expect(iconExists(iconName2)).toEqual(false); expect(iconExists(iconName2)).toBe(false);
// Send icon data // Send icon data
next(); next();
// Test it again // Test it again
expect(iconExists(iconName2)).toEqual(true); expect(iconExists(iconName2)).toBe(true);
// Check if state was changed // Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render) // Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
setTimeout(() => { setTimeout(() => {
setTimeout(() => { setTimeout(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
className + className +
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>' '"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
@ -216,7 +221,7 @@ describe('Rendering icon', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Render component // Render component
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
@ -226,7 +231,7 @@ describe('Rendering icon', () => {
}); });
// Should render placeholder // Should render placeholder
expect(wrapper.html()).toEqual(''); expect(wrapper.html()).toBe('');
// Change icon name // Change icon name
wrapper.setProps({ wrapper.setProps({
@ -237,7 +242,7 @@ describe('Rendering icon', () => {
isSync = false; isSync = false;
}); });
test('changing multiple properties', (done) => { test('changing multiple properties', done => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'multiple-props'; const name = 'multiple-props';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -253,21 +258,21 @@ describe('Rendering icon', () => {
[name]: iconData, [name]: iconData,
}, },
}, },
delay: (next) => { delay: next => {
// Icon should not have loaded yet // Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Send icon data // Send icon data
next(); next();
// Test it again // Test it again
expect(iconExists(iconName)).toEqual(true); expect(iconExists(iconName)).toBe(true);
// Check if state was changed // Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render) // Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
setTimeout(() => { setTimeout(() => {
setTimeout(() => { setTimeout(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className + className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
@ -286,7 +291,7 @@ describe('Rendering icon', () => {
setTimeout(() => { setTimeout(() => {
expect( expect(
wrapper.html().replace(/\s*\n\s*/g, '') wrapper.html().replace(/\s*\n\s*/g, '')
).toEqual( ).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' + '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className + className +
'" style="color: red;"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>' '" style="color: red;"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
@ -300,7 +305,7 @@ describe('Rendering icon', () => {
}); });
// Check if icon has been loaded // Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false); expect(iconExists(iconName)).toBe(false);
// Render component with placeholder text // Render component with placeholder text
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
@ -310,6 +315,6 @@ describe('Rendering icon', () => {
}); });
// Should be empty // Should be empty
expect(wrapper.html()).toEqual(''); expect(wrapper.html()).toBe('');
}); });
}); });

12
packages/vue2/tests/iconify/10-basic.test.js
View File

@ -1,8 +1,12 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };
@ -20,7 +24,7 @@ describe('Creating component', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
}); });
@ -36,7 +40,7 @@ describe('Creating component', () => {
}, },
}); });
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
}); });

13
packages/vue2/tests/iconify/10-empty.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
describe('Empty icon', () => { describe('Empty icon', () => {
test('basic test', () => { test('basic test', () => {
@ -7,7 +10,7 @@ describe('Empty icon', () => {
propsData: {}, propsData: {},
}); });
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(''); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
}); });
test('with child node', () => { test('with child node', () => {
@ -17,7 +20,7 @@ describe('Empty icon', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<i class="fa fa-home"></i>' '<i class="fa fa-home"></i>'
); );
}); });
@ -29,7 +32,7 @@ describe('Empty icon', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.text()).toEqual('icon'); expect(wrapper.text()).toBe('icon');
}); });
test('with multiple childen', () => { test('with multiple childen', () => {
@ -39,7 +42,7 @@ describe('Empty icon', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<span><i class="fa fa-home"></i> Home icon</span>' '<span><i class="fa fa-home"></i> Home icon</span>'
); );
}); });

5
packages/vue2/tests/iconify/20-attributes.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
const iconData = { const iconData = {
body: body:

5
packages/vue2/tests/iconify/20-dimensions.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
const iconData = { const iconData = {
body: body:

5
packages/vue2/tests/iconify/20-ids.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
const iconDataWithID = { const iconDataWithID = {
body: body:

8
packages/vue2/tests/iconify/20-inline.test.js
View File

@ -1,8 +1,12 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };

10
packages/vue2/tests/iconify/20-transformations.test.js
View File

@ -1,8 +1,12 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify'; import { Icon } from '../../';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };
@ -20,7 +24,7 @@ describe('Rotation', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
); );
}); });

8
packages/vue2/tests/offline/10-basic.test.js
View File

@ -1,4 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
// Link to file
import { Icon } from '../../dist/offline'; import { Icon } from '../../dist/offline';
const iconData = { const iconData = {
@ -21,7 +25,7 @@ describe('Creating component', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
}); });
@ -33,7 +37,7 @@ describe('Creating component', () => {
}, },
}); });
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
}); });

14
packages/vue2/tests/offline/10-empty.test.js
View File

@ -1,5 +1,9 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline'; // Link to alias
import { Icon } from '../../offline';
describe('Empty icon', () => { describe('Empty icon', () => {
test('basic test', () => { test('basic test', () => {
@ -7,7 +11,7 @@ describe('Empty icon', () => {
propsData: {}, propsData: {},
}); });
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(''); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
}); });
test('with child node', () => { test('with child node', () => {
@ -17,7 +21,7 @@ describe('Empty icon', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<i class="fa fa-home"></i>' '<i class="fa fa-home"></i>'
); );
}); });
@ -29,7 +33,7 @@ describe('Empty icon', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.text()).toEqual('icon'); expect(wrapper.text()).toBe('icon');
}); });
test('with multiple childen', () => { test('with multiple childen', () => {
@ -39,7 +43,7 @@ describe('Empty icon', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<span><i class="fa fa-home"></i> Home icon</span>' '<span><i class="fa fa-home"></i> Home icon</span>'
); );
}); });

4
packages/vue2/tests/offline/20-attributes.test.js
View File

@ -1,4 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
// Link to file
import { Icon } from '../../dist/offline'; import { Icon } from '../../dist/offline';
const iconData = { const iconData = {

5
packages/vue2/tests/offline/20-dimensions.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline'; import { Icon } from '../../offline';
const iconData = { const iconData = {
body: body:

5
packages/vue2/tests/offline/20-ids.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline'; import { Icon } from '../../offline';
const iconDataWithID = { const iconDataWithID = {
body: body:

8
packages/vue2/tests/offline/20-inline.test.js
View File

@ -1,8 +1,12 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline'; import { Icon } from '../../offline';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };

13
packages/vue2/tests/offline/20-storage.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon, addIcon, addCollection } from '../../dist/offline'; import { Icon, addIcon, addCollection } from '../../offline';
const iconData = { const iconData = {
body: body:
@ -18,7 +21,7 @@ describe('Using storage', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
}); });
@ -53,7 +56,7 @@ describe('Using storage', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
); );
}); });
@ -83,7 +86,7 @@ describe('Using storage', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
); );
}); });
@ -95,6 +98,6 @@ describe('Using storage', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(''); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
}); });
}); });

8
packages/vue2/tests/offline/20-transformations.test.js
View File

@ -1,8 +1,12 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline'; import { Icon } from '../../dist/offline';
const iconData = { const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };
@ -20,7 +24,7 @@ describe('Rotation', () => {
}; };
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>' '<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
); );
}); });

1
packages/vue2/tsconfig.json
View File

@ -9,6 +9,7 @@
"strict": false, "strict": false,
"moduleResolution": "node", "moduleResolution": "node",
"esModuleInterop": true, "esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true "forceConsistentCasingInFileNames": true
} }
} }