Merge branch 'develop' into ocrvs-10132

Author: Siyasanga

packages/client/src/v2-events/features/events/actions/print-certificate/PrintCertificate.interaction.stories.tsx

@@ -21,7 +21,7 @@ import {
   generateEventDocument,
   generateWorkqueues,
   tennisClubMembershipEvent,
-  field
+  never
 } from '@opencrvs/commons/client'
 import { tennisClubMembershipEventDocument } from '@client/v2-events/features/events/fixtures'
 import { ROUTES, routesConfig } from '@client/v2-events/routes'
@@ -47,6 +47,94 @@ const tRPCMsw = createTRPCMsw<AppRouter>({
   transformer: { input: superjson, output: superjson }
 })
 
+export const NoTemplateAvailable: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    reactRouter: {
+      router: routesConfig,
+      initialPath: ROUTES.V2.EVENTS.PRINT_CERTIFICATE.PAGES.buildPath({
+        eventId: tennisClubMembershipEventDocument.id,
+        pageId: 'collector'
+      })
+    },
+    test: {
+      // Ignoring the failed font request
+      dangerouslyIgnoreUnhandledErrors: true
+    },
+    msw: {
+      handlers: {
+        config: [
+          http.get(
+            '/api/countryconfig/certificates/simple-certificate.svg',
+            () => {
+              return HttpResponse.text(
+                `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><text x="10" y="20">Simple Certificate</text></svg>`
+              )
+            }
+          ),
+          http.get('http://localhost:2021/config', () => {
+            return HttpResponse.json({
+              systems: [],
+              config: mockOfflineData.config,
+              certificates: [
+                {
+                  id: 'simple-certificate',
+                  isV2Template: true,
+                  event: 'tennis-club-membership',
+                  label: {
+                    id: 'certificates.simple.certificate.copy',
+                    defaultMessage: 'Simple Certificate copy',
+                    description: 'The label for a simple certificate'
+                  },
+                  conditionals: [
+                    {
+                      type: 'SHOW',
+                      conditional: never()
+                    }
+                  ],
+                  isDefault: false,
+                  fee: {
+                    onTime: 7,
+                    late: 10.6,
+                    delayed: 18
+                  },
+                  svgUrl:
+                    '/api/countryconfig/certificates/simple-certificate.svg'
+                }
+              ]
+            })
+          })
+        ],
+        events: [
+          tRPCMsw.event.config.get.query(() => {
+            return [tennisClubMembershipEvent]
+          }),
+          tRPCMsw.event.get.query(() => {
+            return tennisClubMembershipEventDocument
+          })
+        ]
+      }
+    }
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step(
+      'Click Certification Type and find no options message',
+      async () => {
+        await userEvent.click(
+          await canvas.findByTestId('select__certificateTemplateId')
+        )
+        await expect(
+          await canvas.findByText(
+            'No template available for this event, contact Admin'
+          )
+        ).toBeVisible()
+      }
+    )
+  }
+}
+
 export const ContinuingAndGoingBack: Story = {
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -289,107 +377,3 @@ export const RedirectAfterPrint: Story = {
     })
   }
 }
-
-export const NoTemplateAvailable: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-    reactRouter: {
-      router: routesConfig,
-      initialPath: ROUTES.V2.EVENTS.PRINT_CERTIFICATE.PAGES.buildPath({
-        eventId: tennisClubMembershipEventDocument.id,
-        pageId: 'collector'
-      })
-    },
-    test: {
-      // Ignoring the failed font request
-      dangerouslyIgnoreUnhandledErrors: true
-    },
-    msw: {
-      handlers: {
-        events: [
-          tRPCMsw.event.config.get.query(() => {
-            return [tennisClubMembershipEvent]
-          }),
-          tRPCMsw.event.get.query(() => {
-            return tennisClubMembershipEventDocument
-          })
-        ],
-        config: [
-          http.get(
-            '/api/countryconfig/certificates/simple-certificate.svg',
-            () => {
-              return HttpResponse.text(
-                `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><text x="10" y="20">Simple Certificate</text></svg>`
-              )
-            }
-          ),
-          http.get('http://localhost:2021/config', () => {
-            return HttpResponse.json({
-              systems: [],
-              config: mockOfflineData.config,
-              certificates: [
-                {
-                  id: 'simple-certificate',
-                  isV2Template: true,
-                  event: 'tennis-club-membership',
-                  label: {
-                    id: 'certificates.simple.certificate.copy',
-                    defaultMessage: 'Simple Certificate copy',
-                    description: 'The label for a simple certificate'
-                  },
-                  conditionals: [
-                    {
-                      type: 'SHOW',
-                      conditional: field('applicant.dob')
-                        .isBefore()
-                        .date('2007-01-01')
-                    }
-                  ],
-                  isDefault: false,
-                  fee: {
-                    onTime: 7,
-                    late: 10.6,
-                    delayed: 18
-                  },
-                  svgUrl:
-                    '/api/countryconfig/certificates/simple-certificate.svg'
-                }
-              ]
-            })
-          })
-        ]
-      }
-    }
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
-
-    await step('Try continuing without filling the form', async () => {
-      await expect(
-        await canvas.findByText('Print certified copy')
-      ).toBeInTheDocument()
-
-      const continueButton = await canvas.findByRole('button', {
-        name: 'Continue'
-      })
-      await userEvent.click(continueButton)
-      const requiredErrors = await canvas.findAllByText('Required')
-
-      await expect(requiredErrors.length).toBe(2)
-    })
-
-    await step(
-      'Click Certification Type and find no options message',
-      async () => {
-        await userEvent.click(
-          await canvas.findByTestId('select__certificateTemplateId')
-        )
-        await expect(
-          await canvas.findByText(
-            'No template available for this event, contact Admin'
-          )
-        ).toBeVisible()
-      }
-    )
-  }
-}

