@micha.bigler/ui-core-micha 2.12.0 → 2.14.0

package/tests/OnboardingWizard.test.jsx

@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, params) => (params && Object.keys(params).length ? `${key}:${JSON.stringify(params)}` : key),
+  }),
+}));
+
+const onboardingModule = vi.hoisted(() => ({ useOnboarding: vi.fn() }));
+vi.mock('../src/onboarding/OnboardingProvider', () => onboardingModule);
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { OnboardingWizard } from '../src/onboarding/OnboardingWizard';
+
+function StepBody({ onComplete, onDismiss }) {
+  return (
+    <div>
+      <button onClick={onComplete}>step-complete</button>
+      <button onClick={onDismiss}>step-dismiss</button>
+    </div>
+  );
+}
+
+function makeStep(overrides = {}) {
+  return {
+    id: 'step-1',
+    blocking: false,
+    persistDismissed: false,
+    Component: StepBody,
+    ...overrides,
+  };
+}
+
+function renderWizard({ onboarding, refreshUser = vi.fn().mockResolvedValue() } = {}) {
+  onboardingModule.useOnboarding.mockReturnValue(onboarding);
+  return render(
+    <AuthContext.Provider value={{ refreshUser }}>
+      <OnboardingWizard />
+    </AuthContext.Provider>,
+  );
+}
+
+describe('OnboardingWizard regression guard (NOTIF-12 shell extraction)', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when there is no active step', () => {
+    renderWizard({ onboarding: { activeSteps: [], markStepSeen: vi.fn(), dismissStep: vi.fn(), ctx: {} } });
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('shows the single-step SETUP title with no progress bar for exactly one step', () => {
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep()],
+      markStepSeen: vi.fn(),
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    expect(screen.getByText('Onboarding.SETUP')).toBeTruthy();
+    expect(screen.queryByRole('progressbar')).toBeNull();
+  });
+
+  it('shows the step counter and progress bar across multiple steps, advancing on completion', () => {
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ id: 'a' }), makeStep({ id: 'b' })],
+      markStepSeen: vi.fn(),
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    expect(screen.getByText('Onboarding.STEP_COUNTER:{"current":1,"total":2}')).toBeTruthy();
+    expect(screen.getByRole('progressbar')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-complete' }));
+
+    expect(screen.getByText('Onboarding.STEP_COUNTER:{"current":2,"total":2}')).toBeTruthy();
+  });
+
+  it('marks the current step seen and session-dismisses it once completed, revealing the next step', () => {
+    const markStepSeen = vi.fn();
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ id: 'a' }), makeStep({ id: 'b' })],
+      markStepSeen,
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    expect(markStepSeen).toHaveBeenCalledWith('a');
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-complete' }));
+
+    expect(markStepSeen).toHaveBeenCalledWith('b');
+  });
+
+  it('disables escape-key close for a blocking step', () => {
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ blocking: true })],
+      markStepSeen: vi.fn(),
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    const dialog = screen.getByRole('dialog');
+    fireEvent.keyDown(dialog, { key: 'Escape', code: 'Escape' });
+
+    expect(screen.getByRole('dialog')).toBeTruthy();
+  });
+
+  it('calls dismissStep only when the dismissed step is persistDismissed', () => {
+    const dismissStep = vi.fn();
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ persistDismissed: true })],
+      markStepSeen: vi.fn(),
+      dismissStep,
+      ctx: {},
+    } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-dismiss' }));
+
+    expect(dismissStep).toHaveBeenCalledWith('step-1');
+  });
+
+  it('does not call dismissStep for a non-persistDismissed step on dismiss', () => {
+    const dismissStep = vi.fn();
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ persistDismissed: false })],
+      markStepSeen: vi.fn(),
+      dismissStep,
+      ctx: {},
+    } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-dismiss' }));
+
+    expect(dismissStep).not.toHaveBeenCalled();
+  });
+});

package/tests/PopupSurface.test.jsx

