From 873d66865321c192c78934dbbf7af881af6817ef Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 18 May 2026 22:32:07 +0200
Subject: [PATCH] test(login): add browser component test for rate-limited
 login UI state

Renders LoginPage with form.rateLimited=true and asserts that the
role="alert" div (clock icon + error message) is visible in the browser.
Previously only the form action's rateLimited=true return value was tested;
now the rendered UI is also verified.

Addresses Sara Concern 4 / Elicit open question from PR #617 review.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/login/page.svelte.test.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/routes/login/page.svelte.test.ts b/frontend/src/routes/login/page.svelte.test.ts
index 88d05706..dd383710 100644
--- a/frontend/src/routes/login/page.svelte.test.ts
+++ b/frontend/src/routes/login/page.svelte.test.ts
@@ -70,4 +70,16 @@ describe('login page', () => {
 			.element(page.getByRole('link', { name: /passwort vergessen/i }))
 			.toHaveAttribute('href', '/forgot-password');
 	});
+
+	it('shows rate-limit alert with clock icon when rateLimited is true', async () => {
+		render(LoginPage, {
+			props: {
+				data: { registered: false },
+				form: { error: 'Zu viele Anmeldeversuche.', rateLimited: true }
+			}
+		});
+
+		await expect.element(page.getByRole('alert')).toBeVisible();
+		await expect.element(page.getByText('Zu viele Anmeldeversuche.')).toBeVisible();
+	});
 });