react.js - test forma componente

Question

Nella mia applicazione esercitazione-come se avessi un AddForm componente:

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; 

Come potete vedere, sto usando McFly e React-Bootstrap qui.

Ora voglio testarlo, usando il jest.

Vorrei avere seguenti casi di test:

1) se qualcuno tenta di inviare un modulo con ingressi vuoti, nulla dovrebbe accadere (per essere più precisi - non ci dovrebbe essere alcuna interazione da TeamActions finte)

2) se si invia un form con nome valido e punteggio, allora non ci dovrebbero essere una chiamata proprio TeamActions finte

3) se si invia un form con nome valido e punteggio, quindi nome e devono essere puliti ingressi di rating .

Come si esegue il test? Dovrei accedere al DOM in qualche modo, usando react's TestUtils?

Devo simulare in qualche modo l'invio del modulo? Se è così, come faccio?

E l'ultima cosa: il mio AddForm dipende da TeamActions. Scrivendo:

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

è scherzo incaricati di prendere in giro tutte quelle dipendenze (reagire, reagire-bootstrap, team_actions) o devo in qualche modo finte TeamActions me stesso?

// edit:

Perché qualcuno ha detto che ho chiesto troppo quuestions in un argomento, per essere più precisi:

Come posso simulare un modulo di presentazione con particolare payload, utilizzando TestUtils? Devo prendere in giro TeamActions da solo o mi viene automaticamente deriso?

Answer 1

Reagire TestUtils permette di simulare modulo di presentazione:

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

Il modo in cui ho iniziato ad esaminare le azioni è di scherno manualmente addTeam. Prima di simulare qualsiasi cosa nel test, fare qualcosa di simile:

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

Per testare i valori di input, basta usare gli arbitri.

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

modificare

Per rispondere alla tua domanda modificato, sembra che in realtà non c'è bisogno di prendere in giro manualmente addTeam; L'ho appena provato e sembra che Jest abbia capito come deridere le azioni dei McFly.