mirror of
https://github.com/iconify/iconify.git
synced 2024-12-15 06:47:30 +00:00
135 lines
3.8 KiB
JavaScript
135 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { InlineIcon } from '../../dist/offline';
|
|
import renderer from 'react-test-renderer';
|
|
|
|
const iconData = {
|
|
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
|
width: 24,
|
|
height: 32,
|
|
};
|
|
|
|
describe('Rotation', () => {
|
|
test('number', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} rotate={1} />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
expect(body).toMatch('rotate(90 ');
|
|
});
|
|
|
|
test('string', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} rotate="180deg" />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
expect(body).toMatch('rotate(180 ');
|
|
});
|
|
});
|
|
|
|
describe('Flip', () => {
|
|
test('boolean', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} hFlip={true} />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
expect(body).toMatch('scale(-1 1)');
|
|
});
|
|
|
|
test('string', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} flip="vertical" />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
expect(body).toMatch('scale(1 -1)');
|
|
});
|
|
|
|
test('string and boolean', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} flip="horizontal" vFlip={true} />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
// horizontal + vertical = 180deg rotation
|
|
expect(body).toMatch('rotate(180 ');
|
|
});
|
|
|
|
test('string for boolean attribute', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} hFlip="true" />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
expect(body).toMatch('scale(-1 1)');
|
|
});
|
|
|
|
test('shorthand and boolean', () => {
|
|
// 'flip' is processed after 'hFlip' because of order of elements in object, overwriting value
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} hFlip={false} flip="horizontal" />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
expect(body).toMatch('scale(-1 1)');
|
|
});
|
|
|
|
test('shorthand and boolean as string', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} flip="vertical" hFlip="true" />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toStrictEqual(iconData.body);
|
|
// horizontal + vertical = 180deg rotation
|
|
expect(body).toMatch('rotate(180 ');
|
|
});
|
|
|
|
test('wrong case', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} vflip={true} />
|
|
);
|
|
const tree = component.toJSON();
|
|
const body = tree.props.dangerouslySetInnerHTML.__html;
|
|
|
|
expect(body).not.toMatch('scale(');
|
|
});
|
|
});
|
|
|
|
describe('Alignment and slice', () => {
|
|
test('vAlign and slice', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} vAlign="top" slice={true} />
|
|
);
|
|
const tree = component.toJSON();
|
|
|
|
expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice');
|
|
});
|
|
|
|
test('string', () => {
|
|
const component = renderer.create(
|
|
<InlineIcon icon={iconData} align="left bottom" />
|
|
);
|
|
const tree = component.toJSON();
|
|
|
|
expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet');
|
|
});
|
|
});
|