Add ability to add tests to stories and display them as specification

[mthuret]

Hello,

I made some developments on a fork of this repository in order to be able to add tests to stories and display them as specifications. The goal is to build a living documentation based on what was already there with react-storybook. You can find some information about the idea in this medium draft. In addition, I wanted that the written tests remains executable with a regular test runner (mocha or jest)

I would like to know if you're interested to add this possibility to this addon, and in this case I'll made a pull request, or If you would prefer that I create a specific one for this use-case ?

I thought it was nice to start from the info-addon because specifications are a good addition to the others displayed information.

Well, let me know what you think about it.

[roonyh]

This is interesting! Just read your medium draft and the readme. Did not try this out yet. Looks like this could be an addon on its own. Something like this is discussed on the main repo here. Will try this out.

[arunoda]

@mthuret This is pretty cool. I think you could get a good result by using our new addon API. With that, we can have a separate panel to show the test output. We are working on the docs and @mnmtanish will show you how to get started.

In the long term, we need to find out a way to run these on the server or do something. But we don't need to worry about it now.

Anyway, even at this stage this project is huge. I am sure, a lot of people will interest to use this. I'll share the post and include in into our next newsletter.

It's great, if you can give this as a addon instead of this fork.

[mthuret]

Alright I can make a new addon using the new api to display the tests results on a new panel (using this to start).

Regarding the way to add some information to stories, do you plan to keep the same way that you use in the info addon (adding a new add function), or you're going to change that either ? Correct me if I'm wrong but if I create a new add function that wrap the normal one, addWithInfo can't be used anymore ?

[thani-sh]

Yes, we can only use one add function at a time. The add function method is quite limiting so we're planning to deprecate it in the future. For the specs addon, let's try not to use an add function.

I'm still not quite sure of a good API for specs addon but this is what I could think of at the moment.

API Idea 1 - story variable

import { info } from '...';
import { specs } from '...';

const stories = storiesOf('Button', module);

stories.add('Hello World', function () {
  const story = (
    <button onClick={action('Hello World')}>
      Hello World
    </button>
  );

  info(story, `
    # Hello World
    Lorem ipsum dolor sit amet...
  `, {});

  specs(function () {
    describe('some completed', function () {
      it('Should indicate that only one item is left', function () {
        let output = mount(story);
        let footer = output.find(Footer);
        expect(footer.text()).toContain('1 item left');
      });

      it('Should indicate that only one item is left', function () {
        let output = mount(story);
        let footer = output.find(Footer);
        expect(footer.text()).toContain('1 item left');
      });
    });
  });

  return story;
});


stories.add('Hello Earth', function () {
  const story = (
    <button onClick={action('Hello Earth')}>
      Hello Earth
    </button>
  );

  info(story, `
    # Hello Earth
    Lorem ipsum dolor sit amet...
  `, {});

  specs(function () {
    describe('some completed', function () {
      it('Should indicate that only one item is left', function () {
        let output = mount(story);
        let footer = output.find(Footer);
        expect(footer.text()).toContain('1 item left');
      });
    });
  });

  return story;
});

[mthuret]

Thanks, I almost port everything into a new addon.

One last thing thought, what's the proper way to know when the user has changed the displayed story within the addon ? I need that to refresh the specifications panels, in case no specs where provided by the user.

Edit : I currently use the event "setCurrentCategory" to refresh specs panel.

The plugin is now live here : https://github.com/mthuret/storybook-addon-specifications

[thani-sh]

The api variable you receive when registering an addon has an onStory function. I see you're already using it here.

React Storybook exports a getStorybook function which I guess can be useful for the CI integration.

import { getStorybook } from '@kadira/storybook'

getStorybook()
// [
//   { kind: 'Button', stories: [ { name: 'Hello World', render: function() } ] }
// ]

[mthuret]

Yes, i tried to use that one first, but it appears that when I tried to use the addon on another project, the callback on the storybook side wasn't called anymore (only the one on the addon side was called). So that's why I switched to the "setCurrentCategory" event. Maybe I was doing something wrong, i don't know...

thanks for the getStorybook function, I'll take a look at it.

[thani-sh]

The api.onStory function used to only support a single handler. This issue is fixed from react-storybook v2.2.1. Can you update the react-storybook module and try again?

[thani-sh]

We have a new Slack group for storybooks. We have a slack channel for addon developers there #addons. You can sign-up here.

[mthuret]

@mnmtanish It looks like I need an invitation or kadira.io email address to access it :)

[thani-sh]

Sorry about that. Try this link https://storybooks-slackin.herokuapp.com/