mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
test: fix unit tests in design-system
This commit is contained in:
Alex Grozav
parent
9006019ce7
commit
964811243c
|
|
@ -1 +1,5 @@
|
|||
import '@testing-library/jest-dom';
|
||||
import { config } from '@vue/test-utils';
|
||||
import { N8nPlugin } from '@/plugin';
|
||||
|
||||
config.global.plugins = [N8nPlugin];
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'],
|
||||
global: {
|
||||
stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
|||
},
|
||||
],
|
||||
},
|
||||
stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
|
||||
global: {
|
||||
stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -14,21 +14,20 @@ describe('components', () => {
|
|||
});
|
||||
|
||||
it('should render slots instead of props', () => {
|
||||
const { container } = render(
|
||||
N8nAlert,
|
||||
{
|
||||
props: { showIcon: false },
|
||||
slots: {
|
||||
title: 'Title',
|
||||
default: 'Message',
|
||||
aside: '<button>Click me</button>',
|
||||
icon: '<n8n-icon icon="plus-circle" />',
|
||||
const { container } = render(N8nAlert, {
|
||||
props: { showIcon: false },
|
||||
slots: {
|
||||
title: 'Title',
|
||||
default: 'Message',
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ describe('components', () => {
|
|||
slots: {
|
||||
default: '<n8n-text>Default badge</n8n-text>',
|
||||
},
|
||||
stubs: ['n8n-text'],
|
||||
global: {
|
||||
stubs: ['n8n-text'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -28,7 +30,9 @@ describe('components', () => {
|
|||
slots: {
|
||||
default: '<n8n-text>Secondary badge</n8n-text>',
|
||||
},
|
||||
stubs: ['n8n-text'],
|
||||
global: {
|
||||
stubs: ['n8n-text'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -37,7 +41,9 @@ describe('components', () => {
|
|||
slots: {
|
||||
default: '<n8n-text>A Badge</n8n-text>',
|
||||
},
|
||||
stubs: ['n8n-text'],
|
||||
global: {
|
||||
stubs: ['n8n-text'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>"`;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ describe('components', () => {
|
|||
it('should render correctly', () => {
|
||||
const wrapper = render(N8nButton, {
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -25,7 +27,9 @@ describe('components', () => {
|
|||
loading: true,
|
||||
},
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -38,7 +42,9 @@ describe('components', () => {
|
|||
icon: 'plus-circle',
|
||||
},
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -51,7 +57,9 @@ describe('components', () => {
|
|||
square: true,
|
||||
label: '48',
|
||||
},
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -65,7 +73,9 @@ describe('components', () => {
|
|||
icon: 'plus-circle',
|
||||
},
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
|
@ -78,7 +88,9 @@ describe('components', () => {
|
|||
type: 'secondary',
|
||||
},
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
|
@ -91,7 +103,9 @@ describe('components', () => {
|
|||
type: 'text',
|
||||
},
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
|
@ -104,7 +118,9 @@ describe('components', () => {
|
|||
type: 'info',
|
||||
},
|
||||
slots,
|
||||
stubs,
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -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\\">
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
import ElButton from './ElButton.vue';
|
||||
|
||||
export { ElButton };
|
||||
export default ElButton;
|
||||
|
|
@ -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 +0,0 @@
|
|||
export { default as N8nElButton } from './ElButton.vue';
|
||||
|
|
@ -8,7 +8,9 @@ describe('components', () => {
|
|||
props: {
|
||||
theme: 'info',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text'],
|
||||
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',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text'],
|
||||
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',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text'],
|
||||
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',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text'],
|
||||
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',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text'],
|
||||
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',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text'],
|
||||
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',
|
||||
},
|
||||
stubs: ['n8n-icon', 'n8n-text', 'n8n-link'],
|
||||
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>',
|
||||
|
|
|
|||
|
|
@ -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> <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-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> <n8n-link-stub size=\\"small\\"></n8n-link-stub>
|
||||
</div>
|
||||
<n8n-link theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ describe('components', () => {
|
|||
|
||||
it('should render correctly', () => {
|
||||
const wrapper = render(N8nDatatable, {
|
||||
propsData: {
|
||||
props: {
|
||||
columns,
|
||||
rows,
|
||||
rowsPerPage,
|
||||
},
|
||||
stubs,
|
||||
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,
|
||||
},
|
||||
stubs,
|
||||
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,
|
||||
},
|
||||
stubs,
|
||||
scopedSlots: {
|
||||
row: '<main><td v-for="column in props.columns" :key="column.id">Row slot</td></main>', // Wrapper is necessary for looping
|
||||
global: {
|
||||
stubs,
|
||||
},
|
||||
slots: {
|
||||
row: '<template #row="props"><td v-for="column in props.columns" :key="column.id">Row slot</td></template>', // Wrapper is necessary for looping
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ describe('N8nInfoTip', () => {
|
|||
it('should render correctly as note', () => {
|
||||
const wrapper = render(N8nInfoTip, {
|
||||
slots,
|
||||
stubs,
|
||||
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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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-->
|
||||
|
|
|
|||
|
|
@ -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.',
|
||||
},
|
||||
stubs: ['n8n-text'],
|
||||
global: {
|
||||
stubs: ['n8n-text'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -24,7 +27,9 @@ describe('components', () => {
|
|||
id: 'notice',
|
||||
content: 'This is a notice.',
|
||||
},
|
||||
stubs: ['n8n-text'],
|
||||
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.',
|
||||
},
|
||||
stubs: ['n8n-text'],
|
||||
global: {
|
||||
stubs: ['n8n-text'],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.container.querySelector('script')).not.toBeTruthy();
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ describe('components', () => {
|
|||
describe('N8nRecycleScroller', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = render(N8nRecycleScroller, {
|
||||
propsData: {
|
||||
props: {
|
||||
itemSize,
|
||||
itemKey,
|
||||
items,
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@ describe('components', () => {
|
|||
describe('N8nSelect', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = render(N8nSelect, {
|
||||
components: {
|
||||
N8nOption,
|
||||
global: {
|
||||
components: {
|
||||
'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'));
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue