agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-08 15:54:09 +00:00
Code Issues Releases Activity

Update dependencies in icon components

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-09-07 22:11:48 +03:00
parent 286a623085
commit 0ec3270dc1
12 changed files with 1060 additions and 1023 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/ember/package.json
View File

@ -25,18 +25,18 @@
"devDependencies": { "devDependencies": {
"@iconify/core": "workspace:^", "@iconify/core": "workspace:^",
"@iconify/utils": "workspace:^", "@iconify/utils": "workspace:^",
"@microsoft/api-extractor": "^7.25.2", "@microsoft/api-extractor": "^7.30.0",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^14.0.0",
"@rollup/plugin-typescript": "^8.3.3", "@rollup/plugin-typescript": "^8.5.0",
"rollup": "^2.75.6", "rollup": "^2.79.0",
"typescript": "^4.7.4" "typescript": "^4.8.2"
}, },
"dependencies": { "dependencies": {
"@glimmer/component": "^1.1.2", "@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2", "@glimmer/tracking": "^1.1.2",
"@iconify/types": "workspace:^", "@iconify/types": "workspace:^",
"ember-cli-babel": "^7.26.11", "ember-cli-babel": "^7.26.11",
"ember-cli-htmlbars": "^6.0.1" "ember-cli-htmlbars": "^6.1.0"
}, },
"ember": { "ember": {
"edition": "octane" "edition": "octane"

22
components/react/package.json
View File

@ -48,20 +48,20 @@
"@iconify/types": "workspace:^" "@iconify/types": "workspace:^"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.18.2", "@babel/preset-env": "^7.19.0",
"@babel/preset-react": "^7.17.12", "@babel/preset-react": "^7.18.6",
"@iconify/core": "workspace:^", "@iconify/core": "workspace:^",
"@iconify/utils": "workspace:^", "@iconify/utils": "workspace:^",
"@microsoft/api-extractor": "^7.25.2", "@microsoft/api-extractor": "^7.30.0",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^14.0.0",
"@types/react": "^17.0.47", "@types/react": "^17.0.49",
"babel-jest": "^27.5.1", "babel-jest": "^29.0.2",
"jest": "^28.1.1", "jest": "^29.0.2",
"react": "^17.0.2", "react": "^18.2.0",
"react-test-renderer": "^17.0.2", "react-test-renderer": "^18.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.75.6", "rollup": "^2.79.0",
"typescript": "^4.7.4" "typescript": "^4.8.2"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16" "react": ">=16"

24
components/svg-framework/package.json
View File

@ -74,22 +74,22 @@
"devDependencies": { "devDependencies": {
"@iconify/core": "workspace:^", "@iconify/core": "workspace:^",
"@iconify/utils": "workspace:^", "@iconify/utils": "workspace:^",
"@microsoft/api-extractor": "^7.25.2", "@microsoft/api-extractor": "^7.30.0",
"@rollup/plugin-buble": "^0.21.3", "@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^14.0.0",
"@rollup/plugin-replace": "^4.0.0", "@rollup/plugin-replace": "^4.0.0",
"@types/jest": "^27.5.2", "@types/jest": "^29.0.0",
"@types/jsdom": "^16.2.14", "@types/jsdom": "^20.0.0",
"@types/node": "^17.0.45", "@types/node": "^18.7.15",
"@typescript-eslint/eslint-plugin": "^5.28.0", "@typescript-eslint/eslint-plugin": "^5.36.2",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.18.0", "eslint": "^8.23.0",
"jest": "^28.1.1", "jest": "^29.0.2",
"jsdom": "^19.0.0", "jsdom": "^20.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.75.6", "rollup": "^2.79.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"ts-jest": "28.0.0-next.3", "ts-jest": "^29.0.0-next.1",
"typescript": "^4.7.4" "typescript": "^4.8.2"
} }
} }

12
components/svg-framework/tests/ready-test.ts
View File

@ -4,21 +4,25 @@ import { onReady } from '../src/helpers/ready';
describe('Testing onReady callback', () => { describe('Testing onReady callback', () => {
afterEach(cleanupGlobals); afterEach(cleanupGlobals);
it('Testing onReady before DOM is loaded', (done) => { it('Testing onReady before DOM is loaded', () => {
return new Promise((fulfill) => {
setupDOM(''); setupDOM('');
expect(document.readyState).toBe('loading'); expect(document.readyState).toBe('loading');
onReady(() => { onReady(() => {
done(); fulfill(true);
});
}); });
}); });
it('Testing onReady after DOM is loaded', (done) => { it('Testing onReady after DOM is loaded', () => {
return new Promise((fulfill) => {
setupDOM(''); setupDOM('');
expect(document.readyState).toBe('loading'); expect(document.readyState).toBe('loading');
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
expect(document.readyState).toBe('interactive'); expect(document.readyState).toBe('interactive');
onReady(() => { onReady(() => {
done(); fulfill(true);
});
}); });
}); });
}); });

22
components/vue/package.json
View File

@ -45,19 +45,19 @@
"@iconify/types": "workspace:^" "@iconify/types": "workspace:^"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.18.2", "@babel/preset-env": "^7.19.0",
"@iconify/core": "workspace:^", "@iconify/core": "workspace:^",
"@iconify/utils": "workspace:^", "@iconify/utils": "workspace:^",
"@microsoft/api-extractor": "^7.25.2", "@microsoft/api-extractor": "^7.30.0",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^14.0.0",
"@types/jest": "^27.5.2", "@types/jest": "^29.0.0",
"@vitejs/plugin-vue": "^2.3.3", "@vitejs/plugin-vue": "^3.1.0",
"@vue/test-utils": "^2.0.1", "@vue/test-utils": "^2.0.2",
"jsdom": "^19.0.0", "jsdom": "^20.0.0",
"rollup": "^2.75.6", "rollup": "^2.79.0",
"typescript": "^4.7.4", "typescript": "^4.8.2",
"vitest": "^0.7.13", "vitest": "^0.23.1",
"vue": "^3.2.37" "vue": "^3.2.38"
}, },
"peerDependencies": { "peerDependencies": {
"vue": ">=3" "vue": ">=3"

6
components/vue/tests/api/10-api-mock-test.ts
View File

@ -3,7 +3,8 @@ 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', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'mock-test'; const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -35,7 +36,8 @@ describe('Testing fake API', () => {
]); ]);
expect(missing).toMatchObject([]); expect(missing).toMatchObject([]);
expect(pending).toMatchObject([]); expect(pending).toMatchObject([]);
done(); fulfill(true);
});
}); });
}); });
}); });

24
components/vue/tests/api/20-rendering-from-api-test.ts
View File

@ -12,7 +12,8 @@ const iconData = {
}; };
describe('Rendering icon', () => { describe('Rendering icon', () => {
test('rendering icon after loading it', (done) => { test('rendering icon after loading it', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'render-test'; const name = 'render-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -76,13 +77,15 @@ describe('Rendering icon', () => {
// Make sure onLoad has been called // Make sure onLoad has been called
expect(onLoadCalled).toEqual(true); expect(onLoadCalled).toEqual(true);
done(); fulfill(true);
}) })
.catch(done); .catch(reject);
});
}); });
}); });
test('rendering icon before loading it', (done) => { test('rendering icon before loading it', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'mock-test'; const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -139,9 +142,9 @@ describe('Rendering icon', () => {
'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
done(); fulfill(true);
}) })
.catch(done); .catch(reject);
}, },
}, },
data() { data() {
@ -159,8 +162,10 @@ describe('Rendering icon', () => {
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toEqual(false); expect(onLoadCalled).toEqual(false);
}); });
});
test('missing icon', (done) => { test('missing icon', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'missing-icon'; const name = 'missing-icon';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -191,9 +196,9 @@ describe('Rendering icon', () => {
}) })
.then(() => { .then(() => {
expect(wrapper.html()).toEqual(defaultIconResult); expect(wrapper.html()).toEqual(defaultIconResult);
done(); fulfill(true);
}) })
.catch(done); .catch(reject);
}, },
}); });
@ -213,3 +218,4 @@ describe('Rendering icon', () => {
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
}); });
}); });
});

28
components/vue/tests/api/30-changing-props-test.ts
View File

@ -17,7 +17,8 @@ const iconData2 = {
}; };
describe('Rendering icon', () => { describe('Rendering icon', () => {
test('changing icon property', (done) => { test('changing icon property', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'changing-prop'; const name = 'changing-prop';
const name2 = 'changing-prop2'; const name2 = 'changing-prop2';
@ -48,7 +49,7 @@ describe('Rendering icon', () => {
icon: iconName2, icon: iconName2,
}); });
}) })
.catch(done); .catch(reject);
break; break;
@ -67,9 +68,9 @@ describe('Rendering icon', () => {
'"><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>'
); );
done(); fulfill(true);
}) })
.catch(done); .catch(reject);
break; break;
@ -145,8 +146,10 @@ describe('Rendering icon', () => {
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toEqual(''); expect(onLoadCalled).toEqual('');
}); });
});
test('changing icon property while loading', (done) => { test('changing icon property while loading', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'changing-prop'; const name = 'changing-prop';
const name2 = 'changing-prop2'; const name2 = 'changing-prop2';
@ -158,7 +161,7 @@ describe('Rendering icon', () => {
const onLoad = (name) => { const onLoad = (name) => {
switch (name) { switch (name) {
case iconName: case iconName:
done('onLoad should not be called for initial icon'); reject('onLoad should not be called for initial icon');
break; break;
case iconName2: case iconName2:
@ -173,9 +176,9 @@ describe('Rendering icon', () => {
'"><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>'
); );
done(); fulfill(true);
}) })
.catch(done); .catch(reject);
break; break;
@ -249,8 +252,10 @@ describe('Rendering icon', () => {
// Async // Async
isSync = false; isSync = false;
}); });
});
test('changing multiple properties', (done) => { test('changing multiple properties', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'multiple-props'; const name = 'multiple-props';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -289,9 +294,9 @@ describe('Rendering icon', () => {
'" 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>'
); );
done(); fulfill(true);
} catch (err) { } catch (err) {
done(err); reject(err);
} }
})(); })();
}; };
@ -332,3 +337,4 @@ describe('Rendering icon', () => {
const wrapper = mount(Wrapper, {}); const wrapper = mount(Wrapper, {});
}); });
}); });
});

