Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Created June 5, 2014 06:09
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ryanflorence/bba285c1d39b23f42306 to your computer and use it in GitHub Desktop.
Save ryanflorence/bba285c1d39b23f42306 to your computer and use it in GitHub Desktop.
var Toggler = require('./toggler');
var React = require('react/addons');
var assert = chai.assert;
var Simulate = React.addons.TestUtils.Simulate
describe('Toggler', function(){
var toggler, el;
beforeEach(function() {
toggler = render(Toggler({buttonText: 'toggle'}, 'ohai!'));
el = toggler.getDOMNode();
});
afterEach(function() {
teardownComponent(toggler);
});
it('renders correctly', function(){
assert.equal(toggler.refs.button.getDOMNode().textContent, 'toggle');
assert.equal(toggler.refs.content.getDOMNode().textContent, 'ohai!');
});
it('toggles the content when the button is clicked', function() {
assert.ok(toggler.getDOMNode().textContent.match('ohai!'));
Simulate.click(toggler.refs.button.getDOMNode());
assert.ok(!toggler.getDOMNode().textContent.match('ohai!'));
});
});
function render(component) {
var container = document.createElement('div');
document.body.appendChild(container);
React.renderComponent(component, container);
return component;
}
function teardownComponent(component) {
React.unmountComponentAtNode(component.getDOMNode().parentNode);
}
var React = require('react');
var div = React.DOM.div;
var button = React.DOM.button;
var Toggler = React.createClass({
getInitialState: function() {
return { isOpen: true };
},
toggle: function() {
this.setState({isOpen: !this.state.isOpen});
},
render: function() {
var content = this.state.isOpen ? this.props.children : null;
return div({},
button({ref: 'button', onClick: this.toggle}, this.props.buttonText),
div({ref: 'content'}, content)
);
}
});
module.exports = Toggler;
@ryanflorence
Copy link
Author

Oh, regarding "unit" v. "intergration" tests.

Where is the integration in testing the DOM output of a component? It is a unit test. The unit outputs to the DOM. I'm still a little confused why people think that because you have a DOM you are suddenly doing an integration test. Again, the database model analogy, are those integration tests because there is a database around?

@rafaelrinaldi
Copy link

@rpflorence The database analogy is great! That's an interesting point of view, Ryan. Thank you :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment