diff --git a/src/components/SVG/__snapshots__/test.js.snap b/src/components/SVG/__snapshots__/test.js.snap
new file mode 100644
index 0000000..2a1a417
--- /dev/null
+++ b/src/components/SVG/__snapshots__/test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SVG arbitrary markup 1`] = `
+
+
+ Sample text
+
+
+`;
+
+exports[`SVG passing props to nodes 1`] = `
+
+ Sample text
+
+`;
+
+exports[`SVG rendering 1`] = `
+
+`;
+
+exports[`SVG rendering 1 child 1`] = `
+
+
+
+`;
+
+exports[`SVG rendering a string as a child 1`] = `
+
+ Sample text
+
+`;
+
+exports[`SVG rendering multiple children 1`] = `
+
+
+
+
+`;
diff --git a/src/components/SVG/index.js b/src/components/SVG/index.js
index 1f02161..9a55296 100644
--- a/src/components/SVG/index.js
+++ b/src/components/SVG/index.js
@@ -19,7 +19,7 @@ const nodeTypes = {
VerticalLayout
};
-const render = (data, extraProps = {}) => {
+const render = (data, extraProps) => {
if (typeof data === 'string') {
return data;
}
@@ -29,7 +29,7 @@ const render = (data, extraProps = {}) => {
(data, key) => render(data, { key }));
return React.createElement(
- nodeTypes[type],
+ nodeTypes[type] || type,
{ ...extraProps, ...props },
children.length === 1 ? children[0] : children);
};
@@ -37,7 +37,11 @@ const render = (data, extraProps = {}) => {
const SVG = ({ data, imageRef: ref }) => render(data, { ref });
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
};
diff --git a/src/components/SVG/test.js b/src/components/SVG/test.js
new file mode 100644
index 0000000..fa44d1f
--- /dev/null
+++ b/src/components/SVG/test.js
@@ -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(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('rendering 1 child', () => {
+ const data = {
+ type: 'Image',
+ children: [
+ {
+ type: 'Pin'
+ }
+ ]
+ };
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('rendering multiple children', () => {
+ const data = {
+ type: 'HorizontalLayout',
+ children: [
+ {
+ type: 'Pin'
+ },
+ {
+ type: 'Pin'
+ }
+ ]
+ };
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('rendering a string as a child', () => {
+ const data = {
+ type: 'Text',
+ children: [
+ 'Sample text'
+ ]
+ };
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('passing props to nodes', () => {
+ const data = {
+ type: 'Text',
+ props: {
+ theme: 'anchorText'
+ },
+ children: [
+ 'Sample text'
+ ]
+ };
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('arbitrary markup', () => {
+ const data = {
+ type: 'Text',
+ children: [
+ {
+ type: 'tspan',
+ children: [
+ 'Sample text'
+ ]
+ }
+ ]
+ };
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('imageRef prop', () => {
+ let image;
+ const imageRef = element => image = element;
+ const data = {
+ type: 'Pin'
+ };
+ mount(
+
+ );
+ expect(image).toBeInstanceOf(Pin);
+ });
+});