npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-test-recorder

v1.4.0

Published

**NOTE YOUR STATE TREE MUST BE SERIALIZABLE**

Downloads

59

Readme

Redux Test Recorder

NOTE YOUR STATE TREE MUST BE SERIALIZABLE

Redux test recorder is a redux middleware for automatically generating tests for your reducers based on the actions in your app. Currently I've written redux-test-recorder-react a component to provide a gui for recording tests in react but I'm hopeful recording components for other frameworks can be created in the future.

Build Status

  • Click here for a demo.
  • And here for another demo with TodoMVC
  • And here to watch my lightning talk on the project at React Europe

Also take a look at our latest build which currently runs a test generated using this module by taking advantage of the eval command. For a better idea of what is going on, you can take a look at the test file here.

Install

npm install redux-test-recorder --save-dev

Use

First set up your store utilizing the exported middleware from redux-test-recorder. Export the props included with redux-test-recorder at this time as well.

import reduxRecord from 'redux-test-recorder';
const reducer = (state = initState, { type, payload }) => {
  let newState;
  switch (type) {
    case 'INCREMENT':
      newState = state + 1;
      break;
    case 'DECREMENT':
      newState = state - 1;
      break;
    default:
      newState = state;
  }
  return newState;
}

const record = reduxRecord({reducer});
export const store = createStore(reducer, applyMiddleware(record.middleware));
export const recordProps = record.props;

Then, if you are using with React you can install redux-test-recorder-react and import the recordProps exported by the instantiation of the middleware and pass those into the record component.

import {store, recordProps } from './store';
import TestRecorder from 'redux-test-recorder-react';
const Counter = ({count, dispatch}) => {
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <h1>{count}</h1>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

const ConnectedCounter = connect(state => {
  return {count: state};
})(Counter);
const Root = () => {
  return (
    <div>
      <Provider store={store}>
        <div><ConnectedCounter /><TestRecorder {...recordProps} /></div>
      </Provider>
    </div>;
};

This will allow you to generate tests on your reducer with a record button in the bottom right corner.

Args

  • reducer - the root reducer of your redux app, used in the generated test.
  • includeReducer - a boolean value, if true, a stringified version of your reducer will be incuded in your generated test, if false, a note to import reducer for testing will be added. defaults to false. Useful when used to generate actual tests so you can test updated functionality.
  • stateKey(optional) - if instead of recording the whole state you only want to record a specific piece, pass that here (useful with actionSubset prop explained next). To get to a -nth level child use dots, as in: api.login.errors.
  • actionSubset(optional) - allows you to record against a subset of actions instead of all actions. Useful combined with stateKey to test a single reducer.
  • equality(optional) - a function used to determine if the reducer returned correct state. Receives result of the reducer call and nextState returned during the flow of the application (note, this api is in flux). deafults to ===. This argument can also be a string. This is useful if you want to call a function you will include in your test file, since calling external functions will not properly stringify that external function.
  • imports(optional)` - a string argument where you can pass in other modules that you would like included iny our test file. Useful if you want to reference external functions in your equality check.
  • testLib(optional) - defaults to tape. Currently supports tape, ava, and mocha, jest, and redux-ava. You can also optionally supply a function to this argument to generate your own tests. Will receive state, actions, imports, reducer, equalityFunction as arguments and expects return type to be a string containing your test contents.
  • numTestsToSave(optional, defaults to 5) - number of previous tests that will be accessible in the panel when tests are being displayed. Higher number = newer.

Create Your Own Testing Interface

If you're not satisfied with the built in testing interface or would like to experiment with something different, it's relatively straightforward. The return of the exported function is an object with two keys middleware and props. The middleware key contains, well, the middleware, props contains information for accessing the current state of the tests. These include startRecord, stopRecord , which are functions that start and stop test recording. createNewTest which creates and then returns a new test, hideTest , which resets all values to initial value, and most importantly listen , a function that takes a function and calls listeners any time any values related to recording status or generated tests is changed. More documentation on this coming soon.

You can take a look at what creating your own interface looks like here - here for what this looks like for the tape implementation.