Adding tests for App component
This commit is contained in:
parent
7261b0b526
commit
eab20afe1c
@ -1,5 +1,6 @@
|
||||
const babelOptions = {
|
||||
presets: ['babel-preset-gatsby']
|
||||
presets: ['babel-preset-gatsby'],
|
||||
plugins: ['dynamic-import-node']
|
||||
};
|
||||
|
||||
module.exports = require('babel-jest').createTransformer(babelOptions);
|
||||
|
@ -74,6 +74,7 @@
|
||||
"@ungap/url-search-params": "^0.1.2",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-jest": "^23.6.0",
|
||||
"babel-plugin-dynamic-import-node": "^2.2.0",
|
||||
"babel-preset-gatsby": "^0.1.6",
|
||||
"enzyme": "^3.8.0",
|
||||
"enzyme-adapter-react-16": "^1.7.1",
|
||||
|
289
src/components/App/__snapshots__/test.js.snap
Normal file
289
src/components/App/__snapshots__/test.js.snap
Normal file
@ -0,0 +1,289 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`App removing rendered expression 1`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions />
|
||||
</Form>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
onRender={[Function]}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App removing rendered expression 2`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr=""
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering 1`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr=""
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering an expression 1`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr=""
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering an expression 2`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<Loader />
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering an expression 3`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions />
|
||||
</Form>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
onRender={[Function]}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering image details 1`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions />
|
||||
</Form>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
onRender={[Function]}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering image details 2`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="js"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions
|
||||
imageDetails={
|
||||
Object {
|
||||
"svg": "test svg content",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Form>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
onRender={[Function]}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering with an invalid syntax 1`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr=""
|
||||
onSubmit={[Function]}
|
||||
syntax="invalid"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering with an invalid syntax 2`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="invalid"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<Loader />
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`App rendering with an invalid syntax 3`] = `
|
||||
<Fragment>
|
||||
<Form
|
||||
expr="test expression"
|
||||
onSubmit={[Function]}
|
||||
syntax="invalid"
|
||||
syntaxList={
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<Message
|
||||
heading="Render Failure"
|
||||
type="error"
|
||||
>
|
||||
<p>
|
||||
An error occurred while rendering the regular expression.
|
||||
</p>
|
||||
<a
|
||||
href="#retry"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Retry
|
||||
</a>
|
||||
</Message>
|
||||
</Fragment>
|
||||
`;
|
@ -10,8 +10,8 @@ import Message from 'components/Message';
|
||||
|
||||
class App extends React.PureComponent {
|
||||
static propTypes = {
|
||||
syntax: PropTypes.string,
|
||||
expr: PropTypes.string,
|
||||
syntax: PropTypes.string.isRequired,
|
||||
expr: PropTypes.string.isRequired,
|
||||
permalinkUrl: PropTypes.string,
|
||||
syntaxList: PropTypes.arrayOf(PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
@ -71,9 +71,6 @@ class App extends React.PureComponent {
|
||||
`syntax/${ syntax }`
|
||||
);
|
||||
|
||||
// HACK: Fake loading time
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
this.setState({
|
||||
loading: false,
|
||||
render: {
|
||||
@ -91,7 +88,8 @@ class App extends React.PureComponent {
|
||||
loading: false,
|
||||
loadingError: e
|
||||
});
|
||||
throw e;
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
124
src/components/App/test.js
Normal file
124
src/components/App/test.js
Normal file
@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import App from 'components/App';
|
||||
|
||||
const syntaxList = [
|
||||
{ id: 'testJS', name: 'Testing JS' },
|
||||
{ id: 'other', name: 'Other' }
|
||||
];
|
||||
|
||||
describe('App', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<App expr="" syntax="js" syntaxList={ syntaxList } />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering an expression', async () => {
|
||||
const component = shallow(
|
||||
<App expr="" syntax="js" syntaxList={ syntaxList } />
|
||||
);
|
||||
expect(component).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('rendering with an invalid syntax', async () => {
|
||||
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
const component = shallow(
|
||||
<App expr="" syntax="invalid" syntaxList={ syntaxList } />
|
||||
);
|
||||
expect(component).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('removing rendered expression', async () => {
|
||||
const component = shallow(
|
||||
<App expr="test expression" syntax="js" syntaxList={ syntaxList } />
|
||||
);
|
||||
|
||||
// Give a beat for module to load
|
||||
await new Promise(resolve => setTimeout(resolve));
|
||||
|
||||
expect(component).toMatchSnapshot();
|
||||
|
||||
component.setProps({
|
||||
expr: ''
|
||||
});
|
||||
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering image details', async () => {
|
||||
const component = shallow(
|
||||
<App expr="test expression" syntax="js" syntaxList={ syntaxList } />
|
||||
);
|
||||
|
||||
// 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('retrying expression rendering', () => {
|
||||
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
const component = shallow(
|
||||
<App expr="test expression" syntax="invalid" syntaxList={ syntaxList } />
|
||||
);
|
||||
|
||||
const instance = component.instance();
|
||||
const event = { preventDefault: jest.fn() };
|
||||
|
||||
jest.spyOn(instance, 'handleRender');
|
||||
|
||||
instance.handleRetry(event);
|
||||
|
||||
expect(event.preventDefault).toHaveBeenCalled();
|
||||
expect(instance.handleRender).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('submitting an expression to render', () => {
|
||||
const component = shallow(
|
||||
<App expr="" syntax="js" syntaxList={ syntaxList } />
|
||||
);
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
@ -1809,6 +1809,13 @@ babel-plugin-dynamic-import-node@^1.2.0:
|
||||
dependencies:
|
||||
babel-plugin-syntax-dynamic-import "^6.18.0"
|
||||
|
||||
babel-plugin-dynamic-import-node@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e"
|
||||
integrity sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA==
|
||||
dependencies:
|
||||
object.assign "^4.1.0"
|
||||
|
||||
babel-plugin-istanbul@^4.1.6:
|
||||
version "4.1.6"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
|
||||
|
Loading…
Reference in New Issue
Block a user