mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

test: fix unit tests in design-system

Browse source
This commit is contained in:
Alex Grozav 2023-07-20 11:37:49 +03:00
parent 9006019ce7
commit 964811243c
31 changed files with 235 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/src/__tests__/setup.ts
View file

@ -1 +1,5 @@
import '@testing-library/jest-dom';
import { config } from '@vue/test-utils';
import { N8nPlugin } from '@/plugin';
config.global.plugins = [N8nPlugin];

2
packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts
View file

@ -11,7 +11,9 @@ describe('N8NActionBox', () => {
'Long description that you should know something is the way it is because of how it is. ',
buttonText: 'Do something',
},
global: {
stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});

11
packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap
View file

@ -3,10 +3,13 @@
exports[`N8NActionBox > should render correctly 1`] = `
"<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>
<div class=\\"heading\\">
<n8n-heading-stub align=\\"center\\" tag=\\"span\\" bold=\\"false\\" size=\\"xlarge\\"></n8n-heading-stub>
</div>
<div class=\\"description\\">
<n8n-text-stub color=\\"text-base\\" bold=\\"false\\" size=\\"medium\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub>
</div>
<n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\" loading=\\"false\\" disabled=\\"false\\" outline=\\"false\\" text=\\"false\\" block=\\"false\\" active=\\"false\\" square=\\"false\\"></n8n-button-stub>
<!--v-if-->
</div>"
`;

8
packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts
View file

