feat(notifications) : add profile pictures and guide previews

2026-10-12 23:58:58 +07:00
parent 05350e7aab
commit 28517d9b29
10 changed files with 178 additions and 16 deletions
@@ -0,0 +1,57 @@
+// @vitest-environment happy-dom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/lib/auth/client', () => ({ authClient: { useSession: () => ({ data: { user: { id: 'reader' } } }) } }));
+vi.mock('./push-client', () => ({ useSitePushDisabled: () => false }));
+
+import { NotificationBell, NotificationProvider } from './notification-bell';
+
+let container: HTMLDivElement;
+let root: Root;
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  vi.stubGlobal('EventSource', class { addEventListener() {} close() {} });
+  vi.spyOn(HTMLImageElement.prototype, 'complete', 'get').mockReturnValue(true);
+  vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(64);
+  const item = { body: 'A comment', readAt: '2026-10-12T00:00:00Z', authorName: 'Gunshin - dev', authorImage: 'https://profile.example/author.png', imageUrl: null };
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => ({ unread: 0, nextCursor: null, items: [
+    { ...item, id: 'comment', title: 'Gunshin - dev แสดงความคิดเห็นใหม่ในไกด์ Lohen', url: '/admin/comments?comment=comment' },
+    { ...item, id: 'reply', title: 'Reader ตอบกลับความคิดเห็นของคุณ', url: '/lohen/comment?reply=reply', authorName: 'Reader', authorImage: null },
+    { ...item, id: 'commission', title: 'Commission message', url: '/commission/tickets/test', authorName: null, authorImage: null },
+    { ...item, id: 'guide', title: 'มีไกด์ใหม่แล้ว!', body: 'คุณสามารถดูไกด์ Lohen ได้แล้ว!', url: '/lohen', authorName: null, authorImage: null, imageUrl: 'https://buzz-cdn.astrxl.dev/guides/lohen.png' },
+  ] }) }));
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('comment profile pictures in the notification bell', () => {
+  it.each([false, true])('shows the avatar or its initials when the image is broken: %s', async (broken) => {
+    if (broken) vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(0);
+    await act(async () => root.render(<NotificationProvider><NotificationBell /></NotificationProvider>));
+    await act(async () => container.querySelector<HTMLButtonElement>('button[aria-label="การแจ้งเตือน"]')!.click());
+    const comment = document.querySelector<HTMLAnchorElement>('a[href="/admin/comments?comment=comment"]');
+    expect(comment).not.toBeNull();
+    expect(comment?.textContent).toContain('แสดงความคิดเห็นใหม่ในไกด์ Lohen');
+    if (broken) expect(comment?.querySelector('[data-slot="avatar-fallback"]')?.textContent).toBe('Gu');
+    else expect(comment?.querySelector('img')?.getAttribute('src')).toBe('https://profile.example/author.png');
+    expect(document.querySelector('a[href="/lohen/comment?reply=reply"] [data-slot="avatar-fallback"]')?.textContent).toBe('Re');
+    expect(document.querySelector('a[href="/commission/tickets/test"] [data-slot="avatar"]')).toBeNull();
+    const guide = document.querySelector('a[href="/lohen"]');
+    expect(guide?.querySelector('[data-slot="avatar"]')).toBeNull();
+    const overview = guide?.querySelector('img');
+    expect(overview?.getAttribute('width')).toBe('64');
+    expect(overview?.getAttribute('height')).toBe('64');
+    expect(overview?.classList.contains('rounded-full')).toBe(false);
+    expect(overview?.getAttribute('src')).toContain('lohen.png');
+    expect(guide?.firstElementChild).toBe(overview);
+  });
+});