18
components/vue2/package.json
View File

@ -45,19 +45,19 @@
"@iconify/types": "workspace:^" "@iconify/types": "workspace:^"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.18.2", "@babel/preset-env": "^7.19.0",
"@iconify/core": "workspace:^", "@iconify/core": "workspace:^",
"@iconify/utils": "workspace:^", "@iconify/utils": "workspace:^",
"@microsoft/api-extractor": "^7.25.2", "@microsoft/api-extractor": "^7.30.0",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
"@types/jest": "^27.5.2", "@types/jest": "^29.0.0",
"@vue/test-utils": "^1.3.0", "@vue/test-utils": "^1.3.0",
"@vue/vue2-jest": "^27.0.0", "@vue/vue2-jest": "^29.0.0",
"babel-jest": "^27.5.1", "babel-jest": "^29.0.2",
"jest": "28.0.0-alpha.11", "jest": "^29.0.2",
"rollup": "^2.75.6", "rollup": "^2.79.0",
"typescript": "^4.7.4", "typescript": "^4.8.2",
"vue": "^2.6.14" "vue": "^2.7.10"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "2.x" "vue": "2.x"

6
components/vue2/tests/api/10-api-mock.test.js
View File

@ -6,7 +6,8 @@ import { mockAPIData } from '@iconify/core/lib/api/modules/mock.cjs';
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', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'mock-test'; const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -38,7 +39,8 @@ describe('Testing fake API', () => {
]); ]);
expect(missing).toMatchObject([]); expect(missing).toMatchObject([]);
expect(pending).toMatchObject([]); expect(pending).toMatchObject([]);
done(); fulfill(true);
});
}); });
}); });
}); });

29
components/vue2/tests/api/20-rendering-from-api.test.js
View File

@ -9,14 +9,14 @@ import { provider, nextPrefix } from './load';
import { defaultIconResult } from '../empty'; import { defaultIconResult } from '../empty';
const iconData = { const iconData = {
body: body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
'<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', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'render-test'; const name = 'render-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -79,12 +79,14 @@ describe('Rendering icon', () => {
// Make sure onLoad has been called // Make sure onLoad has been called
expect(onLoadCalled).toBe(true); expect(onLoadCalled).toBe(true);
done(); fulfill(true);
});
}); });
}); });
}); });
test('rendering icon before loading it', done => { test('rendering icon before loading it', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'mock-test'; const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -101,7 +103,7 @@ 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)).toBe(false); expect(iconExists(iconName)).toBe(false);
@ -132,7 +134,9 @@ describe('Rendering icon', () => {
// Test component on next tick // Test component on next tick
Vue.nextTick(() => { Vue.nextTick(() => {
// Check HTML // Check HTML
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( 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" 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" 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
@ -142,7 +146,7 @@ describe('Rendering icon', () => {
// onLoad should have been called // onLoad should have been called
expect(onLoadCalled).toBe(true); expect(onLoadCalled).toBe(true);
done(); fulfill(true);
}); });
}, },
}, },
@ -161,8 +165,10 @@ describe('Rendering icon', () => {
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toBe(false); expect(onLoadCalled).toBe(false);
}); });
});
test('missing icon', done => { test('missing icon', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'missing-icon'; const name = 'missing-icon';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
@ -171,7 +177,7 @@ 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)).toBe(false); expect(iconExists(iconName)).toBe(false);
@ -187,7 +193,7 @@ describe('Rendering icon', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(wrapper.html()).toBe(defaultIconResult); expect(wrapper.html()).toBe(defaultIconResult);
done(); fulfill(true);
}); });
}); });
}); });
@ -213,3 +219,4 @@ describe('Rendering icon', () => {
expect(wrapper.html()).toBe(defaultIconResult); expect(wrapper.html()).toBe(defaultIconResult);
}); });
}); });
});

