wix-storybook-utils/dist/es/src/utils/components-hints-builder.spec.js

Utilities for automated component documentation within Storybook

import { getComponentsHints } from './components-hints-builder';
describe('getComponentsHints', function () {
    it('should return null if components scope is not provided', function () {
        expect(getComponentsHints()).toBe(null);
    });
    it("should return empty hints object if provided components don't have propTypes", function () {
        var componentsScope = {
            Box: {},
            Text: {},
        };
        expect(getComponentsHints(componentsScope)).toEqual({});
    });
    it('sort components', function () {
        var componentsScope = {
            Text: {
                propTypes: {
                    color: {},
                },
            },
            Box: {
                propTypes: {
                    color: {},
                },
            },
        };
        expect(Object.keys(getComponentsHints(componentsScope))).toEqual([
            'Box',
            'Text',
        ]);
    });
    it('sort attributes', function () {
        var componentsScope = {
            Box: {
                propTypes: {
                    verticalAlign: {
                        type: {
                            name: 'oneOf',
                            value: ['top', 'middle', 'bottom', 'space-between'],
                        },
                    },
                    color: {
                        type: { name: 'string' },
                    },
                    size: {
                        type: { name: 'oneOf', value: ['medium', 'large'] },
                    },
                },
            },
        };
        var hints = getComponentsHints(componentsScope);
        expect(Object.keys(hints.Box.attrs)).toEqual([
            'color',
            'size',
            'verticalAlign',
        ]);
    });
    it('should parse oneOf type props, but omit className and children props', function () {
        var componentsScope = {
            Box: {
                propTypes: {
                    children: {
                        type: { name: 'node' },
                    },
                    className: {
                        type: { name: 'string' },
                    },
                    verticalAlign: {
                        type: {
                            name: 'oneOf',
                            value: ['top', 'middle', 'bottom', 'space-between'],
                        },
                    },
                    color: {
                        type: { name: 'string' },
                    },
                },
            },
        };
        expect(getComponentsHints(componentsScope)).toEqual({
            Box: {
                attrs: {
                    color: null,
                    verticalAlign: ['top', 'middle', 'bottom', 'space-between'],
                },
            },
        });
    });
    it('should parse compound components props', function () {
        var componentsScope = {
            Card: {
                propTypes: {
                    hideOverflow: {
                        type: { name: 'bool' },
                    },
                    dataHook: { type: { name: 'string' } },
                },
                Content: {
                    propTypes: {
                        size: {
                            type: {
                                name: 'oneOf',
                                value: ['medium', 'large'],
                            },
                        },
                    },
                },
                Divider: {
                    displayName: 'Divider',
                },
                displayName: 'Card',
            },
        };
        expect(getComponentsHints(componentsScope)).toEqual({
            Card: {
                attrs: {
                    hideOverflow: null,
                    dataHook: null,
                },
            },
            'Card.Content': {
                attrs: {
                    size: ['medium', 'large'],
                },
            },
            'Card.Divider': {
                attrs: {},
            },
        });
    });
});
//# sourceMappingURL=components-hints-builder.spec.js.map