diff --git a/packages/design-system/src/__tests__/setup.ts b/packages/design-system/src/__tests__/setup.ts index 7b0828bfa8..1734bac34f 100644 --- a/packages/design-system/src/__tests__/setup.ts +++ b/packages/design-system/src/__tests__/setup.ts @@ -1 +1,5 @@ import '@testing-library/jest-dom'; +import { config } from '@vue/test-utils'; +import { N8nPlugin } from '@/plugin'; + +config.global.plugins = [N8nPlugin]; diff --git a/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts b/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts index 635836bd1d..72a59953cc 100644 --- a/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts +++ b/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts @@ -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(); }); diff --git a/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap b/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap index 17c34b4608..491d107483 100644 --- a/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap +++ b/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap @@ -3,10 +3,13 @@ exports[`N8NActionBox > should render correctly 1`] = ` "
😿
-
Headline you need to know
-
Long description that you should know something is the way it is because of how it is.
+
+ +
+
+ +
+
" `; diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts index 8af723b476..bcbc2f1486 100644 --- a/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts +++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts @@ -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(); }); diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap index 39c21563e2..56a9fe695d 100644 --- a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap +++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap @@ -2,22 +2,12 @@ exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = ` "
-
-
- - - -
+
" `; exports[`components > N8nActionDropdown > should render default styling correctly 1`] = ` -"
-
-
- - - -
+"
+
" `; diff --git a/packages/design-system/src/components/N8nAlert/__tests__/Alert.spec.ts b/packages/design-system/src/components/N8nAlert/__tests__/Alert.spec.ts index ea97015d88..6be8dc2f10 100644 --- a/packages/design-system/src/components/N8nAlert/__tests__/Alert.spec.ts +++ b/packages/design-system/src/components/N8nAlert/__tests__/Alert.spec.ts @@ -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: '', - icon: '', + const { container } = render(N8nAlert, { + props: { showIcon: false }, + slots: { + title: 'Title', + default: 'Message', + aside: '', + icon: '', + }, + 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(); diff --git a/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts b/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts index 7a5ed36535..250f329da9 100644 --- a/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts +++ b/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts @@ -14,7 +14,9 @@ describe('components', () => { slots: { default: 'Default badge', }, - stubs: ['n8n-text'], + global: { + stubs: ['n8n-text'], + }, }); expect(wrapper.html()).toMatchSnapshot(); }); @@ -28,7 +30,9 @@ describe('components', () => { slots: { default: 'Secondary badge', }, - stubs: ['n8n-text'], + global: { + stubs: ['n8n-text'], + }, }); expect(wrapper.html()).toMatchSnapshot(); }); @@ -37,7 +41,9 @@ describe('components', () => { slots: { default: 'A Badge', }, - stubs: ['n8n-text'], + global: { + stubs: ['n8n-text'], + }, }); expect(wrapper.html()).toMatchSnapshot(); }); diff --git a/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap b/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap index d60fb742b4..5749263b7b 100644 --- a/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap +++ b/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1 -exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"Default badge"`; +exports[`components > N8nBadge > props > should render default theme correctly 1`] = `""`; -exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"Secondary badge"`; +exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `""`; -exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"A Badge"`; +exports[`components > N8nBadge > props > should render with default values correctly 1`] = `""`; diff --git a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts index 184307c24e..16f053e930 100644 --- a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts +++ b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts @@ -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(); diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap index c2cf0745f3..c48ac5e014 100644 --- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap +++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap @@ -1,16 +1,16 @@ // Vitest Snapshot v1 -exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `""`; +exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `""`; -exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `""`; +exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `""`; -exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `""`; +exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `""`; -exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `""`; +exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `""`; -exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; +exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; -exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; +exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; exports[`components > N8nButton > props > square > should render square button 1`] = ` "