add onSuccess and onError

department-of-veterans-affairs · Jan 17, 2025 · 6cbb351 · 6cbb351
1 parent 07e2a01
commit 6cbb351
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 15 deletions.
diff --git a/src/applications/vaos/referral-appointments/ReviewAndConfirm.jsx b/src/applications/vaos/referral-appointments/ReviewAndConfirm.jsx
@@ -28,6 +28,14 @@ const ReviewAndConfirm = props => {
   const selectedSlot = useSelector(state => getSelectedSlot(state));
   const { provider, loading, failed } = useGetProviderById(
     currentReferral.providerId,
+    {
+      onError: () => {
+        scrollAndFocus('h2');
+      },
+      onSuccess: () => {
+        scrollAndFocus('h1');
+      },
+    },
   );
 
   const facilityTimeZone = getTimezoneByFacilityId(
@@ -51,17 +59,6 @@ const ReviewAndConfirm = props => {
     [currentReferral.UUID, history, savedSelectedSlot, selectedSlot],
   );
 
-  useEffect(
-    () => {
-      if (!loading && provider) {
-        scrollAndFocus('h1');
-      } else if (failed) {
-        scrollAndFocus('h2');
-      }
-    },
-    [loading, failed, provider],
-  );
-
   useEffect(
     () => {
       if (!selectedSlot && savedSelectedSlot && provider?.slots) {

diff --git a/src/applications/vaos/referral-appointments/hooks/useGetProviderById.jsx b/src/applications/vaos/referral-appointments/hooks/useGetProviderById.jsx
@@ -5,7 +5,7 @@ import { fetchProviderDetails, setInitReferralFlow } from '../redux/actions';
 import { getProviderInfo } from '../redux/selectors';
 import { FETCH_STATUS } from '../../utils/constants';
 
-function useGetProviderById(providerId) {
+function useGetProviderById(providerId, { onSuccess, onError } = {}) {
   const dispatch = useDispatch();
   const { provider, providerFetchStatus } = useSelector(
     state => getProviderInfo(state),
@@ -18,6 +18,17 @@ function useGetProviderById(providerId) {
     providerFetchStatus === FETCH_STATUS.notStarted;
   const failed = providerFetchStatus === FETCH_STATUS.failed;
 
+  useEffect(
+    () => {
+      if (!loading && provider?.id) {
+        onSuccess?.(provider);
+      } else if (failed) {
+        onError?.();
+      }
+    },
+    [loading, failed, provider, onSuccess, onError],
+  );
+
   useEffect(
     () => {
       const isSameProvider = providerId === selectedProviderId;

diff --git a/...cations/vaos/referral-appointments/tests/hooks/useGetProviderByReferral/TestComponent.jsx b/...cations/vaos/referral-appointments/tests/hooks/useGetProviderByReferral/TestComponent.jsx
@@ -3,8 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useGetProviderById } from '../../../hooks/useGetProviderById';
 
-export default function TestComponent({ providerId }) {
-  const { provider, loading, failed } = useGetProviderById(providerId);
+export default function TestComponent({ providerId, onSuccess, onError }) {
+  const { provider, loading, failed } = useGetProviderById(providerId, {
+    onSuccess,
+    onError,
+  });
   return (
     <div data-testid="test-component">
       <p>Test component</p>
@@ -18,4 +21,6 @@ export default function TestComponent({ providerId }) {
 
 TestComponent.propTypes = {
   providerId: PropTypes.string,
+  onError: PropTypes.func,
+  onSuccess: PropTypes.func,
 };
diff --git a/...l-appointments/tests/hooks/useGetProviderByReferral/useGetProviderByReferral.unit.spec.js b/...l-appointments/tests/hooks/useGetProviderByReferral/useGetProviderByReferral.unit.spec.js
@@ -23,9 +23,10 @@ describe('Community Care Referrals', () => {
         providerFetchStatus: FETCH_STATUS.succeeded,
       },
     };
+    let stubGetProviderById;
     beforeEach(() => {
       global.XMLHttpRequest = sinon.useFakeXMLHttpRequest();
-      sandbox
+      stubGetProviderById = sandbox
         .stub(getProviderByIdModule, 'getProviderById')
         .resolves(providerDetails);
     });
@@ -115,5 +116,46 @@ describe('Community Care Referrals', () => {
       );
       expect(getByTestId('fail-status')).to.contain.text('fail status: true');
     });
+    it('should call onSuccess callback if provider is fetched', async () => {
+      const onSuccess = sandbox.spy();
+      renderWithStoreAndRouter(
+        <TestComponent providerId={providerDetails.id} onSuccess={onSuccess} />,
+        {
+          store: createTestStore({
+            ...initialState,
+            referral: {
+              selectedProvider: {},
+              providerFetchStatus: FETCH_STATUS.notStarted,
+            },
+          }),
+        },
+      );
+      await waitFor(() => {
+        sandbox.assert.calledOnce(onSuccess);
+      });
+    });
+    it('should call onError callback if provider fetch fails', async () => {
+      const onError = sandbox.spy();
+      stubGetProviderById.rejects('Network error');
+      const { getByTestId } = renderWithStoreAndRouter(
+        <TestComponent providerId={providerDetails.id} onError={onError} />,
+        {
+          store: createTestStore({
+            ...initialState,
+            referral: {
+              selectedProvider: {},
+              providerFetchStatus: FETCH_STATUS.notStarted,
+            },
+          }),
+        },
+      );
+      await waitFor(() => {
+        expect(getByTestId('loading')).to.contain.text('loading: true');
+      });
+      sandbox.assert.calledOnce(getProviderByIdModule.getProviderById);
+      await waitFor(() => {
+        sandbox.assert.calledOnce(onError);
+      });
+    });
   });
 });