import { render } from '@testing-library/svelte'; import { Icon } from '../../dist/offline'; const iconData = { body: '', 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')).toEqual('Icon!'); }); 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')).toEqual(null); }); test('ariaHidden', () => { // camelCase, boolean value const component = render(Icon, { icon: iconData, ariaHidden: false, }); const node = component.container.querySelector('svg'); expect(node.getAttribute('aria-hidden')).toEqual(null); }); test('style', () => { const component = render(Icon, { icon: iconData, style: 'vertical-align: 0; color: red;', }); const node = component.container.querySelector('svg'); expect(node.style.verticalAlign).toEqual('0'); expect(node.style.color).toEqual('red'); }); test('color', () => { const component = render(Icon, { icon: iconData, color: 'red', }); const node = component.container.querySelector('svg'); expect(node.style.color).toEqual('red'); }); 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).toEqual('red'); }); test('attributes that cannot change', () => { const component = render(Icon, { icon: iconData, viewBox: '0 0 0 0', preserveAspectRatio: 'none', }); const node = component.container.querySelector('svg'); expect(node.getAttribute('viewBox')).toEqual('0 0 24 24'); expect(node.getAttribute('preserveAspectRatio')).toEqual( 'xMidYMid meet' ); }); });