Проверка значения input

Тестирование значений, вводимых пользователем в элементы формы, такие как <input>, является важной частью обеспечения корректности работы интерфейса. В JavaScript тестировании для этих целей часто используется библиотека Enzyme. Она предоставляет удобные методы для симуляции событий и проверки состояния компонентов. Рассмотрим, как с помощью Enzyme можно тестировать значения, вводимые в элементы <input>.

1. Симуляция ввода значения в <input>

Для начала, необходимо отрендерить компонент, который включает в себя элемент <input>. Обычно для этого используется метод shallow или mount, в зависимости от того, нужен ли доступ к состоянию дочерних компонентов.

Пример компонента:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onCha nge={this.handleChange}
      />
    );
  }
}

Чтобы протестировать ввод значения в этот элемент, используется метод simulate библиотеки Enzyme. Метод позволяет симулировать события, такие как change, click, и другие.

Пример теста:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('обновляет значение state при изменении input', () => {
    const wrapper = shallow(<MyComponent />);
    const input = wrapper.find('input');

    input.simulate('change', { target: { value: 'Test input' } });

    expect(wrapper.state('value')).toEqual('Test input');
  });
});

Здесь:

  • Мы используем shallow рендеринг для компонента.
  • С помощью метода find находим элемент <input>.
  • Симулируем событие change с помощью метода simulate, передавая объект с обновленным значением.
  • Проверяем, что значение в состоянии компонента обновилось правильно.

2. Тестирование значения через props

В случае, если компонент получает значение через пропсы, важно убедиться, что это значение корректно отображается в элементе <input>. Например:

class MyComponent extends React.Component {
  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onCha nge={this.props.onChange}
      />
    );
  }
}

Теперь тестирование будет немного другим. Нужно передавать пропс value и проверять, что значение в <input> отобразилось правильно:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('отображает значение из props', () => {
    const wrapper = shallow(<MyComponent value="Test value" />);

    const input = wrapper.find('input');
    expect(input.props().value).toEqual('Test value');
  });
});

Здесь:

  • Мы передаем пропс value в компонент.
  • Проверяем, что значение пропса отображается в элементе <input>.

3. Взаимодействие с состоянием компонента

В более сложных случаях компонент может быть связан с состоянием через форму или другие механизмы, которые требуют более тщательной проверки значений, введенных пользователем.

Допустим, у нас есть форма с несколькими полями:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: ''
    };
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <form>
        <input
          type="text"
          name="name"
          value={this.state.name}
          onCha nge={this.handleChange}
        />
        <input
          type="email"
          name="email"
          value={this.state.email}
          onCha nge={this.handleChange}
        />
      </form>
    );
  }
}

Для тестирования таких форм нужно проверить, что изменения в каждом поле корректно обновляют состояние компонента.

Пример теста:

import { shallow } from 'enzyme';
import MyForm from './MyForm';

describe('MyForm', () => {
  it('обновляет имя в state при изменении input', () => {
    const wrapper = shallow(<MyForm />);
    const nameInput = wrapper.find('input[name="name"]');

    nameInput.simulate('change', { target: { name: 'name', value: 'John' } });

    expect(wrapper.state('name')).toEqual('John');
  });

  it('обновляет email в state при изменении input', () => {
    const wrapper = shallow(<MyForm />);
    const emailInput = wrapper.find('input[name="email"]');

    emailInput.simulate('change', { target: { name: 'email', value: 'john@example.com' } });

    expect(wrapper.state('email')).toEqual('john@example.com');
  });
});

Здесь:

  • Для каждого поля формы симулируются изменения.
  • Мы проверяем, что значения полей корректно обновляют состояние компонента.

4. Использование mount для более глубоких тестов

Если компонент взаимодействует с другими дочерними компонентами или требует полного рендеринга для правильной работы, может потребоваться использование метода mount вместо shallow. Этот метод рендерит компонент вместе с его дочерними элементами и позволяет тестировать более сложные взаимодействия.

Пример:

import { mount } from 'enzyme';
import MyForm from './MyForm';

describe('MyForm', () => {
  it('обновляет состояние при вводе данных в поля формы', () => {
    const wrapper = mount(<MyForm />);
    
    const nameInput = wrapper.find('input[name="name"]');
    nameInput.simulate('change', { target: { name: 'name', value: 'Alice' } });

    const emailInput = wrapper.find('input[name="email"]');
    emailInput.simulate('change', { target: { name: 'email', value: 'alice@example.com' } });

    expect(wrapper.state('name')).toEqual('Alice');
    expect(wrapper.state('email')).toEqual('alice@example.com');
  });
});

Метод mount позволяет проверить все дочерние компоненты и взаимодействия в более сложных сценариях.

5. Проверка на ошибки

В некоторых случаях важно убедиться, что значения, вводимые в поля, соответствуют определенным правилам. Например, проверка на пустые значения или правильность формата.

Пример с проверкой пустого значения:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('не позволяет отправить форму с пустым значением в input', () => {
    const wrapper = shallow(<MyComponent />);

    const input = wrapper.find('input');
    input.simulate('change', { target: { value: '' } });

    const form = wrapper.find('form');
    form.simulate('submit');

    expect(wrapper.state('value')).toEqual('');
    expect(wrapper.find('.error').text()).toEqual('Это поле обязательно');
  });
});

Здесь мы симулируем ввод пустого значения и проверяем, что при отправке формы выводится ошибка.

Заключение

Тестирование ввода значений в элементы формы с использованием Enzyme требует правильной симуляции событий и проверки состояния компонентов. Enzyme предоставляет гибкие и мощные средства для работы с компонентами, что позволяет эффективно тестировать как простые, так и сложные формы, взаимодействующие с состоянием и пропсами.

Оглавление