From 6ff91456036e824effbe9f0453c970af41744b82 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sat, 17 Feb 2018 13:04:19 -0500
Subject: [PATCH] Adding tests for SVG components

Jest/enzyme/jsdom is kicking out some nastly looking messages because it
doesn't recognize various SVG elements, but they appear to be harmless.
---
 src/__mocks__/SVGElement.js                   |  15 ++
 src/components/SVG/Box.test.js                |  53 +++++
 src/components/SVG/HorizontalLayout.js        |   4 -
 src/components/SVG/HorizontalLayout.test.js   |  34 +++
 src/components/SVG/Image.test.js              |  19 ++
 src/components/SVG/Loop.test.js               |  86 +++++++
 src/components/SVG/Pin.test.js                |  15 ++
 src/components/SVG/Text.test.js               |  36 +++
 src/components/SVG/VerticalLayout.js          |   4 -
 src/components/SVG/VerticalLayout.test.js     |  34 +++
 .../SVG/__snapshots__/Box.test.js.snap        | 108 +++++++++
 .../HorizontalLayout.test.js.snap             | 139 ++++++++++++
 .../SVG/__snapshots__/Image.test.js.snap      |  53 +++++
 .../SVG/__snapshots__/Loop.test.js.snap       | 213 ++++++++++++++++++
 .../SVG/__snapshots__/Pin.test.js.snap        |  19 ++
 .../SVG/__snapshots__/Text.test.js.snap       |  55 +++++
 .../__snapshots__/VerticalLayout.test.js.snap | 139 ++++++++++++
 17 files changed, 1018 insertions(+), 8 deletions(-)
 create mode 100644 src/__mocks__/SVGElement.js
 create mode 100644 src/components/SVG/Box.test.js
 create mode 100644 src/components/SVG/HorizontalLayout.test.js
 create mode 100644 src/components/SVG/Image.test.js
 create mode 100644 src/components/SVG/Loop.test.js
 create mode 100644 src/components/SVG/Pin.test.js
 create mode 100644 src/components/SVG/Text.test.js
 create mode 100644 src/components/SVG/VerticalLayout.test.js
 create mode 100644 src/components/SVG/__snapshots__/Box.test.js.snap
 create mode 100644 src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap
 create mode 100644 src/components/SVG/__snapshots__/Image.test.js.snap
 create mode 100644 src/components/SVG/__snapshots__/Loop.test.js.snap
 create mode 100644 src/components/SVG/__snapshots__/Pin.test.js.snap
 create mode 100644 src/components/SVG/__snapshots__/Text.test.js.snap
 create mode 100644 src/components/SVG/__snapshots__/VerticalLayout.test.js.snap

