Created
June 24, 2015 11:12
-
-
Save MicheleBertoli/1fa247d96a6c8a3c86a2 to your computer and use it in GitHub Desktop.
react-kickstart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component, PropTypes } from 'react'; | |
import './Counter.css'; | |
export default class Counter extends Component { | |
render() { | |
const { count, handleClick } = this.props; | |
return ( | |
<div className="Counter"> | |
<h1 className="h1 h0-responsive caps mt4 mb0 regular counter__text">Count: {count}</h1> | |
<p className="h3">Click the button to increment the counter</p> | |
<a | |
onClick={handleClick} | |
className="h3 button button-big mb4 counter__button" | |
> | |
Increment | |
</a> | |
</div> | |
); | |
} | |
} | |
Counter.propTypes = { | |
count: PropTypes.number.isRequired, | |
handleClick: PropTypes.func.isRequired | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* eslint no-unused-expressions:0 */ | |
import jsdom from 'mocha-jsdom'; | |
import React from 'react/addons'; | |
import Home from '../../src/components/Home'; | |
const { TestUtils } = React.addons; | |
describe('Home', () => { | |
jsdom(); | |
it('contains "<section>" element', function () { | |
const component = TestUtils.renderIntoDocument(<Home />); | |
const div = TestUtils.findRenderedDOMComponentWithTag(component, 'section'); | |
expect(div).to.be.defined; | |
}); | |
describe('increment method', function() { | |
it('should increment the counter', function() { | |
const component = TestUtils.renderIntoDocument(<Home />); | |
const text = TestUtils.findRenderedDOMComponentWithClass(component, 'counter__text'); | |
const button = TestUtils.findRenderedDOMComponentWithClass(component, 'counter__button'); | |
TestUtils.Simulate.click(button); | |
expect(text.getDOMNode().textContent).to.equal('Count: 1'); | |
}); | |
}); | |
}); |
Guess this is the way to go:
https://facebook.github.io/react/docs/test-utils.html#mockcomponent
@vesparny yes, it belongs to Counter
- see (2).
If you want to keep the increment
logic separated, you should check the container components.
I still think that Home
is not the right place.
To test "dump" components, I usually pass them mock functions as props.
In that way you can easily check if they have been called or not.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think the test you created belongs to
Counter
. Am I wrong?