Actions

Action Creators

Most action creators are fairly straight forward and either delegate their work by wrapping the ThunkHelper or simply fire off an Action. A common pattern for actions is to chain them by returning a Promise from the creator and invoking another creator. An example is the createPaymentInstrument action creator from src/reducers/actions/customer.ewallet.actions.js in the invison-customercare repository.

Example action chaining

export const createPaymentInstrument = (data) => {
    return (dispatch) => {
        return createPaymentInstrumentPromise(dispatch, data)
            .then(() => {
                dispatch(retrieveWallet(data));
            });
    };
};

Here, after the new payment instrument is successfully created, the retrieveWallet action creator is called to retrieve the customer's wallet, for which reducers ensure the store contains the information about the newly created payment instrument. The logic in these code areas are prime candidates for testing, because the action chaining mechanism mirrors an assumption about the Ascendon API, and in some cases the Invision UX. As such, tests that isolate these assumptions and ensure compliance are very valuable as they are rather uniform, which makes them quick to create and easy to maintain. As an example, what follows is a test for this assumption from the payment instrument action creator shown above.

Example action chaining test

describe('And the creation succeeds', () => {
    it('Should retrieve the wallet for the customer', () => {
        let dispatched = false;
        function dispatch() {
            dispatched = true;
        }

        callCreatePaymentThunk({ request: { id: 1 } }, dispatch);

        Promise.resolve(thunkPromise);

        return thunkPromise.then(() => {
            expect(dispatched).to.be.true;
        });
    });
});

This test creates a callback (dispatch) and verifies that it was called on a successful API request.