feat-wishlist-management

package.json

@@ -35,6 +35,7 @@
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "react-spinners": "^0.13.8",
+    "react-swipeable": "^7.0.1",
     "redux": "^5.0.1",
     "redux-mock-store": "^1.5.4",
     "vitest": "^1.6.0"

src/Routes/Router.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import PageTitle from '../components/PageTitle';
 import Register from '../pages/Authentication/Register';
 import RegisterVendor from '../pages/Authentication/RegisterVendor';
 import VerifyEmail from '../pages/Authentication/VerifyEmail';
 import Login, { DecodedToken } from '../pages/Authentication/Login';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../redux/store';
 import GoogleLoginSuccess from '../pages/Authentication/GoogleLoginSuccess';
 import { useJwt } from 'react-jwt';
@@ -21,6 +21,9 @@ import DashboardNewProducts from '../components/Products/DashboardNewProducts/Da
 import MainLayout from '../layout/MainLayout';
 import Home from '../pages/LandingPage/Home';
 import SearchPage from '../pages/searchPage';
+import WishlistPage from '../pages/WishlistPage/WishlistPage';
+import { setOnWishlistPage } from '../redux/reducers/wishlistReducer';
+import { useLocation } from 'react-router-dom';
 
 const Router = () => {
   const { userToken } = useSelector((state: RootState) => state.auth);
@@ -30,13 +33,24 @@ const Router = () => {
   const isVendor = decodedToken?.role.toLowerCase() === 'vendor';
   const isBuyer = decodedToken?.role.toLowerCase() === 'buyer';
 
+  const location = useLocation();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (location.pathname === '/wishlist') {
+      dispatch(setOnWishlistPage(true));
+    } else {
+      dispatch(setOnWishlistPage(false));
+    }
+  }, [location.pathname, dispatch]);
+
   return (
     <Routes>
       <Route
         path="/"
         element={
           <MainLayout>
-            <PageTitle title="Knights Store | Register" />
+            <PageTitle title="Knights Store" />
             <Home />
           </MainLayout>
         }
@@ -144,6 +158,17 @@ const Router = () => {
           </MainLayout>
         }
       />
+
+      <Route
+        path="/wishlist"
+        element={
+          <MainLayout>
+            <PageTitle title="Knights Store | Wishlist" />
+            <WishlistPage />
+          </MainLayout>
+        }
+      />
+
       <Route path="/vendor/dashboard" element={<DashboardLayout />}>
         <Route path="products" element={<DashboarInnerLayout />}>
           <Route path="" element={<DashboardProducts />} />

src/__test__/components/ProductCard/clientProductCard.test.tsx

@@ -5,9 +5,103 @@ import { MemoryRouter } from 'react-router-dom';
 import store from '../../../redux/store';
 import { Provider } from 'react-redux';
 import ClientProductCard, { ProductProp } from '../../../components/Products/ProductCard/ClientProductCard';
-describe('Home( landing page) test', () => {
-  beforeAll(() => {});
-  it('renders the Home Page', () => {
+import { setCredentials } from '../../../redux/reducers/authReducer';
+import { setOnWishlistPage, setWishlist } from '../../../redux/reducers/wishlistReducer';
+
+const wishlistProduct = [
+  {
+    wishListDetails: {
+      createdAt: new Date(Date.now()),
+      id: 1,
+      productId: '1'
+    },
+    productInfo: {
+      id: '1',
+      name: 'Product 1',
+      images: ['image1.jpg'],
+      categories: [],
+      newPrice: '100',
+      oldPrice: '120',
+      updatedAt: new Date(),
+      createdAt: new Date(Date.now()),
+      description: '',
+      isAvailable: false,
+      quantity: ''
+    }
+  }
+];
+
+describe('product card on home page', () => {
+  beforeAll(() => {
+    vi.resetAllMocks();
+    store.dispatch(setCredentials('userToken'));
+    store.dispatch(setWishlist(wishlistProduct));
+  });
+  it('renders collectly when product is not in wishlist', () => {
+    const sampleProduct: ProductProp = {
+      categories: [
+        {
+          name: 'cat1',
+          id: 'testId',
+          updatedAt: new Date(),
+          createdAt: new Date(),
+          products: [
+            {
+              id: 'testId'
+            }
+          ]
+        }
+      ],
+      createdAt: new Date(),
+      description: 'Description',
+      images: ['image.jpg'],
+      isAvailable: true,
+      name: 'product',
+      newPrice: '2000',
+      quantity: '2',
+      updatedAt: new Date(),
+      vendor: {
+        firstName: 'seller',
+        lastName: 'sellerLastName'
+      }
+    };
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ClientProductCard product={sampleProduct} />
+        </MemoryRouter>
+      </Provider>
+    );
+    expect(screen.getByText(sampleProduct.name)).toBeInTheDocument();
+    expect(screen.getAllByTestId('productDiv').length).toBe(1);
+
+    expect(screen.getByTestId('addButton')).toBeInTheDocument();
+  });
+
+  it('renders correctly when the product is in the wishlist', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ClientProductCard product={wishlistProduct[0].productInfo} />
+        </MemoryRouter>
+      </Provider>
+    );
+    expect(screen.getByText(wishlistProduct[0].productInfo.name)).toBeInTheDocument();
+    expect(screen.getAllByTestId('productDiv').length).toBe(1);
+
+    expect(screen.getByTestId('removeButton')).toBeInTheDocument();
+  });
+});
+
+describe('product card on wishlist page', () => {
+  beforeAll(() => {
+    vi.resetAllMocks();
+    store.dispatch(setCredentials('userToken'));
+    store.dispatch(setWishlist(wishlistProduct));
+    store.dispatch(setOnWishlistPage(true));
+  });
+  it('renders collectly when product is in wishlist and on wishlist page', () => {
     const sampleProduct: ProductProp = {
       categories: [
         {
@@ -35,6 +129,7 @@ describe('Home( landing page) test', () => {
         lastName: 'sellerLastName'
       }
     };
+
     render(
       <Provider store={store}>
         <MemoryRouter>
@@ -43,5 +138,8 @@ describe('Home( landing page) test', () => {
       </Provider>
     );
     expect(screen.getByText(sampleProduct.name)).toBeInTheDocument();
+    expect(screen.getAllByTestId('productDiv').length).toBe(1);
+
+    expect(screen.getByTestId('deleteButton')).toBeInTheDocument();
   });
 });

src/__test__/pages/Authentication/otp.test.tsx

@@ -1,11 +1,24 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { Provider } from 'react-redux';
 import store from '../../../redux/store';
 import Otp from '../../../pages/Authentication/OtpPage';
+import { toast } from 'react-hot-toast';
+
+vi.mock('react-hot-toast', () => ({
+  toast: {
+    error: vi.fn()
+  }
+}));
+
+vi.mock('axios');
 
 describe('OtpPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it('Renders the OtpPage component with all expected elements', () => {
     render(
       <Provider store={store}>
@@ -20,7 +33,7 @@ describe('OtpPage', () => {
       selector: 'p'
     });
     expect(descriptionElement).toBeInTheDocument();
-    // Verify OTP input fields
+
     const otpInputs = screen.getAllByRole('textbox');
     expect(otpInputs).toHaveLength(6);
     otpInputs.forEach((input) => expect(input).toHaveAttribute('maxLength', '1'));
@@ -42,6 +55,8 @@ describe('OtpPage', () => {
     const verifyButton = screen.getByRole('button', { name: 'Verify' });
 
     fireEvent.click(verifyButton);
+
+    expect(toast.error).toHaveBeenCalledWith('Fill all the OTP fields.');
   });
 });
 
@@ -58,7 +73,6 @@ describe('OtpPage handleChange', () => {
       expect(input).toHaveValue('');
     });
 
-    // Simulate entering a digit in each OTP input
     otpInputs.forEach((input, index) => {
       fireEvent.change(input, { target: { value: `${index + 1}` } });
       expect(input).toHaveValue(`${index + 1}`);
@@ -74,12 +88,10 @@ describe('OtpPage handleChange', () => {
 
     const otpInputs = screen.getAllByRole('textbox');
 
-    // Ensure the inputs are initially empty
     otpInputs.forEach((input) => {
       expect(input).toHaveValue('');
     });
 
-    // Simulate entering a non-digit character
     otpInputs.forEach((input) => {
       fireEvent.change(input, { target: { value: 'a' } });
       expect(input).toHaveValue('');