From f56dfc01769625b7cc04997eac6e3b24188f941a Mon Sep 17 00:00:00 2001
From: CSKIM <rlackstjq987@gmail.com>
Date: Sat, 9 Mar 2024 17:09:05 +0900
Subject: [PATCH] test: add testcode for MonthCalendar Container

---
 src/__test__/components/MonthBody.test.tsx    |  2 +-
 src/__test__/container/MonthCalendar.test.tsx | 30 +++++++++++++++++++
 src/components/MonthView/MonthHeader.tsx      |  3 +-
 src/constants/testId.ts                       |  1 +
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/__test__/container/MonthCalendar.test.tsx

diff --git a/src/__test__/components/MonthBody.test.tsx b/src/__test__/components/MonthBody.test.tsx
index ad233a5..f198a06 100644
--- a/src/__test__/components/MonthBody.test.tsx
+++ b/src/__test__/components/MonthBody.test.tsx
@@ -9,7 +9,7 @@ jest.mock("next/navigation", () => ({
   }),
 }));
 
-describe("Monthview", () => {
+describe("Component - Monthview", () => {
   it("연월 정보가 없는 경우에도 MonthBody는 정상적으로 렌더링된다", () => {
     render(<MonthBody year={undefined} month={undefined} />);
 
diff --git a/src/__test__/container/MonthCalendar.test.tsx b/src/__test__/container/MonthCalendar.test.tsx
new file mode 100644
index 0000000..3a1d0fe
--- /dev/null
+++ b/src/__test__/container/MonthCalendar.test.tsx
@@ -0,0 +1,30 @@
+import { MONTH_BODY, MONTH_HEADER } from "@/constants/testId";
+import MonthCalendar from "@/container/MonthCalendar";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+describe("Container - MonthCalendar", () => {
+  it("연월 정보가 없는 경우에도 MonthCalendar는 정상적으로 렌더링된다", () => {
+    render(<MonthCalendar searchParams={{}} />);
+    const monthBody = screen.getByTestId(MONTH_BODY);
+    const monthHeader = screen.getByTestId(MONTH_HEADER);
+    expect(monthBody).toBeInTheDocument();
+    expect(monthHeader).toBeInTheDocument();
+  });
+
+  it("윤년의 정보가 주어져도 2월 29일은 정상적으로 렌더링 된다", () => {
+    render(<MonthCalendar searchParams={{ year: "2024", month: "2" }} />);
+    const monthBody = screen.getByTestId(MONTH_BODY);
+    const monthHeader = screen.getByTestId(MONTH_HEADER);
+    expect(monthBody).toBeInTheDocument();
+    expect(monthHeader).toBeInTheDocument();
+    const feb29 = screen.getByText("2/29");
+    expect(feb29).toBeInTheDocument();
+  });
+});
diff --git a/src/components/MonthView/MonthHeader.tsx b/src/components/MonthView/MonthHeader.tsx
index ac16c9d..0f2dd75 100644
--- a/src/components/MonthView/MonthHeader.tsx
+++ b/src/components/MonthView/MonthHeader.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import { MONTH_HEADER } from "@/constants/testId";
 import React from "react";
 
 const days = ["일", "월", "화", "수", "목", "금", "토"];
 
 const MonthHeader = () => {
   return (
-    <div className="flex w-full divide-x-[1px] border-b">
+    <div data-testid={MONTH_HEADER} className="flex w-full divide-x-[1px] border-b">
       {days.map((day, index) => (
         <div key={index} className="flex flex-1 justify-end">
           {day}
diff --git a/src/constants/testId.ts b/src/constants/testId.ts
index 2a467db..ed7d071 100644
--- a/src/constants/testId.ts
+++ b/src/constants/testId.ts
@@ -1,2 +1,3 @@
 export const ROOT_ID = "root-layout";
 export const MONTH_BODY = "month-body";
+export const MONTH_HEADER = "month-header";