@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, params) => (params && Object.keys(params).length ? `${key}:${JSON.stringify(params)}` : key),
+  }),
+}));
+
+const onboardingModule = vi.hoisted(() => ({ useOnboarding: vi.fn() }));
+vi.mock('../src/onboarding/OnboardingProvider', () => onboardingModule);
+
+const notificationsModule = vi.hoisted(() => ({ useNotifications: vi.fn() }));
+vi.mock('../src/notifications/NotificationsProvider', () => notificationsModule);
+
+const realtimeModule = vi.hoisted(() => ({ useRealtime: vi.fn(), DEFAULT_ENVELOPE: 'notification' }));
+vi.mock('../src/notifications/realtime', () => realtimeModule);
+
+import { PopupSurface } from '../src/notifications/PopupSurface';
+
+describe('PopupSurface (NOTIF-12 scope B/C)', () => {
+  let handler;
+  let subscribeFn;
+  let markSeen;
+  let markDismissed;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    handler = null;
+    subscribeFn = (envelope, fn) => {
+      handler = fn;
+      return () => { handler = null; };
+    };
+    markSeen = vi.fn();
+    markDismissed = vi.fn();
+    notificationsModule.useNotifications.mockReturnValue({ markSeen, markDismissed, markDone: vi.fn() });
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [] });
+    realtimeModule.useRealtime.mockImplementation(() => ({ subscribe: subscribeFn }));
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  function push(data) {
+    act(() => {
+      handler(data);
+    });
+  }
+
+  it('renders nothing when no popup-eligible notification is present', () => {
+    render(<PopupSurface />);
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('renders a popup-eligible notification once, marking seen exactly once on display, and shows the notification title (not the onboarding header)', () => {
+    render(<PopupSurface />);
+
+    push({ notification_id: 1, channel: 'popup', content: { title_key: 'T', body_key: 'B', params: {} } });
+
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('T')).toBeTruthy();
+    expect(screen.queryByText('Onboarding.SETUP')).toBeNull();
+    expect(markSeen).toHaveBeenCalledTimes(1);
+    expect(markSeen).toHaveBeenCalledWith([1]);
+  });
+
+  it('marks using the wire recipient_id (feed/mark/ id-space), not the notification_id, when present', () => {
+    render(<PopupSurface />);
+
+    push({ notification_id: 10, recipient_id: 999, channel: 'popup', content: { title_key: 'T' } });
+
+    expect(markSeen).toHaveBeenCalledWith([999]);
+
+    fireEvent.click(screen.getByRole('button', { name: 'PopupSurface.CLOSE' }));
+
+    expect(markDismissed).toHaveBeenCalledWith([999]);
+  });
+
+  it('fires markDismissed, never markDone, when the popup is closed', () => {
+    const { markDone } = notificationsModule.useNotifications();
+    render(<PopupSurface />);
+    push({ notification_id: 1, channel: 'popup', content: { title_key: 'T' } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'PopupSurface.CLOSE' }));
+
+    expect(markDismissed).toHaveBeenCalledWith([1]);
+    expect(markDone).not.toHaveBeenCalled();
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('ignores a chip-channel message and a channel-less legacy message — no popup storm', () => {
+    render(<PopupSurface />);
+
+    push({ notification_id: 2, channel: 'chip', content: { title_key: 'T' } });
+    push({ notification_id: 3, content: { title_key: 'T' } });
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(markSeen).not.toHaveBeenCalled();
+  });
+
+  it('ignores a notification.status message regardless of its channel field', () => {
+    render(<PopupSurface />);
+
+    push({ type: 'notification.status', notification_id: 4, channel: 'popup', status: {} });
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('coexistence: a blocking onboarding step suppresses the popup; it appears once the step clears, never stacking two dialogs', () => {
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [{ id: 'cookie_consent', blocking: true }] });
+    const { rerender } = render(<PopupSurface />);
+
+    push({ notification_id: 5, channel: 'popup', content: { title_key: 'T' } });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(markSeen).not.toHaveBeenCalled();
+
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [] });
+    rerender(<PopupSurface />);
+
+    expect(screen.getAllByRole('dialog')).toHaveLength(1);
+    expect(markSeen).toHaveBeenCalledWith([5]);
+  });
+
+  it('coexistence: a non-blocking onboarding step also suppresses the popup, never stacking two dialogs', () => {
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [{ id: 'browser_push', blocking: false }] });
+    const { rerender } = render(<PopupSurface />);
+
+    push({ notification_id: 6, channel: 'popup', content: { title_key: 'T' } });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(markSeen).not.toHaveBeenCalled();
+
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [] });
+    rerender(<PopupSurface />);
+
+    expect(screen.getAllByRole('dialog')).toHaveLength(1);
+    expect(markSeen).toHaveBeenCalledWith([6]);
+  });
+});

