Событие onChange не вызывается - PullRequest
Новая
       8

Событие onChange не вызывается

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

Я пытаюсь проверить следующее событие onChange - тест проходит, но его неправильно вызывают в соответствии с шуткой - покрытие

Использование JEST - ENZYME REACT JS

Всего было 4 события onChange, и я смог протестировать первые 2.

Вот компонент: первые 2 события onChange проходят: 

renderBottomPanel = (type) => {
if(type !== 'none'){
  return(
    <div className="bottom-panel">
      <SplitPane split="vertical" minSize={50} maxSize={50} defaultSize={50}>
          <div>
            <a onClick={this.saveChartTemplateToView}>
              <FontAwesome title="Save Chart Template" name='savetemplate' className={'fa-floppy-o no-border fa-floppy-o-override-color'}/>
            </a>
            <a onClick={this.prettyChartTemplate}>
              <FontAwesome title="Format JSON" name='formathtml' className={'fa-list-ul no-border'}/>
            </a>
          </div>
          <SplitPane split="vertical" minSize={300} defaultSize={window.screen.availWidth/2 - 75}>
            <div className="liquid-content-panel">
              <textarea id='chartcontent' name='chartcontent' className='liquid-content-input' type='text' onChange={e => this.setState({viewChartScript:e.target.value})} value={this.state.viewChartScript}/>
            </div>
            <div className="shaped-JSON-panel">
              <textarea id = 'shapedJSON' name='shapedJSON' className='shaped-JSON-input' type='text' onChange={e => this.setState({chartPrototype:e.target.value})} value={JSON.stringify(this.state.chartPrototype, null, 2)} disabled={true}/>
            </div>
          </SplitPane>
      </SplitPane>
    </div>
  )
}
else{
  return(
    <div className="bottom-panel">
      <SplitPane split="vertical" minSize={50} maxSize={50} defaultSize={50}>
          <div>
            <a onClick={this.saveTemplateToView}>
              <FontAwesome title="Save Template" name='savetemplate' className={'fa-floppy-o no-border fa-floppy-o-override-color'}/>
            </a>
            <a onClick={this.prettyTemplate}>
              <FontAwesome title="Format HTML" name='formathtml' className={'fa-list-ul no-border'}/>
            </a>
          </div>
          <SplitPane split="vertical" minSize={300} defaultSize={window.screen.availWidth/2 - 75}>
            <div className="liquid-content-panel">
              <textarea id='liquidcontent' name='liquidcontent' className='liquid-content-input' type='text' onChange={e => this.setState({viewScript:e.target.value})} value={this.state.viewScript}/>
            </div>
            <div className="shaped-JSON-panel">
          //    <textarea  name='shapedJSON' className='shaped-JSON-input' type='text' onChange={e => this.setState({cleanJSON:e.target.value})} value={this.state.cleanJSON} disabled={true}/>
            </div>
          </SplitPane>
      </SplitPane>
    </div>
  )
}

}

Это то, что у меня есть для моего теста.Я написал настройку для первых 2, и они работают.

работает 

    it(" RenderBottomPanel method : should test onChange event on chart content :", () => {
baseProps.onChange.mockClear();
wrapper.setState({
    viewChartScript:'test-id'
    });
wrapper.update()
wrapper.find('#chartcontent').simulate('change',{target: {value: 'testing'}} )
expect(wrapper.state().viewChartScript).toEqual('testing');
});

не удается 

it(" RenderBottomPanel method : should test onChange event on liquidcontent :", () => {
  baseProps.onChange.mockClear();
  wrapper.setState({
    viewScript:'test-id'
    });

 wrapper.update()

wrapper.find('#liquidcontent').simulate('change',{target: {value: 'testing'}} )
expect(wrapper.state().viewScript).toEqual('testing');
});

Спасибо: цель состоит в том, чтобы пройти этот тест и смоделировать изменения правильно

...