Adding tests for FormActions component
This commit is contained in:
parent
f1a2dfdd34
commit
c14aa078b1
164
src/components/FormActions/__snapshots__/test.js.snap
Normal file
164
src/components/FormActions/__snapshots__/test.js.snap
Normal file
@ -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>
|
||||||
|
`;
|
@ -9,16 +9,15 @@ import style from './style.module.css';
|
|||||||
import { createPngLink, createSvgLink } from './links';
|
import { createPngLink, createSvgLink } from './links';
|
||||||
|
|
||||||
class FormActions extends React.PureComponent {
|
class FormActions extends React.PureComponent {
|
||||||
state = {}
|
state = {
|
||||||
|
svgLink: null,
|
||||||
|
pngLink: null
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { imageDetails } = this.props;
|
const { imageDetails } = this.props;
|
||||||
|
|
||||||
if (!imageDetails) {
|
if (imageDetails && imageDetails.svg) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (imageDetails.svg) {
|
|
||||||
this.generateDownloadLinks();
|
this.generateDownloadLinks();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -28,6 +27,7 @@ class FormActions extends React.PureComponent {
|
|||||||
const { imageDetails: prevImageDetails } = prevProps;
|
const { imageDetails: prevImageDetails } = prevProps;
|
||||||
|
|
||||||
if (!imageDetails) {
|
if (!imageDetails) {
|
||||||
|
this.setState({ svgLink: null, pngLink: null });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
87
src/components/FormActions/test.js
Normal file
87
src/components/FormActions/test.js
Normal file
@ -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();
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user