Mocking data for Storybook

Storybook is a great utility to do isolated development and testing, potentially speeding up development time greatly.

\<MockProvider /> enables easy loading of fixtures to test the happy path of components. Loading state is bypassed by initializing the cache ahead of time.

Setup

export default class ArticleResource extends Resource {
  readonly id: number | undefined = undefined;
  readonly content: string = '';
  readonly author: number | null = null;
  readonly contributors: number[] = [];

  pk() {
    return this.id?.toString();
  }
  static urlRoot = 'http://test.com/article/';
}

import ArticleResource from 'resources/ArticleResource';
import ArticleSummary from './ArticleSummary';

export default function ArticleList({ maxResults }: { maxResults: number }) {
  const articles = useResource(ArticleResource.listShape(), { maxResults });
  return (
    <div>
      {articles.map(article => (
        <ArticleSummary key={article.pk()} article={article} />
      ))}
    </div>
  );
}

Fixtures

We'll test three cases: some interesting results in the list, an empty list, and data not existing so loading fallback is shown.

fixtures.ts

export default {
  full: [
    {
      request: ArticleResource.listShape(),
      params: { maxResults: 10 },
      result: [
        {
          id: 5,
          content: 'have a merry christmas',
          author: 2,
          contributors: [],
        },
        {
          id: 532,
          content: 'never again',
          author: 23,
          contributors: [5],
        },
      ],
    },
  ],
  empty: [
    {
      request: ArticleResource.listShape(),
      params: { maxResults: 10 },
      result: [],
    },
  ],
  loading: [],
};

Story

We use a storybook knob to make it easy for the user to select between each dataset to compare how it looks.

ArticleListStory.tsx

import { select } from '@storybook/addon-knobs';
import { MockProvider } from '@rest-hooks/test';
import ArticleList from 'ArticleList';
import options from './fixtures';

const label = 'Data';
const defaultValue = options.full;
const groupId = 'GROUP-ID1';

storiesOf('name', module).add('Name', () => {
  const results = select(label, options, defaultValue, groupId);
  return (
    <MockProvider results={results}>
      <ArticleList maxResults={10} />
    </MockProvider>
  );
});