54
components/vue2/tests/api/30-changing-props.test.js
View File

@ -9,21 +9,20 @@ import { provider, nextPrefix } from './load';
import { defaultIconResult } from '../empty'; import { defaultIconResult } from '../empty';
const iconData = { const iconData = {
body: body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24, width: 24,
height: 24, height: 24,
}; };
const iconData2 = { const iconData2 = {
body: body: '<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
'<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', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'changing-prop'; const name = 'changing-prop';
const name2 = 'changing-prop2'; const name2 = 'changing-prop2';
@ -32,7 +31,7 @@ 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
@ -41,7 +40,9 @@ describe('Rendering icon', () => {
// Wait 1 tick, then test rendered icon // Wait 1 tick, then test rendered icon
Vue.nextTick(() => { Vue.nextTick(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( 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" 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" 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>'
@ -62,7 +63,9 @@ describe('Rendering icon', () => {
// Wait 1 tick, then test rendered icon // Wait 1 tick, then test rendered icon
Vue.nextTick(() => { Vue.nextTick(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( 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" 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" 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>'
@ -71,7 +74,7 @@ describe('Rendering icon', () => {
// onLoad should have been called for second icon // onLoad should have been called for second icon
expect(onLoadCalled).toBe(iconName2); expect(onLoadCalled).toBe(iconName2);
done(); fulfill(true);
}); });
break; break;
@ -91,7 +94,7 @@ 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)).toBe(false); expect(iconExists(iconName)).toBe(false);
@ -116,7 +119,7 @@ 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)).toBe(false); expect(iconExists(iconName2)).toBe(false);
@ -148,8 +151,10 @@ describe('Rendering icon', () => {
// onLoad should not have been called yet // onLoad should not have been called yet
expect(onLoadCalled).toBe(''); expect(onLoadCalled).toBe('');
}); });
});
test('changing icon property while loading', done => { test('changing icon property while loading', () => {
return new Promise((fulfill, reject) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'changing-prop'; const name = 'changing-prop';
const name2 = 'changing-prop2'; const name2 = 'changing-prop2';
@ -158,22 +163,24 @@ describe('Rendering icon', () => {
const className = `iconify iconify--${prefix} iconify--${provider}`; const className = `iconify iconify--${prefix} iconify--${provider}`;
let isSync = true; let isSync = true;
const onLoad = name => { const onLoad = (name) => {
switch (name) { switch (name) {
case iconName: case iconName:
done('onLoad should not be called for initial icon'); reject('onLoad should not be called for initial icon');
break; break;
case iconName2: case iconName2:
// Wait 1 tick, then test rendered icon // Wait 1 tick, then test rendered icon
Vue.nextTick(() => { Vue.nextTick(() => {
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( 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" 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" 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>'
); );
done(); fulfill(true);
}); });
break; break;
@ -193,7 +200,7 @@ 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).toBe(false); expect(isSync).toBe(false);
@ -212,7 +219,7 @@ describe('Rendering icon', () => {
[name2]: iconData2, [name2]: iconData2,
}, },
}, },
delay: next => { delay: (next) => {
// Should have been called asynchronously // Should have been called asynchronously
expect(isSync).toBe(false); expect(isSync).toBe(false);
@ -249,14 +256,16 @@ describe('Rendering icon', () => {
// Async // Async
isSync = false; isSync = false;
}); });
});
test('changing multiple properties', done => { test('changing multiple properties', () => {
return new Promise((fulfill) => {
const prefix = nextPrefix(); const prefix = nextPrefix();
const name = 'multiple-props'; const name = 'multiple-props';
const iconName = `@${provider}:${prefix}:${name}`; const iconName = `@${provider}:${prefix}:${name}`;
const className = `iconify iconify--${prefix} iconify--${provider}`; const className = `iconify iconify--${prefix} iconify--${provider}`;
const onLoad = name => { const onLoad = (name) => {
expect(name).toBe(iconName); expect(name).toBe(iconName);
// Wait 1 tick, test rendered icon // Wait 1 tick, test rendered icon
@ -284,7 +293,7 @@ describe('Rendering icon', () => {
'" 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>'
); );
done(); fulfill(true);
}); });
}); });
}; };
@ -299,7 +308,7 @@ 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)).toBe(false); expect(iconExists(iconName)).toBe(false);
@ -326,3 +335,4 @@ describe('Rendering icon', () => {
expect(wrapper.html()).toBe(defaultIconResult); expect(wrapper.html()).toBe(defaultIconResult);
}); });
}); });
});