packages/client/src/v2-events/features/events/useEvents/api.test.ts

@@ -0,0 +1,69 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import {
+  tennisClubMembershipEvent,
+  EventDocument,
+  EventIndex
+} from '@opencrvs/commons/client'
+import { queryClient, trpcOptionsProxy } from '@client/v2-events/trpc'
+import { tennisClubMembershipEventDocument } from '@client/v2-events/features/events/fixtures'
+import { addLocalEventConfig, updateLocalEventIndex } from './api'
+
+describe('updateLocalEventIndex', () => {
+  beforeEach(() => {
+    queryClient.clear()
+    addLocalEventConfig(tennisClubMembershipEvent)
+  })
+
+  afterAll(() => {
+    queryClient.clear()
+  })
+
+  it('preserves total count in cached queries after update', () => {
+    const eventDocument = tennisClubMembershipEventDocument
+
+    // Prepare a cached query simulating a workqueue result
+    const queryKey = trpcOptionsProxy.event.search.queryKey({
+      query: { type: 'and', clauses: [{ status: 'PENDING' }] }
+    })
+
+    queryClient.setQueryData(queryKey, {
+      total: 13,
+      results: [
+        { id: 'abc', status: 'PENDING' },
+        { id: eventDocument.id, status: 'PENDING' },
+        { id: 'def', status: 'REGISTERED' }
+      ] as EventIndex[]
+    })
+
+    // Call the update
+    updateLocalEventIndex(eventDocument.id, {
+      ...eventDocument,
+      status: 'REGISTERED'
+    } as EventDocument)
+
+    // Re-fetch cache
+    const updated = queryClient.getQueryData(queryKey)
+
+    // total must NOT be overwritten by results.length (which is 3)
+    expect(updated?.total).toBe(13)
+
+    // the event status should update correctly
+    const updatedEvent = updated?.results.find((r) => r.id === eventDocument.id)
+    expect(updatedEvent?.status).toBe('REGISTERED')
+
+    // unrelated events untouched
+    expect(updated?.results.find((r) => r.id === 'def')?.status).toBe(
+      'REGISTERED'
+    )
+    expect(updated?.results.find((r) => r.id === 'abc')?.status).toBe('PENDING')
+  })
+})

packages/client/src/v2-events/features/events/useEvents/api.ts

@@ -8,7 +8,6 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-
 import { matchMutation } from '@tanstack/react-query'
 import {
   DecorateQueryProcedure,
@@ -104,7 +103,7 @@ export function findLocalEventIndex(id: string): EventIndex | undefined {
     .flatMap(([, data]) => data?.results || [])[0]
 }
 
-export function setEventSearchQuery(updatedEventIndex: EventIndex | undefined) {
+function setEventSearchQuery(updatedEventIndex: EventIndex | undefined) {
   if (!updatedEventIndex) {
     return
   }
@@ -144,20 +143,40 @@ export function updateLocalEventIndex(id: string, updatedEvent: EventDocument) {
     }),
     () => ({ results: [updatedEventIndex], total: 1 })
   )
-  /*
-   * Update all searches where this event is present
+
+  /**
+   * Keeps the cache in sync when an event is updated.
+   *
+   * - Iterates through all cached queries e.g. - workqueue queries.
+   * - If cached data exists, replaces the matching event in `results`
+   *   while preserving the original `total`.
+   * - If no cached data exists, seeds the cache with a minimal entry
+   *   containing the updated event.
+   *
+   * Ensures components depending on these queries re-render with fresh data.
    */
-  getQueriesData(trpcOptionsProxy.event.search).forEach(([queryKey, data]) => {
-    const { results } = data || { results: [] }
+  getQueriesData(trpcOptionsProxy.event.search).forEach(([queryKey]) => {
     queryClient.setQueryData<inferOutput<typeof trpcOptionsProxy.event.search>>(
       queryKey,
-      {
-        total: results.length,
-        results: results.map((eventIndex) =>
-          eventIndex.id === id
-            ? { ...eventIndex, ...updatedEventIndex }
-            : eventIndex
-        )
+      (oldData) => {
+        // In theory, this handles a cache miss. In practice, it should never run here since
+        // we only update events after the corresponding search query has already been fetched and cached for workqueues.
+        // Included here to satisfy typescript.
+        if (!oldData) {
+          return {
+            results: [updatedEventIndex],
+            total: 1
+          }
+        }
+
+        return {
+          ...oldData,
+          results: oldData.results.map((eventIndex) =>
+            eventIndex.id === id
+              ? { ...eventIndex, ...updatedEventIndex }
+              : eventIndex
+          )
+        }
       }
     )
   })