add data-testId

apps/app/src/components/PageControls/SearchButton.tsx

@@ -19,6 +19,7 @@ const SearchButton = (): JSX.Element => {
       type="button"
       className={`me-3 btn btn-search ${styles['btn-search']}`}
       onClick={searchButtonClickHandler}
+      data-testid="open-search-modal-button"
     >
       <span className="material-symbols-outlined">search</span>
     </button>

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -51,7 +51,11 @@ export const SearchForm = (props: Props): JSX.Element => {
   });
 
   return (
-    <form className="w-100" onSubmit={submitHandler}>
+    <form
+      className="w-100"
+      onSubmit={submitHandler}
+      data-testid="search-form"
+    >
       <input {...inputOptions} />
     </form>
   );

apps/app/src/features/search/client/components/SearchMethodMenuItem.tsx

@@ -28,33 +28,37 @@ export const SearchMethodMenuItem = (props: Props): JSX.Element => {
   return (
     <>
       { shouldShowMenuItem && (
+        <div data-testid="search-all-menu-item">
+          <SearchMenuItem
+            index={0}
+            isActive={activeIndex === 0}
+            getItemProps={getItemProps}
+            url={`/_search?q=${searchKeyword}`}
+          >
+            <span className="material-symbols-outlined fs-4 me-3">search</span>
+            <span>{searchKeyword}</span>
+            <div className="ms-auto">
+              <span>{t('search_method_menu_item.search_in_all')}</span>
+            </div>
+          </SearchMenuItem>
+        </div>
+      )}
+
+      <div data-testid="search-prefix-menu-item">
         <SearchMenuItem
-          index={0}
-          isActive={activeIndex === 0}
+          index={shouldShowMenuItem ? 1 : 0}
+          isActive={activeIndex === (shouldShowMenuItem ? 1 : 0)}
           getItemProps={getItemProps}
-          url={`/_search?q=${searchKeyword}`}
+          url={`/_search?q=prefix:${currentPagePath} ${searchKeyword}`}
         >
           <span className="material-symbols-outlined fs-4 me-3">search</span>
-          <span>{searchKeyword}</span>
+          <code>prefix: {currentPagePath}</code>
+          <span className="ms-2">{searchKeyword}</span>
           <div className="ms-auto">
-            <span>{t('search_method_menu_item.search_in_all')}</span>
+            <span>{t('search_method_menu_item.only_children_of_this_tree')}</span>
           </div>
         </SearchMenuItem>
-      )}
-
-      <SearchMenuItem
-        index={shouldShowMenuItem ? 1 : 0}
-        isActive={activeIndex === (shouldShowMenuItem ? 1 : 0)}
-        getItemProps={getItemProps}
-        url={`/_search?q=prefix:${currentPagePath} ${searchKeyword}`}
-      >
-        <span className="material-symbols-outlined fs-4 me-3">search</span>
-        <code>prefix: {currentPagePath}</code>
-        <span className="ms-2">{searchKeyword}</span>
-        <div className="ms-auto">
-          <span>{t('search_method_menu_item.only_children_of_this_tree')}</span>
-        </div>
-      </SearchMenuItem>
+      </div>
 
       { shouldShowMenuItem && (
         <SearchMenuItem

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -55,7 +55,7 @@ const SearchModal = (): JSX.Element => {
   }, [searchModalData?.isOpened]);
 
   return (
-    <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
+    <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal} data-testid="search-modal">
       <ModalBody>
         <Downshift
           onSelect={selectSearchMenuItemHandler}