From c14aa078b15d6fcc6ea79109f0f16f1d6acb963f Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 13 Jan 2019 17:47:37 -0500
Subject: [PATCH] Adding tests for FormActions component

---
 .../FormActions/__snapshots__/test.js.snap    | 164 ++++++++++++++++++
 src/components/FormActions/index.js           |  12 +-
 src/components/FormActions/test.js            |  87 ++++++++++
 3 files changed, 257 insertions(+), 6 deletions(-)
 create mode 100644 src/components/FormActions/__snapshots__/test.js.snap
 create mode 100644 src/components/FormActions/test.js

diff --git a/src/components/FormActions/__snapshots__/test.js.snap b/src/components/FormActions/__snapshots__/test.js.snap
new file mode 100644
index 0000000..f55966a
--- /dev/null
+++ b/src/components/FormActions/__snapshots__/test.js.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormActions rendering 1`] = `
+<ul
+  className="actions"
+/>
+`;
+
+exports[`FormActions rendering download links 1`] = `
+<ul
+  className="actions"
+>
+  <li>
+    <a
+      download="image.png"
+      href="http://example.com/image.png"
+      type="image/png"
+    >
+      <Download
+        color="currentColor"
+        size="24"
+      />
+      Example PNG Link
+    </a>
+  </li>
+  <li>
+    <a
+      download="image.svg"
+      href="http://example.com/image.svg"
+      type="image/svg+xml"
+    >
+      <Download
+        color="currentColor"
+        size="24"
+      />
+      Example SVG Link
+    </a>
+  </li>
+</ul>
+`;
+
+exports[`FormActions rendering download links with data after mounting 1`] = `
+<ul
+  className="actions"
+>
+  <li>
+    <a
+      href="http://example.com"
+    >
+      <Link
+        color="currentColor"
+        size="24"
+      />
+      Permalink
+    </a>
+  </li>
+</ul>
+`;
+
+exports[`FormActions rendering download links with data after mounting 2`] = `
+<ul
+  className="actions"
+>
+  <li>
+    <a
+      download="image.png"
+      href="http://example.com/image.png"
+      type="image/png"
+    >
+      <Download
+        color="currentColor"
+        size="24"
+      />
+      Example PNG Link
+    </a>
+  </li>
+  <li>
+    <a
+      download="image.svg"
+      href="http://example.com/image.svg"
+      type="image/svg+xml"
+    >
+      <Download
+        color="currentColor"
+        size="24"
+      />
+      Example SVG Link
+    </a>
+  </li>
+  <li>
+    <a
+      href="http://example.com"
+    >
+      <Link
+        color="currentColor"
+        size="24"
+      />
+      Permalink
+    </a>
+  </li>
+</ul>
+`;
+
+exports[`FormActions rendering download links with data after mounting 3`] = `
+<ul
+  className="actions"
+>
+  <li>
+    <a
+      download="image.png"
+      href="http://example.com/image.png"
+      type="image/png"
+    >
+      <Download
+        color="currentColor"
+        size="24"
+      />
+      Example PNG Link
+    </a>
+  </li>
+  <li>
+    <a
+      download="image.svg"
+      href="http://example.com/image.svg"
+      type="image/svg+xml"
+    >
+      <Download
+        color="currentColor"
+        size="24"
+      />
+      Example SVG Link
+    </a>
+  </li>
+  <li>
+    <a
+      href="http://example.com"
+    >
+      <Link
+        color="currentColor"
+        size="24"
+      />
+      Permalink
+    </a>
+  </li>
+</ul>
+`;
+
+exports[`FormActions rendering with a permalink 1`] = `
+<ul
+  className="actions"
+>
+  <li>
+    <a
+      href="http://example.com"
+    >
+      <Link
+        color="currentColor"
+        size="24"
+      />
+      Permalink
+    </a>
+  </li>
+</ul>
+`;
diff --git a/src/components/FormActions/index.js b/src/components/FormActions/index.js
index 85f7761..7e1df29 100644
--- a/src/components/FormActions/index.js
+++ b/src/components/FormActions/index.js
@@ -9,16 +9,15 @@ import style from './style.module.css';
 import { createPngLink, createSvgLink } from './links';
 
 class FormActions extends React.PureComponent {
-  state = {}
+  state = {
+    svgLink: null,
+    pngLink: null
+  }
 
   componentDidMount() {
     const { imageDetails } = this.props;
 
-    if (!imageDetails) {
-      return;
-    }
-
-    if (imageDetails.svg) {
+    if (imageDetails && imageDetails.svg) {
       this.generateDownloadLinks();
     }
   }
@@ -28,6 +27,7 @@ class FormActions extends React.PureComponent {
     const { imageDetails: prevImageDetails } = prevProps;
 
     if (!imageDetails) {
+      this.setState({ svgLink: null, pngLink: null });
       return;
     }
 
diff --git a/src/components/FormActions/test.js b/src/components/FormActions/test.js
new file mode 100644
index 0000000..0bc1b6d
--- /dev/null
+++ b/src/components/FormActions/test.js
@@ -0,0 +1,87 @@
+jest.mock('./links');
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import FormActions from 'components/FormActions';
+import { createPngLink, createSvgLink } from './links';
+
+createPngLink.mockResolvedValue({
+  url: 'http://example.com/image.png',
+  filename: 'image.png',
+  type: 'image/png',
+  label: 'Example PNG Link'
+});
+createSvgLink.mockResolvedValue({
+  url: 'http://example.com/image.svg',
+  filename: 'image.svg',
+  type: 'image/svg+xml',
+  label: 'Example SVG Link'
+});
+
+describe('FormActions', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <FormActions />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with a permalink', () => {
+    const component = shallow(
+      <FormActions permalinkUrl="http://example.com" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering download links', async () => {
+    const imageDetails = {
+      svg: 'test image',
+      width: 10,
+      height: 20
+    };
+
+    const component = shallow(
+      <FormActions imageDetails={ imageDetails }/>
+    );
+
+    // Give a beat for mocked promises to resolve
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering download links with data after mounting', async () => {
+    const component = shallow(
+      <FormActions />
+    );
+
+    component.setProps({ permalinkUrl: 'http://example.com' });
+
+    expect(component).toMatchSnapshot();
+
+    component.setProps({
+      imageDetails: {
+        svg: 'test image'
+      }
+    });
+
+    // Give a beat for mocked promises to resolve
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+
+    component.setProps({
+      imageDetails: {
+        svg: 'test image',
+        width: 10,
+        height: 20
+      }
+    });
+
+    // Give a beat for mocked promises to resolve
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+  });
+});