mirror of
https://github.com/iconify/iconify.git
synced 2024-11-09 23:00:56 +00:00
Fix bugs in Vue components, causing them to render incorrectly with SSR
This commit is contained in:
Vjacheslav Trushkin
parent
11ddb1dfe0
commit
dc8357209e
@ -230,6 +230,13 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Empty icon data, rendered when icon is not available
|
||||
*/
|
||||
const emptyIcon = fullIcon({
|
||||
body: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
@ -246,14 +253,14 @@ export const Icon = defineComponent({
|
||||
data() {
|
||||
return {
|
||||
// Mounted status
|
||||
mounted: false,
|
||||
iconMounted: false,
|
||||
|
||||
// Callback counter to trigger re-render
|
||||
counter: 0,
|
||||
};
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
mounted() {
|
||||
// Current icon name
|
||||
this._name = '';
|
||||
|
||||
@ -261,7 +268,7 @@ export const Icon = defineComponent({
|
||||
this._loadingIcon = null;
|
||||
|
||||
// Mark as mounted
|
||||
this.mounted = true;
|
||||
this.iconMounted = true;
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
@ -275,6 +282,7 @@ export const Icon = defineComponent({
|
||||
this._loadingIcon = null;
|
||||
}
|
||||
},
|
||||
|
||||
// Get data for icon to render or null
|
||||
getIcon(
|
||||
icon: IconifyIcon | string,
|
||||
@ -346,23 +354,19 @@ export const Icon = defineComponent({
|
||||
|
||||
// Render icon
|
||||
render() {
|
||||
if (!this.mounted) {
|
||||
return this.$slots.default ? this.$slots.default() : null;
|
||||
}
|
||||
|
||||
// Re-render when counter changes
|
||||
this.counter;
|
||||
|
||||
// Get icon data
|
||||
const props = this.$attrs;
|
||||
const icon: IconComponentData | null = this.getIcon(
|
||||
props.icon,
|
||||
props.onLoad
|
||||
);
|
||||
|
||||
// Get icon data
|
||||
const icon: IconComponentData | null = this.iconMounted
|
||||
? this.getIcon(props.icon, props.onLoad)
|
||||
: null;
|
||||
|
||||
// Validate icon object
|
||||
if (!icon) {
|
||||
return this.$slots.default ? this.$slots.default() : null;
|
||||
return render(emptyIcon, props);
|
||||
}
|
||||
|
||||
// Add classes
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon, loadIcons, iconExists } from '../../';
|
||||
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
|
||||
import { provider, nextPrefix } from './load';
|
||||
import { defaultIconResult } from '../empty';
|
||||
|
||||
const iconData = {
|
||||
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
||||
@ -63,9 +65,11 @@ describe('Rendering icon', () => {
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
const html = wrapper.html().replace(/\s*\n\s*/g, '');
|
||||
|
||||
// Check HTML
|
||||
// Check HTML on next tick
|
||||
nextTick()
|
||||
.then(() => {
|
||||
const html = wrapper.html().replace(/\s*\n\s*/g, '');
|
||||
expect(html).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
|
||||
className +
|
||||
@ -76,6 +80,8 @@ describe('Rendering icon', () => {
|
||||
expect(onLoadCalled).toEqual(true);
|
||||
|
||||
done();
|
||||
})
|
||||
.catch(done);
|
||||
});
|
||||
});
|
||||
|
||||
@ -108,24 +114,6 @@ describe('Rendering icon', () => {
|
||||
|
||||
// Test it again
|
||||
expect(iconExists(iconName)).toEqual(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
// Check HTML
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="foo ' +
|
||||
className +
|
||||
'" 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>'
|
||||
);
|
||||
|
||||
// onLoad should have been called
|
||||
expect(onLoadCalled).toEqual(true);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -141,6 +129,22 @@ describe('Rendering icon', () => {
|
||||
expect(name).toEqual(iconName);
|
||||
expect(onLoadCalled).toEqual(false);
|
||||
onLoadCalled = true;
|
||||
|
||||
// Test component on next tick
|
||||
nextTick()
|
||||
.then(() => {
|
||||
// Check HTML
|
||||
expect(
|
||||
wrapper.html().replace(/\s*\n\s*/g, '')
|
||||
).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="foo ' +
|
||||
className +
|
||||
'" 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>'
|
||||
);
|
||||
|
||||
done();
|
||||
})
|
||||
.catch(done);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -155,9 +159,6 @@ describe('Rendering icon', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render empty icon
|
||||
expect(wrapper.html()).toEqual('');
|
||||
|
||||
// onLoad should not have been called yet
|
||||
expect(onLoadCalled).toEqual(false);
|
||||
});
|
||||
@ -181,15 +182,21 @@ describe('Rendering icon', () => {
|
||||
// Test it again
|
||||
expect(iconExists(iconName)).toEqual(false);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
expect(wrapper.html()).toEqual('');
|
||||
|
||||
// Check if state was changed on next few ticks
|
||||
nextTick()
|
||||
.then(() => {
|
||||
expect(wrapper.html()).toEqual(defaultIconResult);
|
||||
return nextTick();
|
||||
})
|
||||
.then(() => {
|
||||
expect(wrapper.html()).toEqual(defaultIconResult);
|
||||
return nextTick();
|
||||
})
|
||||
.then(() => {
|
||||
expect(wrapper.html()).toEqual(defaultIconResult);
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
})
|
||||
.catch(done);
|
||||
},
|
||||
});
|
||||
|
||||
@ -207,8 +214,5 @@ describe('Rendering icon', () => {
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render empty icon
|
||||
expect(wrapper.html()).toEqual('');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon, iconExists } from '../../';
|
||||
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
|
||||
@ -34,11 +35,45 @@ describe('Rendering icon', () => {
|
||||
// First onLoad call
|
||||
case iconName:
|
||||
expect(onLoadCalled).toEqual('');
|
||||
|
||||
// Wait 1 tick, then test rendered icon
|
||||
nextTick()
|
||||
.then(() => {
|
||||
expect(
|
||||
wrapper.html().replace(/\s*\n\s*/g, '')
|
||||
).toEqual(
|
||||
'<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 +
|
||||
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
wrapper.setProps({
|
||||
icon: iconName2,
|
||||
});
|
||||
})
|
||||
.catch(done);
|
||||
|
||||
break;
|
||||
|
||||
// Second onLoad call
|
||||
case iconName2:
|
||||
expect(onLoadCalled).toEqual(iconName);
|
||||
|
||||
// Wait 1 tick, then test rendered icon
|
||||
nextTick()
|
||||
.then(() => {
|
||||
expect(
|
||||
wrapper.html().replace(/\s*\n\s*/g, '')
|
||||
).toEqual(
|
||||
'<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 +
|
||||
'"><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();
|
||||
})
|
||||
.catch(done);
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -67,27 +102,8 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon data is available
|
||||
expect(iconExists(iconName)).toEqual(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="' +
|
||||
className +
|
||||
'" 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>'
|
||||
);
|
||||
|
||||
// onLoad should have been called
|
||||
expect(onLoadCalled).toEqual(iconName);
|
||||
|
||||
wrapper.setProps({
|
||||
icon: iconName2,
|
||||
});
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -111,25 +127,8 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon data is available
|
||||
expect(iconExists(iconName2)).toEqual(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="' +
|
||||
className +
|
||||
'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><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
|
||||
expect(onLoadCalled).toEqual(iconName2);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -146,9 +145,6 @@ describe('Rendering icon', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render placeholder
|
||||
expect(wrapper.html()).toEqual('');
|
||||
|
||||
// onLoad should not have been called yet
|
||||
expect(onLoadCalled).toEqual('');
|
||||
});
|
||||
@ -162,6 +158,35 @@ describe('Rendering icon', () => {
|
||||
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||
let isSync = true;
|
||||
|
||||
const onLoad = (name) => {
|
||||
switch (name) {
|
||||
case iconName:
|
||||
done('onLoad should not be called for initial icon');
|
||||
break;
|
||||
|
||||
case iconName2:
|
||||
// Wait 1 tick, then test rendered icon
|
||||
nextTick()
|
||||
.then(() => {
|
||||
expect(
|
||||
wrapper.html().replace(/\s*\n\s*/g, '')
|
||||
).toEqual(
|
||||
'<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 +
|
||||
'"><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();
|
||||
})
|
||||
.catch(done);
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Unexpected onLoad('${name}') call`);
|
||||
}
|
||||
};
|
||||
|
||||
mockAPIData({
|
||||
type: 'icons',
|
||||
provider,
|
||||
@ -201,39 +226,24 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon was loaded
|
||||
expect(iconExists(iconName2)).toEqual(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="' +
|
||||
className +
|
||||
'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><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();
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
// Check if icon has been loaded
|
||||
expect(iconExists(iconName)).toEqual(false);
|
||||
|
||||
// Render component
|
||||
// Render component
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon icon="${iconName}" />`,
|
||||
template: `<Icon icon="${iconName}" :onLoad="onLoad" />`,
|
||||
methods: {
|
||||
onLoad,
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render placeholder
|
||||
expect(wrapper.html()).toEqual('');
|
||||
|
||||
// Change icon name
|
||||
wrapper.setProps({
|
||||
icon: iconName2,
|
||||
@ -249,6 +259,46 @@ describe('Rendering icon', () => {
|
||||
const iconName = `@${provider}:${prefix}:${name}`;
|
||||
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||
|
||||
const onLoad = (name) => {
|
||||
expect(name).toBe(iconName);
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
// Wait 1 tick, test rendered icon
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<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 +
|
||||
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// Add horizontal flip and style
|
||||
wrapper.setProps({
|
||||
icon: iconName,
|
||||
hFlip: true,
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
});
|
||||
|
||||
// Wait 1 tick
|
||||
await nextTick();
|
||||
|
||||
// Test
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<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 +
|
||||
'" 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();
|
||||
} catch (err) {
|
||||
done(err);
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
||||
mockAPIData({
|
||||
type: 'icons',
|
||||
provider,
|
||||
@ -266,42 +316,8 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon was loaded
|
||||
expect(iconExists(iconName)).toEqual(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="' +
|
||||
className +
|
||||
'" 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>'
|
||||
);
|
||||
|
||||
// Add horizontal flip and style
|
||||
wrapper.setProps({
|
||||
icon: iconName,
|
||||
hFlip: true,
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
});
|
||||
|
||||
// Wait for next tick
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
wrapper.html().replace(/\s*\n\s*/g, '')
|
||||
).toEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="' +
|
||||
className +
|
||||
'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" 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();
|
||||
}, 0);
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -311,11 +327,11 @@ describe('Rendering icon', () => {
|
||||
// Render component with placeholder text
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon icon="${iconName}">loading...</Icon>`,
|
||||
template: `<Icon icon="${iconName}" :onLoad="onLoad" />`,
|
||||
methods: {
|
||||
onLoad,
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render placeholder
|
||||
expect(wrapper.html()).toEqual('loading...');
|
||||
});
|
||||
});
|
||||
|
||||
3
packages/vue/tests/empty.js
Normal file
3
packages/vue/tests/empty.js
Normal file
@ -0,0 +1,3 @@
|
||||
// Default data for empty icon
|
||||
export const defaultIconResult =
|
||||
'<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 16 16"></svg>';
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
|
||||
@ -11,7 +12,7 @@ const iconData = {
|
||||
};
|
||||
|
||||
describe('Creating component', () => {
|
||||
test('with wrapper', () => {
|
||||
test('with wrapper', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' />`,
|
||||
@ -23,12 +24,14 @@ describe('Creating component', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<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>'
|
||||
);
|
||||
});
|
||||
|
||||
test('without wrapper', () => {
|
||||
test('without wrapper', async () => {
|
||||
const wrapper = mount(Icon, {
|
||||
props: {
|
||||
icon: iconData,
|
||||
@ -38,6 +41,7 @@ describe('Creating component', () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
|
||||
'<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>'
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
*/
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
import { defaultIconResult } from '../empty';
|
||||
|
||||
describe('Empty icon', () => {
|
||||
test('basic test', () => {
|
||||
@ -10,40 +11,16 @@ describe('Empty icon', () => {
|
||||
props: {},
|
||||
});
|
||||
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(defaultIconResult);
|
||||
});
|
||||
|
||||
test('with child node', () => {
|
||||
test('with child node (child node is ignored)', () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon><i class="fa fa-home" /></Icon>`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
|
||||
'<i class="fa fa-home"></i>'
|
||||
);
|
||||
});
|
||||
|
||||
test('with text child node', () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon>icon</Icon>`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('icon');
|
||||
});
|
||||
|
||||
test('with multiple childen', () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon><i class="fa fa-home" />Home icon</Icon>`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
|
||||
'<i class="fa fa-home"></i>Home icon'
|
||||
);
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(defaultIconResult);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
|
||||
@ -11,7 +12,7 @@ const iconData = {
|
||||
};
|
||||
|
||||
describe('Passing attributes', () => {
|
||||
test('title', () => {
|
||||
test('title', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" title="Icon!" />`,
|
||||
@ -23,6 +24,8 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
const html = wrapper.html();
|
||||
expect(html).toContain('role="img" title="Icon!"');
|
||||
|
||||
@ -30,7 +33,7 @@ describe('Passing attributes', () => {
|
||||
expect(html).toContain('aria-hidden="true"');
|
||||
});
|
||||
|
||||
test('aria-hidden', () => {
|
||||
test('aria-hidden', async () => {
|
||||
// dashes, string value
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -43,10 +46,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).not.toContain('aria-hidden="true"');
|
||||
});
|
||||
|
||||
test('ariaHidden', () => {
|
||||
test('ariaHidden', async () => {
|
||||
// camelCase, boolean value
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -59,10 +64,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).not.toContain('aria-hidden="true"');
|
||||
});
|
||||
|
||||
test('style as string', () => {
|
||||
test('style as string', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" style="color: red;" />`,
|
||||
@ -74,10 +81,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('style="color: red;"');
|
||||
});
|
||||
|
||||
test('style as object', () => {
|
||||
test('style as object', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :style="style" />`,
|
||||
@ -92,10 +101,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('style="color: red;"');
|
||||
});
|
||||
|
||||
test('color', () => {
|
||||
test('color', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" color="red" />`,
|
||||
@ -107,10 +118,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('style="color: red;"');
|
||||
});
|
||||
|
||||
test('color with style', () => {
|
||||
test('color with style', async () => {
|
||||
// color overrides style
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -123,10 +136,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('style="color: purple;"');
|
||||
});
|
||||
|
||||
test('attributes that cannot change', () => {
|
||||
test('attributes that cannot change', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" viewBox="0 0 0 0" preserveAspectRatio="none" />`,
|
||||
@ -138,12 +153,14 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
const html = wrapper.html();
|
||||
expect(html).not.toContain('viewBox="0 0 0 0"');
|
||||
expect(html).not.toContain('preserveAspectRatio="none"');
|
||||
});
|
||||
|
||||
test('class', () => {
|
||||
test('class', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" class="test-icon" />`,
|
||||
@ -155,10 +172,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('class="test-icon"');
|
||||
});
|
||||
|
||||
test('class object', () => {
|
||||
test('class object', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :class="{active: isActive, iconify: true}" />`,
|
||||
@ -171,6 +190,8 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('class="active iconify"');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
|
||||
@ -11,7 +12,7 @@ const iconData = {
|
||||
};
|
||||
|
||||
describe('Dimensions', () => {
|
||||
test('height', () => {
|
||||
test('height', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" height="48" />`,
|
||||
@ -23,6 +24,8 @@ describe('Dimensions', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
const html = wrapper.html();
|
||||
expect(html).toContain('height="48"');
|
||||
expect(html).toContain('width="48"');
|
||||
@ -30,7 +33,7 @@ describe('Dimensions', () => {
|
||||
expect(html).not.toContain('width="1em"');
|
||||
});
|
||||
|
||||
test('width and height', () => {
|
||||
test('width and height', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :width="32" height="48" />`,
|
||||
@ -42,6 +45,8 @@ describe('Dimensions', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
const html = wrapper.html();
|
||||
expect(html).toContain('height="48"');
|
||||
expect(html).toContain('width="32"');
|
||||
@ -49,7 +54,7 @@ describe('Dimensions', () => {
|
||||
expect(html).not.toContain('width="1em"');
|
||||
});
|
||||
|
||||
test('auto', () => {
|
||||
test('auto', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" height="auto" />`,
|
||||
@ -61,6 +66,8 @@ describe('Dimensions', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
const html = wrapper.html();
|
||||
expect(html).toContain('height="24"');
|
||||
expect(html).toContain('width="24"');
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
|
||||
@ -11,7 +12,7 @@ const iconDataWithID = {
|
||||
};
|
||||
|
||||
describe('Replacing IDs', () => {
|
||||
test('default behavior', () => {
|
||||
test('default behavior', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" />`,
|
||||
@ -23,10 +24,12 @@ describe('Replacing IDs', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).not.toContain('ssvg-id-1st-place-medala');
|
||||
});
|
||||
|
||||
test('custom generator', () => {
|
||||
test('custom generator', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" id="test" />`,
|
||||
@ -38,6 +41,8 @@ describe('Replacing IDs', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('id="testID0"');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
|
||||
@ -11,7 +12,7 @@ const iconData = {
|
||||
};
|
||||
|
||||
describe('Inline attribute', () => {
|
||||
test('string', () => {
|
||||
test('string', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" inline="true" />`,
|
||||
@ -23,10 +24,12 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('style="vertical-align: -0.125em;"');
|
||||
});
|
||||
|
||||
test('false string', () => {
|
||||
test('false string', async () => {
|
||||
// "false" should be ignored
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -39,12 +42,14 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).not.toContain(
|
||||
'style="vertical-align: -0.125em;"'
|
||||
);
|
||||
});
|
||||
|
||||
test('true', () => {
|
||||
test('true', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :inline="true" />`,
|
||||
@ -56,10 +61,12 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('style="vertical-align: -0.125em;"');
|
||||
});
|
||||
|
||||
test('false', () => {
|
||||
test('false', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :inline="false" />`,
|
||||
@ -71,12 +78,14 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).not.toContain(
|
||||
'style="vertical-align: -0.125em;"'
|
||||
);
|
||||
});
|
||||
|
||||
test('inline and style string', () => {
|
||||
test('inline and style string', async () => {
|
||||
// Style goes after vertical-align
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -89,12 +98,14 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'color: red; vertical-align: -0.125em;'
|
||||
);
|
||||
});
|
||||
|
||||
test('inline and style object', () => {
|
||||
test('inline and style object', async () => {
|
||||
// Style goes after vertical-align
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -110,12 +121,14 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'color: red; vertical-align: -0.125em;'
|
||||
);
|
||||
});
|
||||
|
||||
test('inline and style overriding it', () => {
|
||||
test('inline and style overriding it', async () => {
|
||||
// Style goes after vertical-align
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -131,6 +144,8 @@ describe('Inline attribute', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.html()).toContain('style="vertical-align: 0;"');
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('vertical-align: 0;"');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import { nextTick } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
|
||||
@ -11,7 +12,7 @@ const iconData = {
|
||||
};
|
||||
|
||||
describe('Rotation', () => {
|
||||
test('number', () => {
|
||||
test('number', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :rotate="1" />`,
|
||||
@ -23,12 +24,14 @@ describe('Rotation', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
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>'
|
||||
);
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
test('string', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" rotate="180deg" />`,
|
||||
@ -40,12 +43,14 @@ describe('Rotation', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('<g transform="rotate(180 12 12)">');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Flip', () => {
|
||||
test('boolean', () => {
|
||||
test('boolean', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :hFlip="true" />`,
|
||||
@ -57,12 +62,14 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'<g transform="translate(24 0) scale(-1 1)">'
|
||||
);
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
test('string', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" flip="vertical" />`,
|
||||
@ -74,12 +81,14 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'<g transform="translate(0 24) scale(1 -1)">'
|
||||
);
|
||||
});
|
||||
|
||||
test('string and boolean', () => {
|
||||
test('string and boolean', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" flip="horizontal" :vFlip="true" />`,
|
||||
@ -91,10 +100,12 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('<g transform="rotate(180 12 12)">');
|
||||
});
|
||||
|
||||
test('string for boolean attribute', () => {
|
||||
test('string for boolean attribute', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" horizontal-flip="true" />`,
|
||||
@ -106,12 +117,14 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'<g transform="translate(24 0) scale(-1 1)">'
|
||||
);
|
||||
});
|
||||
|
||||
test('shorthand and boolean', () => {
|
||||
test('shorthand and boolean', async () => {
|
||||
// 'flip' is processed after 'hFlip' because of order of elements in object, overwriting value
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
@ -124,12 +137,14 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'<g transform="translate(24 0) scale(-1 1)">'
|
||||
);
|
||||
});
|
||||
|
||||
test('shorthand and boolean as string', () => {
|
||||
test('shorthand and boolean as string', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" flip="vertical" :horizontal-flip="true" />`,
|
||||
@ -141,10 +156,12 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('<g transform="rotate(180 12 12)">');
|
||||
});
|
||||
|
||||
test('wrong case', () => {
|
||||
test('wrong case', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" :vflip="true" />`,
|
||||
@ -156,12 +173,14 @@ describe('Flip', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).not.toContain('<g transform="');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Alignment and slice', () => {
|
||||
test('vAlign and slice', () => {
|
||||
test('vAlign and slice', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" vAlign="top" :slice="true" />`,
|
||||
@ -173,12 +192,14 @@ describe('Alignment and slice', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain(
|
||||
'preserveAspectRatio="xMidYMin slice"'
|
||||
);
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
test('string', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" align="left bottom" />`,
|
||||
@ -190,10 +211,12 @@ describe('Alignment and slice', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
|
||||
});
|
||||
|
||||
test('aliases', () => {
|
||||
test('aliases', async () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon :icon="icon" h-align="left" vertical-align="bottom" />`,
|
||||
@ -205,6 +228,8 @@ describe('Alignment and slice', () => {
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
|
||||
});
|
||||
});
|
||||
|
||||
@ -7,4 +7,4 @@ api-extractor.json
|
||||
build.js
|
||||
tsconfig.json
|
||||
*.config.js
|
||||
|
||||
__mocks__
|
||||
|
||||
6
packages/vue2/__mocks__/vue/index.js
Normal file
6
packages/vue2/__mocks__/vue/index.js
Normal file
@ -0,0 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.config.devtools = false;
|
||||
|
||||
export default Vue;
|
||||
@ -219,6 +219,13 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Empty icon data, rendered when icon is not available
|
||||
*/
|
||||
const emptyIcon = fullIcon({
|
||||
body: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
@ -236,7 +243,7 @@ export const Icon = Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
// Mounted status
|
||||
mounted: false,
|
||||
iconMounted: false,
|
||||
};
|
||||
},
|
||||
|
||||
@ -248,7 +255,7 @@ export const Icon = Vue.extend({
|
||||
this._loadingIcon = null;
|
||||
|
||||
// Mark as mounted
|
||||
this.mounted = true;
|
||||
this.iconMounted = true;
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
@ -333,38 +340,21 @@ export const Icon = Vue.extend({
|
||||
|
||||
// Render icon
|
||||
render(createElement: CreateElement): VNode {
|
||||
function placeholder(slots): VNode {
|
||||
// Render child nodes
|
||||
if (slots.default) {
|
||||
const result = slots.default;
|
||||
if (result instanceof Array && result.length > 0) {
|
||||
// If there are multiple child nodes, they must be wrapped in Vue 2
|
||||
return result.length === 1
|
||||
? result[0]
|
||||
: createElement('span', result);
|
||||
}
|
||||
}
|
||||
return null as unknown as VNode;
|
||||
}
|
||||
if (!this.mounted) {
|
||||
return placeholder(this.$slots);
|
||||
}
|
||||
const props = this.$attrs;
|
||||
let context = this.$data;
|
||||
|
||||
// Get icon data
|
||||
const props = this.$attrs;
|
||||
const icon: IconComponentData | null = this.getIcon(
|
||||
const icon: IconComponentData | null = this.iconMounted ? this.getIcon(
|
||||
props.icon,
|
||||
props.onLoad
|
||||
);
|
||||
) : null;
|
||||
|
||||
// Validate icon object
|
||||
if (!icon) {
|
||||
// Render child nodes
|
||||
return placeholder(this.$slots);
|
||||
return render(createElement, props, context, emptyIcon);
|
||||
}
|
||||
|
||||
// Add classes
|
||||
let context = this.$data;
|
||||
if (icon.classes) {
|
||||
context = {
|
||||
...context,
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon, loadIcons, iconExists } from '../../';
|
||||
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
|
||||
import { provider, nextPrefix } from './load';
|
||||
import { defaultIconResult } from '../empty';
|
||||
|
||||
const iconData = {
|
||||
body:
|
||||
@ -66,7 +68,8 @@ describe('Rendering icon', () => {
|
||||
const wrapper = mount(Wrapper, {});
|
||||
const html = wrapper.html().replace(/\s*\n\s*/g, '');
|
||||
|
||||
// Check HTML
|
||||
// Check HTML on next tick
|
||||
Vue.nextTick(() => {
|
||||
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 ' +
|
||||
className +
|
||||
@ -79,6 +82,7 @@ describe('Rendering icon', () => {
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('rendering icon before loading it', done => {
|
||||
const prefix = nextPrefix();
|
||||
@ -109,25 +113,6 @@ describe('Rendering icon', () => {
|
||||
|
||||
// Test it again
|
||||
expect(iconExists(iconName)).toBe(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
// Check HTML
|
||||
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="' +
|
||||
className +
|
||||
// 'foo' is appended because of weird Vue 2 behavior. Fixed in Vue 3
|
||||
' foo"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// onLoad should have been called
|
||||
expect(onLoadCalled).toBe(true);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -143,6 +128,22 @@ describe('Rendering icon', () => {
|
||||
expect(name).toBe(iconName);
|
||||
expect(onLoadCalled).toBe(false);
|
||||
onLoadCalled = true;
|
||||
|
||||
// Test component on next tick
|
||||
Vue.nextTick(() => {
|
||||
// Check HTML
|
||||
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="' +
|
||||
className +
|
||||
// 'foo' is appended because of weird Vue 2 behavior. Fixed in Vue 3
|
||||
' foo"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// onLoad should have been called
|
||||
expect(onLoadCalled).toBe(true);
|
||||
|
||||
done();
|
||||
});
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -157,9 +158,6 @@ describe('Rendering icon', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render empty icon
|
||||
expect(wrapper.html()).toBe('');
|
||||
|
||||
// onLoad should not have been called yet
|
||||
expect(onLoadCalled).toBe(false);
|
||||
});
|
||||
@ -183,15 +181,16 @@ describe('Rendering icon', () => {
|
||||
// Test it again
|
||||
expect(iconExists(iconName)).toBe(false);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
expect(wrapper.html()).toBe('');
|
||||
// Check if state was changed after few ticks
|
||||
Vue.nextTick(() => {
|
||||
Vue.nextTick(() => {
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toBe(defaultIconResult);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@ -211,6 +210,6 @@ describe('Rendering icon', () => {
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
// Should render empty icon
|
||||
expect(wrapper.html()).toBe('');
|
||||
expect(wrapper.html()).toBe(defaultIconResult);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon, iconExists } from '../../';
|
||||
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
|
||||
import { provider, nextPrefix } from './load';
|
||||
import { defaultIconResult } from '../empty';
|
||||
|
||||
const iconData = {
|
||||
body:
|
||||
@ -36,11 +38,41 @@ describe('Rendering icon', () => {
|
||||
// First onLoad call
|
||||
case iconName:
|
||||
expect(onLoadCalled).toBe('');
|
||||
|
||||
// Wait 1 tick, then test rendered icon
|
||||
Vue.nextTick(() => {
|
||||
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="' +
|
||||
className +
|
||||
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// onLoad should have been called
|
||||
expect(onLoadCalled).toBe(iconName);
|
||||
|
||||
wrapper.setProps({
|
||||
icon: iconName2,
|
||||
});
|
||||
});
|
||||
break;
|
||||
|
||||
// Second onLoad call
|
||||
case iconName2:
|
||||
expect(onLoadCalled).toBe(iconName);
|
||||
|
||||
// Wait 1 tick, then test rendered icon
|
||||
Vue.nextTick(() => {
|
||||
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="' +
|
||||
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>'
|
||||
);
|
||||
|
||||
// onLoad should have been called for second icon
|
||||
expect(onLoadCalled).toBe(iconName2);
|
||||
|
||||
done();
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -69,27 +101,8 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon data is available
|
||||
expect(iconExists(iconName)).toBe(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
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="' +
|
||||
className +
|
||||
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// onLoad should have been called
|
||||
expect(onLoadCalled).toBe(iconName);
|
||||
|
||||
wrapper.setProps({
|
||||
icon: iconName2,
|
||||
});
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -113,25 +126,8 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon data is available
|
||||
expect(iconExists(iconName2)).toBe(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
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="' +
|
||||
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>'
|
||||
);
|
||||
|
||||
// onLoad should have been called for second icon
|
||||
expect(onLoadCalled).toBe(iconName2);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -147,7 +143,7 @@ describe('Rendering icon', () => {
|
||||
});
|
||||
|
||||
// Should render placeholder
|
||||
expect(wrapper.html()).toBe('');
|
||||
expect(wrapper.html()).toBe(defaultIconResult);
|
||||
|
||||
// onLoad should not have been called yet
|
||||
expect(onLoadCalled).toBe('');
|
||||
@ -162,6 +158,31 @@ describe('Rendering icon', () => {
|
||||
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||
let isSync = true;
|
||||
|
||||
const onLoad = name => {
|
||||
switch (name) {
|
||||
case iconName:
|
||||
done('onLoad should not be called for initial icon');
|
||||
break;
|
||||
|
||||
case iconName2:
|
||||
// Wait 1 tick, then test rendered icon
|
||||
Vue.nextTick(() => {
|
||||
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="' +
|
||||
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>'
|
||||
);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Unexpected onLoad('${name}') call`);
|
||||
}
|
||||
};
|
||||
|
||||
mockAPIData({
|
||||
type: 'icons',
|
||||
provider,
|
||||
@ -203,20 +224,6 @@ describe('Rendering icon', () => {
|
||||
|
||||
// Test it again
|
||||
expect(iconExists(iconName2)).toBe(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
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="' +
|
||||
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>'
|
||||
);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -227,11 +234,12 @@ describe('Rendering icon', () => {
|
||||
const wrapper = mount(Icon, {
|
||||
propsData: {
|
||||
icon: iconName,
|
||||
onLoad,
|
||||
},
|
||||
});
|
||||
|
||||
// Should render placeholder
|
||||
expect(wrapper.html()).toBe('');
|
||||
expect(wrapper.html()).toBe(defaultIconResult);
|
||||
|
||||
// Change icon name
|
||||
wrapper.setProps({
|
||||
@ -248,6 +256,39 @@ describe('Rendering icon', () => {
|
||||
const iconName = `@${provider}:${prefix}:${name}`;
|
||||
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||
|
||||
const onLoad = name => {
|
||||
expect(name).toBe(iconName);
|
||||
|
||||
// Wait 1 tick, test rendered icon
|
||||
Vue.nextTick(() => {
|
||||
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="' +
|
||||
className +
|
||||
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// Add horizontal flip and style
|
||||
wrapper.setProps({
|
||||
icon: iconName,
|
||||
hFlip: true,
|
||||
// Vue 2 issue: changing style in unit test doesn't work, so changing color
|
||||
// TODO: test changing style in live demo to see if its a unit test bug or component issue
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
// Wait for 1 tick and test again
|
||||
Vue.nextTick(() => {
|
||||
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="' +
|
||||
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>'
|
||||
);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
mockAPIData({
|
||||
type: 'icons',
|
||||
provider,
|
||||
@ -265,42 +306,8 @@ describe('Rendering icon', () => {
|
||||
// Send icon data
|
||||
next();
|
||||
|
||||
// Test it again
|
||||
// Make sure icon was loaded
|
||||
expect(iconExists(iconName)).toBe(true);
|
||||
|
||||
// Check if state was changed
|
||||
// Wrapped in double setTimeout() because re-render takes 2 ticks (one to handle API response, one to re-render)
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
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="' +
|
||||
className +
|
||||
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||
);
|
||||
|
||||
// Add horizontal flip and style
|
||||
wrapper.setProps({
|
||||
icon: iconName,
|
||||
hFlip: true,
|
||||
// Vue 2 issue: changing style in unit test doesn't work, so changing color
|
||||
// TODO: test changing style in live demo to see if its a unit test bug or component issue
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
// Wait for 1 tick
|
||||
setTimeout(() => {
|
||||
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="' +
|
||||
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>'
|
||||
);
|
||||
|
||||
done();
|
||||
}, 0);
|
||||
}, 0);
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
@ -311,10 +318,11 @@ describe('Rendering icon', () => {
|
||||
const wrapper = mount(Icon, {
|
||||
propsData: {
|
||||
icon: iconName,
|
||||
onLoad,
|
||||
},
|
||||
});
|
||||
|
||||
// Should be empty
|
||||
expect(wrapper.html()).toBe('');
|
||||
expect(wrapper.html()).toBe(defaultIconResult);
|
||||
});
|
||||
});
|
||||
|
||||
3
packages/vue2/tests/empty.js
Normal file
3
packages/vue2/tests/empty.js
Normal file
@ -0,0 +1,3 @@
|
||||
// Default data for empty icon
|
||||
export const defaultIconResult =
|
||||
'<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 16 16"></svg>';
|
||||
@ -3,6 +3,7 @@
|
||||
*/
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { Icon } from '../../';
|
||||
import { defaultIconResult } from '../empty';
|
||||
|
||||
describe('Empty icon', () => {
|
||||
test('basic test', () => {
|
||||
@ -10,40 +11,16 @@ describe('Empty icon', () => {
|
||||
propsData: {},
|
||||
});
|
||||
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(defaultIconResult);
|
||||
});
|
||||
|
||||
test('with child node', () => {
|
||||
test('with child node (child node is ignored)', () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon><i class="fa fa-home" /></Icon>`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
|
||||
'<i class="fa fa-home"></i>'
|
||||
);
|
||||
});
|
||||
|
||||
test('with text child node', () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon>icon</Icon>`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.text()).toBe('icon');
|
||||
});
|
||||
|
||||
test('with multiple childen', () => {
|
||||
const Wrapper = {
|
||||
components: { Icon },
|
||||
template: `<Icon><i class="fa fa-home" /> Home icon</Icon>`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
|
||||
'<span><i class="fa fa-home"></i> Home icon</span>'
|
||||
);
|
||||
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(defaultIconResult);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user