I`m trying to test a focus function and the test coverage tells me about branches. Here is the component
import React, { Component } from 'react';
import Input from '../../components/common/input/Input';
import Button from '../../components/common/button/Button';
import isEmpty from '../../components/common/utils/isEmpty';
class Form extends Component {
state = { input: '', error: ''};
onChange = e => this.setState({ ...this.state, input: e.target.value });
onFocus = () => !isEmpty(this.state.error) && this.setState({ ...this.state, error: '' });
onSubmit = e => {
e.preventDefault();
if(isEmpty(this.state.input)) return this.setState({ ...this.state, error: 'error' });
};
render() {
const { input, error } = this.state;
return (
<form noValidate onSubmit={this.onSubmit} data-test='form'>
<Input
name='text'
label='City'
value={input}
onChange={this.onChange}
onFocus={this.onFocus}
error={error}
test='input'
/>
<Button text='Search' isLoading={false} type='submit' />
</form>
);
};
};
export default Form;
and the test file
import React from "react";
import { mount } from 'enzyme';
import Form from "../../../layout/navbar/Form";
const setComponent = (props) => {
const component = mount(<Form {...props} />);
return component;
}
describe("Navbar `Form` component", () => {
let component;
beforeEach(() => {
component = setComponent();
});
it('Renders without errros', () => {
expect(component).toMatchSnapshot();
});
describe('`onFocus` func call to clear errors', () => {
it('Clears the error state if any', () => {
component.find(`button[type='submit']`).simulate('click');
component.find(`[data-test='input']`).simulate('focus');
expect(component.state().error).toEqual('');
});
});
});
the test is passing but when I test coverage I have a branch on line 11, which is the onFocus function
how can I test the other branch when I have no error in the state?
basically the onfocus => if ERROR setState(...this.state, error: '' )
thank you
Aucun commentaire:
Enregistrer un commentaire