Adding tests for root SVG component
This commit is contained in:
parent
6285bd4320
commit
381df8bf93
58
src/components/SVG/__snapshots__/test.js.snap
Normal file
58
src/components/SVG/__snapshots__/test.js.snap
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`SVG arbitrary markup 1`] = `
|
||||||
|
<Text>
|
||||||
|
<tspan
|
||||||
|
key="0"
|
||||||
|
>
|
||||||
|
Sample text
|
||||||
|
</tspan>
|
||||||
|
</Text>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`SVG passing props to nodes 1`] = `
|
||||||
|
<Text
|
||||||
|
theme="anchorText"
|
||||||
|
>
|
||||||
|
Sample text
|
||||||
|
</Text>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`SVG rendering 1`] = `
|
||||||
|
<Pin
|
||||||
|
radius={5}
|
||||||
|
/>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`SVG rendering 1 child 1`] = `
|
||||||
|
<Image
|
||||||
|
padding={10}
|
||||||
|
>
|
||||||
|
<Pin
|
||||||
|
key="0"
|
||||||
|
radius={5}
|
||||||
|
/>
|
||||||
|
</Image>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`SVG rendering a string as a child 1`] = `
|
||||||
|
<Text>
|
||||||
|
Sample text
|
||||||
|
</Text>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`SVG rendering multiple children 1`] = `
|
||||||
|
<HorizontalLayout
|
||||||
|
spacing={10}
|
||||||
|
withConnectors={false}
|
||||||
|
>
|
||||||
|
<Pin
|
||||||
|
key="0"
|
||||||
|
radius={5}
|
||||||
|
/>
|
||||||
|
<Pin
|
||||||
|
key="1"
|
||||||
|
radius={5}
|
||||||
|
/>
|
||||||
|
</HorizontalLayout>
|
||||||
|
`;
|
@ -19,7 +19,7 @@ const nodeTypes = {
|
|||||||
VerticalLayout
|
VerticalLayout
|
||||||
};
|
};
|
||||||
|
|
||||||
const render = (data, extraProps = {}) => {
|
const render = (data, extraProps) => {
|
||||||
if (typeof data === 'string') {
|
if (typeof data === 'string') {
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
@ -29,7 +29,7 @@ const render = (data, extraProps = {}) => {
|
|||||||
(data, key) => render(data, { key }));
|
(data, key) => render(data, { key }));
|
||||||
|
|
||||||
return React.createElement(
|
return React.createElement(
|
||||||
nodeTypes[type],
|
nodeTypes[type] || type,
|
||||||
{ ...extraProps, ...props },
|
{ ...extraProps, ...props },
|
||||||
children.length === 1 ? children[0] : children);
|
children.length === 1 ? children[0] : children);
|
||||||
};
|
};
|
||||||
@ -37,7 +37,11 @@ const render = (data, extraProps = {}) => {
|
|||||||
const SVG = ({ data, imageRef: ref }) => render(data, { ref });
|
const SVG = ({ data, imageRef: ref }) => render(data, { ref });
|
||||||
|
|
||||||
SVG.propTypes = {
|
SVG.propTypes = {
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.shape({
|
||||||
|
type: PropTypes.oneOf(Object.keys(nodeTypes)).isRequired,
|
||||||
|
props: PropTypes.object,
|
||||||
|
children: PropTypes.array
|
||||||
|
}).isRequired,
|
||||||
imageRef: PropTypes.func
|
imageRef: PropTypes.func
|
||||||
};
|
};
|
||||||
|
|
||||||
|
109
src/components/SVG/test.js
Normal file
109
src/components/SVG/test.js
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { shallow, mount } from 'enzyme';
|
||||||
|
|
||||||
|
import SVG from 'components/SVG';
|
||||||
|
import Pin from './Pin';
|
||||||
|
|
||||||
|
describe('SVG', () => {
|
||||||
|
test('rendering', async () => {
|
||||||
|
const data = {
|
||||||
|
type: 'Pin'
|
||||||
|
};
|
||||||
|
const component = shallow(
|
||||||
|
<SVG data={ data }/>
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('rendering 1 child', () => {
|
||||||
|
const data = {
|
||||||
|
type: 'Image',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'Pin'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
const component = shallow(
|
||||||
|
<SVG data={ data }/>
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('rendering multiple children', () => {
|
||||||
|
const data = {
|
||||||
|
type: 'HorizontalLayout',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'Pin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Pin'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
const component = shallow(
|
||||||
|
<SVG data={ data }/>
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('rendering a string as a child', () => {
|
||||||
|
const data = {
|
||||||
|
type: 'Text',
|
||||||
|
children: [
|
||||||
|
'Sample text'
|
||||||
|
]
|
||||||
|
};
|
||||||
|
const component = shallow(
|
||||||
|
<SVG data={ data }/>
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('passing props to nodes', () => {
|
||||||
|
const data = {
|
||||||
|
type: 'Text',
|
||||||
|
props: {
|
||||||
|
theme: 'anchorText'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
'Sample text'
|
||||||
|
]
|
||||||
|
};
|
||||||
|
const component = shallow(
|
||||||
|
<SVG data={ data }/>
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('arbitrary markup', () => {
|
||||||
|
const data = {
|
||||||
|
type: 'Text',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'tspan',
|
||||||
|
children: [
|
||||||
|
'Sample text'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
const component = shallow(
|
||||||
|
<SVG data={ data }/>
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('imageRef prop', () => {
|
||||||
|
let image;
|
||||||
|
const imageRef = element => image = element;
|
||||||
|
const data = {
|
||||||
|
type: 'Pin'
|
||||||
|
};
|
||||||
|
mount(
|
||||||
|
<SVG data={ data } imageRef={ imageRef }/>
|
||||||
|
);
|
||||||
|
expect(image).toBeInstanceOf(Pin);
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user