How to use the @storybook/addons.channel function in @storybook/addons

To help you get started, we’ve selected a few @storybook/addons examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github truffls / storybook-addon-intl / src / manager / __tests__ / index.js View on Github external
test('register panel correctly', () => {
        //=== Before ===
        addons.loaders = {};
        addons.panels = {};
        addons.channel = {
            emit: () => {},
            on: () => {},
            removeListener: () => {}
        };


        //=== Test ===

        // Register addon
        register();
        // Register panel
        addons.loaders[ADDON_ID]();

        // The panel should be registered
        expect(typeof addons.panels[PANEL_ID]).toBe('object');
github truffls / storybook-addon-intl / src / preview / __tests__ / index.js View on Github external
intlConfig: omit(config, ['locales', 'getMessages', 'getFormats']),
            locales: config.locales,
            getMessages: config.getMessages,
            getFormats: config.getFormats,
        };

        // Set the configuraton
        setIntlConfig(config);

        // Get instance of component
        const element = withIntl(story);

        // Check if props match
        expect(element.props).toEqual({
            ...expectedProps,
            channel: addons.channel,
            children: story()
        });


        //=== After ===
        addons.channel = null;
    });
});
github truffls / storybook-addon-intl / src / manager / __tests__ / index.js View on Github external
// Check if the panel has correct values
        const panel = addons.panels[PANEL_ID];
        expect(panel.title).toBe('Locales');
        expect(typeof panel.render).toBe('function');

        // Check if render function returns correct element
        const element = panel.render({
            key: 'intl/panel',
            active: true
        });
        expect(element.type).toBe(LocalePanel);

        // Check if component receive correct props
        expect(element.props).toEqual({
            active: true,
            channel: addons.channel
        });
        expect(element.key).toEqual('intl/panel');


        //=== After ===
        addons.loaders = {};
        addons.panels = {};
        addons.channel = null;
    });
});
github truffls / storybook-addon-intl / src / manager / __tests__ / index.js View on Github external
const element = panel.render({
            active: true
        });
        expect(element.type).toBe(LocalePanel);

        // Check if component receive correct props
        expect(element.props).toEqual({
            active: true,
            channel: addons.channel
        });


        //=== After ===
        addons.loaders = {};
        addons.panels = {};
        addons.channel = null;
    });
github truffls / storybook-addon-intl / src / preview / __tests__ / index.js View on Github external
test('should pass correct props to component', () => {
        //=== Before ===
        addons.channel = {
            emit: () => {},
            on: () => {},
            removeListener: () => {}
        };

        //=== Test ===
        const story = () => null;

        const config = {
            locales: ['en', 'de'],
            defaultLocale: 'en',
            getMessages: () => ({ 'text': 'Lorem ipsum' }),
            getFormats: () => ({ 'date': { 'year-only': { 'year': '2-digit' } } }),
        };

        const expectedProps = {
github truffls / storybook-addon-intl / src / preview / __tests__ / index.js View on Github external
test('should set config', function () {
        //=== Before ===
        const messages = [];
        addons.channel = {
            emit: (...args) => messages.push(args),
        };


        //=== Test ===
        const config = {
            locales: ['en', 'de'],
            defaultLocale: 'en',
            getMessages: () => ({ 'text': 'Lorem ipsum' }),
            getFormats: () => ({ 'date': { 'year-only': { 'year': '2-digit' } } }),
            unkownProperty: true
        };
        const expectedConfig = {
            locales: config.locales,
            defaultLocale: config.defaultLocale
        };