BinaryMuse/fluxxor — pull request #38 by awei01 (2014-07-01 16:32:24+00:00)
Title: Jest test utilities. Some helpers to mock Fluxxor components/methods to facilitate testing in jest

This module seeks to facilitate testing in [jest](http://facebook.github.io/jest) tests by mocking out fluxxor components. Currently requires lodash, but can easily be refactored to use lodash-node. Sorry, I didn't write any test scripts for this yet and the examples provided are a little contrived. Hopefully you can see what I'm getting at.

# testing a script which loads a component that uses flux #
```
describe('Homepage scripts', function() {
it('Home.boot() should instantiate a FooStore, Fluxxor.Flux and set it on the root component', function() {
var React = require('react/addons');
var FakeFactory = require('fluxxor/lib/jest_mock_factory')(jest);
var fakeFlux = { actions: require('../actions') };
var Fluxxor = FakeFactory.fakeFluxxor(fakeFlux);
var FooStore = jest.genMockFn();
jest.setMock('../foo_store', FooStore);
var Home = require('../home');
Home.boot();
expect(FooStore).toBeCalled();
expect(Fluxxor.Flux).toBeCalledWith({ FooStore: FooStore.mock.instances[0] }, flux.actions);
var component = React.addons.TestUtils.findRenderedComponentWithType();	// somehow find the root component
expect(component.props.flux).toBe(flux);
});
});
```

# testing a root component that uses flux #
```
describe('A root component that uses flux', function() {
it('when rendered into document with a flux instance that has stores and actions, should set the correct state and trigger .doSomething() onClick event', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var FakeFactory = require('fluxxor/lib/jest_mock_factory')(jest);
var CarouselApp = require('../carousel-app');
var stores = { FooStore: require('../foo-store') };
stores.getFooValue.mockReturnValue('foo value');
var actions = require('../actions');
var flux = FakeFactory.fakeFluxInstance(stores, actions);
var carousel = TestUtils.renderIntoDocument(CarouselApp({ flux: flux }));
expect(stores.getFooValue).toBeCalled();
expect(carousel.state.item).toBe('foo value');
TestUtils.Simulate.click(carousel.getDOMNode());
expect(actions.doSomething).toBeCalled();
});
});
```

# testing actions #
```
describe('some actions', function() {
it('when Actions.nested.doFoo() called with "bar", it should call .dispatch with the DO_FOO event and send the correct payload', function() {
var FakeFactory = require('fluxxor/lib/jest_mock_factory')(jest);
var Actions = FakeFactory.fakeDispatchBoundActions(require('../actions'));
var events = require('../events');
Actions.doFoo('foo');
expect(Actions.dispatch).toBeCalledWith(events.DO_FOO, { item: "foo value" });
});
});
```

# testing a child component that uses flux #
```
describe('a child component that uses a FluxChildMixin', function() {
it('should set the correct state from store when mounted and calls correct action when clicked', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var FakeFactory = require('fluxxor/lib/jest_mock_factory')(jest);
var stores = { FooStore: require('../foo-store') };
stores.getFooValue.mockReturnValue('foo value');
var actions = require('../actions');
var flux = Factory.fakeFluxInstance(stores, actions);
var FooComponent = require('../foo-component');
var foo = FakeFactory.mountFluxChildComponentWithFakeFluxContext(React, flux, FooComponent);
expect(foo.state.value).toBe('foo value');
TestUtils.Simulate.click(foo.getDOMNode());
expect(actions.doSomething).toBeCalled();
});
});
```