react.js - тестирование формы компонент

Question

В моем учебнике, как приложения у меня есть AddForm компонент:

var React = require('react'); 
var Input = require('react-bootstrap').Input; 
var TeamActions = require('../actions/team_actions.js'); 

var AddForm = React.createClass({ 
    handleFormSubmit: function(e) { 
    e.preventDefault(); 

    var name = this._trimmedValue(this.refs.name); 
    var rating = this._trimmedValue(this.refs.rating); 

    if (name && rating) { 
     TeamActions.addTeam(
     {name: name, rating: rating} 
    ); 
     this._clearField(this.refs.name); 
     this._clearField(this.refs.rating); 
    } 
    }, 

    _trimmedValue: function(field) { 
    return field.getInputDOMNode().value.trim(); 
    }, 

    _clearField: function(field) { 
    field.getInputDOMNode().value = ''; 
    }, 

    render: function() { 
    return (
     <form onSubmit={this.handleFormSubmit}> 
      <Input label="Name" type="text" placeholder="Name" ref="name" /> 
      <Input label="Rating" type="text" placeholder="Rating" ref="rating" /> 
      <Input bsStyle="primary" type="submit" value="Add!" /> 
     </form> 
    ); 
    } 
}) 

module.exports = AddForm; 

TeamActions:

var McFly = require('mcfly'); 
var Flux = new McFly(); 
var TeamConstants = require('../constants/team_constants.js'); 


var TeamActions = Flux.createActions({ 
    addTeam: function(team) { 
    return { 
     actionType: TeamConstants.ADD_TEAM, 
     team: team 
    } 
    } 
}); 

module.exports = TeamActions; 

Как вы можете видеть, я использую McFly и React-Bootstrap.

Теперь я хочу протестировать его, используя шутку.

Я хотел бы иметь следующие тестовые случаи:

1), если кто-то пытается отправить форму с пустыми входами, ничего не должно произойти (чтобы быть более точным - не должно быть никакого взаимодействия на TeamActions макет)

2) если одна представляет форму с правильным именем и рейтингом, то должен быть правильным вызовом TeamActions макета

3) если один представляет форму с правильным именем и рейтингом, то имя и рейтинг входы должны быть очищены ,

Как его проверить? Должен ли я каким-либо образом получить доступ к DOM, используя тестовые тесты Response?

Должен ли я каким-то образом моделировать подачу формы? Если да, то как мне это сделать?

И последнее: мой AddForm зависит от TeamActions. Написав:

jest.dontMock('../add_form.js'); 

является шутка поручено дразнить всю эту зависимость (реагировать, реагировать-самозагрузку, team_actions), или я должен как-то макет TeamActions себя?

// редактировать:

Потому что кто-то сказал, что я спросил слишком много quuestions в одной теме, чтобы быть более конкретным:

Как я могу моделировать форму представления с конкретной полезной нагрузки, используя TestUtils? Нужно ли мне самостоятельно издеваться над TeamActions или меня издевается за меня автоматически?

Answer 1

Реагировать TestUtils позволяет моделировать форму представления:

var addForm = TestUtils.renderIntoDocument(AddForm(null)); 
var form = TestUtils.findRenderedDOMComponentWithTag(addForm, 'form'); 
TestUtils.Simulate.submit(form); 

Путем я бы проверить действия является вручную насмешливым из addTeam. Перед тем, как смоделировать что-нибудь в тесте, сделайте что-нибудь вроде:

var TeamActions = require('../actions/team_actions'); 
TeamActions.addTeam = jest.genMockFn(); 
/* then simulate submission... */ 
expect(TeamActions.addTeam).toBeCalledWith({name: 'name', rating: 'rating'}); 

Для проверки входных значений просто используйте ссылки.

addForm.refs.name.getDOMNode().value = 'Some Name'; 
/* perform some action that should clear input */ 
expect(addForm.refs.name.getDOMNode().value).toEqual(''); 

редактировать

Чтобы ответить на ваш отредактированный вопрос, похоже, что вы на самом деле не нужно вручную издеваться addTeam; Я просто попробовал, и, похоже, Джест понял, как насмехаться над действиями McFly.