Update VuiSearchResult to gracefully handle title and url values that…

… are just whitespace or empty strings. (#56)
vectara · Sep 12, 2023 · 73c0134 · 73c0134
1 parent 2a88e3b
commit 73c0134
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 3 deletions.
diff --git a/src/ui/components/searchResult/SearchResult.test.tsx b/src/ui/components/searchResult/SearchResult.test.tsx
@@ -225,5 +225,109 @@ describe("VuiSearchResult", () => {
         </DocumentFragment>
       `);
     });
+
+    test("has empty title but has url", () => {
+      const { asFragment } = render(
+        <VuiSearchResult
+          result={{
+            title: "  ",
+            url: "url",
+            snippet: { pre: "pre", text: "text", post: "" }
+          }}
+          position={1}
+        >
+          <div>children</div>
+        </VuiSearchResult>,
+        { wrapper: MemoryRouter }
+      );
+
+      expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+            >
+              1
+            </div>
+            <a
+              class="vuiLink vuiTitle vuiTitle--s"
+              href="/url#:~:text=text"
+              rel="noopener"
+              target="_blank"
+            >
+              <h3>
+                url
+              </h3>
+            </a>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+    });
+
+    test("has empty title and empty url", () => {
+      const { asFragment } = render(
+        <VuiSearchResult
+          result={{
+            title: "  ",
+            url: "  ",
+            snippet: { pre: "pre", text: "text", post: "" }
+          }}
+          position={1}
+        >
+          <div>children</div>
+        </VuiSearchResult>,
+        { wrapper: MemoryRouter }
+      );
+
+      expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+            >
+              1
+            </div>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+    });
   });
 });
diff --git a/src/ui/components/searchResult/SearchResult.tsx b/src/ui/components/searchResult/SearchResult.tsx
@@ -46,15 +46,18 @@ export const VuiSearchResult = forwardRef<HTMLDivElement | null, Props>(
       "vuiSearchResultPosition--selected": isSelected
     });
 
+    const hasTitle = title && title.trim().length > 0;
+    const hasUrl = url && url.trim().length > 0;
+
     return (
       <div className={classes} ref={ref} {...rest}>
         <div className={positionClasses}>{position}</div>
 
-        {(title || url) && (
+        {(hasTitle || hasUrl) && (
           <VuiTitle size="s">
-            {url ? (
+            {hasUrl ? (
               <VuiLink href={highlightUrl(url, text)} target="_blank">
-                <h3>{title ?? url}</h3>
+                <h3>{hasTitle ? title : url}</h3>
               </VuiLink>
             ) : (
               <h3>{title}</h3>