2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 06:07:50 +00:00
iconify/components/svelte/tests/offline/20-attributes.test.ts

78 lines
2.0 KiB
TypeScript
Raw Normal View History

/**
* @jest-environment jsdom
*/
2021-04-30 09:51:31 +00:00
import { render } from '@testing-library/svelte';
import Icon from '../../dist/offline';
2021-04-30 09:51:31 +00:00
const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
2021-04-30 09:51:31 +00:00
width: 24,
height: 24,
};
describe('Padding attributes', () => {
test('title', () => {
const component = render(Icon, { icon: iconData, title: 'Icon!' });
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('title')).toBe('Icon!');
2021-04-30 09:51:31 +00:00
});
test('aria-hidden', () => {
// dashes, string value
const component = render(Icon, {
'icon': iconData,
'aria-hidden': 'false',
});
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('aria-hidden')).toBeNull();
2021-04-30 09:51:31 +00:00
});
test('ariaHidden', () => {
// camelCase, boolean value
const component = render(Icon, {
icon: iconData,
ariaHidden: false,
});
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('aria-hidden')).toBeNull();
2021-04-30 09:51:31 +00:00
});
test('style', () => {
const component = render(Icon, {
icon: iconData,
style: 'vertical-align: 0; color: red;',
});
const node = component.container.querySelector('svg')!;
expect(node.style.verticalAlign).toBe('0');
expect(node.style.color).toBe('red');
2021-04-30 09:51:31 +00:00
});
test('color', () => {
const component = render(Icon, {
icon: iconData,
color: 'red',
});
const node = component.container.querySelector('svg')!;
expect(node.style.color).toBe('red');
2021-04-30 09:51:31 +00:00
});
test('color with style', () => {
const component = render(Icon, {
icon: iconData,
color: 'red',
style: 'color: green;',
});
const node = component.container.querySelector('svg')!;
expect(node.style.color).toBe('red');
2021-04-30 09:51:31 +00:00
});
test('attributes that cannot change', () => {
const component = render(Icon, {
icon: iconData,
viewBox: '0 0 0 0',
});
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('viewBox')).toBe('0 0 24 24');
2021-04-30 09:51:31 +00:00
});
});