Adding tests for Form component

This commit is contained in:
Jeff Avallone 2019-01-13 18:26:32 -05:00
parent c14aa078b1
commit 60449249d0
2 changed files with 131 additions and 0 deletions

View File

@ -0,0 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Form rendering 1`] = `
<div
className="form"
>
<form
onSubmit={[Function]}
>
<textarea
autoFocus={true}
name="expr"
onChange={[Function]}
onKeyPress={[Function]}
placeholder="Enter regular expression to display"
/>
<button
type="submit"
>
Display
</button>
<div
className="select"
>
<select
name="syntax"
onChange={[Function]}
>
<option
key="testJS"
value="testJS"
/>
<option
key="other"
value="other"
/>
</select>
<ChevronsDown
color="currentColor"
size="24"
/>
</div>
Actions
</form>
</div>
`;

View File

@ -0,0 +1,85 @@
import React from 'react';
import { shallow } from 'enzyme';
import Form from 'components/Form';
const syntaxList = [
{ id: 'testJS', name: 'Testing JS' },
{ id: 'other', name: 'Other' }
];
describe('Form', () => {
test('rendering', () => {
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ jest.fn() }>
Actions
</Form>
);
expect(component).toMatchSnapshot();
});
describe('submitting expression', () => {
test('submitting form', () => {
const onSubmit = jest.fn();
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ onSubmit } />
);
const exprInput = component.find('[name="expr"]');
const syntaxInput = component.find('[name="syntax"]');
exprInput.simulate('change', {
target: {
name: 'expr',
value: 'Test expression'
}
});
syntaxInput.simulate('change', {
target: {
name: 'syntax',
value: 'test'
}
});
const eventObj = { preventDefault: jest.fn() };
component.find('form').simulate('submit', eventObj);
expect(eventObj.preventDefault).toHaveBeenCalled();
expect(onSubmit).toHaveBeenCalledWith({
expr: 'Test expression',
syntax: 'test'
});
});
test('submitting form with Shift+Enter', () => {
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ jest.fn() } />
);
const form = component.instance();
const eventObj = {
preventDefault: Function.prototype,
charCode: 13,
shiftKey: true
};
jest.spyOn(form, 'handleSubmit');
component.find('textarea').simulate('keypress', eventObj);
expect(form.handleSubmit).toHaveBeenCalled();
});
test('not submitting with just Enter', () => {
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ jest.fn() } />
);
const form = component.instance();
const eventObj = {
preventDefault: Function.prototype,
charCode: 13,
shiftKey: false
};
jest.spyOn(form, 'handleSubmit');
component.find('textarea').simulate('keypress', eventObj);
expect(form.handleSubmit).not.toHaveBeenCalled();
});
});
});