@tuturuuu/ui 0.7.0 → 0.9.0

package/src/hooks/__tests__/use-calendar-sync.test.tsx

@@ -0,0 +1,446 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CalendarSyncProvider, useCalendarSync } from '../use-calendar-sync';
+
+vi.mock('../../components/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+const createEvent = (
+  id: string,
+  overrides: Partial<CalendarEvent> = {}
+): CalendarEvent => ({
+  id,
+  title: 'Planning',
+  description: '',
+  start_at: '2026-06-22T09:00:00.000Z',
+  end_at: '2026-06-22T10:00:00.000Z',
+  color: 'BLUE',
+  ws_id: 'workspace-1',
+  ...overrides,
+});
+
+function renderCalendarSync({
+  externalEvents,
+}: {
+  externalEvents?: CalendarEvent[];
+} = {}) {
+  const queryClient = createQueryClient();
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <CalendarSyncProvider externalEvents={externalEvents} wsId="workspace-1">
+        {children}
+      </CalendarSyncProvider>
+    </QueryClientProvider>
+  );
+
+  return renderHook(() => useCalendarSync(), { wrapper });
+}
+
+function mockCalendarFetch(events: CalendarEvent[]) {
+  return vi.fn(async (input: RequestInfo | URL) => {
+    const url = String(input);
+
+    if (url.includes('/calendar/habit-events')) {
+      return {
+        ok: true,
+        json: async () => ({
+          completedHabitEventIds: [],
+          habitEventIds: [],
+        }),
+      } as Response;
+    }
+
+    if (url.includes('/calendar/events')) {
+      return {
+        ok: true,
+        json: async () => ({
+          count: events.length,
+          data: events,
+        }),
+      } as Response;
+    }
+
+    throw new Error(`Unexpected fetch ${url}`);
+  });
+}
+
+function createWeekDates(startIsoDate: string) {
+  return Array.from({ length: 7 }, (_, index) => {
+    const date = new Date(`${startIsoDate}T00:00:00.000Z`);
+    date.setUTCDate(date.getUTCDate() + index);
+    return date;
+  });
+}
+
+function mockCalendarFetchByWeek(
+  eventsByWeekStart: Record<string, CalendarEvent[]>
+) {
+  return vi.fn(async (input: RequestInfo | URL) => {
+    const url = new URL(String(input), 'http://localhost');
+
+    if (url.pathname.includes('/calendar/habit-events')) {
+      return {
+        ok: true,
+        json: async () => ({
+          completedHabitEventIds: [],
+          habitEventIds: [],
+        }),
+      } as Response;
+    }
+
+    if (url.pathname.includes('/calendar/events')) {
+      const startAt = url.searchParams.get('start_at');
+      const startAtTime = startAt ? new Date(startAt).getTime() : NaN;
+      const matchingEvents = Object.entries(eventsByWeekStart).find(
+        ([weekStart]) => {
+          const expectedStart = new Date(
+            `${weekStart}T00:00:00.000Z`
+          ).getTime();
+
+          return Math.abs(startAtTime - expectedStart) < 24 * 60 * 60 * 1000;
+        }
+      )?.[1];
+
+      return {
+        ok: true,
+        json: async () => ({
+          count: matchingEvents?.length ?? 0,
+          data: matchingEvents ?? [],
+        }),
+      } as Response;
+    }
+
+    throw new Error(`Unexpected fetch ${url}`);
+  });
+}
+
+describe('CalendarSyncProvider optimistic visible events', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal('fetch', vi.fn());
+  });
+
+  it('keeps last successful events visible while a refetch is pending', async () => {
+    const initialEvent = createEvent('event-1');
+    let databaseCalls = 0;
+    let resolveRefetch:
+      | ((response: Pick<Response, 'json' | 'ok'>) => void)
+      | undefined;
+    const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+
+      if (url.includes('/calendar/habit-events')) {
+        return {
+          ok: true,
+          json: async () => ({
+            completedHabitEventIds: [],
+            habitEventIds: [],
+          }),
+        } as Response;
+      }
+
+      if (url.includes('/calendar/events')) {
+        databaseCalls += 1;
+
+        if (databaseCalls === 1) {
+          return {
+            ok: true,
+            json: async () => ({
+              count: 1,
+              data: [initialEvent],
+            }),
+          } as Response;
+        }
+
+        return new Promise((resolve) => {
+          resolveRefetch = resolve;
+        });
+      }
+
+      throw new Error(`Unexpected fetch ${url}`);
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { result } = renderCalendarSync();
+
+    act(() => {
+      result.current.setDates([new Date('2026-06-22T00:00:00.000Z')]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id)).toEqual([
+        'event-1',
+      ]);
+    });
+
+    act(() => {
+      result.current.refresh();
+    });
+
+    await waitFor(() => {
+      expect(databaseCalls).toBe(2);
+    });
+    expect(result.current.events.map((event) => event.id)).toEqual(['event-1']);
+
+    act(() => {
+      resolveRefetch?.({
+        ok: true,
+        json: async () => ({
+          count: 1,
+          data: [initialEvent],
+        }),
+      });
+    });
+  });
+
+  it('keeps last successful events visible and exposes error state on fetch failure', async () => {
+    const initialEvent = createEvent('event-1');
+    const fetchMock = mockCalendarFetch([initialEvent]);
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { result } = renderCalendarSync();
+
+    act(() => {
+      result.current.setDates([new Date('2026-06-22T00:00:00.000Z')]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.events).toHaveLength(1);
+    });
+
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      if (String(input).includes('/calendar/habit-events')) {
+        return {
+          ok: true,
+          json: async () => ({
+            completedHabitEventIds: [],
+            habitEventIds: [],
+          }),
+        } as Response;
+      }
+
+      return {
+        ok: false,
+        json: async () => ({ error: 'Nope' }),
+      } as Response;
+    });
+
+    act(() => {
+      result.current.refresh();
+    });
+
+    await waitFor(() => {
+      expect(result.current.syncStatus.state).toBe('error');
+    });
+    expect(result.current.events.map((event) => event.id)).toEqual(['event-1']);
+  });
+
+  it('shows the active week events when navigating away and back', async () => {
+    const currentWeekEvent = createEvent('current-week-event', {
+      start_at: '2026-06-22T09:00:00.000Z',
+      end_at: '2026-06-22T10:00:00.000Z',
+    });
+    const nextWeekEvent = createEvent('next-week-event', {
+      start_at: '2026-06-29T09:00:00.000Z',
+      end_at: '2026-06-29T10:00:00.000Z',
+    });
+    const fetchMock = mockCalendarFetchByWeek({
+      '2026-06-22': [currentWeekEvent],
+      '2026-06-29': [nextWeekEvent],
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { result } = renderCalendarSync();
+
+    act(() => {
+      result.current.setDates(createWeekDates('2026-06-22'));
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id)).toEqual([
+        'current-week-event',
+      ]);
+    });
+
+    act(() => {
+      result.current.setDates(createWeekDates('2026-06-29'));
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id)).toEqual([
+        'next-week-event',
+      ]);
+    });
+
+    act(() => {
+      result.current.setDates(createWeekDates('2026-06-22'));
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id)).toEqual([
+        'current-week-event',
+      ]);
+    });
+
+    act(() => {
+      result.current.setDates(createWeekDates('2026-06-29'));
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id)).toEqual([
+        'next-week-event',
+      ]);
+    });
+  });
+
+  it('applies optimistic insert, update, and delete deltas immediately', async () => {
+    const baseEvent = createEvent('event-1');
+    const { result } = renderCalendarSync({ externalEvents: [baseEvent] });
+
+    await waitFor(() => {
+      expect(result.current.events).toHaveLength(1);
+    });
+
+    act(() => {
+      result.current.patchVisibleEvents(
+        [
+          createEvent('optimistic-1', {
+            title: 'Draft',
+          }),
+        ],
+        { status: 'creating' }
+      );
+    });
+
+    expect(result.current.events.map((event) => event.id)).toContain(
+      'optimistic-1'
+    );
+    expect(
+      result.current.events.find((event) => event.id === 'optimistic-1')
+        ?._optimisticStatus
+    ).toBe('creating');
+
+    act(() => {
+      result.current.patchVisibleEvents(
+        [
+          {
+            ...baseEvent,
+            title: 'Moved',
+          },
+        ],
+        { status: 'updating' }
+      );
+    });
+
+    expect(
+      result.current.events.find((event) => event.id === 'event-1')
+    ).toMatchObject({
+      _optimisticStatus: 'updating',
+      title: 'Moved',
+    });
+
+    act(() => {
+      result.current.patchVisibleEvents([], { removeIds: ['event-1'] });
+    });
+
+    expect(result.current.events.some((event) => event.id === 'event-1')).toBe(
+      false
+    );
+
+    act(() => {
+      result.current.patchVisibleEvents([baseEvent]);
+    });
+
+    expect(
+      result.current.events.find((event) => event.id === 'event-1')
+    ).toMatchObject({
+      title: 'Planning',
+    });
+  });
+
+  it('reconciles optimistic updates with later server data', async () => {
+    let externalEvents = [createEvent('event-1')];
+    const queryClient = createQueryClient();
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        <CalendarSyncProvider
+          externalEvents={externalEvents}
+          wsId="workspace-1"
+        >
+          {children}
+        </CalendarSyncProvider>
+      </QueryClientProvider>
+    );
+    const { rerender, result } = renderHook(() => useCalendarSync(), {
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.events).toHaveLength(1);
+    });
+
+    act(() => {
+      result.current.patchVisibleEvents([
+        createEvent('event-1', { title: 'Server-confirmed' }),
+      ]);
+    });
+
+    expect(
+      result.current.events.find((event) => event.id === 'event-1')?.title
+    ).toBe('Server-confirmed');
+
+    externalEvents = [createEvent('event-1', { title: 'Server-confirmed' })];
+    rerender();
+
+    await waitFor(() => {
+      expect(
+        result.current.events.find((event) => event.id === 'event-1')
+          ?._optimisticStatus
+      ).toBeUndefined();
+      expect(
+        result.current.events.find((event) => event.id === 'event-1')?.title
+      ).toBe('Server-confirmed');
+    });
+  });
+
+  it('keeps identical title and time events as distinct IDs without deleting either', async () => {
+    const duplicateA = createEvent('event-a');
+    const duplicateB = createEvent('event-b');
+    const fetchMock = mockCalendarFetch([duplicateA, duplicateB]);
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { result } = renderCalendarSync();
+
+    act(() => {
+      result.current.setDates([new Date('2026-06-22T00:00:00.000Z')]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id).sort()).toEqual([
+        'event-a',
+        'event-b',
+      ]);
+    });
+    expect(fetchMock).not.toHaveBeenCalledWith(
+      expect.stringContaining('/calendar/events/event-b'),
+      expect.objectContaining({ method: 'DELETE' })
+    );
+  });
+});

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

