diff --git a/src/__tests__/landingpage.test.tsx b/src/__tests__/landingpage.test.tsx new file mode 100644 index 0000000..3af5e9a --- /dev/null +++ b/src/__tests__/landingpage.test.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import Page from '@/app/products/page'; +import * as nextNavigation from 'next/navigation'; +import request from '@/utils/axios'; + +// Mock dependencies +jest.mock('next/navigation', () => ({ + useSearchParams: jest.fn(), +})); + +jest.mock('@/utils/axios', () => ({ + get: jest.fn(), +})); + +jest.mock('@/components/Side', () => () =>
Side Component
); +jest.mock('@/components/Header', () => () =>
Header Component
); +jest.mock('@/components/Footer', () => () =>
Footer Component
); +jest.mock('@/components/ProductList', () => ({ searchResults }: { searchResults: any[] }) => ( +
Product List with {searchResults.length} results
+)); + +describe('Page Component', () => { + it('renders without crashing and fetches search results', async () => { + const mockSearchParams = { + toString: jest.fn().mockReturnValue(''), + }; + const mockResponse = [{ id: 1, name: 'Product 1' }, { id: 2, name: 'Product 2' }]; + + (nextNavigation.useSearchParams as jest.Mock).mockReturnValue(mockSearchParams); + (request.get as jest.Mock).mockResolvedValue(mockResponse); + + render(); + + // Wait for search results to be fetched and rendered + await waitFor(() => { + expect(screen.getByText('Header Component')).toBeInTheDocument(); + expect(screen.getByText('Footer Component')).toBeInTheDocument(); + expect(screen.getByText('Product List with 2 results')).toBeInTheDocument(); + expect(screen.getByText('Side Component')).toBeInTheDocument(); + }); + + // Verify that the select options are rendered + expect(screen.getByRole('combobox')).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Popular' })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Recent' })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Clothes' })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Electronics' })).toBeInTheDocument(); + }); + + it('handles error in fetching search results', async () => { + const mockSearchParams = { + toString: jest.fn().mockReturnValue(''), + }; + const mockError = new Error('Network Error'); + + (nextNavigation.useSearchParams as jest.Mock).mockReturnValue(mockSearchParams); + (request.get as jest.Mock).mockRejectedValue(mockError); + + render(); + + // Wait for error handling + await waitFor(() => { + expect(screen.getByText('Header Component')).toBeInTheDocument(); + expect(screen.getByText('Footer Component')).toBeInTheDocument(); + expect(screen.getByText('Product List with 0 results')).toBeInTheDocument(); + expect(screen.getByText('Side Component')).toBeInTheDocument(); + }); + + // Verify that the select options are rendered + expect(screen.getByRole('combobox')).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Popular' })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Recent' })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Clothes' })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Electronics' })).toBeInTheDocument(); + }); +}); diff --git a/src/__tests__/productList.test.tsx b/src/__tests__/productList.test.tsx index b710431..e1492ff 100644 --- a/src/__tests__/productList.test.tsx +++ b/src/__tests__/productList.test.tsx @@ -2,9 +2,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import '@testing-library/jest-dom'; import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'; -import SideBar from "@/components/Side" import Provider from '@/app/providers'; -import Page from '@/app/products/page'; + const queryClient = new QueryClient(); const ProductListTest = () => { @@ -25,28 +24,4 @@ describe('ProductList', () => { ); expect(await findByText('test')).toBeInTheDocument(); }); -it('renders Page without crashing', async () => { - const { findByText } = render( - - - - ); - expect(await findByText('All Products')).toBeInTheDocument(); -}); -it('renders single Page without crashing', async () => { - const { findByText } = render( - - - - ); - expect(await findByText('All Products')).toBeInTheDocument(); -}); -it('should render productList', async ()=> { - const { getByText } = render( - - - - ); - expect(getByText('Filter Product')).toBeInTheDocument() -}) }); diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx index 9441974..c5e7d22 100644 --- a/src/app/products/page.tsx +++ b/src/app/products/page.tsx @@ -1,46 +1,121 @@ -'use client'; -import React from 'react'; +'use client' +import React, { useState, useEffect, Suspense } from 'react'; +import { AiOutlineSearch } from 'react-icons/ai'; import Side from '../../components/Side'; import Header from '@/components/Header'; import Footer from '@/components/Footer'; import ProductList from '@/components/ProductList'; -import { checkIsAdmin } from '@/components/isAdmin'; +import { useSearchParams } from 'next/navigation'; +import request from '@/utils/axios'; +function SuspenseWrapper() { + const searchParams = useSearchParams(); + const [Value, setValue] = useState(''); + const [searchResults, setSearchResults] = useState([]); + const [searchQuery, setSearchQuery] = useState(''); -function Page() { - // const isAdmin = checkIsAdmin(); - - // if (isAdmin) { - // console.log('User is an admin!'); - // } else { - // console.log('User is not an admin.'); - // } + useEffect(() => { + const fetchSearchResults = async () => { + const queryParams = new URLSearchParams(searchParams.toString()); + if (searchQuery) { + queryParams.set('query', searchQuery); + } + try { + const response:any = await request.get(`/search?${queryParams.toString()}`); + setSearchResults(response); + } catch (error) { + console.error('Error fetching search results:', error); + } + }; + + fetchSearchResults(); + }, [searchParams, searchQuery]); + + const handleSearch = async (e: { preventDefault: () => void; }) => { + e.preventDefault(); + console.log("Search query:", Value); + + try { + let queryParams: any = {}; + const trimmedValue = Value.trim(); + const numericValue = parseFloat(trimmedValue); + + if (!isNaN(numericValue)) { + queryParams.minPrice = numericValue; + } + else if (!isNaN(numericValue)) { + queryParams.maxPrice = numericValue; } + else if (!isNaN(numericValue)) { + queryParams.minPrice = numericValue; + queryParams.maxPrice = numericValue; + } else if(trimmedValue.length > 0 ) { + + queryParams.name = Value; + + }else if(trimmedValue.length > 0 ) { + + } else if(trimmedValue.length > 0 ) { + + queryParams.name = Value; + queryParams.category = Value; + } + + const queryString = new URLSearchParams(queryParams).toString(); + console.log(queryString) + const url = `/search?${new URLSearchParams(queryParams).toString()}`; + + const response:any = await request.get(url); + + setSearchResults(response); + + } + catch (error) { + console.error('Error fetching search results:', error); + } + }; return ( <>
-

All Products

- setValue(e.target.value)} + /> + +
+ +
- +
+ +