feat(notifications): settings notification preferences

2026-07-11 16:41:35 -04:00
parent c241941e41
commit 8d7486bc8c
6 changed files with 463 additions and 1 deletions
@@ -0,0 +1,117 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { api } from '@spoon/backend/convex/_generated/api.js';
+
+import { NotificationPreferencesPanel } from '../../src/components/settings/notification-preferences-panel';
+
+// Stable sentinels: the real Convex `api` proxy hands back a fresh reference on
+// every access, so `===` comparisons in the mocks below would never match.
+vi.mock('@spoon/backend/convex/_generated/api.js', () => ({
+  api: {
+    notifications: {
+      getPreferences: 'notifications:getPreferences',
+      updatePreferences: 'notifications:updatePreferences',
+    },
+  },
+}));
+
+const { mockUpdatePreferences, mockUseMutation, mockUseQuery } = vi.hoisted(
+  () => ({
+    mockUpdatePreferences: vi.fn(),
+    mockUseMutation: vi.fn(),
+    mockUseQuery: vi.fn(),
+  }),
+);
+
+vi.mock('convex/react', () => ({
+  useMutation: mockUseMutation,
+  useQuery: mockUseQuery,
+}));
+
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+// Pass-through UI primitives so the switches are deterministically present and
+// clickable under jsdom (Radix pointer behavior is flaky here). We exercise the
+// panel's logic, not the design-system components.
+vi.mock('@spoon/ui', () => ({
+  Card: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  Label: ({ children }: { children?: ReactNode }) => <label>{children}</label>,
+  Switch: ({
+    checked,
+    onCheckedChange,
+    disabled,
+    ...props
+  }: {
+    checked?: boolean;
+    onCheckedChange?: (value: boolean) => void;
+    disabled?: boolean;
+  } & ComponentProps<'button'>) => (
+    <button
+      role='switch'
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange?.(!checked)}
+      {...props}
+    />
+  ),
+}));
+
+const prefs = {
+  emailEnabled: true,
+  emailMaintenance: true,
+  emailAgentTurnFinished: true,
+  emailAgentNeedsInput: false,
+  emailSyncFailed: true,
+  emailConnectionReauth: true,
+};
+
+const seed = () => {
+  mockUpdatePreferences.mockResolvedValue(undefined);
+  mockUseMutation.mockReturnValue(mockUpdatePreferences);
+  mockUseQuery.mockImplementation((reference: unknown) =>
+    reference === api.notifications.getPreferences ? prefs : undefined,
+  );
+};
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe('NotificationPreferencesPanel', () => {
+  it('renders toggle state from the query values', () => {
+    seed();
+    render(<NotificationPreferencesPanel />);
+
+    const needsInput = screen.getByRole('switch', {
+      name: /needs your input/i,
+    });
+    expect(needsInput).toHaveAttribute('aria-checked', 'false');
+
+    const master = screen.getByRole('switch', { name: /email notifications/i });
+    expect(master).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('calls updatePreferences with the flipped field when a toggle changes', () => {
+    seed();
+    render(<NotificationPreferencesPanel />);
+
+    fireEvent.click(
+      screen.getByRole('switch', { name: /sync fails/i }),
+    );
+    expect(mockUpdatePreferences).toHaveBeenCalledWith({
+      emailSyncFailed: false,
+    });
+  });
+
+  it('does not render toggles until the query resolves', () => {
+    mockUseMutation.mockReturnValue(mockUpdatePreferences);
+    mockUseQuery.mockReturnValue(undefined);
+    render(<NotificationPreferencesPanel />);
+    expect(screen.queryByRole('switch')).not.toBeInTheDocument();
+  });
+});