Merge pull request #443 from openedx/kiram15/ENT-9554

fix: adding typing delay to associated users table

Author: kiram15

package-lock.json

@@ -68,6 +68,7 @@
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "12.1.4",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/react-table": "^7.7.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",

package.json

@@ -18,7 +18,7 @@ export const EnterpriseCustomerUserDetail = ({
         <Hyperlink
           destination={iconLink}
           key={user?.email}
-          data-testId="icon-hyperlink"
+          data-testid="icon-hyperlink"
           target="_blank"
           showLaunchIcon={false}
         >

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx

@@ -0,0 +1,38 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
+
+import LmsApiService from '../../../../../data/services/EnterpriseApiService';
+import useCustomerUsersTableData from '../useCustomerUsersTableData';
+
+jest.mock('../../../../../data/services/EnterpriseApiService');
+const TEST_ENTERPRISE_UUID = 'test-enterprise-uuid';
+
+describe('useCustomerUsersTableData', () => {
+  it('should only search if user input is more than 3 characters', async () => {
+    const args = {
+      enterpriseUuid: TEST_ENTERPRISE_UUID,
+    };
+    const { result } = renderHook(() => useCustomerUsersTableData(args));
+    const { enterpriseUsersTableData } = result.current;
+    expect(enterpriseUsersTableData).toEqual({ itemCount: 0, pageCount: 0, results: [] });
+
+    // shouldn't fetch because its only 2 characters
+    const searchArgs1 = {
+      filters: [{ id: 'details', value: 'vi' }],
+      sortBy: [{}],
+    };
+    result.current.fetchEnterpriseUsersData(searchArgs1);
+    await waitFor(() => {
+      expect(LmsApiService.fetchEnterpriseCustomerUsers).not.toHaveBeenCalled();
+    });
+
+    const searchArgs2 = {
+      filters: [{ id: 'details', value: 'jinx' }],
+      sortBy: [{}],
+    };
+    result.current.fetchEnterpriseUsersData(searchArgs2);
+    await waitFor(() => {
+      expect(LmsApiService.fetchEnterpriseCustomerUsers).toHaveBeenCalled();
+    });
+  });
+});

src/Configuration/Customers/data/hooks/tests/useCustomerUsersTableData.test.js

@@ -19,7 +19,6 @@ const useCustomerUsersTableData = (enterpriseUuid) => {
       try {
         setIsLoading(true);
         const options = {};
-
         args.sortBy.filter((sort) => {
           const { id, desc } = sort;
           if (id === 'administrator') {
@@ -56,8 +55,11 @@ const useCustomerUsersTableData = (enterpriseUuid) => {
         setIsLoading(false);
       }
     };
+
     if (enterpriseUuid) {
-      fetch();
+      if (!args.filters.length || args.filters[0].value.length > 2) {
+        fetch();
+      }
     }
   }, [enterpriseUuid]);