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

Updating App to use react-testing-library

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

432
src/components/App/__snapshots__/test.js.snap
View File

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

124
src/components/App/test.js
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 React from 'react';
import { render } from 'react-testing-library'; import { render } from 'react-testing-library';
@ -7,7 +16,7 @@ import { App } from 'components/App';
jest.mock('syntax/js', () => ({ jest.mock('syntax/js', () => ({
parse: expr => `PARSED(${ expr })`, parse: expr => `PARSED(${ expr })`,
layout: parsed => `LAYOUT(${ parsed })`, layout: parsed => `LAYOUT(${ parsed })`,
Render: () => '' Render: require('__mocks__/component-mock').buildMock(function Render() {})
})); }));
const syntaxList = [ const syntaxList = [
@ -17,116 +26,65 @@ const syntaxList = [
const commonProps = { syntaxList, t: mockT }; const commonProps = { syntaxList, t: mockT };
describe('App', () => { describe('App', () => {
test.skip('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<App expr="" syntax="js" { ...commonProps } /> <App expr="" syntax="js" { ...commonProps } />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test.skip('rendering an expression', async () => { test('rendering an expression', async () => {
const component = shallow( const { asFragment, rerender } = render(
<App expr="" syntax="js" { ...commonProps } /> <App expr="" syntax="js" { ...commonProps } />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
component.setProps({ rerender(
expr: 'test expression' <App expr="test expression" syntax="js" { ...commonProps } />
}); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
// Give a beat for module to load // Give a beat for module to load
await new Promise(resolve => setTimeout(resolve)); 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(() => {}); jest.spyOn(console, 'error').mockImplementation(() => {});
const component = shallow( const { asFragment, rerender } = render(
<App expr="" syntax="invalid" { ...commonProps } /> <App expr="" syntax="invalid" { ...commonProps } />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
component.setProps({ rerender(
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(
<App expr="test expression" syntax="invalid" { ...commonProps } /> <App expr="test expression" syntax="invalid" { ...commonProps } />
); );
const instance = component.instance(); expect(asFragment()).toMatchSnapshot();
const event = { preventDefault: jest.fn() };
jest.spyOn(instance, 'handleRender'); // Give a beat for module to load
await new Promise(resolve => setTimeout(resolve));
instance.handleRetry(event); expect(asFragment()).toMatchSnapshot();
expect(event.preventDefault).toHaveBeenCalled();
expect(instance.handleRender).toHaveBeenCalled();
}); });
test.skip('submitting an expression to render', () => { test('removing rendered expression', async () => {
const component = shallow( 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 } /> <App expr="" syntax="js" { ...commonProps } />
); );
const instance = component.instance(); expect(asFragment()).toMatchSnapshot();
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');
}); });
}); });