diff --git a/src/__mocks__/SVGElement.js b/src/__mocks__/SVGElement.js
new file mode 100644
index 0000000..9dc3596
--- /dev/null
+++ b/src/__mocks__/SVGElement.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Base from 'components/SVG/Base';
+
+class SVGElement extends Base {
+  reflow() {
+    return this.setBBox(this.props.bbox);
+  }
+
+  render() {
+    return <text>Mock content</text>;
+  }
+}
+
+export default SVGElement;
diff --git a/src/components/SVG/Box.test.js b/src/components/SVG/Box.test.js
new file mode 100644
index 0000000..324a44f
--- /dev/null
+++ b/src/components/SVG/Box.test.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Box from './Box';
+
+import SVGElement from '__mocks__/SVGElement';
+
+const originalGetBBox = window.Element.prototype.getBBox;
+
+describe('Box', () => {
+  beforeEach(() => {
+    window.Element.prototype.getBBox = function() {
+      return { width: 100, height: 10 };
+    };
+  });
+
+  afterEach(() => {
+    window.Element.prototype.getBBox = originalGetBBox;
+  });
+
+  test('rendering', async () => {
+    const component = mount(
+      <Box>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Box>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with content anchors', async () => {
+    const component = mount(
+      <Box useAnchors>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Box>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with label', async () => {
+    const component = mount(
+      <Box label="Test label">
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Box>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/HorizontalLayout.js b/src/components/SVG/HorizontalLayout.js
index a001bba..f0753a5 100644
--- a/src/components/SVG/HorizontalLayout.js
+++ b/src/components/SVG/HorizontalLayout.js
@@ -46,10 +46,6 @@ class HorizontalLayout extends Base {
   }
 
   reflow() {
-    if (this.children.length === 0) {
-      return;
-    }
-
     const { spacing, withConnectors } = this.props;
 
     const childBoxes = this.children.map(child => child.getBBox());
diff --git a/src/components/SVG/HorizontalLayout.test.js b/src/components/SVG/HorizontalLayout.test.js
new file mode 100644
index 0000000..c9b25f6
--- /dev/null
+++ b/src/components/SVG/HorizontalLayout.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import HorizontalLayout from './HorizontalLayout';
+
+import SVGElement from '__mocks__/SVGElement';
+
+describe('HorizontalLayout', () => {
+  test('rendering', async () => {
+    const component = mount(
+      <HorizontalLayout>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </HorizontalLayout>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with connectors', async () => {
+    const component = mount(
+      <HorizontalLayout withConnectors>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </HorizontalLayout>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/Image.test.js b/src/components/SVG/Image.test.js
new file mode 100644
index 0000000..2bc95c9
--- /dev/null
+++ b/src/components/SVG/Image.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Image from './Image';
+
+import SVGElement from '__mocks__/SVGElement';
+
+describe('Image', () => {
+  test('rendering', async () => {
+    const component = mount(
+      <Image>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Image>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/Loop.test.js b/src/components/SVG/Loop.test.js
new file mode 100644
index 0000000..fb39b5b
--- /dev/null
+++ b/src/components/SVG/Loop.test.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Loop from './Loop';
+
+import SVGElement from '__mocks__/SVGElement';
+
+const originalGetBBox = window.Element.prototype.getBBox;
+
+describe('Loop', () => {
+  beforeEach(() => {
+    window.Element.prototype.getBBox = function() {
+      return { width: 100, height: 10 };
+    };
+  });
+
+  afterEach(() => {
+    window.Element.prototype.getBBox = originalGetBBox;
+  });
+
+  test('rendering', async () => {
+    const component = mount(
+      <Loop>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Loop>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with skip path', async () => {
+    const component = mount(
+      <Loop skip>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Loop>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with repeat path', async () => {
+    const component = mount(
+      <Loop repeat>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Loop>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with repeat path and label', async () => {
+    const component = mount(
+      <Loop repeat label="Test label">
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Loop>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with skip and repeat paths', async () => {
+    const component = mount(
+      <Loop skip repeat>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Loop>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with greedy skip and repeat paths', async () => {
+    const component = mount(
+      <Loop greedy skip repeat>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </Loop>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/Pin.test.js b/src/components/SVG/Pin.test.js
new file mode 100644
index 0000000..ed6840f
--- /dev/null
+++ b/src/components/SVG/Pin.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Pin from './Pin';
+
+describe('Pin', () => {
+  test('rendering', async () => {
+    const component = mount(
+      <Pin/>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/Text.test.js b/src/components/SVG/Text.test.js
new file mode 100644
index 0000000..c1706b4
--- /dev/null
+++ b/src/components/SVG/Text.test.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Text from './Text';
+
+const originalGetBBox = window.Element.prototype.getBBox;
+
+describe('Text', () => {
+  beforeEach(() => {
+    window.Element.prototype.getBBox = function() {
+      return { x: 10, y: 10 };
+    };
+  });
+
+  afterEach(() => {
+    window.Element.prototype.getBBox = originalGetBBox;
+  });
+
+  test('rendering', async () => {
+    const component = mount(
+      <Text>Test content</Text>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with quotes', async () => {
+    const component = mount(
+      <Text quoted>Test content</Text>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/VerticalLayout.js b/src/components/SVG/VerticalLayout.js
index 3150afa..6a9eb62 100644
--- a/src/components/SVG/VerticalLayout.js
+++ b/src/components/SVG/VerticalLayout.js
@@ -84,10 +84,6 @@ class VerticalLayout extends Base {
   }
 
   reflow() {
-    if (this.children.length === 0) {
-      return Promise.resolve();
-    }
-
     const { spacing, withConnectors } = this.props;
 
     const childBoxes = this.children.map(child => child.getBBox());
diff --git a/src/components/SVG/VerticalLayout.test.js b/src/components/SVG/VerticalLayout.test.js
new file mode 100644
index 0000000..24d69bb
--- /dev/null
+++ b/src/components/SVG/VerticalLayout.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import VerticalLayout from './VerticalLayout';
+
+import SVGElement from '__mocks__/SVGElement';
+
+describe('VerticalLayout', () => {
+  test('rendering', async () => {
+    const component = mount(
+      <VerticalLayout>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </VerticalLayout>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with connectors', async () => {
+    const component = mount(
+      <VerticalLayout withConnectors>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+        <SVGElement bbox={{ width: 100, height: 100 }}/>
+      </VerticalLayout>
+    );
+    await component.instance().doReflow();
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SVG/__snapshots__/Box.test.js.snap b/src/components/SVG/__snapshots__/Box.test.js.snap
new file mode 100644
index 0000000..b2b7cc8
--- /dev/null
+++ b/src/components/SVG/__snapshots__/Box.test.js.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box rendering 1`] = `
+<Box
+  padding={5}
+  radius={3}
+>
+  <rect
+    height={110}
+    rx={3}
+    ry={3}
+    transform="translate(0 0)"
+    width={110}
+  />
+  <g
+    transform="translate(5 5)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Box>
+`;
+
+exports[`Box rendering with content anchors 1`] = `
+<Box
+  padding={5}
+  radius={3}
+  useAnchors={true}
+>
+  <rect
+    height={110}
+    rx={3}
+    ry={3}
+    transform="translate(0 0)"
+    width={110}
+  />
+  <g
+    transform="translate(5 5)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Box>
+`;
+
+exports[`Box rendering with label 1`] = `
+<Box
+  label="Test label"
+  padding={5}
+  radius={3}
+>
+  <rect
+    height={110}
+    rx={3}
+    ry={3}
+    transform="translate(0 10)"
+    width={110}
+  />
+  <text
+    style={
+      Object {
+        "dominantBaseline": "text-after-edge",
+        "fontFamily": "Arial",
+        "fontSize": "12px",
+      }
+    }
+    transform="translate(0 10)"
+  >
+    Test label
+  </text>
+  <g
+    transform="translate(5 15)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Box>
+`;
diff --git a/src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap b/src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap
new file mode 100644
index 0000000..6575360
--- /dev/null
+++ b/src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap
@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HorizontalLayout rendering 1`] = `
+<HorizontalLayout
+  spacing={10}
+  withConnectors={false}
+>
+  <path
+    d=""
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    key=".0"
+    transform="translate(0 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".1"
+    transform="translate(110 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".2"
+    transform="translate(220 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</HorizontalLayout>
+`;
+
+exports[`HorizontalLayout rendering with connectors 1`] = `
+<HorizontalLayout
+  spacing={10}
+  withConnectors={true}
+>
+  <path
+    d="M100,50H110M210,50H220"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    key=".0"
+    transform="translate(0 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".1"
+    transform="translate(110 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".2"
+    transform="translate(220 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</HorizontalLayout>
+`;
diff --git a/src/components/SVG/__snapshots__/Image.test.js.snap b/src/components/SVG/__snapshots__/Image.test.js.snap
new file mode 100644
index 0000000..2967ea1
--- /dev/null
+++ b/src/components/SVG/__snapshots__/Image.test.js.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image rendering 1`] = `
+<Image
+  padding={10}
+>
+  <svg
+    height={120}
+    style={
+      Object {
+        "backgroundColor": "#fff",
+      }
+    }
+    viewBox="0 0 120 120"
+    width={120}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  >
+    <metadata
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<rdf:rdf>
+ <cc:license rdf:about=\\"http://creativecommons.org/licenses/by/3.0/\\">
+    <cc:permits rdf:resource=\\"http://creativecommons.org/ns#Reproduction\\"></cc:permits>
+    <cc:permits rdf:resource=\\"http://creativecommons.org/ns#Distribution\\"></cc:permits>
+    <cc:requires rdf:resource=\\"http://creativecommons.org/ns#Notice\\"></cc:requires>
+    <cc:requires rdf:resource=\\"http://creativecommons.org/ns#Attribution\\"></cc:requires>
+    <cc:permits rdf:resource=\\"http://creativecommons.org/ns#DerivativeWorks\\"></cc:permits>
+  </cc:license>
+</rdf:rdf>",
+        }
+      }
+    />
+    <g
+      transform="translate(10 10)"
+    >
+      <SVGElement
+        bbox={
+          Object {
+            "height": 100,
+            "width": 100,
+          }
+        }
+      >
+        <text>
+          Mock content
+        </text>
+      </SVGElement>
+    </g>
+  </svg>
+</Image>
+`;
diff --git a/src/components/SVG/__snapshots__/Loop.test.js.snap b/src/components/SVG/__snapshots__/Loop.test.js.snap
new file mode 100644
index 0000000..2550527
--- /dev/null
+++ b/src/components/SVG/__snapshots__/Loop.test.js.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loop rendering 1`] = `
+<Loop>
+  <path
+    d=""
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    transform="translate(0 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Loop>
+`;
+
+exports[`Loop rendering with greedy skip and repeat paths 1`] = `
+<Loop
+  greedy={true}
+  repeat={true}
+  skip={true}
+>
+  <path
+    d="M0,60q10,0 10,-10v-40q0,-10 10,-10h90q10,0 10,10v40q0,10 10,10M125,75l5,-5m-5,5l-5,-5M15,60q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    transform="translate(15 10)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Loop>
+`;
+
+exports[`Loop rendering with repeat path 1`] = `
+<Loop
+  repeat={true}
+>
+  <path
+    d="M10,50q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    transform="translate(10 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Loop>
+`;
+
+exports[`Loop rendering with repeat path and label 1`] = `
+<Loop
+  label="Test label"
+  repeat={true}
+>
+  <path
+    d="M10,50q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <text
+    style={
+      Object {
+        "dominantBaseline": "text-after-edge",
+        "fontFamily": "Arial",
+        "fontSize": "12px",
+      }
+    }
+    transform="translate(10 122)"
+  >
+    Test label
+  </text>
+  <g
+    transform="translate(10 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Loop>
+`;
+
+exports[`Loop rendering with skip and repeat paths 1`] = `
+<Loop
+  repeat={true}
+  skip={true}
+>
+  <path
+    d="M10,45l5,5m-5,-5l-5,5M0,60q10,0 10,-10v-40q0,-10 10,-10h90q10,0 10,10v40q0,10 10,10M15,60q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    transform="translate(15 10)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Loop>
+`;
+
+exports[`Loop rendering with skip path 1`] = `
+<Loop
+  skip={true}
+>
+  <path
+    d="M10,45l5,5m-5,-5l-5,5M0,60q10,0 10,-10v-40q0,-10 10,-10h90q10,0 10,10v40q0,10 10,10"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    transform="translate(15 10)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</Loop>
+`;
diff --git a/src/components/SVG/__snapshots__/Pin.test.js.snap b/src/components/SVG/__snapshots__/Pin.test.js.snap
new file mode 100644
index 0000000..df6119e
--- /dev/null
+++ b/src/components/SVG/__snapshots__/Pin.test.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pin rendering 1`] = `
+<Pin
+  radius={5}
+>
+  <circle
+    r={5}
+    style={
+      Object {
+        "fill": "#6b6659",
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+    transform="translate(5 5)"
+  />
+</Pin>
+`;
diff --git a/src/components/SVG/__snapshots__/Text.test.js.snap b/src/components/SVG/__snapshots__/Text.test.js.snap
new file mode 100644
index 0000000..32b25ef
--- /dev/null
+++ b/src/components/SVG/__snapshots__/Text.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text rendering 1`] = `
+<Text>
+  <text
+    style={
+      Object {
+        "fontFamily": "Arial",
+        "fontSize": "16px",
+      }
+    }
+    transform="translate(-10 -10)"
+  >
+    Test content
+  </text>
+</Text>
+`;
+
+exports[`Text rendering with quotes 1`] = `
+<Text
+  quoted={true}
+>
+  <text
+    style={
+      Object {
+        "fontFamily": "Arial",
+        "fontSize": "16px",
+      }
+    }
+    transform="translate(-10 -10)"
+  >
+    <tspan
+      style={
+        Object {
+          "fill": "#908c83",
+        }
+      }
+    >
+      “
+    </tspan>
+    <tspan>
+      Test content
+    </tspan>
+    <tspan
+      style={
+        Object {
+          "fill": "#908c83",
+        }
+      }
+    >
+      ”
+    </tspan>
+  </text>
+</Text>
+`;
diff --git a/src/components/SVG/__snapshots__/VerticalLayout.test.js.snap b/src/components/SVG/__snapshots__/VerticalLayout.test.js.snap
new file mode 100644
index 0000000..b4efb8b
--- /dev/null
+++ b/src/components/SVG/__snapshots__/VerticalLayout.test.js.snap
@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VerticalLayout rendering 1`] = `
+<VerticalLayout
+  spacing={10}
+  withConnectors={false}
+>
+  <path
+    d=""
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    key=".0"
+    transform="translate(0 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".1"
+    transform="translate(0 110)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".2"
+    transform="translate(0 220)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</VerticalLayout>
+`;
+
+exports[`VerticalLayout rendering with connectors 1`] = `
+<VerticalLayout
+  spacing={10}
+  withConnectors={true}
+>
+  <path
+    d="M10,60q0,-10 10,-10H20M130,60q0,-10 -10,-10H120M0,160c15,0 10,0 20,0H20M140,160c-15,0 -10,0 -20,0H120M10,260q0,10 10,10H20M130,260q0,10 -10,10H120M0,160q10,0 10,-10V60M140,160q-10,0 -10,-10V60M0,160q10,0 10,10V260M140,160q-10,0 -10,10V260"
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#000",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g
+    key=".0"
+    transform="translate(20 0)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".1"
+    transform="translate(20 110)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+  <g
+    key=".2"
+    transform="translate(20 220)"
+  >
+    <SVGElement
+      bbox={
+        Object {
+          "height": 100,
+          "width": 100,
+        }
+      }
+    >
+      <text>
+        Mock content
+      </text>
+    </SVGElement>
+  </g>
+</VerticalLayout>
+`;