v3.2.0

New in this version:

Support for Storybook v7

Version 7 of Storybook has been in beta for a while but is soon about to launch. We needed to make some updates to how the happo-plugin-storybook library handled the new environment.

Theming support

This is great for testing dark mode! If you want to include different themes with Happo, you can now add a happo.themes option to a Storybook story. For a CSF, this is what it can look like:

export const ThemedBox = () => (
  <Box>I'm a themed box</Box>
);
ThemedBox.parameters = {
  happo: { themes: ['light', 'dark'] },
};

Happo will split up this story in two separate screenshots. One where the light theme is applied and one where the dark theme is applied. You are responsible for handling the theme switching, so make sure you also add the logic for switching themes to your .storybook/preview.js file. Here's an example that makes use of the storybook-dark-theme library:

import { setThemeSwitcher } from 'happo-plugin-storybook/register';

setThemeSwitcher((theme, channel) => {
  return new Promise((resolve) => {
    const isDarkMode = theme === 'dark';

    // Listen for dark mode to change and resolve.
    channel.once(DARK_MODE_EVENT_NAME, resolve);
    // Change the theme.
    channel.emit(DARK_MODE_EVENT_NAME, isDarkMode);
  });
});

The function passed to setThemeSwitcher can be async. Happo will await it before continuing with the screenshot process.

If you want a default config for happo.themes for all stories, you can use global parameters:

// .storybook/preview.js

export const parameters = {
  happo: { themes: ['light', 'dark'] },
};

v3.1.0

This minor release adds support for a new Happo panel that you can add to your Storybook UI. It will list all the happo parameters for a Story and you can use it to invoke functions and see other properties. It looks like this:

To enable it, add happo-plugin-storybook/preset to the list of addons in .storybook/main.js:

module.exports = {
  addons: ['happo-plugin-storybook/preset'],
};

v3.0.0

The only breaking change in this release is that we drop support for Storybook v4.

Thanks to @bashjs for identifying an issue with 2.11.2. This library no longer has an implicit dependency on @storybook/core.

v2.11.2

This release moves @storybook/core from dependencies to devDependencies.

v2.11.1

This release fixes an issue where some @emotion and @mui dependencies had accidentally ended up as regular dependencies instead of devDependencies.

v2.11.0

This release changes the order in which waitFor and beforeScreenshot is called. Previously, beforeScreenshot was called after waitFor, which made it hard to use the two together. Now, the order is reversed.

Additionally, both beforeScreenshot and afterScreenshot can now be asynchronous.

v2.10.3

• Fix using the library with yarn v2.

v2.10.2

This release fixes Happo runs when using the storyStoreV7: true feature.

v2.10.1

This patch release contains a bug fix for using happo-plugin-storybook with Storybook <v5.

v2.10.0

This version adds support for a new targets option that you can use to limit the Happo targets used for a story:

  storiesOf('Button', module)
    .add('firefox only', () => <Button>Hello Firefox Button</Button>, {
      happo: { targets: ['firefox'] },
    })

The names of the targets need to match the names defined in the targets configuration in .happo.js. If the targets option is missing for a story, all targets in .happo.js will be used. If it is defined, only those targets will be used for that story.