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

.github/workflows/test.yml

@@ -38,6 +38,10 @@ jobs:
         run: pnpm install --no-frozen-lockfile
         working-directory: packages/wow-ui
 
+      - name: Install TypeScript
+        run: pnpm add typescript@^5.3.3
+        working-directory: packages/wow-ui
+
       - name: Build Packages
         run: pnpm build
 

packages/shared-config/jest.config.ts

@@ -2,36 +2,11 @@ import type { Config } from "jest";
 
 const config: Config = {
   preset: "ts-jest",
-  transform: {
-    "^.+\\.jsx?$": "babel-jest",
-    "^.+\\.tsx?$": [
-      "ts-jest",
-      {
-        tsconfig: "<rootDir>/tsconfig.json",
-      },
-    ],
-  },
 
   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)",
-  ],
-  testPathIgnorePatterns: [
-    "<rootDir>/styled-system/",
-    "<rootDir>/node-modules/",
-  ],
-  coveragePathIgnorePatterns: [
-    "<rootDir>/styled-system/",
-    "<rootDir>/node-modules/",
-  ],
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1",
-    "^@styled-system(.*)$": "<rootDir>/styled-system/$1",
-  },
 };
 
 export default config;

packages/wow-ui/jest.config.ts

@@ -4,6 +4,31 @@ import jestConfig from "shared-config/jest.config";
 const config: Config = {
   ...jestConfig,
   testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.jsx?$": "babel-jest",
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "<rootDir>/tsconfig.json",
+      },
+    ],
+  },
+  testMatch: [
+    "<rootDir>/src/**/*.test.(js|jsx|ts|tsx)",
+    "<rootDir>/app/**/*.test.(js|jsx|ts|tsx)",
+  ],
+  testPathIgnorePatterns: [
+    "<rootDir>/styled-system/",
+    "<rootDir>/node-modules/",
+  ],
+  coveragePathIgnorePatterns: [
+    "<rootDir>/styled-system/",
+    "<rootDir>/node-modules/",
+  ],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@styled-system(.*)$": "<rootDir>/styled-system/$1",
+  },
 };
 
 export default config;

packages/wow-ui/package.json

@@ -112,11 +112,13 @@
     "@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",
     "axe-playwright": "^2.0.1",
     "chromatic": "^11.3.0",
+    "core-js": "^3.0.1",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "playwright": "1.45.0",

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.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.getByRole("contentinfo");
+
+    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.getByRole("contentinfo");
+
+    expect(chipComponent).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should not allow focusing", () => {
+    const chipComponent = renderChip.getByRole("contentinfo");
+    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

@@ -75,11 +75,10 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
       defaultChecked = false,
       disabled = false,
       style,
-      ...rest
     }: ChipProps<T>,
     ref: any
   ) => {
-    const Component = as || "button";
+    const Component = (as || "button") as React.ElementType;
     const [isChecked, setIsChecked] = useState(() =>
       checkedProp ? checkedProp : defaultChecked
     );
@@ -92,25 +91,28 @@ 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-checked={clickable ? isChecked : undefined}
+        aria-disabled={disabled}
         aria-label={`chip ${isChecked ? "activated" : "inactivated"}`}
         data-selected={isChecked}
         ref={ref}
+        role={clickable ? "checkbox" : "contentinfo"}
         style={style}
         className={chip({
           clickable: disabled ? false : clickable,