Я заблудился после прочтения множества примеров ферментных тестов, так что, надеюсь, вы мне поможете.
handleSubmit () вызывается при отправке формы.Делает запрос на удаленный сервер для сохранения данных.Когда сервер возвращает ответ, вызывается обратный вызов afterSubmit (), который устанавливает состояние компонента success: true, и это отображает сообщение об успешном завершении.
Что я хочу проверить, так это то, что сообщение об успехе отображается, когда пользователь отправляет форму.
Я не знаю, стоит ли имитировать функцию handleSubmit () и как или нужно что-то делать с помощью метода dispatch, чтобы он в конечном итоге разрешал и вызывал обратный вызов afterSubmit ()?
Спасибо
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {handleAddProduct} from '../actions/product';
class ProductForm extends Component {
constructor(props) {
super(props);
this.state = {productName:'', success:false}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.afterSubmit = this.afterSubmit.bind(this);
}
handleChange(event) {
const value = event.target.value;
this.setState(() => ({productName: value}));
}
handleSubmit(event) {
event.preventDefault()
const {productName} = this.state;
this.props.dispatch(handleAddProduct(productName, this.afterSubmit));
}
afterSubmit() {
this.setState(() => ({
productName: '',
success : true
}));
}
render() {
const {success} = this.state;
return (
<>
{success && <p class="success">Success</p>}
{!success &&
<form onSubmit={this.handleSubmit} className="form">
<input type="text" name="product-name" id="product-name" onChange={this.handleChange} value={this.state.productName} />
<button type="submit">Submit</button>
</form>
}
</>
)
}
}
export default connect()(ProductForm);
И вот тест, который я начал:
it('shows success message on submit', () => {
const wrapper = shallow(<ProducForm store={mockStore} />);
wrapper.find('input[name="product-name"]').simulate('change', { target: { value: 100 } })
wrapper.find('button[type="submit"]').simulate('click')
expect(wrapper.find('.success').exists()).toBe(true);
})