Updating App to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 21:48:57 -04:00
parent d46ce46b93
commit ead8927b02
2 changed files with 238 additions and 318 deletions

View File

@ -1,293 +1,255 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App removing rendered expression 1`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"test expression\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
>
<withI18nextTranslation(FormActions) />
</withI18nextTranslation(Form)>
<Render
data="LAYOUT(PARSED(test expression))"
onRender={[Function]}
<span
data-component="withI18nextTranslation(FormActions)"
data-props="{}"
/>
</Fragment>
</span>
<span
data-component="Render"
data-props="{
\\"data\\": \\"LAYOUT(PARSED(test expression))\\"
}"
/>
</DocumentFragment>
`;
exports[`App removing rendered expression 2`] = `
<Fragment>
<withI18nextTranslation(Form)
expr=""
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
</Fragment>
</DocumentFragment>
`;
exports[`App rendering 1`] = `
<Fragment>
<withI18nextTranslation(Form)
expr=""
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
</Fragment>
</DocumentFragment>
`;
exports[`App rendering an expression 1`] = `
<Fragment>
<withI18nextTranslation(Form)
expr=""
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
</Fragment>
</DocumentFragment>
`;
exports[`App rendering an expression 2`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"test expression\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
<withI18nextTranslation(Loader) />
</Fragment>
<span
data-component="withI18nextTranslation(Loader)"
data-props="{}"
/>
</DocumentFragment>
`;
exports[`App rendering an expression 3`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
},
Object {
"id": "other",
"label": "Other",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"test expression\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}
}"
>
<withI18nextTranslation(FormActions) />
</withI18nextTranslation(Form)>
<Render
data="LAYOUT(PARSED(test expression))"
onRender={[Function]}
<span
data-component="withI18nextTranslation(FormActions)"
data-props="{}"
/>
</Fragment>
`;
exports[`App rendering image details 1`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
},
Object {
"id": "other",
"label": "Other",
},
]
}
>
<withI18nextTranslation(FormActions) />
</withI18nextTranslation(Form)>
<Render
data="LAYOUT(PARSED(test expression))"
onRender={[Function]}
</span>
<span
data-component="Render"
data-props="{
\\"data\\": \\"LAYOUT(PARSED(test expression))\\"
}"
/>
</Fragment>
`;
exports[`App rendering image details 2`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
},
Object {
"id": "other",
"label": "Other",
},
]
}
>
<withI18nextTranslation(FormActions)
imageDetails={
Object {
"svg": "test svg content",
}
}
/>
</withI18nextTranslation(Form)>
<Render
data="LAYOUT(PARSED(test expression))"
onRender={[Function]}
/>
</Fragment>
</DocumentFragment>
`;
exports[`App rendering with an invalid syntax 1`] = `
<Fragment>
<withI18nextTranslation(Form)
expr=""
onSubmit={[Function]}
syntax="invalid"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"invalid\\",
\\"expr\\": \\"\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
</Fragment>
</DocumentFragment>
`;
exports[`App rendering with an invalid syntax 2`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="invalid"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"invalid\\",
\\"expr\\": \\"test expression\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
<withI18nextTranslation(Loader) />
</Fragment>
<span
data-component="withI18nextTranslation(Loader)"
data-props="{}"
/>
</DocumentFragment>
`;
exports[`App rendering with an invalid syntax 3`] = `
<Fragment>
<withI18nextTranslation(Form)
expr="test expression"
onSubmit={[Function]}
syntax="invalid"
syntaxList={
Array [
Object {
"id": "testJS",
"label": "Testing JS",
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-props="{
\\"syntax\\": \\"invalid\\",
\\"expr\\": \\"test expression\\",
\\"syntaxList\\": [
{
\\"id\\": \\"testJS\\",
\\"label\\": \\"Testing JS\\"
},
Object {
"id": "other",
"label": "Other",
},
]
{
\\"id\\": \\"other\\",
\\"label\\": \\"Other\\"
}
]
}"
/>
<Message
heading="TRANSLATE(Render Failure)"
type="error"
<span
data-component="Message"
data-props="{
\\"type\\": \\"error\\",
\\"heading\\": \\"TRANSLATE(Render Failure)\\"
}"
>
<p>
<Trans>
<span
data-component="Trans"
data-props="{}"
>
An error occurred while rendering the regular expression.
</Trans>
</span>
</p>
<a
href="#retry"
onClick={[Function]}
>
<Trans>
<span
data-component="Trans"
data-props="{}"
>
Retry
</Trans>
</span>
</a>
</Message>
</Fragment>
</span>
</DocumentFragment>
`;

View File

@ -1,3 +1,12 @@
jest.mock('components/Form', () =>
require('__mocks__/component-mock')('components/Form'));
jest.mock('components/FormActions', () =>
require('__mocks__/component-mock')('components/FormActions'));
jest.mock('components/Loader', () =>
require('__mocks__/component-mock')('components/Loader'));
jest.mock('components/Message', () =>
require('__mocks__/component-mock')('components/Message'));
import React from 'react';
import { render } from 'react-testing-library';
@ -7,7 +16,7 @@ import { App } from 'components/App';
jest.mock('syntax/js', () => ({
parse: expr => `PARSED(${ expr })`,
layout: parsed => `LAYOUT(${ parsed })`,
Render: () => ''
Render: require('__mocks__/component-mock').buildMock(function Render() {})
}));
const syntaxList = [
@ -17,116 +26,65 @@ const syntaxList = [
const commonProps = { syntaxList, t: mockT };
describe('App', () => {
test.skip('rendering', () => {
const component = shallow(
test('rendering', () => {
const { asFragment } = render(
<App expr="" syntax="js" { ...commonProps } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test.skip('rendering an expression', async () => {
const component = shallow(
test('rendering an expression', async () => {
const { asFragment, rerender } = render(
<App expr="" syntax="js" { ...commonProps } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
component.setProps({
expr: 'test expression'
});
rerender(
<App expr="test expression" syntax="js" { ...commonProps } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
// Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test.skip('rendering with an invalid syntax', async () => {
test('rendering with an invalid syntax', async () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
const component = shallow(
const { asFragment, rerender } = render(
<App expr="" syntax="invalid" { ...commonProps } />
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
component.setProps({
expr: 'test expression'
});
expect(component).toMatchSnapshot();
// Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
});
test.skip('removing rendered expression', async () => {
const component = shallow(
<App expr="test expression" syntax="js" { ...commonProps } />
);
// Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
component.setProps({
expr: ''
});
expect(component).toMatchSnapshot();
});
test.skip('rendering image details', async () => {
const component = shallow(
<App expr="test expression" syntax="js" { ...commonProps } />
);
// Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
expect(component).toMatchSnapshot();
component.instance().handleSvg({
svg: 'test svg content'
});
expect(component).toMatchSnapshot();
});
test.skip('retrying expression rendering', () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
const component = shallow(
rerender(
<App expr="test expression" syntax="invalid" { ...commonProps } />
);
const instance = component.instance();
const event = { preventDefault: jest.fn() };
expect(asFragment()).toMatchSnapshot();
jest.spyOn(instance, 'handleRender');
// Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
instance.handleRetry(event);
expect(event.preventDefault).toHaveBeenCalled();
expect(instance.handleRender).toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});
test.skip('submitting an expression to render', () => {
const component = shallow(
test('removing rendered expression', async () => {
const { asFragment, rerender } = render(
<App expr="test expression" syntax="js" { ...commonProps } />
);
// Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
expect(asFragment()).toMatchSnapshot();
rerender(
<App expr="" syntax="js" { ...commonProps } />
);
const instance = component.instance();
instance.handleSubmit({ syntax: 'test', expr: '' });
expect(document.location.hash).toEqual('');
instance.handleSubmit({ syntax: 'test', expr: 'test expression' });
expect(document.location.hash).toEqual('#syntax=test&expr=test+expression');
expect(asFragment()).toMatchSnapshot();
});
});