Janady13/llms-txt-hub / apps/web/components/search/__tests__/search-results.test.tsx

1import { render, screen } from '@testing-library/react' 2import { SearchResults } from '@/components/search/search-results' 3import { useSearch } from '@/components/search/use-search' 4 5// Mock Next.js navigation hooks 6jest.mock('next/navigation', () => ({ 7 useSearchParams: jest.fn() 8})) 9 10// Mock the useSearch hook 11jest.mock('../use-search') 12const mockUseSearch = useSearch as jest.MockedFunction<typeof useSearch> 13const mockUseSearchParams = require('next/navigation').useSearchParams as jest.MockedFunction<any> 14 15// Mock child components 16jest.mock('@/components/empty-state', () => ({ 17 EmptyState: ({ 18 title, 19 description, 20 actionLabel 21 }: { 22 title: string 23 description: string 24 actionLabel: string 25 }) => ( 26 <div> 27 <h2>{title}</h2> 28 <p>{description}</p> 29 <a href="/test">{actionLabel}</a> 30 </div> 31 ) 32})) 33 34jest.mock('@/components/search/search-filters', () => ({ 35 SearchFilters: () => <div>Search Filters</div> 36})) 37 38jest.mock('@/components/websites-list-with-sort', () => ({ 39 WebsitesListWithSort: ({ initialWebsites }: { initialWebsites: any[] }) => ( 40 <div> 41 {initialWebsites.map(result => ( 42 <div key={result.slug} data-testid={`result-${result.slug}`}> 43 <h3>{result.name}</h3> 44 <p>{result.description}</p> 45 <span>{result.category}</span> 46 </div> 47 ))} 48 </div> 49 ) 50})) 51 52jest.mock('@/lib/routes', () => ({ 53 getRoute: jest.fn(() => '/') 54})) 55 56const mockResults = [ 57 { 58 slug: 'example-site', 59 name: 'Example Site', 60 description: 'A test website', 61 website: 'https://example.com', 62 category: 'Tools', 63 categories: ['Tools'], 64 tags: ['test', 'example'], 65 llmsUrl: 'https://example.com/llms.txt', 66 llmsFullUrl: 'https://example.com/llms-full.txt', 67 publishedAt: '2023-01-01' 68 }, 69 { 70 slug: 'another-site', 71 name: 'Another Site', 72 description: 'Another test website', 73 website: 'https://another.com', 74 category: 'Education', 75 categories: ['Education'], 76 tags: ['learning', 'education'], 77 llmsUrl: 'https://another.com/llms.txt', 78 llmsFullUrl: 'https://another.com/llms-full.txt', 79 publishedAt: '2023-01-02' 80 }, 81 { 82 slug: 'third-site', 83 name: 'Third Site', 84 description: 'Third test website', 85 website: 'https://third.com', 86 category: 'Tools', 87 categories: ['Tools'], 88 tags: ['utility', 'tools'], 89 llmsUrl: 'https://third.com/llms.txt', 90 llmsFullUrl: 'https://third.com/llms-full.txt', 91 publishedAt: '2023-01-03' 92 } 93] 94 95describe('SearchResults', () => { 96 beforeEach(() => { 97 jest.clearAllMocks() 98 // Mock search params to return empty by default 99 mockUseSearchParams.mockReturnValue({ 100 get: jest.fn(() => '') 101 }) 102 }) 103 104 it('should display loading state', () => { 105 mockUseSearchParams.mockReturnValue({ 106 get: jest.fn(() => 'test') 107 }) 108 mockUseSearch.mockReturnValue({ 109 results: [], 110 loading: true, 111 error: null 112 }) 113 114 render(<SearchResults />) 115 116 // Look for the spinner element 117 expect(document.querySelector('.animate-spin')).toBeInTheDocument() 118 }) 119 120 it('should display error state', () => { 121 const errorMessage = 'Search failed' 122 mockUseSearchParams.mockReturnValue({ 123 get: jest.fn(() => 'test') 124 }) 125 mockUseSearch.mockReturnValue({ 126 results: [], 127 loading: false, 128 error: errorMessage 129 }) 130 131 render(<SearchResults />) 132 133 expect(screen.getByText('Something went wrong')).toBeInTheDocument() 134 expect(screen.getByText(errorMessage)).toBeInTheDocument() 135 expect(screen.getByText('Refresh Page')).toBeInTheDocument() 136 }) 137 138 it('should display start search message when no query', () => { 139 mockUseSearchParams.mockReturnValue({ 140 get: jest.fn(() => '') 141 }) 142 mockUseSearch.mockReturnValue({ 143 results: [], 144 loading: false, 145 error: null 146 }) 147 148 render(<SearchResults />) 149 150 expect(screen.getByText('Start Your Search')).toBeInTheDocument() 151 expect(screen.getByText(/Type something in the search bar above/)).toBeInTheDocument() 152 expect(screen.getByText('Explore All Projects')).toBeInTheDocument() 153 }) 154 155 it('should display no results found when query returns empty', () => { 156 mockUseSearchParams.mockReturnValue({ 157 get: jest.fn(() => 'nonexistent') 158 }) 159 mockUseSearch.mockReturnValue({ 160 results: [], 161 loading: false, 162 error: null 163 }) 164 165 render(<SearchResults />) 166 167 expect(screen.getByText('Nothing Found')).toBeInTheDocument() 168 expect(screen.getByText(/We couldn't find any results for/)).toBeInTheDocument() 169 }) 170 171 it('should display search results', () => { 172 mockUseSearchParams.mockReturnValue({ 173 get: jest.fn(() => 'test') 174 }) 175 mockUseSearch.mockReturnValue({ 176 results: mockResults, 177 loading: false, 178 error: null 179 }) 180 181 render(<SearchResults />) 182 183 expect(screen.getByTestId('result-example-site')).toBeInTheDocument() 184 expect(screen.getByTestId('result-another-site')).toBeInTheDocument() 185 expect(screen.getByTestId('result-third-site')).toBeInTheDocument() 186 187 expect(screen.getByText('Example Site')).toBeInTheDocument() 188 expect(screen.getByText('Another Site')).toBeInTheDocument() 189 expect(screen.getByText('Third Site')).toBeInTheDocument() 190 }) 191 192 it('should show category filters when more than 3 results', () => { 193 const manyResults = [ 194 ...mockResults, 195 { 196 slug: 'fourth-site', 197 name: 'Fourth Site', 198 description: 'Fourth test website', 199 website: 'https://fourth.com', 200 category: 'Education', 201 categories: ['Education'], 202 tags: ['learning'], 203 llmsUrl: 'https://fourth.com/llms.txt', 204 llmsFullUrl: 'https://fourth.com/llms-full.txt', 205 publishedAt: '2023-01-04' 206 } 207 ] 208 209 mockUseSearchParams.mockReturnValue({ 210 get: jest.fn(() => 'test') 211 }) 212 mockUseSearch.mockReturnValue({ 213 results: manyResults, 214 loading: false, 215 error: null 216 }) 217 218 render(<SearchResults />) 219 220 expect(screen.getByText(/Results by category:/)).toBeInTheDocument() 221 expect(screen.getByText(/Tools \(2\)/)).toBeInTheDocument() 222 expect(screen.getByText(/Education \(2\)/)).toBeInTheDocument() 223 }) 224 225 it('should pass correct query to useSearch hook', () => { 226 const query = 'specific search term' 227 mockUseSearchParams.mockReturnValue({ 228 get: jest.fn(() => query) 229 }) 230 mockUseSearch.mockReturnValue({ 231 results: [], 232 loading: false, 233 error: null 234 }) 235 236 render(<SearchResults />) 237 238 expect(mockUseSearch).toHaveBeenCalledWith(query) 239 }) 240 241 it('should handle empty query gracefully', () => { 242 mockUseSearchParams.mockReturnValue({ 243 get: jest.fn(() => '') 244 }) 245 mockUseSearch.mockReturnValue({ 246 results: [], 247 loading: false, 248 error: null 249 }) 250 251 render(<SearchResults />) 252 253 expect(screen.getByText('Start Your Search')).toBeInTheDocument() 254 }) 255 256 it('should render error message when search hook returns error', () => { 257 mockUseSearchParams.mockReturnValue({ 258 get: jest.fn(() => 'test') 259 }) 260 mockUseSearch.mockReturnValue({ 261 results: [], 262 loading: false, 263 error: 'Network error' 264 }) 265 266 render(<SearchResults />) 267 268 expect(screen.getByText('Something went wrong')).toBeInTheDocument() 269 expect(screen.getByText('Network error')).toBeInTheDocument() 270 }) 271 272 it('should call useSearch with provided query parameter', () => { 273 const testQuery = 'machine learning' 274 mockUseSearchParams.mockReturnValue({ 275 get: jest.fn(() => testQuery) 276 }) 277 mockUseSearch.mockReturnValue({ 278 results: mockResults, 279 loading: false, 280 error: null 281 }) 282 283 render(<SearchResults />) 284 285 expect(mockUseSearch).toHaveBeenCalledWith(testQuery) 286 expect(mockUseSearch).toHaveBeenCalledTimes(1) 287 }) 288}) 289