fit(frontend):testing item

Implement "Most Popular" Section on Landing Page #27

src/__test__/PopularItem.test.tsx

@@ -4,12 +4,12 @@ import SingleItem from '@/components/Popular-section/item'; // Adjust the import
 import { Product } from '@/types/product'; // Adjust the import path as per your actual setup
 import User from '@/types/user';
 
-const Role ={
+const Role = {
   id: 1,
   name: 'test',
-  permissions: ['yes']
-}
-const  vendor : User= {
+  permissions: ['yes'],
+};
+const vendor: User = {
   id: 1,
   firstName: 'John',
   lastName: 'Doe',
@@ -23,7 +23,7 @@ const  vendor : User= {
   provider: 'email',
   isVerified: true,
   status: 'active',
-}
+};
 const mockProduct: Product = {
   id: 1,
   name: 'Sample Product',
@@ -44,7 +44,7 @@ const mockProduct: Product = {
   tags: ['tag1', 'tag2'],
   type: 'Simple',
   reviews: [],
-  vendor: vendor
+  vendor: vendor,
 };
 
 describe('SingleItem Component', () => {

src/__test__/test.tsx

@@ -30,7 +30,7 @@ const mockProduct: Product = {
     firstName: 'Vendor',
     lastName: 'Name',
     email: 'niyobern@google.com',
-  }
+  },
 };
 
 describe('SingleItem Component', () => {

src/components/Popular-section/MostSelling.tsx

@@ -35,7 +35,7 @@ const MostSelling: React.FC = () => {
     }
   };
 
-  const popularProducts = items.slice(start, end); 
+  const popularProducts = items.slice(start, end);
 
   return (
     <div className=" flex flex-col mb-6">

src/components/Popular-section/PopilarTitle.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import leftIcon from '../../assets/icon/Left-Arrow.svg';
 import rightIcon from '../../assets/icon/Right-Arrow.svg';
 
-
 interface PopularTitleProps {
   section: string;
-  onLeftArrowClick: () => void; 
-  onRightArrowClick: () => void; 
+  onLeftArrowClick: () => void;
+  onRightArrowClick: () => void;
 }
 
 const PopularTitle: React.FC<PopularTitleProps> = ({

src/components/Popular-section/item.tsx

@@ -1,7 +1,6 @@
 // src/components/MostPopular/MostPopularItem.tsx
 import React from 'react';
-import {Product} from '@/types/product';
-
+import { Product } from '@/types/product';
 
 interface MostPopularItemProps {
   product: Product;

src/pages/Home.tsx

@@ -3,12 +3,12 @@ import PopularSection from '../components/Popular-section/Popular_section';
 
 function Home() {
   return (
-    <main >
+    <main>
       <div className=" relative w-full h-auto p-2 bg-violeteBg lg:p-10 md:p-10">
         <HelloSection />
       </div>
-      <div className='w-full bg-white px-8 pb-10 pt-2'>
-         <PopularSection></PopularSection>
+      <div className="w-full bg-white px-8 pb-10 pt-2">
+        <PopularSection></PopularSection>
       </div>
     </main>
   );

src/types/product.ts

@@ -32,4 +32,4 @@ export interface Product {
   averageRating: number;
   reviews: Review[];
   vendor: User;
-}
+}

src/types/user.ts

@@ -1,41 +1,41 @@
 interface Role {
-    id: number;
-    name: string;
-    permissions: string[];
-  }
-  
-  interface Order {
-    id: number;
-    orderNumber: string;
-    orderStatus: string;
-    orderTotal: number;
-    orderItems: string[];
-  }
-  
-  export default interface User {
-    id: number;
-  
-    firstName: string;
-  
-    lastName: string;
-  
-    email: string;
-  
-    password: string;
-  
-    userType: Role;
-  
-    orders: Order[];
-  
-    googleId: string;
-  
-    facebookId: string;
-  
-    picture: string;
-  
-    provider: string;
-  
-    isVerified: boolean;
-  
-    status: 'active' | 'inactive';
-  }
+  id: number;
+  name: string;
+  permissions: string[];
+}
+
+interface Order {
+  id: number;
+  orderNumber: string;
+  orderStatus: string;
+  orderTotal: number;
+  orderItems: string[];
+}
+
+export default interface User {
+  id: number;
+
+  firstName: string;
+
+  lastName: string;
+
+  email: string;
+
+  password: string;
+
+  userType: Role;
+
+  orders: Order[];
+
+  googleId: string;
+
+  facebookId: string;
+
+  picture: string;
+
+  provider: string;
+
+  isVerified: boolean;
+
+  status: 'active' | 'inactive';
+}