refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.test.ts

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/vue';
+
+import N8nAlert from './Alert.vue';
+import N8nIcon from '../N8nIcon';
+
+describe('components', () => {
+	describe('N8nAlert', () => {
+		it('should render with props', () => {
+			render(N8nAlert, {
+				props: { title: 'Title', description: 'Message' },
+			});
+			expect(screen.getByRole('alert')).toBeVisible();
+			expect(screen.getByText('Title')).toBeVisible();
+			expect(screen.getByText('Message')).toBeVisible();
+		});
+
+		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" />',
+				},
+				global: {
+					components: {
+						'n8n-icon': N8nIcon,
+					},
+				},
+			});
+			expect(screen.getByRole('alert')).toBeVisible();
+			expect(screen.getByText('Title')).toBeVisible();
+			expect(screen.getByText('Message')).toBeVisible();
+			expect(screen.getByRole('button')).toBeVisible();
+			expect(container.querySelector('.n8n-icon')).toBeInTheDocument();
+		});
+	});
+});