Socket
Socket
Sign inDemoInstall

storybook-addon-launchdarkly

Package Overview
Dependencies
1
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-addon-launchdarkly


Version published
Weekly downloads
4.9K
decreased by-25.61%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

Storybook Addon LaunchDarkly

current version

Use LaunchDarkly in your Storybook stories.

Disclamer

This is not official storybook addon. I made this because LD won't for years https://github.com/launchdarkly/react-client-sdk/issues/30.

I can't actively handle the issues which is not in my usecase. (and won't because LD should do officially.)

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 '.';

const meta: Meta<typeof Exapmle> = {
  component: Example,
};
export default meta;

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/dist';

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

FAQs

Last updated on 11 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc