Merge branch 'develop' of https://github.com/Yanolza-Miniproject/fron…

…tend into feature/#144

src/components/Detail/ActionButtonGroup/index.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { RecoilRoot } from "recoil";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import ActionButtonGroup from "./";
+
+const RoomDetail = {
+  id: 1,
+  accommodation_name: "Test Accommodation",
+  room_name: "Test Room",
+  price: 100,
+  stock: 5,
+  room_image_url: ["url1", "url2"],
+};
+
+const CheckInAt = "2023-01-01";
+const CheckOutAt = "2023-01-03";
+const NumberGuests = 2;
+const OnAddToCart = jest.fn();
+const HandleBuyNow = jest.fn();
+
+describe("ActionButtonGroup 테스트", () => {
+  test("렌더링 및 버튼 활성화 테스트", () => {
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <RecoilRoot>
+          <MemoryRouter>
+            <ActionButtonGroup
+              checkInAt={CheckInAt}
+              checkOutAt={CheckOutAt}
+              roomDetail={RoomDetail}
+              onAddToCart={OnAddToCart}
+              handleBuyNow={HandleBuyNow}
+              numberGuests={NumberGuests}
+            />
+          </MemoryRouter>
+        </RecoilRoot>
+      </QueryClientProvider>,
+    );
+  });
+});

src/components/Detail/PriceDisplay/index.test.tsx

