Adding tests for FormActions component

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

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) {
+    if (imageDetails && imageDetails.svg) {
-      return;
-    }
-
-    if (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;
     }
 

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