vue-styleguidist
Version:
Vue components style guide generator
73 lines • 3.26 kB
JavaScript
import * as React from 'react';
import { mount } from 'cypress/react';
import Context from 'rsg-components/Context/Context';
import EditorPrism from './EditorPrism';
var Provider = function Provider(_ref) {
var children = _ref.children,
_ref$jssThemedEditor = _ref.jssThemedEditor,
jssThemedEditor = _ref$jssThemedEditor === void 0 ? true : _ref$jssThemedEditor,
_ref$jsxInExamples = _ref.jsxInExamples,
jsxInExamples = _ref$jsxInExamples === void 0 ? false : _ref$jsxInExamples;
return /*#__PURE__*/React.createElement(Context.Provider, {
value: {
config: {
jssThemedEditor: jssThemedEditor,
jsxInExamples: jsxInExamples
}
}
}, children);
};
describe('EditorPrism', function () {
it('renders typescript', function () {
var code = "\nfunction foo() :string {\n return 'bar'\n}\n\nfoo()\n ";
mount( /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(EditorPrism, {
code: code,
onChange: function onChange() {}
})));
cy.contains('.token.function', 'foo').should('be.visible');
});
it('renders tsx', function () {
var code = "\nfunction foo() :string {\n return <Foo>bar</Foo>\n}\n\nfoo()\n ";
mount( /*#__PURE__*/React.createElement(Provider, {
jsxInExamples: true
}, /*#__PURE__*/React.createElement(EditorPrism, {
code: code,
onChange: function onChange() {}
})));
cy.contains('.token.tag', 'Foo').should('be.visible');
cy.get('pre').should('have.text', code);
});
it('renders vue SFC with Typescript', function () {
var code = "\n<template>\n <Accordion @click=\"foo()\">bar</Accordion>\n</template>\n<script lang=\"ts\">\nimport type { Vue } from 'vue'\nfunction foo(param: Vue) : { one: number, two: boolean } {\n return 'bar'\n}\n</script>\n ";
mount( /*#__PURE__*/React.createElement(Provider, {
jsxInExamples: true
}, /*#__PURE__*/React.createElement(EditorPrism, {
code: code,
onChange: function onChange() {}
})));
cy.contains('.token.tag', 'Accordion').should('be.visible');
cy.get('pre').should('have.text', code);
});
it('renders vue SFC with Self-closing tag', function () {
var code = "\n<template>\n <Checkbox />\n</template>\n<script lang=\"ts\">\nimport type { Vue } from 'vue'\n\nfunction foo(param: Vue) : { one: number, two: boolean } {\n return 'bar'\n}\n</script>\n ";
mount( /*#__PURE__*/React.createElement(Provider, {
jsxInExamples: true
}, /*#__PURE__*/React.createElement(EditorPrism, {
code: code,
onChange: function onChange() {}
})));
cy.contains('.token.tag', 'Checkbox').should('be.visible');
cy.get('pre').should('have.text', code);
});
it('renders vue SFC with style scoped tag', function () {
var code = "\n<template>\n <Checkbox />\n</template>\n<style scoped>\n .checkbox {\n color: red;\n }\n</style>\n ";
mount( /*#__PURE__*/React.createElement(Provider, {
jsxInExamples: true
}, /*#__PURE__*/React.createElement(EditorPrism, {
code: code,
onChange: function onChange() {}
})));
cy.contains('.token.tag', 'Checkbox').should('be.visible');
cy.get('pre').should('have.text', code);
});
});