root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding tests for FormActions component

Browse Source
This commit is contained in:
Jeff Avallone 2019-01-13 17:47:37 -05:00
parent f1a2dfdd34
commit c14aa078b1
3 changed files with 257 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/FormActions/__snapshots__/test.js.snap Normal file
View 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>
`;

12
src/components/FormActions/index.js
View File

@ -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;
}

87
src/components/FormActions/test.js Normal file
View 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();
});
});