Add tests for partial matches and full matches, non fully highlighted

Author: Strift

packages/autocomplete-client/src/search/__tests__/fetchMeilisearchResults.test.ts

@@ -95,7 +95,7 @@ describe('fetchMeilisearchResults', () => {
     expect(results[0].hits[0]._highlightResult?.id?.value).toEqual(String(2))
   })
 
-  test('with fully highlighted match', async () => {
+  test('highlight results contain fully highlighted match', async () => {
     const pre = '<em>'
     const post = '</em>'
     const results = await fetchMeilisearchResults({
@@ -119,4 +119,70 @@ describe('fetchMeilisearchResults', () => {
       matchedWords: ['Ariel'],
     })
   })
+
+  test('highlight results contains full match but not fully highlighted', async () => {
+    const pre = '<em>'
+    const post = '</em>'
+    const results = await fetchMeilisearchResults({
+      searchClient,
+      queries: [
+        {
+          indexName: INDEX_NAME,
+          query: 'Star',
+          params: {
+            highlightPreTag: pre,
+            highlightPostTag: post,
+          },
+        },
+      ],
+    })
+
+    expect(results[0].hits[0]._highlightResult?.title).toEqual({
+      value: `${pre}Star${post} Wars`,
+      fullyHighlighted: false,
+      matchLevel: 'full',
+      matchedWords: ['Star'],
+    })
+  })
+
+  test('highlight results contain partially highlighted match', async () => {
+    const pre = '<em>'
+    const post = '</em>'
+    const movie = MOVIES[0]
+    const results = await fetchMeilisearchResults({
+      searchClient,
+      queries: [
+        {
+          indexName: INDEX_NAME,
+          query: 'Tasto', // missing 'i' from 'Taisto'
+          params: {
+            highlightPreTag: pre,
+            highlightPostTag: post,
+          },
+        },
+      ],
+    })
+
+    expect(results[0].hits[0]._highlightResult?.overview).toEqual({
+      // The first word of the overview is highlighted
+      value: `${pre}Taist${post}` + (movie.overview as string).slice(5),
+      fullyHighlighted: false,
+      matchLevel: 'partial',
+      matchedWords: ['Taist'],
+    })
+  })
+
+  test('highlight results contain no match', async () => {
+    const results = await fetchMeilisearchResults({
+      searchClient,
+      queries: [{ indexName: INDEX_NAME, query: '' }],
+    })
+
+    expect(results[0].hits[0]._highlightResult?.title).toEqual({
+      value: 'Ariel',
+      fullyHighlighted: false,
+      matchLevel: 'none',
+      matchedWords: [],
+    })
+  })
 })

packages/autocomplete-client/src/search/fetchMeilisearchResults.ts

@@ -78,19 +78,21 @@ export function fetchMeilisearchResults<TRecord = Record<string, any>>({
                       ...acc,
                       [field]: highlightResult.map((highlight) =>
                         calculateHighlightMetadata(
-                          highlight.value,
+                          query.query || '',
                           query.params?.highlightPreTag || HIGHLIGHT_PRE_TAG,
-                          query.params?.highlightPostTag || HIGHLIGHT_POST_TAG
+                          query.params?.highlightPostTag || HIGHLIGHT_POST_TAG,
+                          highlight.value
                         )
                       ),
                     }
                   }
                   return {
                     ...acc,
                     [field]: calculateHighlightMetadata(
-                      highlightResult.value,
+                      query.query || '',
                       query.params?.highlightPreTag || HIGHLIGHT_PRE_TAG,
-                      query.params?.highlightPostTag || HIGHLIGHT_POST_TAG
+                      query.params?.highlightPostTag || HIGHLIGHT_POST_TAG,
+                      highlightResult.value
                     ),
                   }
                 }, {} as HighlightResult<TRecord>),
@@ -102,21 +104,33 @@ export function fetchMeilisearchResults<TRecord = Record<string, any>>({
     )
 }
 
+/**
+ * Calculate the highlight metadata for a given highlight value.
+ * @param query - The query string.
+ * @param preTag - The pre tag.
+ * @param postTag - The post tag.
+ * @param highlightValue - The highlight value response from Meilisearch.
+ * @returns The highlight metadata.
+ */
 function calculateHighlightMetadata(
-  value: string,
+  query: string,
   preTag: string,
-  postTag: string
+  postTag: string,
+  highlightValue: string
 ): HighlightMetadata {
   // Extract all highlighted segments
   const highlightRegex = new RegExp(`${preTag}(.*?)${postTag}`, 'g')
   const matches: string[] = []
   let match
-  while ((match = highlightRegex.exec(value)) !== null) {
+  while ((match = highlightRegex.exec(highlightValue)) !== null) {
     matches.push(match[1])
   }
 
-  // Remove highlight tags to get the original, unhighlighted text
-  const cleanValue = value.replace(new RegExp(`${preTag}|${postTag}`, 'g'), '')
+  // Remove highlight tags to get the highlighted text without the tags
+  const cleanValue = highlightValue.replace(
+    new RegExp(`${preTag}|${postTag}`, 'g'),
+    ''
+  )
 
   // Determine if the entire attribute is highlighted
   // fullyHighlighted = true if cleanValue and the concatenation of all matched segments are identical
@@ -129,11 +143,11 @@ function calculateHighlightMetadata(
   // - 'full' if all text is fully highlighted
   let matchLevel: 'none' | 'partial' | 'full' = 'none'
   if (matches.length > 0) {
-    matchLevel = fullyHighlighted ? 'full' : 'partial'
+    matchLevel = cleanValue.includes(query) ? 'full' : 'partial'
   }
 
   return {
-    value,
+    value: highlightValue,
     fullyHighlighted,
     matchLevel,
     matchedWords: matches,