Feature/search result nav link (#378)

* feat: Added nav links to search results * fix: warning about events firing after test has ended
algorandfoundation · Jan 22, 2025 · c4f41e5 · c4f41e5
1 parent 4fdd0d9
commit c4f41e5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/features/search/components/search.test.tsx b/src/features/search/components/search.test.tsx
@@ -86,14 +86,19 @@ describe('search', () => {
         return executeComponentTest(
           () => render(<Search />, undefined, myStore),
           async (component, user) => {
-            const input = component.getByPlaceholderText(searchPlaceholderLabel)
-            await user.type(input, id)
-            const results = (await component.findAllByText(label, undefined, { timeout: 1000 })).map((result) => result.parentElement)
-            const result = results.find((result) => result!.textContent!.includes(type))!
-            await user.click(result)
-
             await waitFor(
               async () => {
+                const input = component.getByPlaceholderText(searchPlaceholderLabel)
+                await user.type(input, id)
+
+                const results = (await component.findAllByText(label, undefined, { timeout: 1000 })).map((result) => result.parentElement)
+                results.forEach((result) => {
+                  const link = result!.querySelector('a')
+                  expect(link).toHaveTextContent(label)
+                })
+
+                const result = results.find((result) => result!.textContent!.includes(type))!
+                await user.click(result)
                 expect(mockNavigate).toHaveBeenCalledWith(`/localnet/${type.toLowerCase()}/${id}`)
               },
               { timeout: 10000 }

diff --git a/src/features/search/components/search.tsx b/src/features/search/components/search.tsx
@@ -10,7 +10,7 @@ import {
 import { cn } from '@/features/common/utils'
 import { useCallback, useEffect, useRef } from 'react'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, NavLink } from 'react-router-dom'
 import { useSearch } from '../data'
 import { Loader2 as Loader } from 'lucide-react'
 import { useLocationChange } from '@/features/common/hooks/use-location-change'
@@ -93,7 +93,9 @@ export function Search() {
                   {results.map((result) => {
                     return (
                       <CommandItem key={`${result.type}-${result.id}`} value={result.url} onSelect={handleSelection}>
-                        <span>{result.label}</span>
+                        <NavLink className="truncate text-primary underline" to={result.url}>
+                          {result.label}
+                        </NavLink>
                         <span className={cn('ml-auto text-xs')}>{result.type}</span>
                       </CommandItem>
                     )