@@ -248,7 +248,7 @@ describe('useBoardRealtime', () => {
       expect(mockChannel.subscribe).toHaveBeenCalledTimes(1);
     });
 
-    it('should create channel with self: false config', () => {
+    it('should create a private channel with self: false config', () => {
       renderHook(() => useBoardRealtime('board-1', { enabled: true }), {
         wrapper,
       });
@@ -258,7 +258,7 @@ describe('useBoardRealtime', () => {
       )();
       expect(supabaseInstance.channel).toHaveBeenCalledWith(
         'board-realtime-board-1',
-        { config: { broadcast: { self: false } } }
+        { config: { broadcast: { self: false }, private: true } }
       );
     });
 

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

@@ -0,0 +1,212 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import type { RefObject } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { PRIVATE_TASK_REALTIME_CHANNEL_CONFIG } from '../useBoardRealtime.types';
+import { useCursorTracking } from '../useCursorTracking';
+
+type BroadcastListener = (message: {
+  payload: Record<string, unknown>;
+}) => void;
+
+type MockSupabaseClient = {
+  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/utils/constants', () => ({
+  DEV_MODE: false,
+}));
+
+function createContainerRef(): RefObject<HTMLDivElement | null> {
+  const element = document.createElement('div');
+  element.getBoundingClientRect = () =>
+    ({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    }) as DOMRect;
+  document.body.append(element);
+  return { current: element };
+}
+
+describe('useCursorTracking', () => {
+  let broadcastListeners: Map<string, BroadcastListener>;
+  let mockChannel: {
+    on: ReturnType<typeof vi.fn>;
+    send: ReturnType<typeof vi.fn>;
+    subscribe: ReturnType<typeof vi.fn>;
+  };
+  let mockRemoveChannel: ReturnType<typeof vi.fn>;
+  let requestAnimationFrameMock: ReturnType<typeof vi.fn>;
+  let animationFrameCallbacks: FrameRequestCallback[];
+
+  beforeEach(() => {
+    broadcastListeners = new Map();
+    animationFrameCallbacks = [];
+
+    requestAnimationFrameMock = vi.fn((callback: FrameRequestCallback) => {
+      animationFrameCallbacks.push(callback);
+      return animationFrameCallbacks.length;
+    });
+    vi.stubGlobal('requestAnimationFrame', requestAnimationFrameMock);
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+
+    mockChannel = {
+      on: vi.fn(
+        (
+          type: string,
+          config: { event?: string },
+          callback: BroadcastListener
+        ) => {
+          if (type === 'broadcast' && config.event) {
+            broadcastListeners.set(config.event, callback);
+          }
+          return mockChannel;
+        }
+      ),
+      send: vi.fn(),
+      subscribe: vi.fn(() => mockChannel),
+    };
+    mockRemoveChannel = vi.fn();
+
+    const mockCreateClient = createClient as unknown as MockCreateClientFn;
+    mockCreateClient.mockReturnValue({
+      channel: vi.fn(() => mockChannel),
+      removeChannel: mockRemoveChannel,
+    });
+  });
+
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.unstubAllGlobals();
+  });
+
+  it('subscribes to cursor channels with private realtime authorization', () => {
+    const containerRef = createContainerRef();
+
+    renderHook(() =>
+      useCursorTracking('board-realtime-board-1', containerRef, {
+        display_name: 'Current User',
+        id: 'user-current',
+      })
+    );
+
+    const supabaseInstance = (createClient as unknown as MockCreateClientFn)();
+    expect(supabaseInstance.channel).toHaveBeenCalledWith(
+      'board-realtime-board-1',
+      PRIVATE_TASK_REALTIME_CHANNEL_CONFIG
+    );
+  });
+
+  it('broadcasts cursor payloads without private profile fields', async () => {
+    const containerRef = createContainerRef();
+
+    renderHook(() =>
+      useCursorTracking(
+        'board-realtime-board-1',
+        containerRef,
+        {
+          avatar_url: 'https://example.com/avatar.png',
+          display_name: 'Current User',
+          email: 'current@example.com',
+          id: 'user-current',
+        },
+        { cursorScope: { boardId: 'board-1', type: 'board' } }
+      )
+    );
+
+    act(() => {
+      containerRef.current?.dispatchEvent(
+        new MouseEvent('mousemove', { clientX: 80, clientY: 40 })
+      );
+      animationFrameCallbacks.shift()?.(0);
+    });
+
+    await waitFor(() => expect(mockChannel.send).toHaveBeenCalled());
+    expect(mockChannel.send).toHaveBeenCalledWith({
+      event: 'cursor-move',
+      payload: {
+        metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+        user: {
+          avatar_url: 'https://example.com/avatar.png',
+          display_name: 'Current User',
+          id: 'user-current',
+        },
+        x: expect.any(Number),
+        y: expect.any(Number),
+      },
+      type: 'broadcast',
+    });
+  });
+
+  it('accepts only well-formed cursor payloads and strips private fields', () => {
+    const containerRef = createContainerRef();
+    const { result } = renderHook(() =>
+      useCursorTracking('board-realtime-board-1', containerRef, {
+        display_name: 'Current User',
+        id: 'user-current',
+      })
+    );
+
+    const listener = broadcastListeners.get('cursor-move');
+    expect(listener).toBeDefined();
+
+    act(() => {
+      listener?.({
+        payload: {
+          user: { email: 'bad@example.com' },
+          x: 12,
+          y: 18,
+        },
+      });
+    });
+    expect(result.current.cursors.size).toBe(0);
+
+    act(() => {
+      listener?.({
+        payload: {
+          metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+          user: {
+            avatar_url: 'https://example.com/other.png',
+            display_name: 'Other User',
+            email: 'other@example.com',
+            id: 'user-other',
+          },
+          x: 12,
+          y: 18,
+        },
+      });
+    });
+
+    expect(result.current.cursors.get('user-other')).toEqual({
+      lastUpdatedAt: expect.any(Number),
+      metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+      user: {
+        avatar_url: 'https://example.com/other.png',
+        display_name: 'Other User',
+        id: 'user-other',
+      },
+      x: 12,
+      y: 18,
+    });
+  });
+});