vue-styleguidist
Version:
Vue components style guide generator
203 lines (201 loc) • 7.46 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _qss = require("qss");
var _examplesLoader = _interopRequireDefault(require("./examples-loader"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/* eslint-disable no-new-func */
vi.mock('vue-inbrowser-compiler-utils', function () {
return {
isCodeVueSfc: function isCodeVueSfc(code) {
return /<script/.test(code);
},
parseComponent: function parseComponent() {
return {
script: {
content: "import _ from 'lodash';\n import FooComponent from '../foo.js';"
}
};
}
};
});
vi.mock('vue-docgen-api', function () {
return {
parse: function parse(file) {
return {
displayName: file
};
},
getDefaultExample: function getDefaultExample() {
return 'default example';
},
cleanName: function cleanName(name) {
return name;
}
};
});
vi.mock('../utils/absolutize', function () {
return function (p) {
return p;
};
});
var query = {
file: 'foo.vue',
displayName: 'FooComponent',
shouldShowDefaultExample: false
};
var getQuery = function getQuery() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return (0, _qss.encode)(_objectSpread(_objectSpread({}, query), options), '?');
};
it('should return valid, parsable JS', function () {
var exampleMarkdown = "\n# header\n\t<div/>\ntext\n```\n<span/>\n```\n";
var callback = function callback(err, result) {
expect(function () {
return new Function(result);
}).not.toThrow(SyntaxError);
expect(result).toBeTruthy();
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: getQuery(),
_styleguidist: {}
}, exampleMarkdown);
});
it('should replace all occurrences of __COMPONENT__ with provided query.displayName', function () {
var exampleMarkdown = "\n\t<div>\n\t\t<__COMPONENT__>\n\t\t\t<span>text</span>\n\t\t\t<span>Name of component: __COMPONENT__</span>\n\t\t</__COMPONENT__>\n\t\t<__COMPONENT__ />\n\t</div>\n\t";
var callback = function callback(err, result) {
expect(result).not.toMatch(/__COMPONENT__/);
var mth = result.match(/<div>(.*?)<\/div>/);
expect(mth && mth[0]).toMatchInlineSnapshot('"<div>\\\\n\\\\t<foo.vue>\\\\n\\\\t\\\\t<span>text</span>\\\\n\\\\t\\\\t<span>Name of component: foo.vue</span>\\\\n\\\\t</foo.vue>\\\\n\\\\tdefault example\\\\n</div>"');
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: getQuery({
shouldShowDefaultExample: true
}),
_styleguidist: {},
addDependency: vi.fn()
}, exampleMarkdown);
});
it('should pass updateExample function from config to chunkify', function () {
var exampleMarkdown = "\n```jsx static\n<h1>Hello world!</h2>\n```\n\t";
var updateExample = vi.fn(function (props) {
return props;
});
var callback = function callback() {
expect(updateExample).toHaveBeenCalledWith({
content: '<h1>Hello world!</h2>',
settings: {
"static": true
},
lang: 'jsx'
}, '/path/to/foo/examples/file');
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: getQuery({
customLangs: ['vue', 'jsx']
}),
resourcePath: '/path/to/foo/examples/file',
_styleguidist: {
updateExample: updateExample
}
}, exampleMarkdown);
});
it('should generate require map when require() is used', function () {
var exampleMarkdown = "\n\tOne:\n```\nconst _ = require('lodash');\n<X/>\n```\n\tTwo:\n\t\t<Y/>\n\t";
var callback = function callback(err, result) {
expect(result).toBeTruthy();
expect(function () {
return new Function(result);
}).not.toThrow(SyntaxError);
expect(result).toMatch("'lodash': require('lodash')");
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: getQuery(),
_styleguidist: {}
}, exampleMarkdown);
});
it('should generate require map when import is used', function () {
var exampleMarkdown = "\n\tOne:\n```\n\timport _ from 'lodash';\n\t<X/>\n```\n\t";
var callback = function callback(err, result) {
expect(result).toBeTruthy();
expect(function () {
return new Function(result);
}).not.toThrow(SyntaxError);
expect(result).toMatch("'lodash': require('lodash')");
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: getQuery(),
_styleguidist: {}
}, exampleMarkdown);
});
it('should work with multiple JSX element on the root level', function () {
var exampleMarkdown = "\n\t\t<X/>\n\t\t<Y/>\n\t";
var callback = function callback(err, result) {
expect(result).toBeTruthy();
expect(function () {
return new Function(result);
}).not.toThrow(SyntaxError);
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: getQuery(),
_styleguidist: {}
}, exampleMarkdown);
});
it('should works for any Markdown file, without a current component', function () {
var exampleMarkdown = "\n\t\timport FooComponent from '../foo.js';\n\t\t<FooComponent/>";
var callback = function callback(err, result) {
expect(result).toBeTruthy();
expect(function () {
return new Function(result);
}).not.toThrow(SyntaxError);
expect(result).not.toMatch('undefined');
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: '',
_styleguidist: {}
}, exampleMarkdown);
});
it('should import external dependency in a vue component example', function () {
var exampleMarkdown = "\n\tOne:\n\t\n\t```\n\t\t\t<template>\n\t\t\t\t<div/>\n\t\t\t</template>\n\t\t\t<script>\n\t\t\t\timport _ from 'lodash';\n\t\t\t\timport FooComponent from '../foo.js';\n\t\t\t\t<FooComponent/>\n\t\t\t</script>\n\t```\n\t\n\t\t\t";
var callback = function callback(err, result) {
expect(result).toBeTruthy();
expect(result).toMatch("'lodash': require('lodash')");
};
_examplesLoader["default"].call({
async: function async() {
return callback;
},
request: 'Readme.md',
query: '',
_styleguidist: {}
}, exampleMarkdown);
});