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

refactor(admin): replace window.confirm with ConfirmService in admin user delete

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-12 14:04:09 +02:00
parent d4ead08c17
commit 0d1401ce4f
3 changed files with 117 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts
View File

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import TranscriptionEditView from './TranscriptionEditView.svelte';
import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
afterEach(cleanup);
@@ -24,17 +25,23 @@ const block2 = {
version: 0
};
function renderView(overrides: Record<string, unknown> = {}) {
return render(TranscriptionEditView, {
documentId: 'doc-1',
blocks: [block1, block2],
canComment: true,
currentUserId: 'user-1',
onBlockFocus: vi.fn(),
onSaveBlock: vi.fn(),
onDeleteBlock: vi.fn(),
...overrides
});
function renderView(overrides: Record<string, unknown> = {}, service = createConfirmService()) {
return {
...render(TranscriptionEditView, {
props: {
documentId: 'doc-1',
blocks: [block1, block2],
canComment: true,
currentUserId: 'user-1',
onBlockFocus: vi.fn(),
onSaveBlock: vi.fn(),
onDeleteBlock: vi.fn(),
...overrides
},
context: new Map([[CONFIRM_KEY, service]])
}),
service
};
}
describe('TranscriptionEditView — rendering', () => {
@@ -200,25 +207,27 @@ describe('TranscriptionEditView — flush on blur', () => {
describe('TranscriptionEditView — delete block', () => {
it('calls onDeleteBlock with correct blockId when delete is confirmed', async () => {
const onDeleteBlock = vi.fn().mockResolvedValue(undefined);
vi.spyOn(window, 'confirm').mockReturnValue(true);
renderView({ onDeleteBlock });
const { service } = renderView({ onDeleteBlock });
const deleteBtn = page.getByRole('button', { name: 'Löschen' }).first();
await deleteBtn.click();
const deleteBtn = document.querySelector('button[aria-label="Löschen"]') as HTMLButtonElement;
deleteBtn.click();
await vi.waitFor(() => expect(service.options).not.toBeNull());
service.settle(true);
await vi.waitFor(() => expect(service.options).toBeNull());
expect(onDeleteBlock).toHaveBeenCalledWith('b1');
vi.restoreAllMocks();
});
it('does not call onDeleteBlock when deletion is cancelled', async () => {
const onDeleteBlock = vi.fn();
vi.spyOn(window, 'confirm').mockReturnValue(false);
renderView({ onDeleteBlock });
const { service } = renderView({ onDeleteBlock });
const deleteBtn = page.getByRole('button', { name: 'Löschen' }).first();
await deleteBtn.click();
const deleteBtn = document.querySelector('button[aria-label="Löschen"]') as HTMLButtonElement;
deleteBtn.click();
await vi.waitFor(() => expect(service.options).not.toBeNull());
service.settle(false);
await vi.waitFor(() => expect(service.options).toBeNull());
expect(onDeleteBlock).not.toHaveBeenCalled();
vi.restoreAllMocks();
});
});

28
frontend/src/routes/admin/users/[id]/+page.svelte
View File

@@ -2,17 +2,29 @@
import { enhance } from '$app/forms';
import { beforeNavigate, goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import { getConfirmService } from '$lib/services/confirm.svelte.js';
import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte';
let { data, form } = $props();
const { confirm } = getConfirmService();
const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
let isDirty = $state(false);
let showUnsavedWarning = $state(false);
let discardTarget: string | null = $state(null);
let deleteFormEl = $state<HTMLFormElement | null>(null);
async function handleDelete() {
const confirmed = await confirm({
title: m.admin_user_delete_confirm({ username: data.editUser.username }),
destructive: true
});
if (confirmed) deleteFormEl!.requestSubmit();
}
beforeNavigate(({ cancel, to }) => {
if (isDirty) {
@@ -51,20 +63,10 @@ $effect(() => {
<h2 class="flex-1 font-sans text-sm font-bold text-ink">
{m.admin_user_edit_heading({ username: data.editUser.username })}
</h2>
<form
method="POST"
action="?/delete"
use:enhance={({ cancel }) => {
if (!confirm(m.admin_user_delete_confirm({ username: data.editUser.username }))) {
cancel();
}
return async ({ update }) => {
await update();
};
}}
>
<form bind:this={deleteFormEl} method="POST" action="?/delete" use:enhance>
<button
type="submit"
type="button"
onclick={handleDelete}
class="rounded-sm border border-red-200 bg-red-50 px-3 py-1 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400"
>
{m.btn_delete()}…

93
frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
View File

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import Page from './+page.svelte';
import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
@@ -35,54 +36,65 @@ const baseData = {
groups
};
type PageProps = { data: typeof baseData; form: Record<string, unknown> | null };
function renderPage(props: PageProps) {
const service = createConfirmService();
const result = render(Page, {
props,
context: new Map([[CONFIRM_KEY, service]])
});
return { ...result, service };
}
afterEach(cleanup);
// ─── Rendering ────────────────────────────────────────────────────────────────
describe('Admin edit user page – rendering', () => {
it('renders the heading with username', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByText(/Benutzer bearbeiten: max/i)).toBeInTheDocument();
});
it('pre-fills first name from editUser data', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const input = document.querySelector<HTMLInputElement>('input[name="firstName"]');
expect(input?.value).toBe('Max');
});
it('pre-fills last name from editUser data', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const input = document.querySelector<HTMLInputElement>('input[name="lastName"]');
expect(input?.value).toBe('Mustermann');
});
it('pre-fills email from editUser data', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const input = document.querySelector<HTMLInputElement>('input[name="email"]');
expect(input?.value).toBe('max@example.com');
});
it('pre-fills birth date in German format (dd.mm.yyyy)', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const input = document.querySelector<HTMLInputElement>('input[placeholder="TT.MM.JJJJ"]');
expect(input?.value).toBe('22.03.1985');
});
it('pre-fills contact field', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const textarea = document.querySelector<HTMLTextAreaElement>('textarea[name="contact"]');
expect(textarea?.value).toBe('Tel: 0123');
});
it('renders group checkboxes', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByText('Editoren')).toBeInTheDocument();
await expect.element(page.getByText('Admins')).toBeInTheDocument();
});
it('pre-selects the groups the user already belongs to', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const checkbox = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="groupIds"][value="g1"]'
);
@@ -90,7 +102,7 @@ describe('Admin edit user page – rendering', () => {
});
it('does not pre-select groups the user does not belong to', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const checkbox = document.querySelector<HTMLInputElement>(
'input[type="checkbox"][name="groupIds"][value="g2"]'
);
@@ -98,7 +110,7 @@ describe('Admin edit user page – rendering', () => {
});
it('includes pre-selected group ids in FormData at submit time (guards against groupIds being empty)', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const form = document.querySelector<HTMLFormElement>('form#edit-user-form')!;
const formData = new FormData(form);
expect(formData.getAll('groupIds')).toContain('g1');
@@ -106,7 +118,7 @@ describe('Admin edit user page – rendering', () => {
});
it('password fields are empty by default', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const passwordInputs = document.querySelectorAll<HTMLInputElement>('input[type="password"]');
passwordInputs.forEach((input) => {
expect(input.value).toBe('');
@@ -114,14 +126,14 @@ describe('Admin edit user page – rendering', () => {
});
it('cancel link points to /admin/users', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect
.element(page.getByRole('link', { name: /Abbrechen/i }))
.toHaveAttribute('href', '/admin/users');
});
it('renders the save button', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
});
});
@@ -130,33 +142,72 @@ describe('Admin edit user page – rendering', () => {
describe('Admin edit user page – feedback', () => {
it('shows success message when form.success is true', async () => {
render(Page, { data: baseData, form: { success: true } });
renderPage({ data: baseData, form: { success: true } });
await expect.element(page.getByText(/Änderungen gespeichert/i)).toBeInTheDocument();
});
it('shows error message when form.error is set', async () => {
render(Page, { data: baseData, form: { error: 'Ungültige Eingabe.' } });
renderPage({ data: baseData, form: { error: 'Ungültige Eingabe.' } });
await expect.element(page.getByText('Ungültige Eingabe.')).toBeInTheDocument();
});
it('does not show success message when form is null', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
});
});
// ─── Delete confirmation ──────────────────────────────────────────────────────
describe('Admin edit user page – delete confirmation', () => {
it('delete button has type=button (does not submit natively)', async () => {
renderPage({ data: baseData, form: null });
const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
expect(deleteBtn.type).toBe('button');
});
it('does not submit delete form when user cancels', async () => {
const { service } = renderPage({ data: baseData, form: null });
const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
deleteBtn.click();
await vi.waitFor(() => expect(service.options).not.toBeNull());
service.settle(false);
await vi.waitFor(() => expect(service.options).toBeNull());
expect(requestSubmit).not.toHaveBeenCalled();
});
it('submits delete form when user confirms', async () => {
const { service } = renderPage({ data: baseData, form: null });
const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
deleteBtn.click();
await vi.waitFor(() => expect(service.options).not.toBeNull());
service.settle(true);
await vi.waitFor(() => expect(service.options).toBeNull());
expect(requestSubmit).toHaveBeenCalledOnce();
});
});
// ─── Unsaved-changes guard ────────────────────────────────────────────────────
describe('Admin edit user page – unsaved-changes guard', () => {
beforeEach(() => vi.clearAllMocks());
it('does not show unsaved warning initially', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
});
it('cancels navigation and shows warning when form is dirty', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
document
@@ -171,7 +222,7 @@ describe('Admin edit user page – unsaved-changes guard', () => {
});
it('does not cancel navigation when form is clean', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
const cancel = vi.fn();
@@ -181,7 +232,7 @@ describe('Admin edit user page – unsaved-changes guard', () => {
});
it('discard button calls goto with the target URL', async () => {
render(Page, { data: baseData, form: null });
renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
document
@@ -196,7 +247,7 @@ describe('Admin edit user page – unsaved-changes guard', () => {
});
it('clears dirty state when form saves successfully', async () => {
const { rerender } = render(Page, { data: baseData, form: null });
const { rerender } = renderPage({ data: baseData, form: null });
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
document