0.2.0 • Published 9 years ago

react-fluxible-utils v0.2.0

Weekly downloads
1
License
ISC
Repository
github
Last release
9 years ago

react-fluxible-utils

A collection of extremely useful utils and components for React+Fluxible applications.

To start using this library, first install the package:

npm install react-fluxible-utils --save

Then you're all set up to use the following utils and components:

reactSafeRender

A wrapper around React, to handle errors thrown by the render method and life-cycle events. To use this wrapper, just replace the line where you import React with:

// ES6 syntax
import {ReactSafeRender as React} from 'react-fluxible-utils';

// ES5 syntax
const React = require('react-fluxible-utils').ReactSafeRender;

connectToStores

A wrapper around the Fluxible connectToStores. The purpose of this wrapper is to not lose the original component as normally is the case, but still have it accessible as a .original property. This is needed when testing a component with the shallowComponent utility as described later. To use this wrapper, just replace the line where you import connectToStores with:

// ES6 syntax
import {connectToStores} from 'react-fluxible-utils';

// ES5 syntax
const connectToStores = require('react-fluxible-utils').connectToStores;

shallowComponent

A class useful for testing React components. This can be used as follows:

import {ShallowComponent} from 'react-fluxible-utils';
import ComponentToTest from 'ComponentToTest.jsx';
import Store from 'Store';

// in your tests, you can now do things like this:
const component = new ShallowComponent(ComponentToTest).withProps({foo: 'bar'});

// then you can use component for easily writing tests:
import { expect } from 'chai'; // assuming your using chai
expect(component.get(SomeSubComponent)).to.be.ok;
expect(component.get(SomeSubComponent)).to.have.deep.property(...).that.deep.equals(...);
expect(component.getAll(SomeOtherSubComponent)).to.have.length(5);

// you can even test store connections
import sinon from 'sinon'; // assuming your using sinon
const sampleData = {xxx: 'yyy'};
sinon.stub(Store.prototype, 'getDetails').returns(sampleData);
const componentWithStore = component.withStore(Store).getSelf();
expect(componentWithStore).to.have.deep.property('props.details').that.deep.equals(sampleData);
Store.prototype.getDetails.restore();

mockDispatcher

A class useful for testing Fluxible stores. This can be used as follows:

import {MockDispatcher} from 'react-fluxible-utils';
import StoreToTest from 'StoreToTest';

// in your tests, you can now do things like this:
const dispatcherMock = new MockDispatcher(StoreToTest);
const store = dispatcherMock.getStore();

// then you can mock event dispatching for easily writing tests:
import { expect } from 'chai'; // assuming your using chai
const sampleData = {foo: 'bar'};
dispatcherMock.dispatch('DETAILS_LOAD', sampleData);
expect(store.getDetails()).to.eql(sampleData);
0.2.0

9 years ago

0.1.10

10 years ago

0.1.9

10 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.5

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago