diff --git a/frontend/src/lib/document/DocumentStatusChip.svelte.test.ts b/frontend/src/lib/document/DocumentStatusChip.svelte.test.ts
new file mode 100644
index 00000000..bb0ed12e
--- /dev/null
+++ b/frontend/src/lib/document/DocumentStatusChip.svelte.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import DocumentStatusChip from './DocumentStatusChip.svelte';
+
+afterEach(cleanup);
+
+describe('DocumentStatusChip', () => {
+	it('renders the placeholder label and gray dot for PLACEHOLDER status', async () => {
+		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
+
+		const dot = await page.getByTitle('Platzhalter').element();
+		expect(dot.classList.contains('bg-gray-400')).toBe(true);
+	});
+
+	it('renders the uploaded label and emerald dot for UPLOADED status', async () => {
+		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
+
+		const dot = await page.getByTitle('Hochgeladen').element();
+		expect(dot.classList.contains('bg-emerald-500')).toBe(true);
+	});
+
+	it('renders the transcribed label and blue dot for TRANSCRIBED status', async () => {
+		render(DocumentStatusChip, { props: { status: 'TRANSCRIBED' } });
+
+		const dot = await page.getByTitle('Transkribiert').element();
+		expect(dot.classList.contains('bg-blue-400')).toBe(true);
+	});
+
+	it('renders the reviewed label and amber dot for REVIEWED status', async () => {
+		render(DocumentStatusChip, { props: { status: 'REVIEWED' } });
+
+		const dot = await page.getByTitle('Geprüft').element();
+		expect(dot.classList.contains('bg-amber-400')).toBe(true);
+	});
+
+	it('renders the archived label and dark emerald dot for ARCHIVED status', async () => {
+		render(DocumentStatusChip, { props: { status: 'ARCHIVED' } });
+
+		const dot = await page.getByTitle('Archiviert').element();
+		expect(dot.classList.contains('bg-emerald-600')).toBe(true);
+	});
+
+	it('exposes the status as both a title tooltip and an aria-label', async () => {
+		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
+
+		const dot = await page.getByTitle('Hochgeladen').element();
+		expect(dot.getAttribute('aria-label')).toBe('Hochgeladen');
+	});
+});