jeudi 9 juillet 2015

reactJs test mocked component input and reponse, where to start?

I am trying to test a postcode search component in my react app. Below is my component and click handler which gets data from an api using superagent. I have karma, jasmine and webpack setup and running basic component tests, but how can I mock the data and user input? I have all the json in a data file. Can I get a simple example setup using stubbing and mocking?

render: function () {
    return (
        <div className="mainContent add-school-page">
              <Loader loaded={this.state.loaded}>
            <div className="content has-header">
                <div className="list">
                    <label className="item item-input item-stacked-label">
                        <span className="input-label">Postcode</span>
                        <input ref="postcode" type="text" placeholder="A12 3BC"/>
                    </label>
                </div>
                <div className="padding">
                    <button className="button button-block button-positive clickable"
                        onClick={this.searchByPostcode}>
                        Find School
                    </button>
                </div>
                <SearchResults results={this.state.results} />
                <br />
                <br />
            </div>
            </Loader>
        </div>
    );
},

searchByPostcode: function() {
    var postcode = React.findDOMNode(this.refs.postcode).value;
    var url = OsaApiService.buildRequestUrl('find_schools_postcode', [postcode]);
    fetch(url)
        .then(function (response) {
            return response.json();
        }).then(function (json) {
            this.setState({
                results: json.data,
            });
        }.bind(this)).catch(function (ex) {
            console.log(ex);
        });
}

Can anyone please tell me how I can get started?

I have tried Jest but the tests were taking forever to complete and as a watch task it took forever.

Aucun commentaire:

Enregistrer un commentaire