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:
101
frontend/src/routes/DropZone.svelte.test.ts
Normal file
101
frontend/src/routes/DropZone.svelte.test.ts
Normal 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');
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user