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

import { render, screen } from '@testing-library/vue';

import N8nAlert from './Alert.vue';

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="circle-plus" />',
				},
				global: {
					components: {
						'n8n-icon': {
							template: '<span class="n8n-icon" />',
							props: ['icon'],
						},
					},
				},
			});
			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();
		});
	});
});