From 483ddc728da9e8d8d832a82ee4b3b0429e24217f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jan 2026 21:26:48 +0100
Subject: [PATCH] test(frontend): verify FormField generates unique IDs across
 instances

Mount multiple FormField components within the same Vue app to properly
test that useId() generates unique IDs for each instance. This validates
that labels correctly link to their respective inputs.
---
 .../src/components/input/FormField.test.ts    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/input/FormField.test.ts b/frontend/src/components/input/FormField.test.ts
index 65e2b209f..649bda27a 100644
--- a/frontend/src/components/input/FormField.test.ts
+++ b/frontend/src/components/input/FormField.test.ts
@@ -136,14 +136,30 @@ describe('FormField', () => {
 	})
 
 	it('generates unique id when not provided', () => {
-		const wrapper = mount(FormField, {
-			props: {label: 'My Input'},
+		// Mount both FormFields in the same Vue app to test useId uniqueness
+		const wrapper = mount({
+			components: {FormField},
+			template: `
+				<div>
+					<FormField label="First Input" />
+					<FormField label="Second Input" />
+				</div>
+			`,
 		})
-		const input = wrapper.find('input')
-		const label = wrapper.find('label')
-		const inputId = input.attributes('id')
-		expect(inputId).toBeTruthy()
-		expect(label.attributes('for')).toBe(inputId)
+
+		const inputs = wrapper.findAll('input')
+		const labels = wrapper.findAll('label')
+
+		const id1 = inputs[0].attributes('id')
+		const id2 = inputs[1].attributes('id')
+
+		expect(id1).toBeTruthy()
+		expect(id2).toBeTruthy()
+		expect(id1).not.toBe(id2)
+
+		// Verify label linkage for both
+		expect(labels[0].attributes('for')).toBe(id1)
+		expect(labels[1].attributes('for')).toBe(id2)
 	})
 
 	it('links label to input via for attribute', () => {