Updating FormActions to use react-testing-library
This commit is contained in:
Jeff Avallone
parent
07cd0a4799
commit
d46ce46b93
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue