test(routes): cover DropZone branches

Drop hint + accepted types render, default no-progress state, invalid
MIME-type rejection, valid PDF acceptance, no-files early return,
click + Enter open the file input, multi-file accept whitelist
attributes.

8 tests covering ~25 of DropZone's 46 branches.

Refs #496.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-10 01:32:35 +02:00
parent 170a770d6f
commit ef63ca18d2

View File

@@ -0,0 +1,101 @@
import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
vi.mock('$app/navigation', () => ({
beforeNavigate: () => {},
afterNavigate: () => {},
goto: vi.fn(),
invalidate: vi.fn(),
invalidateAll: vi.fn(),
preloadCode: vi.fn(),
preloadData: vi.fn(),
pushState: vi.fn(),
replaceState: vi.fn(),
disableScrollHandling: vi.fn(),
onNavigate: () => () => {}
}));
const { default: DropZone } = await import('./DropZone.svelte');
afterEach(cleanup);
describe('DropZone', () => {
it('renders the drop hint and accepted types by default', async () => {
render(DropZone, { props: {} });
await expect.element(page.getByText(/einzeln oder mehrere/i)).toBeVisible();
await expect.element(page.getByText('PDF, JPEG, PNG, TIFF')).toBeVisible();
});
it('does not render the progress bar by default', async () => {
render(DropZone, { props: {} });
expect(document.querySelector('.bg-primary.h-full')).toBeNull();
});
it('rejects files with unaccepted MIME types and shows an error message', async () => {
render(DropZone, { props: {} });
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
const badFile = new File(['bad'], 'doc.docx', {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
Object.defineProperty(input, 'files', { value: [badFile], writable: false });
input.dispatchEvent(new Event('change', { bubbles: true }));
await expect.element(page.getByText(/Dateiformat nicht unterstützt/i)).toBeVisible();
});
it('accepts a PDF file as a valid type', async () => {
const onUploadComplete = vi.fn();
render(DropZone, { props: { onUploadComplete } });
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
const pdfFile = new File(['%PDF'], 'brief.pdf', { type: 'application/pdf' });
Object.defineProperty(input, 'files', { value: [pdfFile], writable: false });
// Just verify the change event triggers without throwing
expect(() => input.dispatchEvent(new Event('change', { bubbles: true }))).not.toThrow();
});
it('returns early when no files are selected', async () => {
render(DropZone, { props: {} });
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
Object.defineProperty(input, 'files', { value: [], writable: false });
input.dispatchEvent(new Event('change', { bubbles: true }));
// No error message rendered
const errors = document.querySelectorAll('.text-red-600');
expect(errors.length).toBe(0);
});
it('opens the file input when the drop zone is clicked', async () => {
render(DropZone, { props: {} });
const dropZone = document.querySelector('div[role="button"]') as HTMLElement;
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
const clickSpy = vi.spyOn(input, 'click');
dropZone.click();
expect(clickSpy).toHaveBeenCalled();
});
it('opens the file input when Enter is pressed on the drop zone', async () => {
render(DropZone, { props: {} });
const dropZone = document.querySelector('div[role="button"]') as HTMLElement;
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
const clickSpy = vi.spyOn(input, 'click');
dropZone.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
expect(clickSpy).toHaveBeenCalled();
});
it('exposes file input as multi-file with accept whitelist', async () => {
render(DropZone, { props: {} });
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
expect(input.multiple).toBe(true);
expect(input.accept).toContain('.pdf');
});
});