[6팀 손유민] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍

package.json

@@ -26,13 +26,14 @@
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.10.0",
     "@typescript-eslint/parser": "^8.10.0",
-    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/ui": "^2.1.3",
     "eslint": "^9.12.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.12",
+    "jsdom": "^26.0.0",
     "typescript": "^5.6.3",
-    "vite": "^5.4.9",
-    "vitest": "^2.1.3"
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   }
 }

src/advanced/__tests__/advanced.test.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { describe, expect, test } from 'vitest';
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, renderHook, screen, within } from '@testing-library/react';
 import { CartPage } from '../../refactoring/components/CartPage';
 import { AdminPage } from "../../refactoring/components/AdminPage";
 import { Coupon, Product } from '../../types';
+import { useCart } from "../../refactoring/hooks";
 
 const mockProducts: Product[] = [
   {
@@ -232,12 +233,75 @@
   })
 
   describe('자유롭게 작성해보세요.', () => {
-    test('새로운 유틸 함수를 만든 후에 테스트 코드를 작성해서 실행해보세요', () => {
-      expect(true).toBe(false);
-    })
+    test('장바구니 테스트', () => {
+      const product: Product = {
+        id: "1",
+        name: "Product 1",
+        price: 100,
+        stock: 10,
+        discounts: [],
+      };
+      const { result } = renderHook(() => useCart());
+
+      // 처음에는 재고가 10이어야 함
+      expect(result.current.getRemainingStock(product)).toBe(10);
+
+      // 카트에 상품 추가
+      act(() => {
+        result.current.addToCart(product);
+      });
+
+      // 카트에 1개 추가된 후 재고는 9여야 함
+      expect(result.current.getRemainingStock(product)).toBe(9);
+
+      // 카트에 상품 1개 더 추가
+      act(() => {
+        result.current.addToCart(product);
+      });
+
+      // 카트에 2개 추가된 후 재고는 8이어야 함
+      expect(result.current.getRemainingStock(product)).toBe(8);
+    }); 
+
+    test('검색기능 테스트', async () => {
+      render(<CartPage products={mockProducts} coupons={mockCoupons}/>);
 
-    test('새로운 hook 함수르 만든 후에 테스트 코드를 작성해서 실행해보세요', () => {
-      expect(true).toBe(false);
+      // 1. 검색 입력창 가져오기
+      const searchInput = await screen.getByTestId('search-bar');
+
+      // 2. 기본 상태에서 상품 목록이 모두 표시되는지 확인
+
+      expect(await screen.findByTestId('product-p1')).toBeInTheDocument();
+      expect(await screen.findByTestId('product-p2')).toBeInTheDocument();
+      expect(await screen.findByTestId('product-p3')).toBeInTheDocument();
+
+      // 3. 검색어 입력 후 필터링 결과 확인
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: '상품1' } }); // 검색어 입력: "상품1"
+      });
+
+      expect(await screen.findByTestId('product-p1')).toBeInTheDocument();
+      expect(screen.queryByTestId('product-p2')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('product-p3')).not.toBeInTheDocument();
+
+      // 4. 검색어 변경 후 필터링 결과 확인
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: '' } }); // 검색어 초기화
+        fireEvent.change(searchInput, { target: { value: '상품2' } }); // 검색어 입력: "상품2"
+      });
+
+      expect(screen.queryByTestId('product-p1')).not.toBeInTheDocument();
+      expect(await screen.findByTestId('product-p2')).toBeInTheDocument();
+      expect(screen.queryByTestId('product-p3')).not.toBeInTheDocument();
+
+      // 5. 검색어가 없을 때 전체 목록이 다시 표시되는지 확인
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: '' } }); // 검색어 초기화
+      });
+
+      expect(await screen.findByTestId('product-p1')).toBeInTheDocument();
+      expect(await screen.findByTestId('product-p2')).toBeInTheDocument();
+      expect(await screen.findByTestId('product-p3')).toBeInTheDocument();
     })
   })
 })

src/basic/__tests__/basic.test.tsx

@@ -515,4 +515,4 @@ describe("basic > ", () => {
       expect(total.totalDiscount).toBe(20);
     });
   });
-});
+});

src/refactoring/App.tsx

@@ -1,27 +1,27 @@
-import { useState } from 'react';
-import { CartPage } from './components/CartPage.tsx';
-import { AdminPage } from './components/AdminPage.tsx';
-import { Coupon, Product } from '../types.ts';
+import { useState } from "react";
+import { CartPage } from "./components/CartPage.tsx";
+import { AdminPage } from "./components/AdminPage.tsx";
+import { Coupon, Product } from "../types.ts";
 import { useCoupons, useProducts } from "./hooks";
 
 const initialProducts: Product[] = [
   {
-    id: 'p1',
-    name: '상품1',
+    id: "p1",
+    name: "상품1",
     price: 10000,
     stock: 20,
     discounts: [{ quantity: 10, rate: 0.1 }, { quantity: 20, rate: 0.2 }]
   },
   {
-    id: 'p2',
-    name: '상품2',
+    id: "p2",
+    name: "상품2",
     price: 20000,
     stock: 20,
     discounts: [{ quantity: 10, rate: 0.15 }]
   },
   {
-    id: 'p3',
-    name: '상품3',
+    id: "p3",
+    name: "상품3",
     price: 30000,
     stock: 20,
     discounts: [{ quantity: 10, rate: 0.2 }]
@@ -30,15 +30,15 @@ const initialProducts: Product[] = [
 
 const initialCoupons: Coupon[] = [
   {
-    name: '5000원 할인 쿠폰',
-    code: 'AMOUNT5000',
-    discountType: 'amount',
+    name: "5000원 할인 쿠폰",
+    code: "AMOUNT5000",
+    discountType: "amount",
     discountValue: 5000
   },
   {
-    name: '10% 할인 쿠폰',
-    code: 'PERCENT10',
-    discountType: 'percentage',
+    name: "10% 할인 쿠폰",
+    code: "PERCENT10",
+    discountType: "percentage",
     discountValue: 10
   }
 ];
@@ -47,6 +47,7 @@ const App = () => {
   const { products, updateProduct, addProduct } = useProducts(initialProducts);
   const { coupons, addCoupon } = useCoupons(initialCoupons);
   const [isAdmin, setIsAdmin] = useState(false);
+  const [selectedCoupon, setSelectedCoupon] = useState<Coupon | null>(null);
 
   return (
     <div className="min-h-screen bg-gray-100">
@@ -57,7 +58,7 @@ const App = () => {
             onClick={() => setIsAdmin(!isAdmin)}
             className="bg-white text-blue-600 px-4 py-2 rounded hover:bg-blue-100"
           >
-            {isAdmin ? '장바구니 페이지로' : '관리자 페이지로'}
+            {isAdmin ? "장바구니 페이지로" : "관리자 페이지로"}
           </button>
         </div>
       </nav>
@@ -71,7 +72,11 @@ const App = () => {
             onCouponAdd={addCoupon}
           />
         ) : (
-          <CartPage products={products} coupons={coupons}/>
+          <CartPage 
+            products={products} 
+            coupons={coupons} 
+            selectedCoupon={selectedCoupon} 
+            setSelectedCoupon={setSelectedCoupon} />
         )}
       </main>
     </div>