Merge pull request Expensify#40658 from ShridharGoel/ui_tests

[NoQA] Tests for group chat name
iusegithub · Jun 18, 2024 · 93b2a74 · 93b2a74
2 parents 6127a1f + 5660b25
commit 93b2a74
Show file tree

Hide file tree

Showing 7 changed files with 575 additions and 47 deletions.
diff --git a/__mocks__/@react-native-reanimated/index.ts b/__mocks__/@react-native-reanimated/index.ts
@@ -0,0 +1,10 @@
+// __mocks__/react-native-reanimated/index.js
+const actualAnimated = jest.requireActual('react-native-reanimated/mock');
+
+const mock = {
+    ...actualAnimated,
+    createAnimatedPropAdapter: jest.fn(),
+    useReducedMotion: jest.fn(),
+};
+
+export default mock;
diff --git a/src/pages/InviteReportParticipantsPage.tsx b/src/pages/InviteReportParticipantsPage.tsx
@@ -11,6 +11,7 @@ import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem
 import type {Section} from '@components/SelectionList/types';
 import withNavigationTransitionEnd from '@components/withNavigationTransitionEnd';
 import type {WithNavigationTransitionEndProps} from '@components/withNavigationTransitionEnd';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -44,7 +45,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [searchTerm, setSearchTerm] = useState('');
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const [selectedOptions, setSelectedOptions] = useState<ReportUtils.OptionData[]>([]);
     const [invitePersonalDetails, setInvitePersonalDetails] = useState<ReportUtils.OptionData[]>([]);
     const [recentReports, setRecentReports] = useState<ReportUtils.OptionData[]>([]);
@@ -57,7 +58,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
     );
 
     useEffect(() => {
-        const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], searchTerm, excludedUsers, false, options.reports, true);
+        const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers, false, options.reports, true);
 
         // Update selectedOptions with the latest personalDetails information
         const detailsMap: Record<string, OptionsListUtils.MemberForList> = {};
@@ -77,7 +78,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
         setRecentReports(inviteOptions.recentReports);
         setSelectedOptions(newSelectedOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change
-    }, [personalDetails, betas, searchTerm, excludedUsers, options]);
+    }, [personalDetails, betas, debouncedSearchTerm, excludedUsers, options]);
 
     const sections = useMemo(() => {
         const sectionsArr: Sections = [];
@@ -88,11 +89,11 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
 
         // Filter all options that is a part of the search term or in the personal details
         let filterSelectedOptions = selectedOptions;
-        if (searchTerm !== '') {
+        if (debouncedSearchTerm !== '') {
             filterSelectedOptions = selectedOptions.filter((option) => {
                 const accountID = option?.accountID;
                 const isOptionInPersonalDetails = invitePersonalDetails.some((personalDetail) => accountID && personalDetail?.accountID === accountID);
-                const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(searchTerm);
+                const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm);
                 const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue);
                 return isPartOfSearchTerm || isOptionInPersonalDetails;
             });
@@ -130,7 +131,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
         }
 
         return sectionsArr;
-    }, [invitePersonalDetails, searchTerm, selectedOptions, translate, userToInvite, areOptionsInitialized, recentReports]);
+    }, [invitePersonalDetails, debouncedSearchTerm, selectedOptions, translate, userToInvite, areOptionsInitialized, recentReports]);
 
     const toggleOption = useCallback(
         (option: OptionsListUtils.MemberForList) => {
@@ -171,7 +172,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
     }, [selectedOptions, backRoute, reportID, validate]);
 
     const headerMessage = useMemo(() => {
-        const searchValue = searchTerm.trim().toLowerCase();
+        const searchValue = debouncedSearchTerm.trim().toLowerCase();
         const expensifyEmails = CONST.EXPENSIFY_EMAILS as string[];
         if (!userToInvite && expensifyEmails.includes(searchValue)) {
             return translate('messages.errorMessageInvalidEmail');
@@ -187,7 +188,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
             return translate('messages.userIsAlreadyMember', {login: searchValue, name: reportName ?? ''});
         }
         return OptionsListUtils.getHeaderMessage(invitePersonalDetails.length !== 0, !!userToInvite, searchValue);
-    }, [searchTerm, userToInvite, excludedUsers, invitePersonalDetails, translate, reportName]);
+    }, [debouncedSearchTerm, userToInvite, excludedUsers, invitePersonalDetails, translate, reportName]);
 
     const footerContent = useMemo(
         () => (