From b3b7480358747729cb50b741ce647e325f423d41 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 31 Jan 2019 21:51:53 -0500
Subject: [PATCH] Adding some initial tests for Render component

---
 .../Render/__snapshots__/test.js.snap         | 155 ++++++++++++++++++
 src/components/Render/test.js                 | 115 +++++++++++++
 2 files changed, 270 insertions(+)
 create mode 100644 src/components/Render/__snapshots__/test.js.snap
 create mode 100644 src/components/Render/test.js

diff --git a/src/components/Render/__snapshots__/test.js.snap b/src/components/Render/__snapshots__/test.js.snap
new file mode 100644
index 0000000..c93ee1c
--- /dev/null
+++ b/src/components/Render/__snapshots__/test.js.snap
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render debugging 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <Text>
+      Example
+    </Text>
+    <rect
+      height={50}
+      style={
+        Object {
+          "fill": "transparent",
+          "opacity": 0.5,
+          "stroke": "red",
+          "strokeDasharray": "2,2",
+          "strokeWidth": "1px",
+        }
+      }
+      width={100}
+    />
+    <circle
+      cx={5}
+      cy={10}
+      r="3"
+      style={
+        Object {
+          "fill": "red",
+          "opacity": 0.5,
+        }
+      }
+    />
+    <circle
+      cx={95}
+      cy={10}
+      r="3"
+      style={
+        Object {
+          "fill": "red",
+          "opacity": 0.5,
+        }
+      }
+    />
+  </SVG>
+</div>
+`;
+
+exports[`Render types Box 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <Box
+      padding={5}
+      radius={3}
+    >
+      <Text>
+        Example
+      </Text>
+    </Box>
+  </SVG>
+</div>
+`;
+
+exports[`Render types HorizontalLayout 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <HorizontalLayout
+      spacing={10}
+      withConnectors={false}
+    >
+      <Text>
+        Example
+      </Text>
+      <Text>
+        Another Example
+      </Text>
+    </HorizontalLayout>
+  </SVG>
+</div>
+`;
+
+exports[`Render types Loop 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <Loop>
+      <Text>
+        Example
+      </Text>
+    </Loop>
+  </SVG>
+</div>
+`;
+
+exports[`Render types Pin 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <Pin />
+  </SVG>
+</div>
+`;
+
+exports[`Render types Text 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <Text>
+      Example
+    </Text>
+  </SVG>
+</div>
+`;
+
+exports[`Render types VerticalLayout 1`] = `
+<div
+  className="render"
+>
+  <SVG
+    onReflow={[Function]}
+  >
+    <VerticalLayout
+      spacing={10}
+      withConnectors={false}
+    >
+      <Text>
+        Example
+      </Text>
+      <Text>
+        Another Example
+      </Text>
+    </VerticalLayout>
+  </SVG>
+</div>
+`;
diff --git a/src/components/Render/test.js b/src/components/Render/test.js
new file mode 100644
index 0000000..fa17195
--- /dev/null
+++ b/src/components/Render/test.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Render from 'components/Render';
+
+const testType = (name, item) => {
+  test(name, () => {
+    const data = { type: 'SVG', children: [item] };
+    const component = shallow(
+      <Render data={ data } onRender={ jest.fn() }/>
+    );
+    expect(component).toMatchSnapshot();
+  });
+};
+
+describe('Render', () => {
+  test('debugging', () => {
+    const data = {
+      type: 'SVG',
+      children: [
+        {
+          type: 'Text',
+          debug: true,
+          box: {
+            width: 100,
+            height: 50,
+            axisY: 10,
+            axisX1: 5,
+            axisX2: 95
+          },
+          children: [
+            'Example'
+          ]
+        }
+      ]
+    };
+    const component = shallow(
+      <Render data={ data } onRender={ jest.fn() }/>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('types', () => {
+    testType('Pin', {
+      type: 'Pin'
+    });
+
+    testType('Text', {
+      type: 'Text',
+      children: [
+        'Example'
+      ]
+    });
+
+    testType('Box', {
+      type: 'Box',
+      children: [
+        {
+          type: 'Text',
+          children: [
+            'Example'
+          ]
+        }
+      ]
+    });
+
+    testType('Loop', {
+      type: 'Loop',
+      children: [
+        {
+          type: 'Text',
+          children: [
+            'Example'
+          ]
+        }
+      ]
+    });
+
+    testType('HorizontalLayout', {
+      type: 'HorizontalLayout',
+      children: [
+        {
+          type: 'Text',
+          children: [
+            'Example'
+          ]
+        },
+        {
+          type: 'Text',
+          children: [
+            'Another Example'
+          ]
+        }
+      ]
+    });
+
+    testType('VerticalLayout', {
+      type: 'VerticalLayout',
+      children: [
+        {
+          type: 'Text',
+          children: [
+            'Example'
+          ]
+        },
+        {
+          type: 'Text',
+          children: [
+            'Another Example'
+          ]
+        }
+      ]
+    });
+  });
+});