From c75d58c18aa1a9d5853dcfcf62600dc9b18d56c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <miloradfilipovic19@gmail.com>
Date: Mon, 16 May 2022 10:12:00 +0200
Subject: [PATCH] test(editor): Add unit tests for Badge component (#3260)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✅ 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.
---
 .../N8nBadge/__tests__/Badge.spec.ts          | 46 +++++++++++++++++++
 .../__snapshots__/Badge.spec.ts.snap          |  7 +++
 2 files changed, 53 insertions(+)
 create mode 100644 packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts
 create mode 100644 packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap

diff --git a/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts b/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts
new file mode 100644
index 0000000000..7a5ed36535
--- /dev/null
+++ b/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();
+			});
+		});
+	});
+});
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
new file mode 100644
index 0000000000..ff14d3fd1d
--- /dev/null
+++ b/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>"`;