marcel/familienarchiv
1
0
Fork 0
Code Issues 109 Pull Requests 2 Actions 1 Packages Projects Releases Wiki Activity

test(register): replace 8 setTimeout sleeps with vi.waitFor on reactive state changes

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-11 17:30:44 +02:00
parent c89b9a2d60
commit 4357eb4fac
1 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/routes/register/page.svelte.test.ts
View File

@@ -1,4 +1,4 @@
import { describe, it, expect, afterEach } from 'vitest'; import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte'; import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser'; import { page } from 'vitest/browser';
import RegisterPage from './+page.svelte'; import RegisterPage from './+page.svelte';
@@ -127,13 +127,10 @@ describe('register page', () => {
const toggle = pw.parentElement?.querySelector('button[type="button"]') as HTMLButtonElement; const toggle = pw.parentElement?.querySelector('button[type="button"]') as HTMLButtonElement;
toggle.click(); toggle.click();
await vi.waitFor(() => expect(pw.type).toBe('text'));
await new Promise((r) => setTimeout(r, 30));
expect(pw.type).toBe('text');
toggle.click(); toggle.click();
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => expect(pw.type).toBe('password'));
expect(pw.type).toBe('password');
}); });
it('toggles passwordConfirm visibility independently from password', async () => { it('toggles passwordConfirm visibility independently from password', async () => {
@@ -147,8 +144,7 @@ describe('register page', () => {
) as HTMLButtonElement; ) as HTMLButtonElement;
toggle.click(); toggle.click();
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => expect(confirm.type).toBe('text'));
expect(confirm.type).toBe('text');
}); });
it('shows the password length hint after typing a short password', async () => { it('shows the password length hint after typing a short password', async () => {
@@ -158,7 +154,6 @@ describe('register page', () => {
pw.value = 'abc'; pw.value = 'abc';
pw.dispatchEvent(new Event('input', { bubbles: true })); pw.dispatchEvent(new Event('input', { bubbles: true }));
await new Promise((r) => setTimeout(r, 30));
await expect.element(page.getByText(/mindestens 8 zeichen/i)).toBeVisible(); await expect.element(page.getByText(/mindestens 8 zeichen/i)).toBeVisible();
}); });
@@ -169,10 +164,9 @@ describe('register page', () => {
pw.value = 'longenoughpw'; pw.value = 'longenoughpw';
pw.dispatchEvent(new Event('input', { bubbles: true })); pw.dispatchEvent(new Event('input', { bubbles: true }));
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => {
// password OK hint shows up — find a green-700 text near password expect(document.querySelectorAll('.text-green-700').length).toBeGreaterThan(0);
const greens = document.querySelectorAll('.text-green-700'); });
expect(greens.length).toBeGreaterThan(0);
}); });
it('shows the password mismatch error when confirm differs from password', async () => { it('shows the password mismatch error when confirm differs from password', async () => {
@@ -185,9 +179,9 @@ describe('register page', () => {
confirm.value = 'differentpw'; confirm.value = 'differentpw';
confirm.dispatchEvent(new Event('input', { bubbles: true })); confirm.dispatchEvent(new Event('input', { bubbles: true }));
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => {
const reds = document.querySelectorAll('.text-red-600'); expect(document.querySelectorAll('.text-red-600').length).toBeGreaterThan(0);
expect(reds.length).toBeGreaterThan(0); });
}); });
it('shows the password match success when confirm equals password', async () => { it('shows the password match success when confirm equals password', async () => {
@@ -200,10 +194,10 @@ describe('register page', () => {
confirm.value = 'longenoughpw'; confirm.value = 'longenoughpw';
confirm.dispatchEvent(new Event('input', { bubbles: true })); confirm.dispatchEvent(new Event('input', { bubbles: true }));
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => {
// At least 2 green-700 elements (pw OK + match OK) // Both "pw OK" and "match OK" hints render with text-green-700.
const greens = document.querySelectorAll('.text-green-700'); expect(document.querySelectorAll('.text-green-700').length).toBeGreaterThanOrEqual(2);
expect(greens.length).toBeGreaterThanOrEqual(2); });
}); });
it('renders the form error from the form prop', async () => { it('renders the form error from the form prop', async () => {
@@ -222,7 +216,6 @@ describe('register page', () => {
expect(cb.checked).toBe(true); expect(cb.checked).toBe(true);
cb.click(); cb.click();
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => expect(cb.checked).toBe(false));
expect(cb.checked).toBe(false);
}); });
}); });