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`] = `
+
+`;
+
+exports[`FormActions rendering download links 1`] = `
+
+`;
+
+exports[`FormActions rendering download links with data after mounting 1`] = `
+
+`;
+
+exports[`FormActions rendering download links with data after mounting 2`] = `
+
+`;
+
+exports[`FormActions rendering download links with data after mounting 3`] = `
+
+`;
+
+exports[`FormActions rendering with a permalink 1`] = `
+
+`;
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(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('rendering with a permalink', () => {
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('rendering download links', async () => {
+ const imageDetails = {
+ svg: 'test image',
+ width: 10,
+ height: 20
+ };
+
+ const component = shallow(
+
+ );
+
+ // 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(
+
+ );
+
+ 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();
+ });
+});