Merge pull request #53 from atlp-rwanda/ft/improveproductview

src/__tests__/BuyerProduct.test.tsx

@@ -67,7 +67,7 @@ describe('Home page', () => {
     const { getByText } = render(
         <QueryClientProvider client={queryClient}>
          <Providers>
-          <ProductList />
+          <ProductList searchResults={[]} />
           </Providers> 
         </QueryClientProvider>
     );

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', () => () => <div>Side Component</div>);
+jest.mock('@/components/Header', () => () => <div>Header Component</div>);
+jest.mock('@/components/Footer', () => () => <div>Footer Component</div>);
+jest.mock('@/components/ProductList', () => ({ searchResults }: { searchResults: any[] }) => (
+  <div>Product List with {searchResults.length} results</div>
+));
+
+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(<Page />);
+
+    // 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(<Page />);
+
+    // 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();
+  });
+});

src/__tests__/productList.test.tsx

@@ -1,43 +1,31 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import {
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-} from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import SideBar from '@/components/Side';
 import Provider from '@/app/providers';
 import Page from '@/app/products/page';
-import { useRouter } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation'; // Add useRouter import
 
 const queryClient = new QueryClient();
-const ProductListTest = () => {
-  const { data } = useQuery<any>({
-    queryKey: ['test'],
-    queryFn: () => 'test',
-  });
-  return <div>{data}</div>;
-};
 
 jest.mock('next/navigation', () => ({
-  useRouter: jest.fn(),
+  useSearchParams: jest.fn(),
+  useRouter: jest.fn(), // Mock useRouter as well
 }));
 
 describe('ProductList', () => {
   beforeEach(() => {
+    (useSearchParams as jest.Mock).mockReturnValue({
+      // Mock whatever the useSearchParams function returns in your tests
+    });
+
     (useRouter as jest.Mock).mockReturnValue({
-      push: jest.fn(),
+      push: jest.fn(), // Mock useRouter functions as needed
     });
   });
-  it('renders without crashing', async () => {
-    const { findByText } = render(
-      <Provider>
-        <ProductListTest />
-      </Provider>,
-    );
-    expect(await findByText('test')).toBeInTheDocument();
-  });
+
   it('renders Page without crashing', async () => {
     const { findByText } = render(
       <Provider>
@@ -46,20 +34,6 @@ describe('ProductList', () => {
     );
     expect(await findByText('All Products')).toBeInTheDocument();
   });
-  it('renders single Page without crashing', async () => {
-    const { findByText } = render(
-      <Provider>
-        <Page />
-      </Provider>,
-    );
-    expect(await findByText('All Products')).toBeInTheDocument();
-  });
-  it('should render productList', async () => {
-    const { getByText } = render(
-      <QueryClientProvider client={queryClient}>
-        <SideBar />
-      </QueryClientProvider>,
-    );
-    expect(getByText('Filter Product')).toBeInTheDocument();
-  });
+
+
 });

src/__tests__/reset.test.tsx

@@ -61,4 +61,4 @@ describe('ResetPassword component', () => {
     );
     expect(getByText("Please insert your new password you'd like to use")).toBeInTheDocument();
   });
-});
+});

src/app/globals.css

@@ -171,6 +171,9 @@ body {}
   opacity: 1;
 }
 
+.mySwiper4 .swiper-slide-thumb-active {
+  opacity: 1;
+}
 .swiper-slide img {
   display: block;
   width: 100%;