mirror of
https://github.com/iconify/iconify.git
synced 2024-12-13 22:18:24 +00:00
Update Vue 2 component for new core structure
This commit is contained in:
parent
e77de11118
commit
4288be3301
@ -1,8 +1,3 @@
|
|||||||
{
|
{
|
||||||
"presets": [["env", { "modules": false }]],
|
"presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
|
||||||
"env": {
|
|
||||||
"test": {
|
|
||||||
"presets": [["env", { "targets": { "node": "current" } }]]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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": {
|
||||||
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
14
packages/vue2/offline/package.json
Normal 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
5
packages/vue2/offline/readme.md
Normal 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.
|
12506
packages/vue2/package-lock.json
generated
12506
packages/vue2/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
|
@ -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()],
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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 };
|
||||||
|
@ -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,
|
||||||
|
@ -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 };
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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) => {
|
||||||
|
@ -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('');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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('');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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:
|
||||||
|
@ -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:
|
||||||
|
@ -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:
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
|
@ -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>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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 = {
|
||||||
|
@ -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:
|
||||||
|
@ -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:
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
|
@ -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('');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
"strict": false,
|
"strict": false,
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
"importsNotUsedAsValues": "error",
|
||||||
"forceConsistentCasingInFileNames": true
|
"forceConsistentCasingInFileNames": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user