@tuturuuu/ui 0.9.0 → 0.11.0

package/src/hooks/__tests__/useBoardPresence.test.tsx

@@ -0,0 +1,191 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook } from '@testing-library/react';
+import { getCurrentUserProfile } from '@tuturuuu/internal-api/users';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useBoardPresence } from '../useBoardPresence';
+
+type PresenceListener = () => void;
+
+type MockChannel = {
+  on: ReturnType<typeof vi.fn>;
+  presenceState: ReturnType<typeof vi.fn>;
+  subscribe: ReturnType<typeof vi.fn>;
+  track: ReturnType<typeof vi.fn>;
+  untrack: ReturnType<typeof vi.fn>;
+};
+
+type MockSupabaseClient = {
+  auth: {
+    getUser: ReturnType<typeof vi.fn>;
+  };
+  channel: ReturnType<typeof vi.fn>;
+  removeChannel: ReturnType<typeof vi.fn>;
+};
+
+type MockCreateClientFn = {
+  (): MockSupabaseClient;
+  mockReturnValue: (value: MockSupabaseClient) => void;
+};
+
+vi.mock('@tuturuuu/supabase/next/client', () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  getCurrentUserProfile: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/utils/constants', () => ({
+  DEV_MODE: false,
+}));
+
+describe('useBoardPresence', () => {
+  let mockChannel: MockChannel;
+  let mockClient: MockSupabaseClient;
+  let presenceListeners: Map<string, PresenceListener>;
+
+  beforeEach(() => {
+    presenceListeners = new Map();
+
+    mockChannel = {
+      on: vi.fn(
+        (
+          type: string,
+          config: { event?: string },
+          callback: PresenceListener
+        ) => {
+          if (type === 'presence' && config.event) {
+            presenceListeners.set(config.event, callback);
+          }
+          return mockChannel;
+        }
+      ),
+      presenceState: vi.fn(() => ({})),
+      subscribe: vi.fn((callback?: (status: string) => void) => {
+        callback?.('SUBSCRIBED');
+        return mockChannel;
+      }),
+      track: vi.fn(() => Promise.resolve('ok')),
+      untrack: vi.fn(() => Promise.resolve('ok')),
+    };
+
+    mockClient = {
+      auth: {
+        getUser: vi.fn(() =>
+          Promise.resolve({
+            data: {
+              user: {
+                email: 'ada.auth@example.com',
+                id: 'user-1',
+              },
+            },
+          })
+        ),
+      },
+      channel: vi.fn(() => mockChannel),
+      removeChannel: vi.fn(() => Promise.resolve()),
+    };
+
+    (createClient as unknown as MockCreateClientFn).mockReturnValue(mockClient);
+    vi.mocked(getCurrentUserProfile).mockResolvedValue({
+      avatar_url: 'https://example.com/ada.png',
+      created_at: '2026-01-01T00:00:00.000Z',
+      default_workspace_id: 'user-1',
+      display_name: 'Ada Lovelace',
+      email: 'ada@example.com',
+      full_name: 'Ada Lovelace',
+      id: 'user-1',
+      new_email: null,
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('tracks sanitized profile data on a private board realtime presence channel', async () => {
+    const { result } = renderHook(() => useBoardPresence('board-1'));
+
+    await act(async () => {
+      await (result.current.updateLocation(
+        { boardId: 'board-1', type: 'board' },
+        { listStatusFilter: 'active' }
+      ) as unknown as Promise<void>);
+    });
+
+    expect(mockClient.channel).toHaveBeenCalledWith('board-realtime-board-1', {
+      config: {
+        presence: {
+          enabled: true,
+          key: 'user-1',
+        },
+        private: true,
+      },
+    });
+    expect(mockChannel.track).toHaveBeenCalledWith(
+      expect.objectContaining({
+        away: false,
+        location: { boardId: 'board-1', type: 'board' },
+        metadata: { listStatusFilter: 'active' },
+        session_id: expect.any(String),
+        user: {
+          avatar_url: 'https://example.com/ada.png',
+          display_name: 'Ada Lovelace',
+          email: 'ada@example.com',
+          id: 'user-1',
+        },
+      })
+    );
+  });
+
+  it('does not create a channel while disabled', async () => {
+    const { result } = renderHook(() =>
+      useBoardPresence('board-1', { enabled: false })
+    );
+
+    await act(async () => {
+      await (result.current.updateLocation({
+        boardId: 'board-1',
+        type: 'board',
+      }) as unknown as Promise<void>);
+    });
+
+    expect(mockClient.channel).not.toHaveBeenCalled();
+    expect(mockChannel.track).not.toHaveBeenCalled();
+  });
+
+  it('exposes board viewers from presence sync events', async () => {
+    const viewerPresence = {
+      location: { boardId: 'board-1', type: 'board' as const },
+      online_at: '2026-01-01T00:00:00.000Z',
+      session_id: 'session-2',
+      user: {
+        avatar_url: null,
+        display_name: 'Guest Reviewer',
+        email: 'guest@example.com',
+        id: 'user-2',
+      },
+    };
+    mockChannel.presenceState.mockReturnValue({
+      'user-2': [viewerPresence],
+    });
+    const { result } = renderHook(() => useBoardPresence('board-1'));
+
+    await act(async () => {
+      await (result.current.updateLocation({
+        boardId: 'board-1',
+        type: 'board',
+      }) as unknown as Promise<void>);
+    });
+
+    act(() => {
+      presenceListeners.get('sync')?.();
+    });
+
+    expect(result.current.getBoardViewers('board-1')).toEqual([viewerPresence]);
+  });
+});

package/src/hooks/__tests__/useBoardRealtime.test.tsx

@@ -78,6 +78,7 @@ describe('useBoardRealtime', () => {
     subscribe: ReturnType<typeof vi.fn>;
     send: ReturnType<typeof vi.fn>;
   };
+  let mockFrom: ReturnType<typeof vi.fn>;
   let mockRemoveChannel: ReturnType<typeof vi.fn>;
   let broadcastListeners: Map<string, BroadcastListener>;
   let subscribeCallback: ((status: string, err?: unknown) => void) | undefined;
@@ -142,92 +143,14 @@ describe('useBoardRealtime', () => {
     };
 
     mockRemoveChannel = vi.fn();
+    mockFrom = vi.fn();
 
     const mockCreateClient = createClient as unknown as MockCreateClientFn;
 
     mockCreateClient.mockReturnValue({
       channel: vi.fn(() => mockChannel),
       removeChannel: mockRemoveChannel,
-      from: vi.fn(() => ({
-        select: vi.fn(() => ({
-          in: vi.fn(() =>
-            Promise.resolve({
-              data: [
-                {
-                  id: 'task-1',
-                  assignees: [
-                    {
-                      user: {
-                        id: 'u-1',
-                        display_name: 'User 1',
-                        avatar_url: null,
-                      },
-                    },
-                  ],
-                  labels: [
-                    {
-                      label: {
-                        id: 'l-1',
-                        name: 'Bug',
-                        color: 'red',
-                        created_at: '2025-01-01',
-                      },
-                    },
-                  ],
-                  projects: [
-                    {
-                      project: {
-                        id: 'p-1',
-                        name: 'Project 1',
-                        status: 'active',
-                      },
-                    },
-                  ],
-                },
-              ],
-              error: null,
-            })
-          ),
-          eq: vi.fn(() => ({
-            single: vi.fn(() =>
-              Promise.resolve({
-                data: {
-                  id: 'task-1',
-                  assignees: [
-                    {
-                      user: {
-                        id: 'u-1',
-                        display_name: 'User 1',
-                        avatar_url: null,
-                      },
-                    },
-                  ],
-                  labels: [
-                    {
-                      label: {
-                        id: 'l-1',
-                        name: 'Bug',
-                        color: 'red',
-                        created_at: '2025-01-01',
-                      },
-                    },
-                  ],
-                  projects: [
-                    {
-                      project: {
-                        id: 'p-1',
-                        name: 'Project 1',
-                        status: 'active',
-                      },
-                    },
-                  ],
-                },
-                error: null,
-              })
-            ),
-          })),
-        })),
-      })),
+      from: mockFrom,
     });
 
     vi.clearAllMocks();
@@ -835,11 +758,12 @@ describe('useBoardRealtime', () => {
   });
 
   describe('task:relations-changed event', () => {
-    it('should fetch relations from DB and merge into cache', async () => {
+    it('reconciles relation-bearing queries without refetching visible board caches', async () => {
       queryClient.setQueryData(
         ['tasks', 'board-1'],
         [{ ...mockTaskWithRelations, id: 'task-1' }]
       );
+      const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
 
       renderHook(() => useBoardRealtime('board-1', { enabled: true }), {
         wrapper,
@@ -847,31 +771,29 @@ describe('useBoardRealtime', () => {
 
       const listener = broadcastListeners.get('task:relations-changed')!;
 
-      // Fire the listener — it debounces for 150ms before fetching
+      // Fire the listener — it debounces for 150ms before invalidating caches.
       await act(async () => {
         listener({ payload: { taskId: 'task-1' } });
       });
 
-      // Advance past the 150ms receiver debounce and flush microtasks
+      // Advance past the 150ms receiver debounce.
       await act(async () => {
         vi.advanceTimersByTime(200);
-        // Allow the async fetch to resolve
-        await Promise.resolve();
-        await Promise.resolve();
       });
 
-      const cachedTasks = queryClient.getQueryData<Task[]>([
-        'tasks',
-        'board-1',
-      ]);
-      const task = cachedTasks?.[0];
-      // The mock returns one assignee, one label, one project
-      expect(task?.assignees).toHaveLength(1);
-      expect(task?.labels).toHaveLength(1);
-      expect(task?.projects).toHaveLength(1);
+      expect(mockFrom).not.toHaveBeenCalled();
+      expect(invalidateQueriesSpy).not.toHaveBeenCalledWith({
+        queryKey: ['tasks', 'board-1'],
+      });
+      expect(invalidateQueriesSpy).not.toHaveBeenCalledWith({
+        queryKey: ['tasks-full', 'board-1'],
+      });
+      expect(invalidateQueriesSpy).toHaveBeenCalledWith({
+        queryKey: ['task-list-counts', 'board-1'],
+      });
     });
 
-    it('should merge fetched relations into the full task cache when it exists', async () => {
+    it('keeps the full task cache warm when relations change', async () => {
       queryClient.setQueryData(
         ['tasks', 'board-1'],
         [{ ...mockTaskWithRelations, id: 'task-1' }]
@@ -880,6 +802,7 @@ describe('useBoardRealtime', () => {
         ['tasks-full', 'board-1'],
         [{ ...mockTaskWithRelations, id: 'task-1' }]
       );
+      const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
 
       renderHook(() => useBoardRealtime('board-1', { enabled: true }), {
         wrapper,
@@ -893,57 +816,14 @@ describe('useBoardRealtime', () => {
 
       await act(async () => {
         vi.advanceTimersByTime(200);
-        await Promise.resolve();
-        await Promise.resolve();
       });
 
-      const task = queryClient.getQueryData<Task[]>([
-        'tasks-full',
-        'board-1',
-      ])?.[0];
-      expect(task?.assignees).toHaveLength(1);
-      expect(task?.labels).toHaveLength(1);
-      expect(task?.projects).toHaveLength(1);
-    });
-
-    it('should handle DB fetch errors gracefully', async () => {
-      queryClient.setQueryData(['tasks', 'board-1'], [mockTaskWithRelations]);
-
-      // Mock a batched fetch error from the .in(...) branch.
-      (createClient as unknown as MockCreateClientFn).mockReturnValue({
-        channel: vi.fn(() => mockChannel),
-        removeChannel: mockRemoveChannel,
-        from: vi.fn(() => ({
-          select: vi.fn(() => ({
-            in: vi.fn(() =>
-              Promise.resolve({ data: null, error: { message: 'Not found' } })
-            ),
-          })),
-        })),
-      });
-
-      renderHook(() => useBoardRealtime('board-1', { enabled: true }), {
-        wrapper,
+      expect(invalidateQueriesSpy).not.toHaveBeenCalledWith({
+        queryKey: ['tasks-full', 'board-1'],
       });
-
-      const listener = broadcastListeners.get('task:relations-changed')!;
-
-      await act(async () => {
-        listener({ payload: { taskId: 'task-1' } });
-      });
-
-      await act(async () => {
-        vi.advanceTimersByTime(150);
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Cache should remain unchanged
-      const cachedTasks = queryClient.getQueryData<Task[]>([
-        'tasks',
-        'board-1',
-      ]);
-      expect(cachedTasks?.[0]?.assignees).toEqual([]);
+      expect(
+        queryClient.getQueryData<Task[]>(['tasks-full', 'board-1'])?.[0]?.id
+      ).toBe('task-1');
     });
 
     it('calls onTaskRelationsChange for Supabase relation broadcasts', async () => {