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

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

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

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