Updating App to use react-testing-library
This commit is contained in:
Jeff Avallone
parent
d46ce46b93
commit
ead8927b02
@ -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",
|
||||
},
|
||||
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="{}"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
data-component="Render"
|
||||
data-props="{
|
||||
\\"data\\": \\"LAYOUT(PARSED(test expression))\\"
|
||||
}"
|
||||
/>
|
||||
</Fragment>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`App removing rendered expression 2`] = `
|
||||
<Fragment>
|
||||
<withI18nextTranslation(Form)
|
||||
expr=""
|
||||
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\\": \\"\\",
|
||||
\\"syntaxList\\": [
|
||||
{
|
||||
\\"id\\": \\"testJS\\",
|
||||
\\"label\\": \\"Testing JS\\"
|
||||
},
|
||||
{
|
||||
\\"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",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
<DocumentFragment>
|
||||
<span
|
||||
data-component="withI18nextTranslation(Form)"
|
||||
data-props="{
|
||||
\\"syntax\\": \\"js\\",
|
||||
\\"expr\\": \\"\\",
|
||||
\\"syntaxList\\": [
|
||||
{
|
||||
\\"id\\": \\"testJS\\",
|
||||
\\"label\\": \\"Testing JS\\"
|
||||
},
|
||||
{
|
||||
\\"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",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
<DocumentFragment>
|
||||
<span
|
||||
data-component="withI18nextTranslation(Form)"
|
||||
data-props="{
|
||||
\\"syntax\\": \\"js\\",
|
||||
\\"expr\\": \\"\\",
|
||||
\\"syntaxList\\": [
|
||||
{
|
||||
\\"id\\": \\"testJS\\",
|
||||
\\"label\\": \\"Testing JS\\"
|
||||
},
|
||||
{
|
||||
\\"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",
|
||||
},
|
||||
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(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]}
|
||||
/>
|
||||
</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]}
|
||||
/>
|
||||
</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",
|
||||
}
|
||||
}
|
||||
<span
|
||||
data-component="withI18nextTranslation(FormActions)"
|
||||
data-props="{}"
|
||||
/>
|
||||
</withI18nextTranslation(Form)>
|
||||
<Render
|
||||
data="LAYOUT(PARSED(test expression))"
|
||||
onRender={[Function]}
|
||||
</span>
|
||||
<span
|
||||
data-component="Render"
|
||||
data-props="{
|
||||
\\"data\\": \\"LAYOUT(PARSED(test expression))\\"
|
||||
}"
|
||||
/>
|
||||
</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",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
<DocumentFragment>
|
||||
<span
|
||||
data-component="withI18nextTranslation(Form)"
|
||||
data-props="{
|
||||
\\"syntax\\": \\"invalid\\",
|
||||
\\"expr\\": \\"\\",
|
||||
\\"syntaxList\\": [
|
||||
{
|
||||
\\"id\\": \\"testJS\\",
|
||||
\\"label\\": \\"Testing JS\\"
|
||||
},
|
||||
{
|
||||
\\"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",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
<DocumentFragment>
|
||||
<span
|
||||
data-component="withI18nextTranslation(Form)"
|
||||
data-props="{
|
||||
\\"syntax\\": \\"invalid\\",
|
||||
\\"expr\\": \\"test expression\\",
|
||||
\\"syntaxList\\": [
|
||||
{
|
||||
\\"id\\": \\"testJS\\",
|
||||
\\"label\\": \\"Testing JS\\"
|
||||
},
|
||||
{
|
||||
\\"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",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
<DocumentFragment>
|
||||
<span
|
||||
data-component="withI18nextTranslation(Form)"
|
||||
data-props="{
|
||||
\\"syntax\\": \\"invalid\\",
|
||||
\\"expr\\": \\"test expression\\",
|
||||
\\"syntaxList\\": [
|
||||
{
|
||||
\\"id\\": \\"testJS\\",
|
||||
\\"label\\": \\"Testing JS\\"
|
||||
},
|
||||
{
|
||||
\\"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>
|
||||
`;
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user