[Feature] Chip 컴포넌트 테스트 작성

packages/shared-config/jest.config.ts

@@ -11,11 +11,6 @@ const config: Config = {
       },
     ],
   },
-
-  setupFilesAfterEnv: ["../shared-config/jest.setup.ts"],
-  verbose: true,
-  collectCoverage: true,
-  restoreMocks: true,
   testMatch: [
     "<rootDir>/src/**/*.test.(js|jsx|ts|tsx)",
     "<rootDir>/app/**/*.test.(js|jsx|ts|tsx)",
@@ -32,6 +27,10 @@ const config: Config = {
     "^@/(.*)$": "<rootDir>/src/$1",
     "^@styled-system(.*)$": "<rootDir>/styled-system/$1",
   },
+  setupFilesAfterEnv: ["../shared-config/jest.setup.ts"],
+  verbose: true,
+  collectCoverage: true,
+  restoreMocks: true,
 };
 
 export default config;

packages/wow-ui/package.json

@@ -112,6 +112,7 @@
     "@storybook/test": "^8.1.9",
     "@storybook/test-runner": "^0.18.2",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",

packages/wow-ui/src/components/Checkbox/index.tsx

@@ -83,6 +83,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       onClick,
       onKeyDown,
     });
+
     return (
       <styled.label
         alignItems="center"
@@ -101,12 +102,13 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       >
         <styled.span alignItems="center" display="flex" position="relative">
           <styled.input
-            aria-checked={checked}
             aria-disabled={disabled}
             aria-label={inputProps?.["aria-label"] ?? "checkbox"}
+            checked={checked}
             {...(pressed && { "data-pressed": true })}
             id={id}
             ref={ref}
+            role="checkbox"
             tabIndex={0}
             type="checkbox"
             className={checkboxStyle({

packages/wow-ui/src/components/Chip/Chip.stories.ts → packages/wow-ui/src/components/Chip/Chip.stories.tsx

@@ -36,7 +36,7 @@ const meta = {
         type: "boolean",
       },
     },
-    isChecked: {
+    ischecked: {
       description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
@@ -59,7 +59,7 @@ const meta = {
     label: {
       description: "칩에 들어가게 될 텍스트입니다.",
       table: {
-        type: { summary: "string", required: true },
+        type: { summary: "string" },
       },
       control: {
         type: "text",
@@ -70,28 +70,22 @@ const meta = {
       table: {
         type: { summary: "() => void" },
       },
-      control: {
-        type: "function",
-      },
+      control: false,
     },
     onDelete: {
       description: "칩에 대한 필터를 제거하기 위한 함수입니다.",
       table: {
         type: { summary: "() => void" },
       },
-      control: {
-        type: "function",
-      },
+      control: false,
     },
     onKeyDown: {
       description:
         "칩이 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.",
       table: {
         type: { summary: "() => void" },
       },
-      control: {
-        type: "function",
-      },
+      control: false,
     },
     style: {
       description: "칩의 커스텀 스타일을 설정합니다.",

packages/wow-ui/src/components/Chip/Chip.test.tsx

@@ -0,0 +1,124 @@
+import { render, type RenderResult, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import Chip from "@/components/Chip";
+
+describe("Chip rendering Test", () => {
+  let renderChip: RenderResult;
+  beforeEach(() => {
+    renderChip = render(<Chip as="div" label="Chip" />);
+  });
+
+  it("should render Chip", () => {
+    const { getByText } = renderChip;
+    expect(getByText("Chip")).toBeInTheDocument();
+  });
+
+  it("should render with attributes aria-disabled to be false by default", () => {
+    const chipComponent = renderChip.container.querySelector("div");
+
+    expect(chipComponent).toHaveAttribute("aria-disabled", "false");
+  });
+});
+
+describe("Chip toggle Test", () => {
+  let renderChip: RenderResult;
+  beforeEach(() => {
+    renderChip = render(<Chip as="button" clickable={true} label="Chip" />);
+  });
+
+  it("should toggle state when onClick event is fired", async () => {
+    const chipComponent = renderChip.getByRole("checkbox");
+    const user = userEvent.setup();
+
+    await user.click(chipComponent);
+    expect(chipComponent).toHaveAttribute("aria-checked", "true");
+    await user.click(chipComponent);
+    expect(chipComponent).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("should toggle state when Enter key is pressed", async () => {
+    const chipComponent = renderChip.getByRole("checkbox");
+    userEvent.type(chipComponent, "{enter}");
+    await waitFor(() => {
+      expect(chipComponent).toHaveAttribute("aria-checked", "true");
+    });
+    userEvent.type(chipComponent, "{enter}");
+    await waitFor(() => {
+      expect(chipComponent).toHaveAttribute("aria-checked", "false");
+    });
+  });
+
+  it("should toggle state when Space key is pressed", async () => {
+    const chipComponent = renderChip.getByRole("checkbox");
+
+    await userEvent.type(chipComponent, "{space}");
+    expect(chipComponent).toHaveAttribute("aria-checked", "true");
+    await userEvent.type(chipComponent, "{space}");
+    expect(chipComponent).toHaveAttribute("aria-checked", "false");
+  });
+});
+
+describe("Chip disabled Test", () => {
+  let renderChip: RenderResult;
+  beforeEach(() => {
+    renderChip = render(<Chip disabled={true} label="Chip" />);
+  });
+
+  it("should render with attributes aria-disabled to be true", () => {
+    const chipComponent = renderChip.container.querySelector("button");
+
+    expect(chipComponent).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should not allow focusing", () => {
+    const chipComponent = renderChip.container.querySelector("button");
+    userEvent.click(chipComponent!!);
+
+    expect(chipComponent).not.toHaveFocus();
+  });
+});
+
+describe("external control and events", () => {
+  let renderChip: RenderResult;
+
+  it("should fire external onClick event", async () => {
+    renderChip = render(<Chip clickable label="Chip" />);
+    const chipComponent = renderChip.getByRole("checkbox");
+    const user = userEvent.setup();
+    const onClickHandler = jest.fn();
+    chipComponent.onclick = onClickHandler;
+
+    await user.click(chipComponent);
+    expect(onClickHandler).toHaveBeenCalled();
+  });
+
+  it("should fire external onKeyDown event", async () => {
+    renderChip = render(<Chip clickable as="button" label="Chip" />);
+    const user = userEvent.setup();
+    const chipComponent = renderChip.getByRole("checkbox");
+    const onKeyDownHandler = jest.fn();
+    chipComponent.onkeydown = onKeyDownHandler;
+
+    await user.type(chipComponent, "{enter}");
+    expect(onKeyDownHandler).toHaveBeenCalled();
+    await user.type(chipComponent, "{space}");
+    expect(onKeyDownHandler).toHaveBeenCalled();
+  });
+
+  it("should toggle external checked state when onClick event fired", async () => {
+    const user = userEvent.setup();
+    let checked = false;
+    const handleChange = () => {
+      checked = !checked;
+    };
+    const rendered = render(<Chip clickable as="button" label="Chip" />);
+    const chipComponent = rendered.getByRole("checkbox");
+    chipComponent.onchange = handleChange;
+
+    await user.click(chipComponent);
+
+    expect(chipComponent).toHaveAttribute("aria-checked", "true");
+    expect(chipComponent).toHaveAttribute("aria-disabled", "false");
+  });
+});

packages/wow-ui/src/components/Chip/index.tsx

@@ -16,7 +16,7 @@ import type {
  *
  * @param {T} [element] 렌더링할 요소 또는 컴포넌트. 기본값은 button이며, Chip의 경우 input으로 사용될 수 있음
  * @param {boolean} [defaultChecked=false] 칩의 토글의 default 활성화 상태
- * @param {boolean} [isChecked=false] 외부에서 제어할 활성 상태.
+ * @param {boolean} [ischecked=false] 외부에서 제어할 활성 상태.
  * @param {string} label 칩 버튼에 들어갈 텍스트
  * @param {boolean} [clickable=true] 클릭할 수 있는 칩인지 여부 판단
  * @param {() => void} [onDelete] 칩 버튼을 삭제했을 때의 동작
@@ -42,20 +42,20 @@ type ChipComponent = <T extends ButtonElementType = "button">(
 
 const ChipLabel = ({
   label,
-  isChecked,
+  ischecked,
   disabled = true,
 }: {
   label: string;
-  isChecked: boolean;
+  ischecked: boolean;
   disabled: boolean;
 }) => {
   return (
     <styled.div
       data-disabled={disabled}
-      data-selected={isChecked}
+      data-selected={ischecked}
       textStyle="label2"
       className={chipLabel({
-        type: disabled ? "disabled" : isChecked ? "checked" : "unchecked",
+        type: disabled ? "disabled" : ischecked ? "checked" : "unchecked",
       })}
     >
       {label}
@@ -71,16 +71,15 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
       clickable,
       onKeyDown,
       onClick,
-      isChecked: checkedProp = false,
+      ischecked: checkedProp = false,
       defaultChecked = false,
       disabled = false,
       style,
-      ...rest
     }: ChipProps<T>,
     ref: any
   ) => {
-    const Component = as || "button";
-    const [isChecked, setIsChecked] = useState(() =>
+    const Component = (as || "button") as React.ElementType;
+    const [ischecked, setIsChecked] = useState(() =>
       checkedProp ? checkedProp : defaultChecked
     );
     useEffect(() => {
@@ -92,25 +91,29 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
     const handleClick = () => {
       if (disabled) return;
       onClick?.();
-      clickable ? setIsChecked((prev) => !prev) : null;
+      clickable ? setIsChecked((prev: boolean) => !prev) : null;
     };
 
     const handleKeyDown = (event: any) => {
       if (!clickable || disabled) return;
       if (event.currentTarget === event.target) {
         event.preventDefault();
         if (event.key === "Enter" || event.key === " ") {
-          setIsChecked((prev) => !prev);
+          setIsChecked((prev: boolean) => !prev);
           onKeyDown?.();
         }
       }
     };
 
     return (
       <Component
-        aria-label={`chip ${isChecked ? "activated" : "inactivated"}`}
-        data-selected={isChecked}
+        ischecked
+        aria-checked={clickable ? ischecked : undefined}
+        aria-disabled={disabled}
+        aria-label={`chip ${ischecked ? "activated" : "inactivated"}`}
+        data-selected={ischecked}
         ref={ref}
+        role={clickable ? "checkbox" : undefined}
         style={style}
         className={chip({
           clickable: disabled ? false : clickable,
@@ -119,7 +122,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
         onClick={handleClick}
         onKeyDown={handleKeyDown}
       >
-        <ChipLabel disabled={disabled} isChecked={isChecked} label={label} />
+        <ChipLabel disabled={disabled} ischecked={ischecked} label={label} />
       </Component>
     );
   }