Fix location creation bug (#1284)

* Invalidate location based queries instaed of refetching This has the consequence that refetching will refetch disabled queries as well * Update tests * Cleanup rebase * Fix lint issues
onaio · Nov 10, 2023 · 16893c2 · 16893c2
1 parent 96dc9ee
commit 16893c2
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 4 deletions.
diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/tests/index.test.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/tests/index.test.tsx
@@ -12,6 +12,21 @@ import { fhirHierarchy } from '../../../ducks/tests/fixtures';
 import { waitForElementToBeRemoved } from '@testing-library/dom';
 import { createdLocation1 } from '../../LocationForm/tests/fixtures';
 import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as notifications from '@opensrp/notifications';
+
+jest.mock('@opensrp/notifications', () => ({
+  __esModule: true,
+  ...Object.assign({}, jest.requireActual('@opensrp/notifications')),
+}));
+
+jest.mock('uuid', () => {
+  const actual = jest.requireActual('uuid');
+  return {
+    ...actual,
+    v4: () => '13cafa46-7251-429a-8d19-8da0583c0c5a',
+  };
+});
 
 jest.mock('fhirclient', () => {
   return jest.requireActual('fhirclient/lib/entry/browser');
@@ -129,6 +144,63 @@ test('renders correctly for edit locations', async () => {
   expect(screen.getByLabelText(/alias/i)).toMatchSnapshot('alias field');
 });
 
+test('#1277 - works ok for new locations', async () => {
+  const history = createMemoryHistory();
+  history.push(`/add`);
+
+  const notificationSuccessMock = jest.spyOn(notifications, 'sendSuccessNotification');
+  const notificationErrorMock = jest.spyOn(notifications, 'sendErrorNotification');
+
+  nock(props.fhirBaseURL)
+    .get(`/${locationHierarchyResourceType}/_search`)
+    .query({ _id: props.fhirRootLocationId })
+    .reply(200, fhirHierarchy);
+
+  const createdLoc = {
+    resourceType: 'Location',
+    status: 'active',
+    name: 'area51',
+    partOf: { reference: 'Location/2252', display: 'Root FHIR Location' },
+    identifier: [{ use: 'official', value: '13cafa46-7251-429a-8d19-8da0583c0c5a' }],
+    physicalType: {
+      coding: [
+        {
+          system: 'http://terminology.hl7.org/CodeSystem/location-physical-type',
+          code: 'jdn',
+          display: 'Jurisdiction',
+        },
+      ],
+    },
+    id: '13cafa46-7251-429a-8d19-8da0583c0c5a',
+  };
+
+  nock(props.fhirBaseURL).put(`/Location/${createdLoc.id}`, createdLoc).reply(201, {}).persist();
+
+  render(
+    <Router history={history}>
+      <AppWrapper {...props}></AppWrapper>
+    </Router>
+  );
+
+  await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
+
+  // simulate name change
+  const nameInput = screen.getByLabelText('Name');
+  userEvent.type(nameInput, 'area51');
+
+  const save = screen.getByRole('button', { name: 'Save' });
+  userEvent.click(save);
+
+  await waitFor(() => {
+    expect(notificationSuccessMock).toHaveBeenCalledWith('Location was successfully created');
+  });
+
+  // successful submission after action should not result in a disabled
+  // query immediately fetching data and thus running into an error.
+  expect(notificationErrorMock).not.toHaveBeenCalled();
+  expect(nock.isDone()).toBeTruthy();
+});
+
 test('data loading problem', async () => {
   const history = createMemoryHistory();
   history.push('/add');

diff --git a/packages/fhir-location-management/src/components/LocationForm/index.tsx b/packages/fhir-location-management/src/components/LocationForm/index.tsx
@@ -9,7 +9,7 @@ import {
   postPutLocationUnit,
   validationRulesFactory,
 } from './utils';
-import { locationHierarchyResourceType } from '../../constants';
+import { locationHierarchyResourceType, locationResourceType } from '../../constants';
 import { CustomTreeSelect, CustomTreeSelectProps } from './CustomTreeSelect';
 import { IfhirR4 } from '@smile-cdr/fhirts';
 import { TreeNode } from '../../helpers/types';
@@ -161,9 +161,16 @@ const LocationForm = (props: LocationFormProps) => {
               queryClient.cancelQueries([locationHierarchyResourceType]).catch((err) => {
                 throw err;
               });
-              queryClient.invalidateQueries([locationHierarchyResourceType]).catch((err) => {
-                throw err;
-              });
+              queryClient
+                .invalidateQueries({
+                  predicate: (query) =>
+                    [locationResourceType, locationHierarchyResourceType].includes(
+                      query.queryKey[0] as string
+                    ),
+                })
+                .catch((err) => {
+                  throw err;
+                });
               setSuccessUrl(successUrl);
               setAreWeDoneHere(true);
             })