fix: failing tests

lib/DonorsList/DonorsContainer.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FieldArray } from 'react-final-form-arrays';
 
@@ -19,12 +19,6 @@ function DonorsContainer({ name, donorOrganizationIds }) {
     setDonorIds(ids);
   }, []);
 
-  useEffect(() => {
-    if (donorOrganizationIds.length) {
-      handleFetchDonors(donorOrganizationIds);
-    }
-  }, [donorOrganizationIds, handleFetchDonors]);
-
   const donorsMap = donors.reduce((acc, contact) => {
     acc[contact.id] = contact;
 

lib/DonorsList/DonorsContainer.test.js

@@ -21,7 +21,7 @@ jest.mock('./DonorsList', () => jest.fn(({ donorsMap }) => {
 
 jest.mock('./hooks', () => ({
   useFetchDonors: jest.fn().mockReturnValue({
-    fetchDonorsMutation: jest.fn(),
+    donors: [],
     isLoading: false,
   }),
 }));
@@ -52,7 +52,7 @@ const renderComponent = (props = {}) => (render(
 describe('DonorsContainer', () => {
   beforeEach(() => {
     useFetchDonors.mockClear().mockReturnValue({
-      fetchDonorsMutation: jest.fn(),
+      donors: [],
       isLoading: false,
     });
   });
@@ -65,7 +65,7 @@ describe('DonorsContainer', () => {
 
   it('should render Loading component', () => {
     useFetchDonors.mockClear().mockReturnValue({
-      fetchDonorsMutation: jest.fn(),
+      donors: [],
       isLoading: true,
     });
 
@@ -74,20 +74,16 @@ describe('DonorsContainer', () => {
     expect(screen.getByText('Loading')).toBeDefined();
   });
 
-  it('should call `fetchDonorsMutation` with `donorOrganizationIds`', () => {
+  it('should call `useFetchDonors` with `donorOrganizationIds`', () => {
     const mockData = [{ name: 'Amazon', code: 'AMAZ', id: '1' }];
-    const fetchDonorsMutationMock = jest.fn().mockReturnValue({
-      then: (cb) => cb(mockData),
-    });
 
     useFetchDonors.mockClear().mockReturnValue({
-      fetchDonorsMutation: fetchDonorsMutationMock,
+      donors: mockData,
       isLoading: false,
     });
 
     renderComponent({ donorOrganizationIds: ['1'] });
 
-    expect(fetchDonorsMutationMock).toHaveBeenCalled();
     expect(screen.getByText(mockData[0].name)).toBeDefined();
   });
 });

lib/DonorsList/DonorsList.js

@@ -63,7 +63,7 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
         _index,
       };
     });
-  const contentData = sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]);
+  const contentData = useMemo(() => sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]), [donors]);
 
   const resultsFormatter = useMemo(() => {
     return getResultsFormatter({ intl, fields, canViewOrganizations });

lib/DonorsList/hooks/useFetchDonors/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_DATA = [];

lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js

@@ -7,6 +7,7 @@ import {
 
 import { VENDORS_API } from '../../../constants';
 import { batchRequest } from '../../../utils';
+import { DEFAULT_DATA } from './constants';
 
 const buildQueryByIds = (itemsChunk) => {
   const query = itemsChunk
@@ -16,11 +17,11 @@ const buildQueryByIds = (itemsChunk) => {
   return query || '';
 };
 
-export const useFetchDonors = (donorOrganizationIds = []) => {
+export const useFetchDonors = (donorOrganizationIds = DEFAULT_DATA) => {
   const ky = useOkapiKy();
   const namespace = useNamespace({ key: 'fetch-donors-list' });
 
-  const { isLoading, data, refetch } = useQuery(
+  const { isLoading, data } = useQuery(
     [namespace, donorOrganizationIds],
     () => {
       return batchRequest(
@@ -36,8 +37,7 @@ export const useFetchDonors = (donorOrganizationIds = []) => {
   );
 
   return ({
-    donors: data || [],
+    donors: data || DEFAULT_DATA,
     isLoading,
-    refetch,
   });
 };