frontend/src/lib/notification/NotificationDropdown.svelte.test.ts

@@ -168,4 +168,49 @@ describe('NotificationDropdown', () => {
 
 		expect(onClose).toHaveBeenCalledOnce();
 	});
+
+	it('renders MENTION items with the mention verb text', async () => {
+		render(NotificationDropdown, {
+			props: {
+				notifications: [makeNotification({ id: 'm1', type: 'MENTION', actorName: 'Anna' })],
+				onMarkRead: () => {},
+				onMarkAllRead: () => {},
+				onClose: () => {}
+			}
+		});
+
+		expect(document.body.textContent).toMatch(/erwähnt|mention/i);
+	});
+
+	it('renders REPLY items with the reply glyph', async () => {
+		render(NotificationDropdown, {
+			props: {
+				notifications: [makeNotification({ id: 'r1', type: 'REPLY', actorName: 'Bert' })],
+				onMarkRead: () => {},
+				onMarkAllRead: () => {},
+				onClose: () => {}
+			}
+		});
+
+		// Reply uses the curved-arrow glyph
+		expect(document.body.textContent).toMatch(/↩|reply|geantwortet/i);
+	});
+
+	it('renders multiple notifications in order', async () => {
+		render(NotificationDropdown, {
+			props: {
+				notifications: [
+					makeNotification({ id: 'n1', actorName: 'First' }),
+					makeNotification({ id: 'n2', actorName: 'Second' })
+				],
+				onMarkRead: () => {},
+				onMarkAllRead: () => {},
+				onClose: () => {}
+			}
+		});
+
+		const items = document.querySelectorAll('button[type="button"]');
+		// At least 2 items + mark-all button
+		expect(items.length).toBeGreaterThanOrEqual(2);
+	});
 });