Не в состоянии стимулировать изменения при вводе в модальном режиме: React-Redux - PullRequest
0 голосов
/ 26 июня 2018

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

Компонент:

class ModalComp extends Component {
  state = {
    title: '',
    visible: false,
  };
  onChange = e => {
    this.setState({ title: e.target.value });
  };
  showModal = () => {
    this.setState({ visible: true });
  };
  render() {
    const { title } = this.state;
    return (
      <div>
        <Button type="primary" onClick={this.showModal} />
        <Modal
          visible={this.state.visible}
          onOk={this.handleOk}
          style={{ top: 53 }}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          footer={null}
        >
          <Input
            placeholder="Title"
            autosize
            value={title}
            onChange={this.onChange}
          />
        </Modal>
      </div>
    );
  }
}

export default ModalComp;

контрольных примеров:

it('allows user to enter text in Title input when the modal is open', () => {
  component = mount(<ModalComp />);
  const button = component.find(Button);
  button.simulate('click');
  component.update();
  const title = 'newtitle';
  const TitleInput = component.find(Input);
  TitleInput.simulate('change', { target: { value: title } });
  component.update();
  expect(TitleInput.props().value).toEqual(title);
});

Я могу правильно найти узлы, но значение остается пустой строкой "". Я думаю, что проблема может быть с имитацией события изменения Так как значение заголовка не обновляется вообще. Нужно ли делать что-то еще? Как я могу обновить текстовое значение DOM?

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Проблема здесь не в симуляции change, а в том, что экземпляр ввода, использованный в expect, изменил тестовый пример, чтобы подобный подход сделал свое дело.

TestCase:

it('allows user to enter text in Title input when the modal is open', () => {
component = mount(<ModalComp />)
const button = component.find(Button)
button.simulate('click')
component.update()
const title = "newtitle"
const TitleInput = component.find(Input)
TitleInput.simulate('change', {target: {value: title}})
component.update()
//change in below expect statement in finding the input rather than using the 
//previous one will do the trick
expect(component.find(Input).props().value).toEqual(title)
})
0 голосов
/ 26 июня 2018

У меня нет представителя, чтобы добавить комментарий, так что это придется сделать. Пожалуйста, обратитесь к этому https://github.com/airbnb/enzyme/issues/76 это известная ошибка. Некоторые из способов, которыми они пытались решить эту проблему, Установка целевого значения

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

установка значения узла

TitleInput.node.value = 'Test';

путем имитации нескольких нажатий клавиш

TitleInput.simulate('keydown', {keyCode: 13, target: {value:'Test'}});

или вместо этого используя событие onChangeText

TitleInput.simulate('onChangeText', 'Text')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...