Проверка формы с использованием Spy by Sinon дает ошибку - PullRequest
Новая
       58

Проверка формы с использованием Spy by Sinon дает ошибку

0 голосов
/ 01 марта 2020

Я не могу проверить, правильно ли заполнена форма с помощью функции Spy() Sinon. Моя цель - сдать этот юнит-тест: 

  it('check entire form validation when the form is valid', () => {
     let formSpy = spy();
     const form = mount(<Form isFormValid={formSpy} />);
     form.find('.name').simulate('change', { target: { value: 'sasrank' } });
     form.find('.email').simulate('change', { target: { value: 'aasdbc@xyz.com' } });
     form.find('.phone').simulate('change', { target: { value: '9856756756' } });
     form.find('.url').simulate('change', { target: { value: 'http://google.com' } });
     form.find('.button').simulate('click');
     expect(formSpy.calledWith(true)).toEqual(true);
  });

Эта форма использует некоторые базовые c HTML5 проверки

Form.js

import React, {Component} from 'react';
import {PropTypes} from 'prop-types';

class Form extends Component {
constructor(props) {
    super(props);
    this.state = {
        isEmailValid: false,
        isNameValid: false,
        isPhoneValid: false,
        isUrlValid: false,
    };

}

render() {
    return (
        <div className="row">
        <h1 className="text-center">Form Validation</h1>
        <form>
            <h3>Name:
            </h3>
            <input type="text" required pattern="[A-Za-z]{3,30}" className="name"></input>
            <h3>Email:
            </h3>
            <input type="email" required className="email"></input>
            <h3>Phone:
            </h3>
            <input type="number" required className="phone"></input>
            <h3>Blog URL:
            </h3>
            <input type="url" required className="url"></input>
            <div className="small-6 small-centered text-center columns">
                <button href="#" className="button success expand round text-center">Verify</button>
            </div>
        </form>
    </div>);
  }
 }

export default Form;

Что может Я изменяю, чтобы пройти этот тест?

1 Ответ

1 голос
/ 03 марта 2020

Вы не используете isFormValid где-либо в Form. React не знает магически, что делать с isFormValid, переданным конструктору React.Component (если только вы не используете магическую библиотеку, о которой вы не упоминали.

Это не "синон", это отсутствие правильных реализация, которая вызывает isFormValid

Как минимум, вы должны установить onClick обратный вызов на вашу кнопку и вызвать эту проверку с некоторыми значениями, например: 

<button onClick={this.handleSubmit} ...>Verify</button>

И onSubmit метод это выглядит примерно так: 

onSubmit = (event) => {
    const valuues = collectValues();
    if (this.props.isFormValid(values)) {
        // ... handle submit
    }
}

Есть много мест, где используется проверка формы, например этот ответ , который также использует форму HTML5 API проверки (хотя не уверен, что фермент это поддерживает)

...