@ -6,6 +6,7 @@ describe('components', () => {
it('should render default styling correctly', () => {
const wrapper = render(N8nActionDropdown, {
props: {
teleported: false,
items: [
{
id: 'item1',
@ -17,10 +18,13 @@ describe('components', () => {
},
],
},
stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
global: {
stubs: ['n8n-icon', 'el-tooltip', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should render custom styling correctly', () => {
const wrapper = render(N8nActionDropdown, {
props: {
@ -44,7 +48,9 @@ describe('components', () => {
},
],
},
global: {
stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});

16
packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
View file

@ -2,22 +2,12 @@
exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
"<div class=\\"action-dropdown-container actionDropdownContainer\\">
<div class=\\"el-dropdown\\">
<div class=\\"activator el-tooltip__trigger el-tooltip__trigger\\" id=\\"el-id-7552-4\\" role=\\"button\\" tabindex=\\"0\\" aria-controls=\\"el-id-7552-5\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div>
<!--teleport start-->
<!--teleport end-->
<!--v-if-->
</div>
<el-dropdown-stub trigger=\\"click\\" effect=\\"light\\" placement=\\"bottom\\" popperoptions=\\"[object Object]\\" size=\\"\\" splitbutton=\\"false\\" hideonclick=\\"true\\" loop=\\"true\\" showtimeout=\\"150\\" hidetimeout=\\"150\\" tabindex=\\"0\\" maxheight=\\"\\" popperclass=\\"\\" disabled=\\"false\\" role=\\"menu\\" teleported=\\"true\\"></el-dropdown-stub>
</div>"
`;
exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
"<div class=\\"action-dropdown-container actionDropdownContainer\\">
<div class=\\"el-dropdown\\">
<div class=\\"activator el-tooltip__trigger el-tooltip__trigger\\" id=\\"el-id-7552-0\\" role=\\"button\\" tabindex=\\"0\\" aria-controls=\\"el-id-7552-1\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div>
<!--teleport start-->
<!--teleport end-->
<!--v-if-->
</div>
"<div class=\\"action-dropdown-container actionDropdownContainer\\" teleported=\\"false\\">
<el-dropdown-stub trigger=\\"click\\" effect=\\"light\\" placement=\\"bottom\\" popperoptions=\\"[object Object]\\" size=\\"\\" splitbutton=\\"false\\" hideonclick=\\"true\\" loop=\\"true\\" showtimeout=\\"150\\" hidetimeout=\\"150\\" tabindex=\\"0\\" maxheight=\\"\\" popperclass=\\"\\" disabled=\\"false\\" role=\\"menu\\" teleported=\\"true\\"></el-dropdown-stub>
</div>"
`;

11
packages/design-system/src/components/N8nAlert/__tests__/Alert.spec.ts
View file

@ -14,9 +14,7 @@ describe('components', () => {
});
it('should render slots instead of props', () => {
const { container } = render(
N8nAlert,
{
const { container } = render(N8nAlert, {
props: { showIcon: false },
slots: {
title: 'Title',
@ -24,11 +22,12 @@ describe('components', () => {
aside: '<button>Click me</button>',
icon: '<n8n-icon icon="plus-circle" />',
},
global: {
components: {
'n8n-icon': N8nIcon,
},
(localVue) => {
localVue.component('n8n-icon', N8nIcon);
},
);
});
expect(screen.getByRole('alert')).toBeVisible();
expect(screen.getByText('Title')).toBeVisible();
expect(screen.getByText('Message')).toBeVisible();

6
packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts
View file

@ -14,7 +14,9 @@ describe('components', () => {
slots: {
default: '<n8n-text>Default badge</n8n-text>',
},
global: {
stubs: ['n8n-text'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -28,7 +30,9 @@ describe('components', () => {
slots: {
default: '<n8n-text>Secondary badge</n8n-text>',
},
global: {
stubs: ['n8n-text'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -37,7 +41,9 @@ describe('components', () => {
slots: {
default: '<n8n-text>A Badge</n8n-text>',
},
global: {
stubs: ['n8n-text'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});

6
packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap
View file

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

16
packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
View file

@ -12,7 +12,9 @@ describe('components', () => {
it('should render correctly', () => {
const wrapper = render(N8nButton, {
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -25,7 +27,9 @@ describe('components', () => {
loading: true,
},
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -38,7 +42,9 @@ describe('components', () => {
icon: 'plus-circle',
},
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -51,7 +57,9 @@ describe('components', () => {
square: true,
label: '48',
},
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -65,7 +73,9 @@ describe('components', () => {
icon: 'plus-circle',
},
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
@ -78,7 +88,9 @@ describe('components', () => {
type: 'secondary',
},
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
@ -91,7 +103,9 @@ describe('components', () => {
type: 'text',
},
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
@ -104,7 +118,9 @@ describe('components', () => {
type: 'info',
},
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();

12
packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
View file

@ -1,16 +1,16 @@
// Vitest Snapshot v1
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 \`secondary\` when \`text\` is given as type 1`] = `"<button class=\\"button button text medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></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 render as \`tertiary\` when \`info\` is given as type 1`] = `"<button class=\\"button button info medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></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 default (\`primary\`) type when no type is given 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></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 > overrides > should use given (\`secondary\`) type 1`] = `"<button class=\\"button button secondary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></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 > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-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 > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > square > should render square button 1`] = `
"<button class=\\"button button primary medium square\\" aria-live=\\"polite\\">

4
packages/design-system/src/components/N8nButton/overrides/ElButton.ts
View file

@ -1,4 +0,0 @@
import ElButton from './ElButton.vue';
export { ElButton };
export default ElButton;

51
packages/design-system/src/components/N8nButton/overrides/ElButton.vue
View file

@ -1,51 +0,0 @@
<template>
<n8n-button ref="button" v-bind="attrs">
<slot />
</n8n-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import N8nButton from '../Button.vue';
const classToTypeMap = {
'btn--cancel': 'secondary',
'el-picker-panel__link-btn': 'secondary',
};
type ButtonRef = InstanceType<typeof N8nButton>;
export default defineComponent({
components: {
N8nButton,
},
computed: {
attrs() {
let type = this.$attrs.type || 'primary';
/* Element UI Button can have 'text' or 'info' type which is not supported by n8n-button
so render it as 'secondary' or 'tertiary' */
if (type === 'text') {
type = 'secondary';
}
if (type === 'info') {
type = 'tertiary';
}
Object.entries(classToTypeMap).forEach(([className, mappedType]) => {
if ((this.$refs.button as ButtonRef)?.$el.classList.contains(className)) {
type = mappedType;
}
});
delete this.$attrs.type;
return {
...this.$attrs,
type,
};
},
},
});
</script>

1
packages/design-system/src/components/N8nButton/overrides/index.ts
View file

@ -1 +0,0 @@
export { default as N8nElButton } from './ElButton.vue';

14
packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts
View file

@ -8,7 +8,9 @@ describe('components', () => {
props: {
theme: 'info',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
},
slots: {
default: '<n8n-text size="small">This is an info callout.</n8n-text>',
},
@ -20,7 +22,9 @@ describe('components', () => {
props: {
theme: 'success',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
},
slots: {
default: '<n8n-text size="small">This is a success callout.</n8n-text>',
},
@ -32,7 +36,9 @@ describe('components', () => {
props: {
theme: 'warning',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
},
slots: {
default: '<n8n-text size="small">This is a warning callout.</n8n-text>',
},
@ -44,7 +50,9 @@ describe('components', () => {
props: {
theme: 'danger',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
},
slots: {
default: '<n8n-text size="small">This is a danger callout.</n8n-text>',
},
@ -56,7 +64,9 @@ describe('components', () => {
props: {
theme: 'secondary',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
},
slots: {
default: '<n8n-text size="small">This is a secondary callout.</n8n-text>',
},
@ -69,7 +79,9 @@ describe('components', () => {
theme: 'custom',
icon: 'code-branch',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
},
slots: {
default: '<n8n-text size="small">This is a secondary callout.</n8n-text>',
},
@ -82,7 +94,9 @@ describe('components', () => {
theme: 'custom',
icon: 'code-branch',
},
global: {
stubs: ['n8n-icon', 'n8n-text', 'n8n-link'],
},
slots: {
default: '<n8n-text size="small">This is a secondary callout.</n8n-text>',
actions: '<n8n-link size="small">Do something!</n8n-link>',

37
packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
View file

@ -3,16 +3,22 @@
exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-link theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp; <n8n-link-stub size=\\"small\\"></n8n-link-stub>
</div>
<n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\"></n8n-link-stub>
</div>"
`;
exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
</div>
</div>"
`;
@ -20,7 +26,10 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = `
exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div class=\\"n8n-callout callout danger round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
</div>
</div>"
`;
@ -28,7 +37,10 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = `
exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div class=\\"n8n-callout callout info round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
</div>
</div>"
`;
@ -36,7 +48,10 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = `
exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div class=\\"n8n-callout callout secondary round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
</div>
</div>"
`;
@ -44,7 +59,10 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] =
exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div class=\\"n8n-callout callout success round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
</div>
</div>"
`;
@ -52,7 +70,10 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = `
exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div class=\\"n8n-callout callout warning round\\" role=\\"alert\\">
<div class=\\"messageSection\\">
<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 class=\\"icon\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
</div>
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
</div>
</div>"
`;

4
packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
View file

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { uid } from '@/utils';
import { ElColorPicker } from 'element-plus';
import N8nInput from '../N8nInput';
@ -12,6 +13,7 @@ export type Props = {
predefine?: string[];
modelValue?: string;
showInput?: boolean;
name?: string;
};
const props = withDefaults(defineProps<Props>(), {
@ -22,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
popperClass: '',
showInput: true,
modelValue: null,
name: uid('color-picker'),
});
const color = ref(props.modelValue);
@ -73,6 +76,7 @@ const onActiveChange = (value: string) => {
:disabled="props.disabled"
:size="props.size"
:modelValue="color"
:name="name"
@update:modelValue="onInput"
type="text"
/>

13
packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts
View file

@ -4,12 +4,21 @@ import N8nColorPicker from '../ColorPicker.vue';
describe('components', () => {
describe('N8nColorPicker', () => {
it('should render with input', () => {
const { container } = render(N8nColorPicker);
const { container } = render(N8nColorPicker, {
props: {
name: 'color-picker',
},
});
expect(container).toMatchSnapshot();
});
it('should render without input', () => {
const { container } = render(N8nColorPicker, { props: { showInput: false } });
const { container } = render(N8nColorPicker, {
props: {
name: 'color-picker',
showInput: false,
},
});
expect(container).toMatchSnapshot();
});
});

2
packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
View file

@ -80,7 +80,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
autocomplete="off"
class="el-input__inner"
maxlength="Infinity"
name="input-d2u88i4v0"
name="color-picker"
placeholder=""
rows="2"
tabindex="0"

16
packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts
View file

@ -10,12 +10,14 @@ describe('components', () => {
it('should render correctly', () => {
const wrapper = render(N8nDatatable, {
propsData: {
props: {
columns,
rows,
rowsPerPage,
},
global: {
stubs,
},
});
expect(wrapper.container.querySelectorAll('thead tr').length).toEqual(1);
@ -28,12 +30,14 @@ describe('components', () => {
it('should add column classes', () => {
const wrapper = render(N8nDatatable, {
propsData: {
props: {
columns: columns.map((column) => ({ ...column, classes: ['example'] })),
rows,
rowsPerPage,
},
global: {
stubs,
},
});
expect(wrapper.container.querySelectorAll('.example').length).toEqual(
@ -43,14 +47,16 @@ describe('components', () => {
it('should render row slot', () => {
const wrapper = render(N8nDatatable, {
propsData: {
props: {
columns,
rows,
rowsPerPage,
},
global: {
stubs,
scopedSlots: {
row: '<main><td v-for="column in props.columns" :key="column.id">Row slot</td></main>', // Wrapper is necessary for looping
},
slots: {
row: '<template #row="props"><td v-for="column in props.columns" :key="column.id">Row slot</td></template>', // Wrapper is necessary for looping
},
});

36
packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap
View file

@ -95,41 +95,9 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
</tbody>
</table>
<div class=\\"pagination\\">
<div class=\\"el-pagination is-background is-background\\"><button type=\\"button\\" class=\\"btn-prev is-first\\" disabled=\\"\\" aria-label=\\"Go to previous page\\" aria-disabled=\\"true\\"><i class=\\"el-icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\">
<path fill=\\"currentColor\\" d=\\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\\"></path>
</svg></i></button>
<ul class=\\"el-pager\\">
<li class=\\"is-active number\\" aria-current=\\"true\\" aria-label=\\"page 1\\" tabindex=\\"0\\"> 1 </li>
<!--v-if-->
<!--v-if-->
<li class=\\"number\\" aria-current=\\"false\\" aria-label=\\"page 2\\" tabindex=\\"0\\">2</li>
</ul><button type=\\"button\\" class=\\"btn-next is-last\\" aria-label=\\"Go to next page\\" aria-disabled=\\"false\\"><i class=\\"el-icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\">
<path fill=\\"currentColor\\" d=\\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\\"></path>
</svg></i></button>
</div>
<n8n-pagination-stub pagesize=\\"10\\" total=\\"15\\" currentpage=\\"1\\" pagercount=\\"5\\" layout=\\"prev, pager, next\\" pagesizes=\\"10,20,30,40,50,100\\" popperclass=\\"\\" prevtext=\\"\\" previcon=\\"[object Object]\\" nexttext=\\"\\" nexticon=\\"[object Object]\\" small=\\"false\\" background=\\"true\\" disabled=\\"false\\" hideonsinglepage=\\"false\\"></n8n-pagination-stub>
<div class=\\"pageSizeSelector\\">
<div class=\\"n8n-select container withPrepend\\">
<div class=\\"prepend\\">Page size</div>
<div class=\\"el-select el-select--mini\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\">
<div class=\\"select-trigger el-tooltip__trigger el-tooltip__trigger\\">
<!--v-if-->
<!-- fix: https://github.com/element-plus/element-plus/issues/11415 -->
<!--v-if-->
<div class=\\"el-input el-input--mini el-input--suffix\\">
<!-- input -->
<!-- prepend slot -->
<!--v-if-->
<div class=\\"el-input__wrapper\\">
<!-- prefix slot -->
<!--v-if--><input class=\\"el-input__inner\\" type=\\"text\\" readonly=\\"\\" autocomplete=\\"off\\" tabindex=\\"0\\" placeholder=\\"Select\\"><!-- suffix slot --><span class=\\"el-input__suffix\\"><span class=\\"el-input__suffix-inner\\"><i class=\\"el-icon el-select__caret el-select__icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\"><path fill=\\"currentColor\\" d=\\"M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z\\"></path></svg></i><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span></span>
</div><!-- append slot -->
<!--v-if-->
</div>
</div>
<!--teleport start-->
<!--teleport end-->
</div>
</div>
<n8n-select-stub modelvalue=\\"10\\" autocomplete=\\"off\\" automaticdropdown=\\"false\\" size=\\"mini\\" effect=\\"light\\" disabled=\\"false\\" clearable=\\"false\\" filterable=\\"false\\" allowcreate=\\"false\\" loading=\\"false\\" popperoptions=\\"[object Object]\\" remote=\\"false\\" multiple=\\"false\\" multiplelimit=\\"0\\" defaultfirstoption=\\"false\\" reservekeyword=\\"true\\" valuekey=\\"value\\" collapsetags=\\"false\\" collapsetagstooltip=\\"false\\" maxcollapsetags=\\"1\\" teleported=\\"true\\" persistent=\\"true\\" clearicon=\\"[object Object]\\" fitinputwidth=\\"false\\" suffixicon=\\"[object Object]\\" tagtype=\\"info\\" validateevent=\\"true\\" remoteshowsuffix=\\"false\\" suffixtransition=\\"true\\" placement=\\"bottom-start\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\"></n8n-select-stub>
</div>
</div>
</div>"

6
packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts
View file

@ -10,7 +10,9 @@ describe('N8nInfoTip', () => {
it('should render correctly as note', () => {
const wrapper = render(N8nInfoTip, {
slots,
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -18,10 +20,12 @@ describe('N8nInfoTip', () => {
it('should render correctly as tooltip', () => {
const wrapper = render(N8nInfoTip, {
slots,
stubs,
props: {
type: 'tooltip',
},
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});

5
packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap
View file

@ -3,8 +3,7 @@
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip info note bold\\"><span class=\\"iconText\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
"<div class=\\"n8n-info-tip info tooltip bold\\"><span class=\\"iconText el-tooltip__trigger el-tooltip__trigger\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span>
<!--teleport start-->
<!--teleport end-->
"<div class=\\"n8n-info-tip info tooltip bold\\">
<n8n-tooltip-stub popperclass=\\"tooltipPopper\\" role=\\"tooltip\\" showafter=\\"0\\" hideafter=\\"200\\" autoclose=\\"0\\" boundariespadding=\\"0\\" gpuacceleration=\\"true\\" offset=\\"12\\" placement=\\"top\\" popperoptions=\\"[object Object]\\" strategy=\\"absolute\\" effect=\\"dark\\" enterable=\\"true\\" pure=\\"false\\" focusonshow=\\"false\\" trapping=\\"false\\" stoppoppermouseevent=\\"true\\" virtualtriggering=\\"false\\" content=\\"\\" rawcontent=\\"false\\" persistent=\\"false\\" teleported=\\"true\\" disabled=\\"false\\" open=\\"false\\" trigger=\\"hover\\" triggerkeys=\\"Enter,Space\\" arrowoffset=\\"5\\" showarrow=\\"true\\" justifybuttons=\\"flex-end\\" buttons=\\"\\" class=\\"\\"></n8n-tooltip-stub>
</div>"
`;

6
packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts
View file

@ -3,7 +3,11 @@ import N8nInput from '../Input.vue';
describe('N8nInput', () => {
it('should render correctly', () => {
const wrapper = render(N8nInput);
const wrapper = render(N8nInput, {
props: {
name: 'input',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

2
packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
View file

@ -7,7 +7,7 @@ exports[`N8nInput > should render correctly 1`] = `
<!--v-if-->
<div class=\\"el-input__wrapper\\">
<!-- prefix slot -->
<!--v-if--><input class=\\"el-input__inner\\" autocomplete=\\"off\\" name=\\"input-uh4hw333g\\" rows=\\"2\\" maxlength=\\"Infinity\\" title=\\"\\" type=\\"text\\" tabindex=\\"0\\" placeholder=\\"\\"><!-- suffix slot -->
<!--v-if--><input class=\\"el-input__inner\\" autocomplete=\\"off\\" name=\\"input\\" rows=\\"2\\" maxlength=\\"Infinity\\" title=\\"\\" type=\\"text\\" tabindex=\\"0\\" placeholder=\\"\\"><!-- suffix slot -->
<!--v-if-->
</div><!-- append slot -->
<!--v-if-->

13
packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
View file

@ -1,5 +1,6 @@
import { render } from '@testing-library/vue';
import N8nNotice from '../Notice.vue';
import { N8nText } from '@/components';
describe('components', () => {
describe('N8nNotice', () => {
@ -11,7 +12,9 @@ describe('components', () => {
slots: {
default: 'This is a notice.',
},
global: {
stubs: ['n8n-text'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -24,7 +27,9 @@ describe('components', () => {
id: 'notice',
content: 'This is a notice.',
},
global: {
stubs: ['n8n-text'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
@ -35,7 +40,11 @@ describe('components', () => {
id: 'notice',
content: '<strong>Hello world!</strong> This is a notice.',
},
stubs: ['n8n-text'],
global: {
components: {
'n8n-text': N8nText,
},
},
});
expect(wrapper.container.querySelectorAll('strong')).toHaveLength(1);
@ -48,7 +57,9 @@ describe('components', () => {
id: 'notice',
content: '<script>alert(1);</script> This is a notice.',
},
global: {
stubs: ['n8n-text'],
},
});
expect(wrapper.container.querySelector('script')).not.toBeTruthy();

12
packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
View file

@ -8,18 +8,24 @@ exports[`components > N8nNotice > props > content > should render HTML 1`] = `
exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
"<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 class=\\"notice-content\\">
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub>
</div>
</div>"
`;
exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
"<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 class=\\"notice-content\\">
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub>
</div>
</div>"
`;
exports[`components > N8nNotice > should render correctly 1`] = `
"<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 class=\\"notice-content\\">
<n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub>
</div>
</div>"
`;

2
packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
View file

@ -12,7 +12,7 @@ describe('components', () => {
describe('N8nRecycleScroller', () => {
it('should render correctly', () => {
const wrapper = render(N8nRecycleScroller, {
propsData: {
props: {
itemSize,
itemKey,
items,

22
packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts
View file

@ -8,8 +8,10 @@ describe('components', () => {
describe('N8nSelect', () => {
it('should render correctly', () => {
const wrapper = render(N8nSelect, {
global: {
components: {
N8nOption,
'n8n-option': N8nOption,
},
},
slots: {
default: [
@ -24,10 +26,6 @@ describe('components', () => {
it('should select an option', async () => {
const n8nSelectTestComponent = defineComponent({
components: {
N8nSelect,
N8nOption,
},
template: `
<n8n-select v-model="selected">
<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
@ -44,10 +42,20 @@ describe('components', () => {
},
});
const { container, getByRole } = render(n8nSelectTestComponent);
const { container } = render(n8nSelectTestComponent, {
props: {
teleported: false,
},
global: {
components: {
'n8n-select': N8nSelect,
'n8n-option': N8nOption,
},
},
});
const getOption = (value: string) => within(container as HTMLElement).getByText(value);
const textbox = getByRole('textbox');
const textbox = container.querySelector('input')!;
await userEvent.click(textbox);
await waitFor(() => expect(getOption('1')).toBeVisible());
await userEvent.click(getOption('1'));

24
packages/design-system/src/components/N8nSelect/__tests__/__snapshots__/Select.spec.ts.snap
View file

@ -3,10 +3,24 @@
exports[`components > N8nSelect > should render correctly 1`] = `
"<div class=\\"n8n-select container\\">
<!--v-if-->
<el-select autocomplete=\\"off\\" automaticdropdown=\\"false\\" size=\\"large\\" effect=\\"light\\" disabled=\\"false\\" clearable=\\"false\\" filterable=\\"false\\" allowcreate=\\"false\\" loading=\\"false\\" popperoptions=\\"[object Object]\\" remote=\\"false\\" multiple=\\"false\\" multiplelimit=\\"0\\" defaultfirstoption=\\"false\\" reservekeyword=\\"true\\" valuekey=\\"value\\" collapsetags=\\"false\\" collapsetagstooltip=\\"false\\" maxcollapsetags=\\"1\\" teleported=\\"true\\" persistent=\\"true\\" clearicon=\\"[object Object]\\" fitinputwidth=\\"false\\" suffixicon=\\"[object Object]\\" tagtype=\\"info\\" validateevent=\\"true\\" remoteshowsuffix=\\"false\\" suffixtransition=\\"true\\" placement=\\"bottom-start\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\" class=\\"\\">
<n8n-option value=\\"1\\">1</n8n-option>
<n8n-option value=\\"2\\">2</n8n-option>
<n8n-option value=\\"3\\">3</n8n-option>
</el-select>
<div class=\\"el-select el-select--large\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\">
<div class=\\"select-trigger el-tooltip__trigger el-tooltip__trigger\\">
<!--v-if-->
<!-- fix: https://github.com/element-plus/element-plus/issues/11415 -->
<!--v-if-->
<div class=\\"el-input el-input--large el-input--suffix\\">
<!-- input -->
<!-- prepend slot -->
<!--v-if-->
<div class=\\"el-input__wrapper\\">
<!-- prefix slot -->
<!--v-if--><input class=\\"el-input__inner\\" type=\\"text\\" readonly=\\"\\" autocomplete=\\"off\\" tabindex=\\"0\\" placeholder=\\"Select\\"><!-- suffix slot --><span class=\\"el-input__suffix\\"><span class=\\"el-input__suffix-inner\\"><i class=\\"el-icon el-select__caret el-select__icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\"><path fill=\\"currentColor\\" d=\\"M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z\\"></path></svg></i><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span></span>
</div><!-- append slot -->
<!--v-if-->
</div>
</div>
<!--teleport start-->
<!--teleport end-->
</div>
</div>"
`;

1
packages/design-system/src/components/index.ts
View file

@ -6,7 +6,6 @@ export { default as N8nAvatar } from './N8nAvatar';
export { default as N8nBadge } from './N8nBadge';
export { default as N8nBlockUi } from './N8nBlockUi';
export { default as N8nButton } from './N8nButton';
export { N8nElButton } from './N8nButton/overrides';
export { default as N8nCallout } from './N8nCallout';
export { default as N8nCard } from './N8nCard';
export { default as N8nCheckbox } from './N8nCheckbox';

2
packages/design-system/src/plugin.ts
View file

@ -9,7 +9,6 @@ import {
N8nBadge,
N8nBlockUi,
N8nButton,
N8nElButton,
N8nCallout,
N8nCard,
N8nCheckbox,
@ -64,7 +63,6 @@ export const N8nPlugin: Plugin<{}> = {
app.component('n8n-badge', N8nBadge);
app.component('n8n-block-ui', N8nBlockUi);
app.component('n8n-button', N8nButton);
app.component('el-button', N8nElButton);
app.component('n8n-callout', N8nCallout);
app.component('n8n-card', N8nCard);
app.component('n8n-checkbox', N8nCheckbox);