Skip to content

Instantly share code, notes, and snippets.

@MicheleBertoli
Created June 24, 2015 11:12
Show Gist options
  • Save MicheleBertoli/1fa247d96a6c8a3c86a2 to your computer and use it in GitHub Desktop.
Save MicheleBertoli/1fa247d96a6c8a3c86a2 to your computer and use it in GitHub Desktop.
react-kickstart
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
};
/* 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');
});
});
});
@vesparny
Copy link

I think the test you created belongs to Counter. Am I wrong?

@vesparny
Copy link

@MicheleBertoli
Copy link
Author

@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