From 36ee72ccb92ff8ded90f503a88638a5d2b357582 Mon Sep 17 00:00:00 2001
From: SeieunYoo <isho48239@gmail.com>
Date: Thu, 10 Oct 2024 04:19:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Tabs=20test=20=EC=97=90=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=EC=84=9C=20=EC=A0=9C=EC=96=B4=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wow-ui/src/components/Tabs/Tabs.test.tsx  | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/wow-ui/src/components/Tabs/Tabs.test.tsx b/packages/wow-ui/src/components/Tabs/Tabs.test.tsx
index 1fbee76d..32b9c992 100644
--- a/packages/wow-ui/src/components/Tabs/Tabs.test.tsx
+++ b/packages/wow-ui/src/components/Tabs/Tabs.test.tsx
@@ -9,7 +9,7 @@ import TabsItem from "@/components/Tabs/TabsItem";
 import TabsList from "@/components/Tabs/TabsList";
 
 describe("Tabs component", () => {
-  const renderTabs = (props: Partial<TabsProps> = {}): RenderResult => {
+  const uncontrolledTabs = (props: Partial<TabsProps> = {}): RenderResult => {
     return render(
       <Tabs defaultValue="tab1" {...props}>
         <TabsList>
@@ -22,13 +22,25 @@ describe("Tabs component", () => {
     );
   };
 
+  const controlledTabs = (props: Partial<TabsProps> = {}): RenderResult => {
+    return render(
+      <Tabs {...props}>
+        <TabsList>
+          <TabsItem value="tab1">Tab 1</TabsItem>
+          <TabsItem value="tab2">Tab 2</TabsItem>
+        </TabsList>
+        <TabsContent value="tab1">Tab 1 Content</TabsContent>
+        <TabsContent value="tab2">Tab 2 Content</TabsContent>
+      </Tabs>
+    );
+  };
   test("renders correctly with default value", async () => {
-    const { getByText } = renderTabs();
+    const { getByText } = uncontrolledTabs();
     expect(getByText("Tab 1 Content")).toBeVisible();
   });
 
   test("switches content when clicking on tab triggers", async () => {
-    const { getByText } = renderTabs();
+    const { getByText } = uncontrolledTabs();
     await userEvent.click(getByText("Tab 2"));
     await waitFor(() => {
       expect(getByText("Tab 2 Content")).toBeVisible();
@@ -37,13 +49,16 @@ describe("Tabs component", () => {
 
   test("calls onChange when the tab is changed", async () => {
     const handleChange = jest.fn();
-    const { getByText } = renderTabs({ onChange: handleChange });
+    const { getByText } = controlledTabs({
+      value: "tab1",
+      onChange: handleChange,
+    });
     await userEvent.click(getByText("Tab 2"));
     expect(handleChange).toHaveBeenCalledWith("tab2");
   });
 
   test("can navigate between tabs using keyboard (ArrowRight)", async () => {
-    const { getByText } = renderTabs();
+    const { getByText } = uncontrolledTabs();
     const tab1 = getByText("Tab 1");
     const tab2 = getByText("Tab 2");
 
@@ -57,7 +72,7 @@ describe("Tabs component", () => {
   });
 
   test("can navigate between tabs using keyboard (ArrowLeft)", async () => {
-    const { getByText } = renderTabs();
+    const { getByText } = uncontrolledTabs();
     const tab1 = getByText("Tab 1");
     const tab2 = getByText("Tab 2");