Updating Form to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 21:19:46 -04:00
parent 0473c27e39
commit 07cd0a4799
3 changed files with 86 additions and 89 deletions

View File

@ -1,53 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Form rendering 1`] = ` exports[`Form rendering 1`] = `
<DocumentFragment>
<div <div
className="form" class="form"
data-requires-js={true} data-requires-js="true"
> >
<form <form
onSubmit={[Function]} data-testid="form"
> >
<textarea <textarea
autoFocus={true} data-testid="expr-input"
name="expr" name="expr"
onChange={[Function]}
onKeyPress={[Function]}
placeholder="TRANSLATE(Enter regular expression to display)" placeholder="TRANSLATE(Enter regular expression to display)"
/> />
<button <button
type="submit" type="submit"
> >
<Trans> <span
data-component="Trans"
data-props="{}"
>
Display Display
</Trans> </span>
</button> </button>
<div <div
className="select" class="select"
> >
<select <select
data-testid="syntax-select"
name="syntax" name="syntax"
onChange={[Function]}
> >
<option <option
key="testJS"
value="testJS" value="testJS"
> >
TRANSLATE(Testing JS) TRANSLATE(Testing JS)
</option> </option>
<option <option
key="other"
value="other" value="other"
> >
TRANSLATE(Other) TRANSLATE(Other)
</option> </option>
</select> </select>
<ChevronsDown <span
color="currentColor" data-component="ChevronsDown"
size="24" data-props="{}"
/> />
</div> </div>
Actions Actions
</form> </form>
</div> </div>
</DocumentFragment>
`; `;

View File

@ -54,8 +54,9 @@ class Form extends React.PureComponent {
const { expr, syntax } = this.state; const { expr, syntax } = this.state;
return <div className={ style.form } data-requires-js> return <div className={ style.form } data-requires-js>
<form onSubmit={ this.handleSubmit }> <form data-testid="form" onSubmit={ this.handleSubmit }>
<textarea <textarea
data-testid="expr-input"
name="expr" name="expr"
value={ expr } value={ expr }
onKeyPress={ this.handleKeyPress } onKeyPress={ this.handleKeyPress }
@ -65,6 +66,7 @@ class Form extends React.PureComponent {
<button type="submit"><Trans>Display</Trans></button> <button type="submit"><Trans>Display</Trans></button>
<div className={ style.select }> <div className={ style.select }>
<select <select
data-testid="syntax-select"
name="syntax" name="syntax"
value={ syntax } value={ syntax }
onChange={ this.handleChange } > onChange={ this.handleChange } >

View File

@ -1,5 +1,9 @@
jest.mock('react-feather/dist/icons/chevrons-down', () =>
require('__mocks__/component-mock')(
'react-feather/dist/icons/chevrons-down'));
import React from 'react'; import React from 'react';
import { render } from 'react-testing-library'; import { render, fireEvent } from 'react-testing-library';
import { mockT } from 'i18n'; import { mockT } from 'i18n';
import { Form } from 'components/Form'; import { Form } from 'components/Form';
@ -11,77 +15,67 @@ const syntaxList = [
const commonProps = { syntaxList, t: mockT }; const commonProps = { syntaxList, t: mockT };
describe('Form', () => { describe('Form', () => {
test.skip('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<Form onSubmit={ jest.fn() } { ...commonProps }> <Form onSubmit={ jest.fn() } { ...commonProps }>
Actions Actions
</Form> </Form>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
describe('submitting expression', () => { describe('submitting expression', () => {
test.skip('submitting form', () => { test('submitting form', () => {
const onSubmit = jest.fn(); const onSubmit = jest.fn();
const component = shallow( const { getByTestId } = render(
<Form onSubmit={ onSubmit } { ...commonProps } /> <Form onSubmit={ onSubmit } { ...commonProps } />
); );
const exprInput = component.find('[name="expr"]'); fireEvent.change(getByTestId('expr-input'), {
const syntaxInput = component.find('[name="syntax"]'); target: { value: 'Test expression' }
exprInput.simulate('change', {
target: {
name: 'expr',
value: 'Test expression'
}
}); });
syntaxInput.simulate('change', { fireEvent.change(getByTestId('syntax-select'), {
target: { target: { value: 'other' }
name: 'syntax',
value: 'test'
}
}); });
const eventObj = { preventDefault: jest.fn() }; const event = new Event('submit');
component.find('form').simulate('submit', eventObj); jest.spyOn(event, 'preventDefault');
expect(eventObj.preventDefault).toHaveBeenCalled(); fireEvent(getByTestId('form'), event);
expect(event.preventDefault).toHaveBeenCalled();
expect(onSubmit).toHaveBeenCalledWith({ expect(onSubmit).toHaveBeenCalledWith({
expr: 'Test expression', expr: 'Test expression',
syntax: 'test' syntax: 'other'
}); });
}); });
test.skip('submitting form with Shift+Enter', () => { test('submitting form with Shift+Enter', () => {
const component = shallow( const onSubmit = jest.fn();
<Form onSubmit={ jest.fn() } { ...commonProps } /> const { getByTestId } = render(
<Form onSubmit={ onSubmit } { ...commonProps } />
); );
const form = component.instance();
const eventObj = { fireEvent.keyPress(getByTestId('expr-input'), {
preventDefault: Function.prototype,
charCode: 13, charCode: 13,
shiftKey: true shiftKey: true
};
jest.spyOn(form, 'handleSubmit');
component.find('textarea').simulate('keypress', eventObj);
expect(form.handleSubmit).toHaveBeenCalled();
}); });
test.skip('not submitting with just Enter', () => { expect(onSubmit).toHaveBeenCalled();
const component = shallow( });
<Form onSubmit={ jest.fn() } { ...commonProps } />
test('not submitting with just Enter', () => {
const onSubmit = jest.fn();
const { getByTestId } = render(
<Form onSubmit={ onSubmit } { ...commonProps } />
); );
const form = component.instance();
const eventObj = { fireEvent.keyPress(getByTestId('expr-input'), {
preventDefault: Function.prototype,
charCode: 13, charCode: 13,
shiftKey: false shiftKey: false
}; });
jest.spyOn(form, 'handleSubmit');
component.find('textarea').simulate('keypress', eventObj);
expect(form.handleSubmit).not.toHaveBeenCalled(); expect(onSubmit).not.toHaveBeenCalled();
}); });
}); });
}); });