Adding tests for root SVG component

src/components/SVG/__snapshots__/test.js.snap

@@ -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>
+`;

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
 };
 

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(
+      <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);
+  });
+});