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

Updating Form to use react-testing-library

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

93
src/components/Form/__snapshots__/test.js.snap
View File

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

4
src/components/Form/index.js
View File

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

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