wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
205 lines • 8.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var testkit_1 = tslib_1.__importDefault(require("./testkit"));
var option_1 = tslib_1.__importDefault(require("../AutoExample/components/option"));
var testkit = new testkit_1.default();
// TODO: all of this should be a browser tests (puppeteer, cypress etc) and not enzyme.
// it's too much mocking and simulation, not a real deal
// TODO: yes, some test are skipped because the whole StoryPage is undergoing grand refactora
describe('StoryPage', function () {
describe('readme and description', function () {
it('should render readme', function () {
var readme = 'hello readme';
testkit.when.created({ metadata: { readme: readme } });
expect(testkit.get.readme()).toMatch(readme);
});
it('should render description from source', function () {
var description = 'hello source';
testkit.when.created({ metadata: { description: description } });
expect(testkit.get.readme()).toMatch(description);
});
it('should prioritize readme', function () {
var readme = 'hello readme';
var description = 'hello source';
testkit.when.created({ metadata: { description: description, readme: readme } });
expect(testkit.get.readme()).toMatch(readme);
});
it('should render displayName only once', function () {
var displayName = 'batman';
var readme = '# `<batman/>`';
var description = '# `<batman/>`';
testkit.when.created({ metadata: { displayName: displayName, readme: readme, description: description } });
expect(testkit.get.readme()).toEqual('# `<batman/>`');
});
});
describe('given `exampleImport`', function () {
it('should render it', function () {
var exampleImport = 'hello there';
testkit.when.created({ exampleImport: exampleImport });
expect(testkit.get.import()).toMatch(exampleImport);
});
});
describe('given config with `importFormat`', function () {
it('should format and render it in story', function () {
var config = {
importFormat: "hey %moduleName, what's your name, %moduleName?",
moduleName: 'dork',
};
testkit.when.created({ config: config });
expect(testkit.get.import()).toMatch("hey dork, what's your name, dork?");
});
it('should allow any other config name to be used', function () {
var config = {
importFormat: 'good %daytime, %person, where is my %thing at?',
daytime: 'evening',
person: 'Homer',
thing: 'money',
};
testkit.when.created({ config: config });
expect(testkit.get.import()).toMatch('good evening, Homer, where is my money at?');
});
it('should replace %componentName with metadata.displayName', function () {
var props = {
config: {
importFormat: "import {%componentName} from '%moduleName/%componentName';",
moduleName: 'wix-ui-core',
},
metadata: {
displayName: 'BesterestestComponent',
props: {},
},
};
testkit.when.created(props);
expect(testkit.get.import()).toMatch("import {BesterestestComponent} from 'wix-ui-core/BesterestestComponent';");
});
});
describe.skip('given explicit displayName', function () {
it('should show it instead of using one from `metadata`', function () {
var props = {
metadata: {
props: {},
},
config: {},
displayName: 'well hello there',
};
testkit.when.created(props);
expect(testkit.get.readme()).toMatch(/<well hello there\/>/);
expect(testkit.get.import()).toMatch(/well hello there/);
});
});
describe.skip('given both displayName and description', function () {
it('should concatenate the displayName as title to the description', function () {
var props = {
metadata: {
props: {},
description: 'This component is lit AF',
},
config: {},
displayName: 'well hello there',
};
testkit.when.created(props);
expect(testkit.get.readme()).toBe('# `<well hello there/>`\nThis component is lit AF');
});
});
describe('`hiddenProps`', function () {
it('should filter props from interactive list', function () {
testkit.when.created({
metadata: {
props: {
hiddenProp: { type: { name: 'string' } },
visibleProp: { type: { name: 'string' } },
},
},
hiddenProps: ['hiddenProp'],
});
expect(testkit.get.autoExample().find(option_1.default).length).toEqual(1);
});
});
describe('code example', function () {
it('should show displayName without HOC', function () {
var component = function (_a) {
var children = _a.children;
return React.createElement("div", null, children);
}; // eslint-disable-line react/prop-types
component.displayName = 'someHOC(componentName)';
var IShouldBeTheName = function () { return null; };
var props = {
component: component,
componentProps: {
children: (React.createElement("div", null,
React.createElement(IShouldBeTheName, null))),
},
exampleProps: {
children: [],
},
};
testkit.when.created(props);
expect(testkit.get.codeBlock().prop('source')).toEqual("```js\n<componentName>\n <div>\n <IShouldBeTheName />\n </div>\n</componentName>\n```");
});
it('should not be rendered given `codeExample: false`', function () {
testkit.when.created({
component: function () { return ''; },
codeExample: false,
});
expect(testkit.get.codeBlock().length).toEqual(0);
});
});
describe('API tab', function () {
it('Should render API markdown', function () {
testkit.when.created({
activeTabId: 'API',
component: function () { return ''; },
codeExample: false,
metadata: {
props: {},
readmeApi: 'data for markdown',
displayName: 'Component',
},
});
testkit.openTab('API');
expect(testkit.get.api.markdown().length).toBe(1);
});
});
describe('Testkit tab', function () {
it('Should render both testkit markdown and auto generated testkit docs', function () {
testkit.when.created({
activeTabId: 'Testkit',
component: function () { return ''; },
codeExample: false,
metadata: {
props: {},
readmeTestkit: 'data for markdown',
displayName: 'Component',
drivers: [
{
file: 'component.driver.js',
descriptor: [
{
name: 'click',
args: [],
type: 'function',
},
],
},
{
file: 'component.pupeteer.driver.js',
descriptor: [
{
name: 'element',
args: [],
type: 'function',
},
],
},
],
},
});
testkit.openTab('Testkit');
expect(testkit.get.testkit.markdown().length).toBe(1);
expect(testkit.get.testkit.autoGenerated().length).toBe(1);
});
});
});
//# sourceMappingURL=index.test.js.map