storybook-addon-launchdarkly
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Storybook Addon LaunchDarkly

    current version

    Use LaunchDarkly in your Storybook stories.

    Install

    yarn

    yarn add --dev storybook-addon-launchdarkly
    

    npm

    npm install -D storybook-addon-launchdarkly
    

    Add the addon to your configuration in .storybook/main.js

    module.exports = {
      ...config,
      addons: [
        ...your addons
        "storybook-addon-launchdarkly",
      ],
    };

    Writing your stories with flags

    import Example from '.';
    
    export default {
      component: Example,
    } as ComponentMeta<typeof Example>;
    
    export const Default: StoryObj = {
      parameters: {
        launchdarkly: {
          flags: {
            testFlag: true,
          },
        },
      },
    };

    Writing your test with flagged stories

    Because composeStory dosen't handdle addons, you need to setup. check this comment for referrence.

    // setupFile.js
    import { setGlobalConfig } from '@storybook/testing-react';
    import * as globalConfig from '../.storybook/preview';
    import { decorators } from 'storybook-addon-launchdarkly';
    
    setGlobalConfig({
      ...globalConfig,
      decorators: [
        ...globalConfig.decorators,
        // not loaded automatically in preset, must add this manually for @storybook/testing-react to pick it up
        ...decorators,
      ],
    });
    // Example.test.tsx
    import { composeStories } from '@storybook/testing-react';
    import { render, screen } from '@testing-library/react';
    import * as stories from './Example.stories';
    
    describe('Example', () => {
      const { True, False } = composeStories(stories);
    
      test('flag shoud be True', async () => {
        render(<True {...True.args} />);
    
        expect(screen.queryByText('True')).not.toBeNull();
        expect(screen.queryByText('False')).toBeNull();
      });
    
      test('flag shoud be False', async () => {
        render(<False {...False.args} />);
    
        expect(screen.queryByText('True')).toBeNull();
        expect(screen.queryByText('False')).not.toBeNull();
      });
    });

    Example StoryBook

    https://kodai3.github.io/storybook-addon-launchdarkly

    Keywords

    none

    Install

    npm i storybook-addon-launchdarkly

    DownloadsWeekly Downloads

    2,976

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    15.7 kB

    Total Files

    28

    Last publish

    Collaborators

    • kodai