Fixing an issue with Highlight (chakra-ui#6644)

* Fixing an issue with highlight * Simplifying an object property * docs: add changelog * Fixing tests Co-authored-by: Segun Adebayo <[email protected]>
isongwei · Sep 8, 2022 · a9b004c · a9b004c
1 parent 8d0ca11
commit a9b004c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/blue-chicken-marry.md b/.changeset/blue-chicken-marry.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/layout": patch
+---
+
+Fixing an issue with `Highlight`
diff --git a/packages/components/layout/src/highlight.tsx b/packages/components/layout/src/highlight.tsx
@@ -36,7 +36,7 @@ function buildRegex(query: string[]) {
 function highlightWords({ text, query }: Options): Chunk[] {
   const regex = buildRegex(Array.isArray(query) ? query : [query])
   if (!regex) {
-    return []
+    return [{ text, match: false}]
   }
   const result = text.split(regex).filter(Boolean)
   return result.map((str) => ({ text: str, match: regex.test(str) }))

diff --git a/packages/components/layout/tests/layout.test.tsx b/packages/components/layout/tests/layout.test.tsx
@@ -177,15 +177,18 @@ describe("<Divider />", () => {
 
 describe("<Highlight/>", () => {
   test.each([[], ""])(
-    "useHighlight returns no matches if queries is empty %p ",
+    "useHighlight returns no matches if queries is empty but returns original value",
     (query) => {
+      const text = "this is an ordinary text which should not have any matches"
       const { result } = hooks.render(() =>
         useHighlight({
-          query: query,
-          text: "this is an ordinary text which should not have any matches",
+          query,
+          text,
         }),
       )
-      expect(result.current).toHaveLength(0)
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].match).toBe(false)
+      expect(result.current[0].text).toBe(text)
     },
   )