feat(e2e): add data-testids to search components

Author: QAComet

src/modules/search/components/hit/index.tsx

@@ -21,7 +21,10 @@ type HitProps = {
 
 const Hit = ({ hit }: HitProps) => {
   return (
-    <LocalizedClientLink href={`/products/${hit.handle}`}>
+    <LocalizedClientLink
+      href={`/products/${hit.handle}`}
+      data-testid="search-result"
+    >
       <Container
         key={hit.id}
         className="flex sm:flex-col gap-2 w-full p-4 shadow-elevation-card-rest hover:shadow-elevation-card-hover items-center sm:justify-center"
@@ -33,7 +36,12 @@ const Hit = ({ hit }: HitProps) => {
         />
         <div className="flex flex-col justify-between group">
           <div className="flex flex-col">
-            <Text className="text-ui-fg-subtle">{hit.title}</Text>
+            <Text
+              className="text-ui-fg-subtle"
+              data-testid="search-result-title"
+            >
+              {hit.title}
+            </Text>
           </div>
         </div>
       </Container>

src/modules/search/components/hits/index.tsx

@@ -33,7 +33,10 @@ const Hits = ({
         }
       )}
     >
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
+      <div
+        className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4"
+        data-testid="search-results"
+      >
         {hits.slice(0, 6).map((hit, index) => (
           <li
             key={index}

src/modules/search/components/search-box/index.tsx

@@ -45,6 +45,7 @@ const ControlledSearchBox = ({
         <div className="flex items-center justify-between">
           <input
             ref={inputRef}
+            data-testid="search-input"
             autoComplete="off"
             autoCorrect="off"
             autoCapitalize="off"

src/modules/search/components/show-all/index.tsx

@@ -13,7 +13,10 @@ const ShowAll = () => {
 
   if (hits.length === 0) {
     return (
-      <Container className="flex gap-2 justify-center h-fit py-2">
+      <Container
+        className="flex gap-2 justify-center h-fit py-2"
+        data-testid="no-search-results-container"
+      >
         <Text>No results found.</Text>
       </Container>
     )

src/modules/search/templates/search-modal/index.tsx

@@ -63,7 +63,10 @@ export default function SearchModal() {
             indexName={SEARCH_INDEX_NAME}
             searchClient={searchClient}
           >
-            <div className="flex absolute flex-col h-fit w-full sm:w-fit">
+            <div
+              className="flex absolute flex-col h-fit w-full sm:w-fit"
+              data-testid="search-modal-container"
+            >
               <div className="w-full flex items-center gap-x-2 p-4 bg-[rgba(3,7,18,0.5)] text-ui-fg-on-color backdrop-blur-2xl rounded-rounded">
                 <MagnifyingGlassMini />
                 <SearchBox />