Tests and Docs Demo

Storybook is a great place to demo our components, but it is capable of doing so much more. By tapping into their growing collection of 1st, and 3rd party plugins we can make each story infinitely more useful.

Knobs

Have you ever gotten a design that's 3 columns, with each column containing an image, a title, and secondary text? How often did each of the 3 columns contain the exact same photo, title and text? Sure it looks great in those perfect conditions, but what happens when you pass in a portrait photo to the first, translate the page to German, and then paste a novel of text into the center column? This is why we have Storybook Knobs.

Knobs has a pretty simple interface, and lets you replace static text, numbers, booleans and other values with short functions. The functions look like text('Knob Name', 'Default Value) and with no other work allow the Storybook viewer to change the text used in your example.

<Textfield 
  placeholder="${text('placeholder', 'Put text in here')}" 
/>

Actions

Interactive components do much more than just render some visual markup, they have event handlers that fire which are not always possible to see. Storybook Actions provide a simple method to visualize these actions without having to litter your story with console.log messages.

     template: `
      <Textfield 
        @input="input"
      />`,
    methods: {
      input: action("change"),
    }

By creating a quick "input" method set to the provided action() method, I can see what happens every time that event handler is called. In this case I can even see the value of the text that was just typed.

This addition is really helpful when originally creating the component, or debugging it in the future.

Screener.io

Screener is a service that provides visual regression testing, and their product integrates beautifully with Storybook. If you stories written for your components, you already have everything you'd need to run Screener tests on them.

Screener also offers a set of APIs that allow you to interact with the rendered components so that you can visually test various states such as hover, click, or text input. These tests can also be applied as a decorator, which means that every component in that story will run the same tests.

.addDecorator((storyFn) => {
    const story = storyFn();
    story.steps = new Steps()
      .snapshot('default', { cropTo: '.Textfield' })
      .hover('.Textfield')
      .snapshot('hover', { cropTo: '.Textfield' })
      .setValue('input', 'Enter Text In Input')
      .snapshot('text', { cropTo: '.Textfield' })
      .end()
    return story;
  })

With this code in place, both of the Textfield variants will be tested at their base state, on hover, and after imputing text into the input. We can also crop the test to only include specific selectors on the page.