vendredi 24 février 2017

Problems with React - Testing input datefields with Karma and Expect

I'm having a problem while testing a React component. This component is a filter for my application. There is a form with two input fields with type date, where you put a "from" date and a "to" date. I'm testing if the component is calling a prop with the correct arguments. Here is my code:

Test:

it('should call onFilterByDate when dates are provided', () => {
    var dateFrom = 1487548800000;
    var dateTo = 1487549900000;    
    var spy = expect.createSpy();
    var filterItem = TestUtils.renderIntoDocument(<FilterItem onFilterByDate={spy}/>);
    filterItem.setState({filterVisible: true});
    var $el = $(ReactDOM.findDOMNode(filterItem));

    filterItem.refs.fromDateFilter.valueAsNumber = dateFrom;
    filterItem.refs.toDateFilter.valueAsNumber = dateTo;    

    TestUtils.Simulate.submit($el.find('form')[0]);

    console.log(spy.calls[0].arguments);

    expect(spy).toHaveBeenCalledWith(moment(dateFrom).utc().unix(), moment(dateTo).utc().unix());
})

I'm passing the date value as a number to ValueAsNumber. It worked in a previous test I did.

Component:

class FilterItem extends Component {
    constructor(props) {
        super(props);

        this.state = {
            filterVisible: false
        };

        this.handleFilterByDate = this.handleFilterByDate.bind(this);            
        this.handleShowHideFilter = this.handleShowHideFilter.bind(this);
    }

    handleFilterByDate (e) {
        e.preventDefault();    
        var dateFrom = moment(this.refs.fromDateFilter.valueAsDate).unix();    
        var dateTo = moment(this.refs.toDateFilter.valueAsDate).unix();    
        this.props.onFilterByDate(dateFrom, dateTo);
    }

    handleShowHideFilter () {
        this.setState({
            filterVisible: !this.state.filterVisible
        });
    }

    var renderApp = () => {      
        if (firebase.auth().currentUser) {
            return (
            <div>
                <div className="row row-add-item box-material">
                <AddItem onAddItem={this.handleAddItem}/>              
                </div>
                <div className="row row-filter box-material">              
                <FilterItem onFilterByText={this.handleFilterByText} onFilterByDate={this.handleFilterByDate} />              
                </div>
                <div className="row row-items box-material">              
                <ItemList items={expenses} title={"Expenses"} totalValue={expenseTotal} onDelete={ this.handleDelete }/>
                <ItemList items={incomes} title={"Incomes"} totalValue={incomeTotal} onDelete={ this.handleDelete }/>              
                </div>
                <div className="row row-balance box-material">              
                <Balance expenseTotal={expenseTotal} incomeTotal={incomeTotal} />              
                </div>
            </div>
            )
        } else {
            return (
            <div className="row">
                <div className="columns small-centered medium-12 large-12">              
                <Login onGithubLogin={ this.handleGithubLogin } onGoogleLogin={ this.handleGoogleLogin } onLogout={ this.handleLogout }/>
                </div>
            </div>
            )
        }        
        }

        var renderLogout = () => {
        if (firebase.auth().currentUser) {
            return <a className="p-logout" onClick={this.handleLogout}>Logout</a>
        }
        } 

        return (
        <div>
            {renderLogout()}
            <h1 className="text-center">React Finance App</h1>
            {renderApp()}
        </div>
        )
    }
}

There are some stuff that I removed to make it more simple. The problem is, when I run the test, it calls the prop with the "fromDate" and the "toDate" as the same value. After some digging, this seems to be where the problem is, but I can't find a solution:

filterItem.refs.fromDateFilter.valueAsNumber = dateFrom;
filterItem.refs.toDateFilter.valueAsNumber = dateTo;  

These two lines seems to be changing the input values to the same value. In this case, this is the value of the "dateFrom" variable. The log that is present on the test code returns this:

LOG: [1487548800, 1487548800]

Can someone help?

Aucun commentaire:

Enregistrer un commentaire