не в состоянии проверить maxLength с вводным ферментом - PullRequest
Новая
       9

не в состоянии проверить maxLength с вводным ферментом

0 голосов
/ 30 августа 2018

Я хочу проверить Input элемент jsx для maxLength. Моя стихия в реакции- 

const ValidatedInput = ({ name, labelName, value, onChange, disabled, maxLength = 10 }) => {
    return (
        <div className="form-group">
            <label className="form-control-label" htmlFor={name}>
                {labelName}
            </label>
            <Input className="form-control" type="text" id={name} name={name} value={value} autoComplete="off"
                onChange={onChange}
                disabled={disabled}
                maxLength={maxLength}
            />
        </div>
    )
};

Мой тест 

it('should not content more that 10 characters', () => {
        const wrapper = mount(<ValidatedInput onChange={()=> {return true;}}
            id={'testInput'}
            value={'1234567890extra'}
            />);
        expect(wrapper.find('input').instance().value).toBe('1234567890');
});

Я напечатал значение на консоли, оно '1234567890extra', а не '1234567890', тогда как при тестировании вручную из пользовательского интерфейса оно работало отлично.

1 Ответ

0 голосов
/ 31 августа 2018

Код использует max prop для Input компонента , в то время как maxlength для input элемента .

Фермент не имеет функций для установки входных значений . И установка значения через value (свойство и свойство) обходит ограничение maxlength, которое предназначено только для пользовательского ввода. Обратите внимание, что не применяется к начальному value prop , это доказывает, что предположение о том, как работает maxlength, было неверным. Значение должно быть дополнительно ограничено в базе данных, где оно хранилось.

Правильный подход для модульных тестов (для которых предназначен Enzyme) - не проверять внутреннее поведение браузера или других библиотек, его следует сохранить для тестов E2E. Можно проверить, что ValidatedInput при условии maxlength для input с: 

expect(wrapper.find('input').prop('maxlength')).toBe(10);
...