@cccsaurora/howler-ui 2.19.0-dev.1266 → 2.19.0-dev.1276

package/components/routes/cases/CaseViewer.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -40,10 +40,10 @@ vi.mock('api', () => ({
     }
 }));
 vi.mock('./detail/CaseDetails', () => ({
-    default: () => _jsx("div", { id: "case-details" })
+    default: ({ case: _case }) => _jsx("div", { id: "case-details", children: _case?.title })
 }));
 vi.mock('./detail/CaseSidebar', () => ({
-    default: () => _jsx("div", { id: "case-sidebar" })
+    default: ({ case: _case }) => _jsx("div", { id: "case-sidebar", children: _case?.title })
 }));
 // ---------------------------------------------------------------------------
 // Import after mocks
@@ -130,4 +130,27 @@ describe('CaseViewer', () => {
             expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
         });
     });
+    it('propagates socket case updates to the sidebar and details', async () => {
+        const initialCase = createMockCase({ case_id: 'case-1', title: 'Original title' });
+        const updatedCase = createMockCase({ case_id: 'case-1', title: 'Updated title' });
+        mockDispatchApi.mockResolvedValue(initialCase);
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockAddListener).toHaveBeenCalledOnce();
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('case-sidebar')).toHaveTextContent('Original title');
+        });
+        act(() => {
+            mockAddListener.mock.calls[0][1]({
+                type: 'cases',
+                case: updatedCase,
+                error: false,
+                message: '',
+                status: 200
+            });
+        });
+        expect(screen.getByTestId('case-sidebar')).toHaveTextContent('Updated title');
+        expect(screen.getByTestId('case-details')).toHaveTextContent('Updated title');
+    });
 });

package/components/routes/cases/hooks/useCase.js

@@ -1,11 +1,12 @@
 import api from '@cccsaurora/howler-ui/api';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useId, useState } from 'react';
 import { isCaseUpdate } from '@cccsaurora/howler-ui/utils/socketUtils';
 const useCase = ({ caseId, case: providedCase }) => {
     const { dispatchApi } = useMyApi();
     const { addListener, removeListener } = useContext(SocketContext);
+    const listenerId = useId();
     const [loading, setLoading] = useState(false);
     const [missing, setMissing] = useState(false);
     const [_case, setCase] = useState(providedCase);
@@ -27,7 +28,7 @@ const useCase = ({ caseId, case: providedCase }) => {
         if (!activeCaseId) {
             return;
         }
-        const listenerKey = `case-update-${activeCaseId}`;
+        const listenerKey = `case-update-${activeCaseId}-${listenerId}`;
         addListener(listenerKey, data => {
             if (isCaseUpdate(data) && data.case.case_id === activeCaseId) {
                 setCase(data.case);
@@ -36,7 +37,7 @@ const useCase = ({ caseId, case: providedCase }) => {
         return () => {
             removeListener(listenerKey);
         };
-    }, [activeCaseId, addListener, removeListener]);
+    }, [activeCaseId, addListener, listenerId, removeListener]);
     const update = useCallback(async (_updatedCase, publish = true) => {
         if (!activeCaseId) {
             return;

package/components/routes/cases/hooks/useCase.test.js

@@ -1,4 +1,5 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
+import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
+import { createElement } from 'react';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 // ---------------------------------------------------------------------------
@@ -47,6 +48,12 @@ import useCase from './useCase';
 const renderUseCaseHook = (args) => {
     return renderHook(() => useCase(args));
 };
+const CaseConsumers = ({ case: providedCase }) => {
+    const sidebarCase = useCase({ case: providedCase });
+    const dashboardCase = useCase({ case: providedCase });
+    const detailsCase = useCase({ case: providedCase });
+    return createElement('div', null, createElement('span', { id: 'sidebar-case-title' }, sidebarCase.case.title), createElement('span', { id: 'dashboard-case-title' }, dashboardCase.case.title), createElement('span', { id: 'details-case-title' }, detailsCase.case.title));
+};
 // ---------------------------------------------------------------------------
 // Setup
 // ---------------------------------------------------------------------------
@@ -78,10 +85,10 @@ describe('useCase', () => {
         });
     });
     describe('socket listener', () => {
-        it('registers a listener keyed by case ID', () => {
+        it('registers a listener keyed by case ID and hook instance', () => {
             const mockCase = createMockCase({ case_id: 'c3' });
             renderUseCaseHook({ case: mockCase });
-            expect(mockAddListener).toHaveBeenCalledWith('case-update-c3', expect.any(Function));
+            expect(mockAddListener).toHaveBeenCalledWith(expect.stringMatching(/^case-update-c3-/), expect.any(Function));
         });
         it('updates state when a matching case update is received', () => {
             const mockCase = createMockCase({ case_id: 'c4', title: 'Original' });
@@ -135,7 +142,29 @@ describe('useCase', () => {
             const mockCase = createMockCase({ case_id: 'c7' });
             const { unmount } = renderUseCaseHook({ case: mockCase });
             unmount();
-            expect(mockRemoveListener).toHaveBeenCalledWith('case-update-c7');
+            expect(mockRemoveListener).toHaveBeenCalledWith(expect.stringMatching(/^case-update-c7-/));
+        });
+        it('updates every concurrent case consumer for the same case', () => {
+            const mockCase = createMockCase({ case_id: 'c8', title: 'Original' });
+            render(createElement(CaseConsumers, { case: mockCase }));
+            const listenerKeys = mockAddListener.mock.calls.map(([key]) => key);
+            expect(listenerKeys).toHaveLength(3);
+            expect([...new Set(listenerKeys)]).toHaveLength(3);
+            const updatedCase = createMockCase({ case_id: 'c8', title: 'Updated via socket' });
+            act(() => {
+                mockAddListener.mock.calls.forEach(([, listener]) => {
+                    listener({
+                        type: 'cases',
+                        case: updatedCase,
+                        error: false,
+                        message: '',
+                        status: 200
+                    });
+                });
+            });
+            expect(screen.getByTestId('sidebar-case-title')).toHaveTextContent('Updated via socket');
+            expect(screen.getByTestId('dashboard-case-title')).toHaveTextContent('Updated via socket');
+            expect(screen.getByTestId('details-case-title')).toHaveTextContent('Updated via socket');
         });
     });
 });

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "2.19.0-dev.1266",
+  "version": "2.19.0-dev.1276",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",