package/tests/notificationsExports.test.js

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import {
   NotificationSettings,
+  PopupSurface,
   getNotificationPreferences,
   getVapidPublicKey,
   listPushSubscriptions,
@@ -26,4 +27,8 @@ describe('notification barrel exports', () => {
       notificationsTranslations,
     ].forEach((value) => expect(value).toBeDefined());
   });
+
+  it('additively exports the NOTIF-12 popup surface', () => {
+    expect(PopupSurface).toBeDefined();
+  });
 });

package/tests/realtime.test.jsx

@@ -0,0 +1,192 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const feedApi = vi.hoisted(() => ({
+  getNotificationFeed: vi.fn(),
+  getUnreadCount: vi.fn(),
+  markNotifications: vi.fn(),
+}));
+
+vi.mock('../src/notifications/feedApi', () => feedApi);
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { NotificationsProvider, useNotifications } from '../src/notifications/NotificationsProvider';
+import { useRealtime } from '../src/notifications/realtime';
+
+class MockWebSocket {
+  static instances = [];
+
+  constructor(url) {
+    this.url = url;
+    this.close = vi.fn(() => this.onclose?.());
+    MockWebSocket.instances.push(this);
+  }
+}
+
+function StreamConsumer({ envelope, testId }) {
+  const { subscribe } = useRealtime();
+  const [received, setReceived] = React.useState([]);
+
+  React.useEffect(
+    () => subscribe(envelope, (data) => setReceived((prev) => [...prev, data])),
+    [subscribe, envelope],
+  );
+
+  return <output data-testid={testId}>{JSON.stringify(received)}</output>;
+}
+
+function NotificationsConsumer() {
+  const notifications = useNotifications();
+  return (
+    <>
+      <output data-testid="notifications">{JSON.stringify(notifications.notifications)}</output>
+      <output data-testid="unread-count">{notifications.unreadCount}</output>
+      <output data-testid="context-keys">{JSON.stringify(Object.keys(notifications).sort())}</output>
+    </>
+  );
+}
+
+function renderWithStreams({ streams = [], user = { id: 4 } } = {}) {
+  return render(
+    <AuthContext.Provider value={{ user }}>
+      <NotificationsProvider>
+        <NotificationsConsumer />
+        {streams.map(({ envelope, testId }) => (
+          <StreamConsumer key={testId} envelope={envelope} testId={testId} />
+        ))}
+      </NotificationsProvider>
+    </AuthContext.Provider>,
+  );
+}
+
+function received(testId) {
+  return JSON.parse(screen.getByTestId(testId).textContent);
+}
+
+describe('realtime primitive (NOTIF-13)', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    MockWebSocket.instances = [];
+    vi.stubGlobal('WebSocket', MockWebSocket);
+    feedApi.getNotificationFeed.mockResolvedValue({ results: [] });
+    feedApi.getUnreadCount.mockResolvedValue({ count: 0 });
+    feedApi.markNotifications.mockResolvedValue({ updated: 1 });
+  });
+
+  it('ignores an unknown/unsubscribed envelope type — feed and unreadCount untouched', async () => {
+    renderWithStreams();
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({
+      envelope: 'message',
+      type: 'chat.new',
+      body: 'hello',
+    }) });
+
+    expect(screen.getByTestId('unread-count').textContent).toBe('0');
+    expect(currentNotificationsAreEmpty()).toBe(true);
+  });
+
+  function currentNotificationsAreEmpty() {
+    return JSON.parse(screen.getByTestId('notifications').textContent).length === 0;
+  }
+
+  it('routes two subscribers on distinct envelope types from one socket, each seeing only their own', async () => {
+    renderWithStreams({ streams: [
+      { envelope: 'message', testId: 'message-stream' },
+      { envelope: 'other', testId: 'other-stream' },
+    ] });
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({ envelope: 'message', body: 'a' }) });
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({ envelope: 'other', body: 'b' }) });
+
+    await waitFor(() => expect(received('message-stream')).toHaveLength(1));
+    expect(received('message-stream')[0]).toEqual(expect.objectContaining({ body: 'a' }));
+    expect(received('other-stream')).toHaveLength(1);
+    expect(received('other-stream')[0]).toEqual(expect.objectContaining({ body: 'b' }));
+    expect(MockWebSocket.instances).toHaveLength(1);
+  });
+
+  it('unsubscribe stops delivery for that subscriber without affecting others', async () => {
+    function Harness() {
+      const { subscribe } = useRealtime();
+      const [messageReceived, setMessageReceived] = React.useState([]);
+      const [otherReceived, setOtherReceived] = React.useState([]);
+      const [messageSubscribed, setMessageSubscribed] = React.useState(true);
+
+      React.useEffect(() => {
+        if (!messageSubscribed) return undefined;
+        return subscribe('message', (data) => setMessageReceived((prev) => [...prev, data]));
+      }, [subscribe, messageSubscribed]);
+
+      React.useEffect(
+        () => subscribe('other', (data) => setOtherReceived((prev) => [...prev, data])),
+        [subscribe],
+      );
+
+      return (
+        <>
+          <output data-testid="message-received">{JSON.stringify(messageReceived)}</output>
+          <output data-testid="other-received">{JSON.stringify(otherReceived)}</output>
+          <button onClick={() => setMessageSubscribed(false)}>unsubscribe-message</button>
+        </>
+      );
+    }
+
+    const { unmount } = render(
+      <AuthContext.Provider value={{ user: { id: 4 } }}>
+        <NotificationsProvider>
+          <Harness />
+        </NotificationsProvider>
+      </AuthContext.Provider>,
+    );
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+
+    fireEvent.click(screen.getByRole('button', { name: 'unsubscribe-message' }));
+
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({ envelope: 'message', body: 'after-unsub' }) });
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({ envelope: 'other', body: 'still-alive' }) });
+
+    await waitFor(() => expect(received('other-received')).toHaveLength(1));
+    expect(received('message-received')).toHaveLength(0);
+    expect(received('other-received')[0]).toEqual(expect.objectContaining({ body: 'still-alive' }));
+
+    unmount();
+  });
+
+  it('keeps a subscriber registered across a close/backoff/reopen cycle with no re-registration', async () => {
+    vi.useFakeTimers();
+    try {
+      renderWithStreams({ streams: [{ envelope: 'message', testId: 'message-stream' }] });
+      await vi.waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+
+      const firstSocket = MockWebSocket.instances[0];
+      firstSocket.onclose();
+      await vi.advanceTimersByTimeAsync(1_000);
+
+      expect(MockWebSocket.instances).toHaveLength(2);
+      MockWebSocket.instances[1].onmessage({ data: JSON.stringify({ envelope: 'message', body: 'after-reopen' }) });
+
+      await vi.waitFor(() => expect(received('message-stream')).toHaveLength(1));
+      expect(received('message-stream')[0]).toEqual(expect.objectContaining({ body: 'after-reopen' }));
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("NotificationsProvider's public context value is unchanged", async () => {
+    renderWithStreams();
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+
+    expect(JSON.parse(screen.getByTestId('context-keys').textContent)).toEqual(
+      ['markDismissed', 'markDone', 'markSeen', 'notifications', 'refresh', 'unreadCount'].sort(),
+    );
+  });
+});