From 2ce52c1d1a37c296b3a8cc618e7cf8ea77c51365 Mon Sep 17 00:00:00 2001
From: SahilGrip <sahillather002@gmail.com>
Date: Sun, 28 Jan 2024 08:36:40 +0530
Subject: [PATCH 1/3] tests for color-picker

---
 .../color-picker/tests/colorPicker.test.tsx   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 packages/components/color-picker/tests/colorPicker.test.tsx

diff --git a/packages/components/color-picker/tests/colorPicker.test.tsx b/packages/components/color-picker/tests/colorPicker.test.tsx
new file mode 100644
index 0000000000..b64670a4ca
--- /dev/null
+++ b/packages/components/color-picker/tests/colorPicker.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen, fireEvent } from "@yamada-ui/test"
+import { ColorPicker } from "../src"
+
+describe("<ColorPicker />", () => {
+  test("ColorPicker renders correctly", async () => {
+    render(<ColorPicker data-testid="color" />)
+    const colorPicker = screen.getByTestId("color")
+    expect(colorPicker).toBeInTheDocument()
+  })
+
+  test("ColorPicker changes color on selecting a new color", () => {
+    render(<ColorPicker data-testid="color" />)
+    const colorPicker = screen.getByTestId("color")
+    fireEvent.change(colorPicker, { target: { value: "#ff0000" } })
+    expect(colorPicker).toHaveValue("#ff0000")
+  })
+
+  test("ColorPicker renders with the correct initial color", () => {
+    render(<ColorPicker color="#00ff00" data-testid="color" />)
+    const colorPicker = screen.getByTestId("color")
+    expect(colorPicker).toHaveValue("#00ff00")
+  })
+
+  test("ColorPicker displays a color preview", () => {
+    render(<ColorPicker data-testid="color" />)
+    const colorPreview = screen.getByTestId("color-preview")
+    expect(colorPreview).toBeInTheDocument()
+  })
+
+  test("ColorPicker resets to initial color on reset button click", () => {
+    render(<ColorPicker color="#00ff00" data-testid="color" />)
+    const colorPicker = screen.getByTestId("color")
+    fireEvent.change(colorPicker, { target: { value: "#ff0000" } })
+    const resetButton = screen.getByRole("button", { name: /reset/i })
+    fireEvent.click(resetButton)
+    expect(colorPicker).toHaveValue("#00ff00")
+  })
+})

From 1f8f7cd172d8cbb9cfddb208f4c5c2114c70fc16 Mon Sep 17 00:00:00 2001
From: SahilGrip <sahillather002@gmail.com>
Date: Sun, 28 Jan 2024 08:39:57 +0530
Subject: [PATCH 2/3] update the id

---
 packages/components/color-picker/tests/colorPicker.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/color-picker/tests/colorPicker.test.tsx b/packages/components/color-picker/tests/colorPicker.test.tsx
index b64670a4ca..b485b94c74 100644
--- a/packages/components/color-picker/tests/colorPicker.test.tsx
+++ b/packages/components/color-picker/tests/colorPicker.test.tsx
@@ -23,7 +23,7 @@ describe("<ColorPicker />", () => {
 
   test("ColorPicker displays a color preview", () => {
     render(<ColorPicker data-testid="color" />)
-    const colorPreview = screen.getByTestId("color-preview")
+    const colorPreview = screen.getByTestId("color")
     expect(colorPreview).toBeInTheDocument()
   })
 

From e1f68186a2214294ea563d222e03c3813daec466 Mon Sep 17 00:00:00 2001
From: hirotomoyamada <hirotomo.yamada@avap.co.jp>
Date: Wed, 7 Feb 2024 19:35:54 +0900
Subject: [PATCH 3/3] test(color-picker): simplified and removed tests

---
 .../color-picker/tests/colorPicker.test.tsx   | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/components/color-picker/tests/colorPicker.test.tsx b/packages/components/color-picker/tests/colorPicker.test.tsx
index b485b94c74..5f17d65201 100644
--- a/packages/components/color-picker/tests/colorPicker.test.tsx
+++ b/packages/components/color-picker/tests/colorPicker.test.tsx
@@ -3,36 +3,29 @@ import { ColorPicker } from "../src"
 
 describe("<ColorPicker />", () => {
   test("ColorPicker renders correctly", async () => {
-    render(<ColorPicker data-testid="color" />)
-    const colorPicker = screen.getByTestId("color")
+    render(<ColorPicker data-testid="colorPicker" />)
+
+    const colorPicker = screen.getByTestId("colorPicker")
+
     expect(colorPicker).toBeInTheDocument()
   })
 
   test("ColorPicker changes color on selecting a new color", () => {
-    render(<ColorPicker data-testid="color" />)
-    const colorPicker = screen.getByTestId("color")
-    fireEvent.change(colorPicker, { target: { value: "#ff0000" } })
-    expect(colorPicker).toHaveValue("#ff0000")
-  })
+    render(<ColorPicker data-testid="colorPicker" />)
 
-  test("ColorPicker renders with the correct initial color", () => {
-    render(<ColorPicker color="#00ff00" data-testid="color" />)
-    const colorPicker = screen.getByTestId("color")
-    expect(colorPicker).toHaveValue("#00ff00")
-  })
+    const colorPicker = screen.getByTestId("colorPicker")
+    const value = "#ff0000"
+
+    fireEvent.change(colorPicker, { target: { value } })
 
-  test("ColorPicker displays a color preview", () => {
-    render(<ColorPicker data-testid="color" />)
-    const colorPreview = screen.getByTestId("color")
-    expect(colorPreview).toBeInTheDocument()
+    expect(colorPicker).toHaveValue(value)
   })
 
-  test("ColorPicker resets to initial color on reset button click", () => {
-    render(<ColorPicker color="#00ff00" data-testid="color" />)
-    const colorPicker = screen.getByTestId("color")
-    fireEvent.change(colorPicker, { target: { value: "#ff0000" } })
-    const resetButton = screen.getByRole("button", { name: /reset/i })
-    fireEvent.click(resetButton)
+  test("ColorPicker renders with the correct initial value", () => {
+    render(<ColorPicker defaultValue="#00ff00" data-testid="colorPicker" />)
+
+    const colorPicker = screen.getByTestId("colorPicker")
+
     expect(colorPicker).toHaveValue("#00ff00")
   })
 })