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

Updating FormActions to use react-testing-library

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/FormActions/__snapshots__/test.js.snap
View File

@ -1,14 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FormActions rendering 1`] = ` exports[`FormActions rendering 1`] = `
<DocumentFragment>
<ul <ul
className="actions" class="actions"
/> />
</DocumentFragment>
`; `;
exports[`FormActions rendering download links 1`] = ` exports[`FormActions rendering download links 1`] = `
<DocumentFragment>
<ul <ul
className="actions" class="actions"
> >
<li> <li>
<a <a
@ -16,9 +19,9 @@ exports[`FormActions rendering download links 1`] = `
href="http://example.com/image.png" href="http://example.com/image.png"
type="image/png" type="image/png"
> >
<Download <span
color="currentColor" data-component="Download"
size="24" data-props="{}"
/> />
TRANSLATE(Example PNG Link) TRANSLATE(Example PNG Link)
</a> </a>
@ -29,39 +32,46 @@ exports[`FormActions rendering download links 1`] = `
href="http://example.com/image.svg" href="http://example.com/image.svg"
type="image/svg+xml" type="image/svg+xml"
> >
<Download <span
color="currentColor" data-component="Download"
size="24" data-props="{}"
/> />
TRANSLATE(Example SVG Link) TRANSLATE(Example SVG Link)
</a> </a>
</li> </li>
</ul> </ul>
</DocumentFragment>
`; `;
exports[`FormActions rendering download links with data after mounting 1`] = ` exports[`FormActions rendering download links with data after mounting 1`] = `
<DocumentFragment>
<ul <ul
className="actions" class="actions"
> >
<li> <li>
<a <a
href="http://example.com" href="http://example.com"
> >
<Link <span
color="currentColor" data-component="Link"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Permalink Permalink
</Trans> </span>
</a> </a>
</li> </li>
</ul> </ul>
</DocumentFragment>
`; `;
exports[`FormActions rendering download links with data after mounting 2`] = ` exports[`FormActions rendering download links with data after mounting 2`] = `
<DocumentFragment>
<ul <ul
className="actions" class="actions"
> >
<li> <li>
<a <a
@ -69,9 +79,9 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
href="http://example.com/image.png" href="http://example.com/image.png"
type="image/png" type="image/png"
> >
<Download <span
color="currentColor" data-component="Download"
size="24" data-props="{}"
/> />
TRANSLATE(Example PNG Link) TRANSLATE(Example PNG Link)
</a> </a>
@ -82,9 +92,9 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
href="http://example.com/image.svg" href="http://example.com/image.svg"
type="image/svg+xml" type="image/svg+xml"
> >
<Download <span
color="currentColor" data-component="Download"
size="24" data-props="{}"
/> />
TRANSLATE(Example SVG Link) TRANSLATE(Example SVG Link)
</a> </a>
@ -93,21 +103,26 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
<a <a
href="http://example.com" href="http://example.com"
> >
<Link <span
color="currentColor" data-component="Link"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Permalink Permalink
</Trans> </span>
</a> </a>
</li> </li>
</ul> </ul>
</DocumentFragment>
`; `;
exports[`FormActions rendering download links with data after mounting 3`] = ` exports[`FormActions rendering download links with data after mounting 3`] = `
<DocumentFragment>
<ul <ul
className="actions" class="actions"
> >
<li> <li>
<a <a
@ -115,9 +130,9 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
href="http://example.com/image.png" href="http://example.com/image.png"
type="image/png" type="image/png"
> >
<Download <span
color="currentColor" data-component="Download"
size="24" data-props="{}"
/> />
TRANSLATE(Example PNG Link) TRANSLATE(Example PNG Link)
</a> </a>
@ -128,9 +143,9 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
href="http://example.com/image.svg" href="http://example.com/image.svg"
type="image/svg+xml" type="image/svg+xml"
> >
<Download <span
color="currentColor" data-component="Download"
size="24" data-props="{}"
/> />
TRANSLATE(Example SVG Link) TRANSLATE(Example SVG Link)
</a> </a>
@ -139,34 +154,43 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
<a <a
href="http://example.com" href="http://example.com"
> >
<Link <span
color="currentColor" data-component="Link"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Permalink Permalink
</Trans> </span>
</a> </a>
</li> </li>
</ul> </ul>
</DocumentFragment>
`; `;
exports[`FormActions rendering with a permalink 1`] = ` exports[`FormActions rendering with a permalink 1`] = `
<DocumentFragment>
<ul <ul
className="actions" class="actions"
> >
<li> <li>
<a <a
href="http://example.com" href="http://example.com"
> >
<Link <span
color="currentColor" data-component="Link"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Permalink Permalink
</Trans> </span>
</a> </a>
</li> </li>
</ul> </ul>
</DocumentFragment>
`; `;

62
src/components/FormActions/test.js
View File

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