Updating FormActions to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 21:31:59 -04:00
parent 07cd0a4799
commit d46ce46b93
2 changed files with 212 additions and 180 deletions

View File

@ -1,172 +1,196 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FormActions rendering 1`] = `
<ul
className="actions"
/>
<DocumentFragment>
<ul
class="actions"
/>
</DocumentFragment>
`;
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"
/>
TRANSLATE(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"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
</ul>
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
download="image.png"
href="http://example.com/image.png"
type="image/png"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example PNG Link)
</a>
</li>
<li>
<a
download="image.svg"
href="http://example.com/image.svg"
type="image/svg+xml"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
</ul>
</DocumentFragment>
`;
exports[`FormActions rendering download links with data after mounting 1`] = `
<ul
className="actions"
>
<li>
<a
href="http://example.com"
>
<Link
color="currentColor"
size="24"
/>
<Trans>
Permalink
</Trans>
</a>
</li>
</ul>
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;
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"
/>
TRANSLATE(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"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
<li>
<a
href="http://example.com"
>
<Link
color="currentColor"
size="24"
/>
<Trans>
Permalink
</Trans>
</a>
</li>
</ul>
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
download="image.png"
href="http://example.com/image.png"
type="image/png"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example PNG Link)
</a>
</li>
<li>
<a
download="image.svg"
href="http://example.com/image.svg"
type="image/svg+xml"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;
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"
/>
TRANSLATE(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"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
<li>
<a
href="http://example.com"
>
<Link
color="currentColor"
size="24"
/>
<Trans>
Permalink
</Trans>
</a>
</li>
</ul>
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
download="image.png"
href="http://example.com/image.png"
type="image/png"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example PNG Link)
</a>
</li>
<li>
<a
download="image.svg"
href="http://example.com/image.svg"
type="image/svg+xml"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;
exports[`FormActions rendering with a permalink 1`] = `
<ul
className="actions"
>
<li>
<a
href="http://example.com"
>
<Link
color="currentColor"
size="24"
/>
<Trans>
Permalink
</Trans>
</a>
</li>
</ul>
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;

View File

@ -1,4 +1,10 @@
jest.mock('./links');
jest.mock('react-feather/dist/icons/download', () =>
require('__mocks__/component-mock')(
'react-feather/dist/icons/download'));
jest.mock('react-feather/dist/icons/link', () =>
require('__mocks__/component-mock')(
'react-feather/dist/icons/link'));
import React from 'react';
import { render } from 'react-testing-library';
@ -21,68 +27,70 @@ createSvgLink.mockResolvedValue({
});
describe('FormActions', () => {
test.skip('rendering', () => {
const component = shallow(
test('rendering', () => {
const { asFragment } = render(
<FormActions t={ mockT } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test.skip('rendering with a permalink', () => {
const component = shallow(
test('rendering with a permalink', () => {
const { asFragment } = render(
<FormActions permalinkUrl="http://example.com" t={ mockT } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test.skip('rendering download links', async () => {
test('rendering download links', async () => {
const imageDetails = {
svg: 'test image',
width: 10,
height: 20
};
const component = shallow(
const { asFragment } = render(
<FormActions imageDetails={ imageDetails } t={ mockT } />
);
// Give a beat for mocked promises to resolve
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test.skip('rendering download links with data after mounting', async () => {
const component = shallow(
test('rendering download links with data after mounting', async () => {
const { asFragment, rerender } = render(
<FormActions t={ mockT } />
);
component.setProps({ permalinkUrl: 'http://example.com' });
rerender(
<FormActions permalinkUrl="http://example.com" t={ mockT } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
component.setProps({
imageDetails: {
svg: 'test image'
}
});
rerender(
<FormActions
permalinkUrl="http://example.com"
imageDetails={ { svg: 'test-image' } }
t={ mockT } />
);
// Give a beat for mocked promises to resolve
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
component.setProps({
imageDetails: {
svg: 'test image',
width: 10,
height: 20
}
});
rerender(
<FormActions
permalinkUrl="http://example.com"
imageDetails={ { svg: 'test-image', width: 10, height: 20 } }
t={ mockT } />
);
// Give a beat for mocked promises to resolve
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
});