chore(View All > useSearch): Fix unit tests

Author: danactive

app/global.css

@@ -11,3 +11,7 @@ html {
   --gridPx: 4px;
   --grid2Px: calc(2 * 4px);
 }
+
+.mapboxgl-control-container {
+  display: none;
+}

src/components/Album/AlbumClient.tsx

@@ -54,8 +54,9 @@ function AlbumClient({ items = [], meta, indexedKeywords, clusteredMarkers }: Al
     if (idx >= 0 && refImageGallery.current?.getCurrentIndex?.() !== idx) {
       refImageGallery.current?.slideToIndex(idx)
       setMemoryIndex(idx)
+      setViewed(idx)
     }
-  }, [selectId, itemsToShow, refImageGallery, setMemoryIndex])
+  }, [selectId, itemsToShow, refImageGallery, setMemoryIndex, setViewed])
 
   return (
     <div>

src/components/All/AllClient.tsx

@@ -49,8 +49,9 @@ export default function AllClient({ items, indexedKeywords, clusteredMarkers }:
     if (idx >= 0 && refImageGallery.current?.getCurrentIndex?.() !== idx) {
       refImageGallery.current?.slideToIndex(idx)
       setMemoryIndex(idx)
+      setViewed(idx)
     }
-  }, [selectId, itemsToShow, refImageGallery, setMemoryIndex])
+  }, [selectId, itemsToShow, refImageGallery, setMemoryIndex, setViewed])
 
   return (
     <div>

src/components/Persons/PersonsClient.tsx

@@ -55,8 +55,9 @@ export default function PersonsClient({
     if (idx >= 0 && refImageGallery.current?.getCurrentIndex?.() !== idx) {
       refImageGallery.current?.slideToIndex(idx)
       setMemoryIndex(idx)
+      setViewed(idx)
     }
-  }, [selectId, ageFiltered, refImageGallery, setMemoryIndex])
+  }, [selectId, ageFiltered, refImageGallery, setMemoryIndex, setViewed])
 
   // Replace controls age list if override available
   const finalControls = overrideAgeSummary ?? controls

src/components/SlippyMap/index.tsx

@@ -179,7 +179,6 @@ export default function SlippyMap({
 
   return (
     <>
-      <style global jsx>{'.mapboxgl-control-container{display:none;}'}</style>
       <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: 300 }}>
         <button
           type="button"

src/hooks/__tests__/useMemoryAndMapFilter.test.tsx

@@ -10,6 +10,7 @@ jest.mock('../useSearch', () => ({
     keyword: '',
     searchBox: <div data-testid="search-box" />,
     setVisibleCount: jest.fn(),
+    setDisplayedItems: jest.fn(),
   }),
 }))
 

src/hooks/__tests__/useSearch.vitest.tsx

@@ -269,7 +269,11 @@ describe('Clear button functionality', () => {
 
     vi.mocked(usePathname).mockReturnValue('/search')
 
-    const items = [{ corpus: 'apple' }, { corpus: 'banana' }, { corpus: 'cherry' }]
+    const items = [
+      { corpus: 'apple', filename: 'apple.jpg' },
+      { corpus: 'banana', filename: 'banana.jpg' },
+      { corpus: 'cherry', filename: 'cherry.jpg' },
+    ]
 
     // Use a wrapper component to access the hook
     function TestComponent() {
@@ -283,7 +287,7 @@ describe('Clear button functionality', () => {
     expect(container.textContent).toMatch(/for "apple"/)
 
     // Find the Clear button by title attribute
-    const clearButton = container.querySelector('button[title="Clear search"]') as HTMLButtonElement
+    const clearButton = container.querySelector('button[title="Clear search and view adjacent photos"]') as HTMLButtonElement
 
     // Mock the search params to return empty after clearing
     vi.mocked(useSearchParams).mockReturnValue({
@@ -293,7 +297,7 @@ describe('Clear button functionality', () => {
     fireEvent.click(clearButton)
 
     // Verify router.replace was called
-    expect(mockReplace).toHaveBeenCalledWith('/search')
+    expect(mockReplace).toHaveBeenCalledWith('/search?select=apple.jpg')
 
     // Check that the input field value is cleared
     await waitFor(() => {
@@ -323,21 +327,22 @@ describe('Clear button functionality', () => {
     vi.mocked(usePathname).mockReturnValue('/gallery/photos')
 
     const items = [
-      { corpus: 'apple' },
-      { corpus: 'banana' },
-      { corpus: 'cherry' },
-      { corpus: 'banana split' },
+      { corpus: 'apple', filename: 'apple.jpg' },
+      { corpus: 'banana', filename: 'banana.jpg' },
+      { corpus: 'cherry', filename: 'cherry.jpg' },
+      { corpus: 'banana split', filename: 'banana-split.jpg' },
     ]
 
     // Use a wrapper component to access the hook and set visible count
     function TestComponent() {
       const search = useSearch({ items, indexedKeywords: [] })
 
-      // Simulate setting visible count based on filtered results
-      const { filtered, setVisibleCount } = search
+      // Simulate setting visible count and displayed items based on filtered results
+      const { filtered, setVisibleCount, setDisplayedItems } = search
       React.useEffect(() => {
         setVisibleCount(filtered.length)
-      }, [filtered, setVisibleCount])
+        setDisplayedItems(filtered)
+      }, [filtered, setVisibleCount, setDisplayedItems])
 
       return <div>{search.searchBox}</div>
     }
@@ -353,7 +358,7 @@ describe('Clear button functionality', () => {
     expect(container.textContent).toMatch(/for "ban"/)
 
     // Find the Clear button
-    const clearButton = container.querySelector('button[title="Clear search"]') as HTMLButtonElement
+    const clearButton = container.querySelector('button[title="Clear search and view adjacent photos"]') as HTMLButtonElement
 
     // Mock the search params to return empty after clearing
     vi.mocked(useSearchParams).mockReturnValue({
@@ -363,7 +368,7 @@ describe('Clear button functionality', () => {
     fireEvent.click(clearButton)
 
     // Verify URL was cleared (router.replace called with path only, no keyword)
-    expect(mockReplace).toHaveBeenCalledWith('/gallery/photos')
+    expect(mockReplace).toHaveBeenCalledWith('/gallery/photos?select=banana.jpg')
 
     // Re-render to reflect the cleared state
     rerender(<TestComponent />)

src/hooks/useSearch.tsx

@@ -48,19 +48,19 @@ export default function useSearch<ItemType extends ServerSideItem>({
   const [inputValue, setInputValue] = useState<string>(initialKeyword)
   const [displayedItems, setDisplayedItems] = useState<ItemType[]>(items)
 
+  const filtered = useMemo(() => {
+    if (!keyword) return items
+    return items.filter((item) => matchCorpus(item.corpus, keyword))
+  }, [items, keyword])
+
   // Count of currently visible thumbnails (consumer can override this if needed)
-  const [visibleCount, setVisibleCount] = useState<number>(items.length)
+  const [visibleCount, setVisibleCount] = useState<number>(filtered.length)
 
   // Make setVisibleCount stable to prevent useEffect loops
   const setVisibleCountStable = useCallback((count: number) => {
     setVisibleCount((prev) => (prev === count ? prev : count))
   }, [])
 
-  const filtered = useMemo(() => {
-    if (!keyword) return items
-    return items.filter((item) => matchCorpus(item.corpus, keyword))
-  }, [items, keyword])
-
   // Adjust visibleCount when filtered items change during render
   // This avoids a double render caused by useEffect synchronization
   const [prevFiltered, setPrevFiltered] = useState(filtered)