2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-14 06:28:24 +00:00
iconify/packages/svelte/tests/offline/20-transformations.test.ts

156 lines
4.2 KiB
TypeScript

/**
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte';
import Icon from '../../dist/offline';
const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 32,
};
describe('Rotation', () => {
test('number', () => {
const component = render(Icon, { icon: iconData, rotate: 1 });
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe('rotate(90 16 16)');
});
test('string', () => {
const component = render(Icon, { icon: iconData, rotate: '180deg' });
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe('rotate(180 12 16)');
});
});
describe('Flip', () => {
test('boolean', () => {
const component = render(Icon, { icon: iconData, hFlip: true });
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe(
'translate(24 0) scale(-1 1)'
);
});
test('string', () => {
const component = render(Icon, { icon: iconData, flip: 'vertical' });
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe(
'translate(0 32) scale(1 -1)'
);
});
test('string and boolean', () => {
const component = render(Icon, {
icon: iconData,
flip: 'horizontal',
vFlip: true,
});
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
// horizontal + vertical = 180deg rotation
expect(child.getAttribute('transform')).toBe('rotate(180 12 16)');
});
test('string for boolean attribute', () => {
const component = render(Icon, {
icon: iconData,
hFlip: 'true',
});
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe(
'translate(24 0) scale(-1 1)'
);
});
test('shorthand and boolean', () => {
// 'flip' is processed after 'hFlip' because of order of elements in object, overwriting value
const component = render(Icon, {
icon: iconData,
hFlip: false,
flip: 'horizontal',
});
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe(
'translate(24 0) scale(-1 1)'
);
});
test('shorthand and boolean as string', () => {
const component = render(Icon, {
icon: iconData,
flip: 'vertical',
hFlip: true,
});
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('g');
expect(child.getAttribute('transform')).toBe('rotate(180 12 16)');
});
test('wrong case', () => {
const component = render(Icon, {
icon: iconData,
vflip: true,
});
const node = component.container.querySelector('svg')!;
// Find first child node
const child = node.childNodes[0] as SVGGElement;
expect(child.tagName).toBe('path');
});
});
describe('Alignment and slice', () => {
test('vAlign and slice', () => {
const component = render(Icon, {
icon: iconData,
vAlign: 'top',
slice: true,
});
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('preserveAspectRatio')).toBe('xMidYMin slice');
});
test('string', () => {
const component = render(Icon, {
icon: iconData,
align: 'left bottom',
});
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('preserveAspectRatio')).toBe('xMinYMax meet');
});
});