test(editor): Add unit tests for Badge component (#3260)

* ✅ Added unit tests for Badge component

* ✅ Updated Badge tests to cover more variants.

* ✅ Using stub components in tests

* ✔️ Fixing linting error is Badge test files.

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

@@ -0,0 +1,46 @@
+import { render } from '@testing-library/vue';
+import N8nBadge from '../Badge.vue';
+
+describe('components', () => {
+	describe('N8nBadge', () => {
+		describe('props', () => {
+			it('should render default theme correctly', () => {
+				const wrapper = render(N8nBadge, {
+					props: {
+						theme: 'default',
+						size: 'large',
+						bold: true,
+					},
+					slots: {
+						default: '<n8n-text>Default badge</n8n-text>',
+					},
+					stubs: ['n8n-text'],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should render secondary theme correctly', () => {
+				const wrapper = render(N8nBadge, {
+					props: {
+						theme: 'secondary',
+						size: 'medium',
+						bold: false,
+					},
+					slots: {
+						default: '<n8n-text>Secondary badge</n8n-text>',
+					},
+					stubs: ['n8n-text'],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should render with default values correctly', () => {
+				const wrapper = render(N8nBadge, {
+					slots: {
+						default: '<n8n-text>A Badge</n8n-text>',
+					},
+					stubs: ['n8n-text'],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+		});
+	});
+});

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"_default_13dw2_9 _badge_13dw2_1\\"><span class=\\"_size-large_9dlpz_14 _bold_9dlpz_1\\" style=\\"line-height: 1;\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></span></span>"`;
+
+exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"_secondary_13dw2_16 _badge_13dw2_1\\"><span class=\\"_size-medium_9dlpz_19 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></span></span>"`;
+
+exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"_default_13dw2_9 _badge_13dw2_1\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></span></span>"`;