chore: prepare for testing

This commit is contained in:
Alex Grozav 2023-07-19 17:27:15 +03:00
parent 82f6ffbc56
commit 96f94853b4
10 changed files with 67 additions and 118 deletions

View file

@ -28,9 +28,12 @@ module.exports = {
find: /^@n8n-design-system\//,
replacement: `${resolve(__dirname, '..')}/src/`,
},
{
find: /^n8n-design-system$/,
replacement: `${resolve(__dirname, '..')}/src/main.ts`,
},
],
},
define: { 'process.env': {} },
});
},
docs: {

View file

@ -5,27 +5,17 @@ import './storybook.scss';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
// import ElementUI from 'element-ui';
// import lang from 'element-ui/lib/locale/lang/en';
// import { locale } from 'element-plus';
import ElementPlus from 'element-plus';
import lang from 'element-plus/lib/locale/lang/en';
import { N8nPlugin } from '../src/plugin';
// import Vue from 'vue';
//
// Vue.use(ElementUI);
// Vue.use(N8nPlugin);
//
// // https://github.com/storybookjs/storybook/issues/6153
// Vue.prototype.toJSON = function () {
// return this;
// };
setup((app) => {
library.add(fas);
// locale.use(lang);
app.use(ElementPlus, {
locale: lang,
});
app.use(N8nPlugin);
});

View file

@ -1,15 +1,12 @@
// Vitest Snapshot v1
exports[`N8NActionBox > should render correctly 1`] = `
"<div data-test-id=\\"action-box\\" class=\\"n8n-action-box container\\">
<div class=\\"emoji\\"> 😿 </div>
<div class=\\"heading\\">
<n8n-heading-stub tag=\\"span\\" size=\\"xlarge\\" align=\\"center\\">Headline you need to know</n8n-heading-stub>
</div>
<div class=\\"description\\">
<n8n-text-stub size=\\"medium\\" color=\\"text-base\\" tag=\\"span\\"><span>Long description that you should know something is the way it is because of how it is. </span></n8n-text-stub>
</div>
<n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\"></n8n-button-stub>
<!---->
"<div class=\\"n8n-action-box container\\" data-test-id=\\"action-box\\">
<div class=\\"emoji\\">😿</div>
<div class=\\"heading\\"><span class=\\"n8n-heading align-center size-xlarge regular\\">Headline you need to know</span></div>
<div class=\\"description\\"><span class=\\"n8n-text text-base size-medium regular\\"><span>Long description that you should know something is the way it is because of how it is. </span></span></div><button class=\\"button button primary large\\" aria-live=\\"polite\\">
<!--v-if--><span>Do something</span>
</button>
<!--v-if-->
</div>"
`;

View file

@ -1,7 +1,7 @@
// Vitest Snapshot v1
exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge default\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></n8n-text-stub></span>"`;
exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge default\\"><span class=\\"n8n-text compact size-large bold\\"><n8n-text>Default badge</n8n-text></span></span>"`;
exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge secondary\\"><n8n-text-stub size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></n8n-text-stub></span>"`;
exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge secondary\\"><span class=\\"n8n-text compact size-medium regular\\"><n8n-text>Secondary badge</n8n-text></span></span>"`;
exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge default\\"><n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></n8n-text-stub></span>"`;
exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge default\\"><span class=\\"n8n-text compact size-small regular\\"><n8n-text>A Badge</n8n-text></span></span>"`;

View file

@ -1,23 +1,25 @@
// Vitest Snapshot v1
exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `"<button aria-live=\\"polite\\" class=\\"button button secondary medium withIcon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `"<button class=\\"button button text medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `"<button aria-live=\\"polite\\" class=\\"button button tertiary medium withIcon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `"<button class=\\"button button info medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `"<button aria-live=\\"polite\\" class=\\"button button primary medium withIcon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `"<button aria-live=\\"polite\\" class=\\"button button secondary medium withIcon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `"<button class=\\"button button secondary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-live=\\"polite\\" class=\\"button button primary medium withIcon\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button button primary medium loading withIcon\\"><span class=\\"icon\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-spinner\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > square > should render square button 1`] = `
"<button aria-live=\\"polite\\" class=\\"button button primary medium square\\">
<!----><span>48</span></button>"
"<button class=\\"button button primary medium square\\" aria-live=\\"polite\\">
<!--v-if--><span>48</span>
</button>"
`;
exports[`components > N8nButton > should render correctly 1`] = `
"<button aria-live=\\"polite\\" class=\\"button button primary medium\\">
<!----><span>Button</span></button>"
"<button class=\\"button button primary medium\\" aria-live=\\"polite\\">
<!--v-if--><span>Button</span>
</button>"
`;

View file

@ -1,93 +1,58 @@
// Vitest Snapshot v1
exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout custom round\\">
"<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp; <n8n-link-stub size=\\"small\\">Do something!</n8n-link-stub>
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a secondary callout.</n8n-text></span> &nbsp; <n8n-link size=\\"small\\">Do something!</n8n-link>
</div>
<n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link-stub>
<n8n-link theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link>
</div>"
`;
exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout custom round\\">
"<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a secondary callout.</n8n-text></span> &nbsp;
</div>
</div>"
`;
exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout danger round\\">
"<div class=\\"n8n-callout callout danger round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a danger callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a danger callout.</n8n-text></span> &nbsp;
</div>
</div>"
`;
exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout info round\\">
"<div class=\\"n8n-callout callout info round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is an info callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is an info callout.</n8n-text></span> &nbsp;
</div>
</div>"
`;
exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout secondary round\\">
"<div class=\\"n8n-callout callout secondary round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a secondary callout.</n8n-text></span> &nbsp;
</div>
</div>"
`;
exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout success round\\">
"<div class=\\"n8n-callout callout success round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a success callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a success callout.</n8n-text></span> &nbsp;
</div>
</div>"
`;
exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout warning round\\">
"<div class=\\"n8n-callout callout warning round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a warning callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
<div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a warning callout.</n8n-text></span> &nbsp;
</div>
</div>"
`;

View file

@ -2,24 +2,24 @@
exports[`components > N8nCard > should render correctly 1`] = `
"<div class=\\"card\\">
<!---->
<!--v-if-->
<div class=\\"content\\">
<!---->
<!--v-if-->
<div class=\\"body\\">This is a card.</div>
<!---->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>"
`;
exports[`components > N8nCard > should render correctly with header and footer 1`] = `
"<div class=\\"card\\">
<!---->
<!--v-if-->
<div class=\\"content\\">
<div class=\\"header\\">Header</div>
<div class=\\"body\\">This is a card.</div>
<div class=\\"footer\\">Footer</div>
</div>
<!---->
<!--v-if-->
</div>"
`;

View file

@ -1,33 +1,25 @@
// Vitest Snapshot v1
exports[`components > N8nNotice > props > content > should render HTML 1`] = `
"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice notice warning\\">
<div class=\\"notice-content\\">
<n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"truncated\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
</div>
"<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
<div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\"><span class=\\"truncated\\" id=\\"notice-content\\" role=\\"region\\"><strong>Hello world!</strong> This is a notice.</span></span></div>
</div>"
`;
exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice notice warning\\">
<div class=\\"notice-content\\">
<n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"truncated\\">This is a notice.</span></n8n-text-stub>
</div>
"<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
<div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\"><span class=\\"truncated\\" id=\\"notice-content\\" role=\\"region\\">This is a notice.</span></span></div>
</div>"
`;
exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice notice warning\\">
<div class=\\"notice-content\\">
<n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"truncated\\"> This is a notice.</span></n8n-text-stub>
</div>
"<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
<div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\"><span class=\\"truncated\\" id=\\"notice-content\\" role=\\"region\\"> This is a notice.</span></span></div>
</div>"
`;
exports[`components > N8nNotice > should render correctly 1`] = `
"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice notice warning\\">
<div class=\\"notice-content\\">
<n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
</div>
"<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
<div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\">This is a notice.</span></div>
</div>"
`;

View file

@ -15,19 +15,19 @@ index 6aed7dd91c7270fc0e0ab98bfcaa4b5aa66a9dcf..69517bb81c4855f08db0f5427c7f1df6
+++ b/lib/components/button/index.js
@@ -3,13 +3,15 @@
Object.defineProperty(exports, '__esModule', { value: true });
require('../../utils/index.js');
-var button$1 = require('./src/button2.js');
+var button$1 = require('n8n-design-system');
+var button$1 = require('n8n-design-system/dist/n8n-design-system.es.js');
var buttonGroup = require('./src/button-group2.js');
var button = require('./src/button.js');
var constants = require('./src/constants.js');
var install = require('../../utils/vue/install.js');
-const ElButton = install.withInstall(button$1["default"], {
+console.log(button$1);
+
+const ElButton = install.withInstall(button$1["default"]["N8nElButton"], {
ButtonGroup: buttonGroup["default"]
});
const ElButtonGroup = install.withNoopInstall(buttonGroup["default"]);
const ElButtonGroup = install.withNoopInstall(buttonGroup["default"]);

View file

@ -31,7 +31,7 @@ patchedDependencies:
hash: nchnoezkq6p37qaiku3vrpwraq
path: patches/@sentry__cli@2.17.0.patch
element-plus@2.3.6:
hash: 43j4rcrsuthfakksgtflxlcgeq
hash: vqiqyej2nyy35ezfz6ceffygha
path: patches/element-plus@2.3.6.patch
pkce-challenge@3.0.0:
hash: dypouzb3lve7vncq25i5fuanki
@ -646,7 +646,7 @@ importers:
dependencies:
element-plus:
specifier: ^2.3.6
version: 2.3.6(patch_hash=43j4rcrsuthfakksgtflxlcgeq)(vue@3.3.4)
version: 2.3.6(patch_hash=vqiqyej2nyy35ezfz6ceffygha)(vue@3.3.4)
markdown-it:
specifier: ^13.0.1
version: 13.0.1
@ -10497,7 +10497,7 @@ packages:
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
dev: true
/element-plus@2.3.6(patch_hash=43j4rcrsuthfakksgtflxlcgeq)(vue@3.3.4):
/element-plus@2.3.6(patch_hash=vqiqyej2nyy35ezfz6ceffygha)(vue@3.3.4):
resolution: {integrity: sha512-GLz0pXUYI2zRfIgyI6W7SWmHk6dSEikP9yR++hsQUyy63+WjutoiGpA3SZD4cGPSXUzRFeKfVr8CnYhK5LqXZw==}
peerDependencies:
vue: ^3.2.0