wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
165 lines • 6.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var _1 = tslib_1.__importDefault(require("."));
var testkit_1 = tslib_1.__importDefault(require("./testkit"));
describe('AutoExample', function () {
describe('options list', function () {
it('should display two options', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
parsedSource: {
displayName: 'TestComponent',
props: {
stringProp: { type: { name: 'string' } },
functionProp: { type: { name: 'func' } },
},
},
componentProps: {
stringProp: '',
},
exampleProps: {
functionProp: function () { return ''; },
},
});
var options = testkit.get.options();
expect(options.at(0).prop('label')).toBe('stringProp');
expect(options.at(1).prop('label')).toBe('functionProp');
});
it('should categorize aria props', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
parsedSource: {
displayName: 'TestComponent',
props: {
'aria-label': { type: { name: 'string' } },
'Aria-required': { type: { name: 'bool' } },
ariaDisabled: { type: { name: 'bool' } },
'anything-else': { type: { name: 'string' } },
},
},
componentProps: {
'anything-else': 'test',
},
});
// expeting only 1 because others should be collapsed
expect(testkit.get.options()).toHaveLength(1);
});
});
describe('compnentProps', function () {
it('should not fail with `undefined` values', function () {
var testkit = new testkit_1.default(_1.default);
var create = function () {
return testkit.when.created({
parsedSource: {
displayName: 'TestComponent',
props: {
functionProp: { type: { name: 'func' } },
},
},
componentProps: {
undefinedProp: undefined,
},
});
};
expect(create).not.toThrow();
});
it('should display NodesList regardless of type in parsedSource', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
parsedSource: {
displayName: 'TestComponent',
props: {
someProp: {
type: { name: 'unknown type name, something really obscure' },
},
},
},
exampleProps: {
someProp: [1, 2, 3, 4, 5],
},
});
var option = testkit.get.options().props();
expect(option.children).not.toBe(null);
});
});
describe('exampleProps', function () {
it('should display "Interaction preview" for function type', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
parsedSource: {
displayName: 'TestComponent',
props: {
functionProp: { type: { name: 'func' } },
},
},
exampleProps: {
functionProp: function () { },
},
});
var option = testkit.get.options().props();
expect(option.children.props.children).toBe('Interaction preview');
});
it('should display NodesList regardless of type in parsedSource', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
parsedSource: {
displayName: 'TestComponent',
props: {
someProp: {
type: { name: 'unknown type name, something really obscure' },
},
},
},
exampleProps: {
someProp: [1, 2, 3, 4, 5],
},
});
var option = testkit.get.options().props();
expect(option.children).not.toBe(null);
});
});
describe('codeExample', function () {
it('should not render when `false`', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
codeExample: false,
});
expect(testkit.get.codeBlock()).toHaveLength(0);
});
});
describe('componentWrapper', function () {
it('should render wrapper when given', function () {
var theme = 'componentWrapper-theme';
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
componentWrapper: function (_a) {
var component = _a.component;
return (react_1.default.createElement("div", { className: theme }, component));
},
});
expect(testkit.get.exists('[data-hook*="componentWrapper"]')).toBeTruthy();
expect(testkit.get.exists("[className*=\"".concat(theme, "\"]"))).toBeTruthy();
});
it('should render wrapper in Non-Interactive mode', function () {
var theme = 'componentWrapper-theme';
var testkit = new testkit_1.default(_1.default);
testkit.when.created({
isInteractive: false,
componentWrapper: function (_a) {
var component = _a.component;
return (react_1.default.createElement("div", { className: theme }, component));
},
});
expect(testkit.get.exists('[data-hook*="componentWrapper"]')).toBeTruthy();
expect(testkit.get.exists("[className*=\"".concat(theme, "\"]"))).toBeTruthy();
});
it('should not render wrapper when not given', function () {
var testkit = new testkit_1.default(_1.default);
testkit.when.created();
expect(testkit.get.exists('[data-hook*="componentWrapper"]')).toBeFalsy();
});
});
});
//# sourceMappingURL=index.test.js.map