@@ -8,7 +8,7 @@ import {
 import calculateNightCount from "../../../utils/calculateNightCount";
 import formatNumber from "../../../utils/formatNumber";
 
-describe("PriceDisplay Component", () => {
+describe("PriceDisplay 테스트", () => {
   const mockPricePerNight = 100000;
   const mockCheckInDate = new Date("2023-01-01");
   const mockCheckOutDate = new Date("2023-01-03");

src/components/Detail/ProductDetails/ProductDetail.types.ts

@@ -1,5 +1,5 @@
 export interface ProductDetailsProps {
   roomName: string;
   name: string;
-  price: number;
+  // price: number;
 }

src/components/Detail/ProductDetails/index.test.tsx

@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import ProductDetails from "./";
+
+const testData = { roomName: "디럭스룸", name: "그랜드하얏트제주" };
+
+describe("ProductDetails 테스트", () => {
+  test("객실 이름과 숙소 이름 표시", () => {
+    const { getByText } = render(
+      <ProductDetails roomName={testData.roomName} name={testData.name} />,
+    );
+
+    expect(getByText(testData.name)).toBeInTheDocument();
+    expect(getByText(testData.roomName)).toBeInTheDocument();
+  });
+});

src/components/Detail/ProductDetails/index.tsx

@@ -5,8 +5,6 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ roomName, name }) => (
   <Styled.DetailsContainer>
     <Styled.ProductName>{name}</Styled.ProductName>
     <Styled.RoomName>{roomName}</Styled.RoomName>
-
-    {/* <Styled.ProductPrice>{price}</Styled.ProductPrice> */}
   </Styled.DetailsContainer>
 );
 

src/components/Detail/QuantitySelector/QuantitySelector.types.ts

@@ -1,5 +1,6 @@
 export interface QuantitySelectorProps {
   initialQuantity: number;
   onQuantityChange: (quantity: number) => void;
-  price: number;
+  // price: number;
+  capacity: number;
 }

src/components/Detail/QuantitySelector/index.test.tsx

@@ -0,0 +1,70 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import QuantitySelector from "./";
+
+describe("QuantitySelector 테스트", () => {
+  const mockOnQuantityChange = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("랜더링 되는지 테스트", () => {
+    render(
+      <QuantitySelector
+        initialQuantity={1}
+        onQuantityChange={mockOnQuantityChange}
+        capacity={5}
+      />,
+    );
+    expect(screen.getByText("최대 5명")).toBeInTheDocument();
+  });
+
+  test("플러스 버튼 클릭시 수량이 증가한다", () => {
+    render(
+      <QuantitySelector
+        initialQuantity={1}
+        onQuantityChange={mockOnQuantityChange}
+        capacity={5}
+      />,
+    );
+    fireEvent.click(screen.getByText("+"));
+    expect(mockOnQuantityChange).toHaveBeenCalledWith(2);
+  });
+
+  test("마이너스 버튼 클릭시 수량이 감소한다.", () => {
+    render(
+      <QuantitySelector
+        initialQuantity={2}
+        onQuantityChange={mockOnQuantityChange}
+        capacity={5}
+      />,
+    );
+    fireEvent.click(screen.getByText("-"));
+    expect(mockOnQuantityChange).toHaveBeenCalledWith(1);
+  });
+
+  test("1미만이면 감소할 수 없다.", () => {
+    render(
+      <QuantitySelector
+        initialQuantity={1}
+        onQuantityChange={mockOnQuantityChange}
+        capacity={5}
+      />,
+    );
+    fireEvent.click(screen.getByText("-"));
+    expect(mockOnQuantityChange).not.toHaveBeenCalledWith(0);
+  });
+
+  test("최대 인원을 초과하여 증가하지 않는다.", () => {
+    render(
+      <QuantitySelector
+        initialQuantity={5}
+        onQuantityChange={mockOnQuantityChange}
+        capacity={5}
+      />,
+    );
+    fireEvent.click(screen.getByText("+"));
+    expect(mockOnQuantityChange).not.toHaveBeenCalledWith(6);
+  });
+});

src/components/Detail/StockStatusBaner/index.test.tsx

@@ -0,0 +1,24 @@
+import "@testing-library/jest-dom";
+import { render, screen, cleanup } from "@testing-library/react";
+import StockStatusBanner from "./";
+
+describe("StockStatusBanner 테스트", () => {
+  test("재고가 0일 때 품절 배너가 표시된다.", () => {
+    render(<StockStatusBanner inventory={0} />);
+    expect(screen.getByText("품절")).toBeInTheDocument();
+  });
+
+  test("재고가 낮을 때(1-5) 품절 임박 배너가 표시된다.", () => {
+    for (let i = 1; i <= 5; i++) {
+      render(<StockStatusBanner inventory={i} />);
+      expect(screen.getByText("품절 임박")).toBeInTheDocument();
+      cleanup();
+    }
+  });
+
+  test("재고가 충분할 때(5 이상) 배너가 표시되지 않는다.", () => {
+    render(<StockStatusBanner inventory={6} />);
+    expect(screen.queryByText("품절")).not.toBeInTheDocument();
+    expect(screen.queryByText("품절 임박")).not.toBeInTheDocument();
+  });
+});

src/components/DetailList/ProductImage/index.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import ProductImage from "./";
 
 describe("ProductImage", () => {
-  it("이미지가 랜더링 되는지 테스트", () => {
+  test("이미지가 랜더링 되는지 테스트", () => {
     const testImageUrl =
       "https://github.com/Yanolza-Miniproject/frontend/assets/92326949/2c0134f2-6ba3-434c-8dca-6d5831bf6e24";
     render(<ProductImage image={testImageUrl} />);

src/components/DetailList/ProductInfo/index.test.tsx

@@ -1,31 +1,33 @@
 import { render, screen } from "@testing-library/react";
 import ProductInfo from "./";
 
-describe("ProductInfo", () => {
-  it("텍스트가 잘 랜더링 되는지 테스트", () => {
-    const address = "경상남도 하동군 화개로 13";
-    const infoDetail = "This is a detail for Accommodation1";
-    const phoneNumber = "신라스테이";
-    const homepage = "123-456-7890";
-    const checkIn = "14:00:00";
-    const checkOut = "11:00:00";
+const testData = {
+  address: "경상남도 하동군 화개로 13",
+  infoDetail: "This is a detail for Accommodation1",
+  phoneNumber: "신라스테이",
+  homepage: "123-456-7890",
+  checkIn: "14:00:00",
+  checkOut: "11:00:00",
+};
 
+describe("ProductInfo", () => {
+  test("텍스트가 잘 랜더링 되는지 테스트", () => {
     render(
       <ProductInfo
-        address={address}
-        infoDetail={infoDetail}
-        phoneNumber={phoneNumber}
-        homepage={homepage}
-        checkIn={checkIn}
-        checkOut={checkOut}
+        address={testData.address}
+        infoDetail={testData.infoDetail}
+        phoneNumber={testData.phoneNumber}
+        homepage={testData.homepage}
+        checkIn={testData.checkIn}
+        checkOut={testData.checkOut}
       />,
     );
 
-    expect(screen.getByText(address)).toBeInTheDocument();
-    expect(screen.getByText(infoDetail)).toBeInTheDocument();
-    expect(screen.getByText(phoneNumber)).toBeInTheDocument();
-    expect(screen.getByText(homepage)).toBeInTheDocument();
-    expect(screen.getByText(checkIn)).toBeInTheDocument();
-    expect(screen.getByText(checkOut)).toBeInTheDocument();
+    expect(screen.getByText(testData.address)).toBeInTheDocument();
+    expect(screen.getByText(testData.infoDetail)).toBeInTheDocument();
+    expect(screen.getByText(testData.phoneNumber)).toBeInTheDocument();
+    expect(screen.getByText(testData.homepage)).toBeInTheDocument();
+    expect(screen.getByText(testData.checkIn)).toBeInTheDocument();
+    expect(screen.getByText(testData.checkOut)).toBeInTheDocument();
   });
 });

src/components/DetailList/ProductTitle/index.test.tsx

@@ -1,13 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import ProductTitle from "./";
 
-describe("ProductTitled", () => {
-  it("텍스트가 잘 랜더링 되는지 테스트", () => {
-    const type = "호텔";
+describe("ProductTitle", () => {
+  test("텍스트가 랜더링 테스트", () => {
+    const type = 0;
     const name = "신라스테이";
     render(<ProductTitle type={type} name={name} />);
 
-    expect(screen.getByText(type)).toBeInTheDocument();
+    expect(screen.getByText("호텔")).toBeInTheDocument();
     expect(screen.getByText(name)).toBeInTheDocument();
   });
 });

src/pages/Detail/index.tsx

@@ -50,7 +50,7 @@ const Detail = () => {
     setSelectedCheckInDate(checkInDate);
     setSelectedCheckOutDate(checkOutDate);
   };
-  console.log(roomDetails);
+
   return (
     <Styled.container>
       <Styled.Layout>
@@ -60,7 +60,6 @@ const Detail = () => {
             <ProductDetails
               roomName={roomDetails.data.name}
               name={roomDetails.data.accommodationName}
-              price={roomDetails.data.price}
             />
             <StockStatusBanner inventory={roomDetails.data.inventory} />
           </Styled.HorizontalContainer>
@@ -71,7 +70,6 @@ const Detail = () => {
           <QuantitySelector
             initialQuantity={selectedGuests}
             onQuantityChange={(newQuantity) => setSelectedGuests(newQuantity)}
-            price={roomDetails.data.price}
             capacity={roomDetails.data.capacity}
           />
           <PriceDisplay pricePerNight={roomDetails.data.price} />

src/pages/DetailList/index.tsx

@@ -5,7 +5,6 @@ import ProductInfo from "../../components/DetailList/ProductInfo/index.tsx";
 import ProductTitle from "../../components/DetailList/ProductTitle";
 import RoomList from "../../components/DetailList/RoomList/index.tsx";
 import { useGetAccommodationDetail } from "../../hooks/useDetailFetch.ts";
-// import { accommodationDetail } from "../../mock/detailListPageData.ts";
 import { useLocation } from "react-router-dom";
 import * as Styled from "./DetailList.styles.ts";
 import HeartClick from "../../components/Category/HeartClick/index.tsx";