@simplysm/solid 13.0.0-beta.6

package/tests/components/feedback/notification/NotificationContext.spec.tsx

@@ -0,0 +1,331 @@
+import { describe, it, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { render, waitFor } from "@solidjs/testing-library";
+import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
+import {
+  useNotification,
+  type NotificationContextValue,
+} from "../../../../src/components/feedback/notification/NotificationContext";
+
+describe("NotificationContext", () => {
+  describe("useNotification", () => {
+    it("Provider 없이 사용하면 에러가 발생한다", () => {
+      createRoot((dispose) => {
+        expect(() => useNotification()).toThrow("useNotification은 NotificationProvider 내부에서만 사용할 수 있습니다");
+        dispose();
+      });
+    });
+  });
+});
+
+describe("NotificationProvider", () => {
+  it("Provider 내에서 useNotification이 정상 동작한다", () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    expect(notification!.items()).toEqual([]);
+    expect(notification!.unreadCount()).toBe(0);
+  });
+
+  it("info 호출 시 알림이 추가된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    notification!.info("테스트 제목", "테스트 메시지");
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(1);
+      expect(notification!.items()[0].theme).toBe("info");
+      expect(notification!.items()[0].title).toBe("테스트 제목");
+      expect(notification!.items()[0].message).toBe("테스트 메시지");
+      expect(notification!.unreadCount()).toBe(1);
+    });
+  });
+
+  it("success/warning/danger 테마가 올바르게 적용된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    notification!.success("성공", "성공 메시지");
+    notification!.warning("경고", "경고 메시지");
+    notification!.danger("에러", "에러 메시지");
+
+    await waitFor(() => {
+      const items = notification!.items();
+      expect(items[0].theme).toBe("success");
+      expect(items[1].theme).toBe("warning");
+      expect(items[2].theme).toBe("danger");
+    });
+  });
+
+  it("markAsRead 호출 시 해당 알림이 읽음 처리된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    notification!.info("테스트", "메시지");
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(1);
+    });
+
+    const id = notification!.items()[0].id;
+    notification!.markAsRead(id);
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(0);
+      expect(notification!.items()[0].read).toBe(true);
+    });
+  });
+
+  it("clear 호출 시 모든 알림이 삭제된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    notification!.info("알림1");
+    notification!.info("알림2");
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(2);
+    });
+
+    notification!.clear();
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(0);
+    });
+  });
+
+  it("최대 50개까지만 알림을 유지한다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    // 51개 알림 추가
+    for (let i = 0; i < 51; i++) {
+      notification!.info(`알림 ${i}`);
+    }
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(50);
+      // 첫 번째 알림이 삭제되고 마지막 알림이 유지
+      expect(notification!.items()[49].title).toBe("알림 50");
+    });
+  });
+
+  it("latestUnread가 가장 최신 읽지 않은 알림을 반환한다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    notification!.info("첫 번째");
+    notification!.info("두 번째");
+
+    await waitFor(() => {
+      expect(notification!.latestUnread()?.title).toBe("두 번째");
+    });
+  });
+
+  it("dismissBanner 호출 시 latestUnread가 undefined가 된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    notification!.info("테스트");
+
+    await waitFor(() => {
+      expect(notification!.latestUnread()).toBeDefined();
+    });
+
+    notification!.dismissBanner();
+
+    await waitFor(() => {
+      expect(notification!.latestUnread()).toBeUndefined();
+      // items에는 여전히 존재
+      expect(notification!.items().length).toBe(1);
+    });
+  });
+
+  it("info 호출 시 생성된 알림의 id를 반환한다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    const id = notification!.info("테스트 제목");
+
+    await waitFor(() => {
+      expect(typeof id).toBe("string");
+      expect(notification!.items()[0].id).toBe(id);
+    });
+  });
+
+  it("update 호출 시 알림 내용이 수정된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    const id = notification!.info("원래 제목", "원래 메시지");
+
+    notification!.update(id, { title: "수정된 제목", message: "수정된 메시지" });
+
+    await waitFor(() => {
+      const item = notification!.items()[0];
+      expect(item.title).toBe("수정된 제목");
+      expect(item.message).toBe("수정된 메시지");
+    });
+  });
+
+  it("remove 호출 시 알림이 삭제된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    const id = notification!.info("삭제될 알림");
+    notification!.info("유지될 알림");
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(2);
+    });
+
+    notification!.remove(id);
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(1);
+      expect(notification!.items()[0].title).toBe("유지될 알림");
+    });
+  });
+
+  it("update with renotify: 읽은 알림이 다시 읽지 않음으로 변경된다", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    const id = notification!.info("알림");
+    notification!.markAsRead(id);
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(0);
+    });
+
+    notification!.update(id, { message: "완료!" }, { renotify: true });
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(1);
+      expect(notification!.items()[0].read).toBe(false);
+    });
+  });
+
+  it("update with renotify: 읽지 않은 알림은 그대로 읽지 않음 상태 유지", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <NotificationProvider>
+        {(() => {
+          notification = useNotification();
+          return null;
+        })()}
+      </NotificationProvider>
+    ));
+
+    const id = notification!.info("알림");
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(1);
+    });
+
+    notification!.update(id, { message: "업데이트" }, { renotify: true });
+
+    await waitFor(() => {
+      // 여전히 1개 (증가하지 않음)
+      expect(notification!.unreadCount()).toBe(1);
+    });
+  });
+});

package/tests/components/feedback/print/Print.spec.tsx

@@ -0,0 +1,45 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { Print } from "../../../../src/components/feedback/print/Print";
+
+describe("Print 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("children이 렌더링된다", () => {
+      const { getByText } = render(() => <Print>테스트 내용</Print>);
+      expect(getByText("테스트 내용")).toBeTruthy();
+    });
+  });
+
+  describe("Print.Page", () => {
+    it("data-print-page 속성이 렌더링된다", () => {
+      const { container } = render(() => (
+        <Print>
+          <Print.Page>페이지 1</Print.Page>
+        </Print>
+      ));
+      const page = container.querySelector("[data-print-page]");
+      expect(page).toBeTruthy();
+    });
+
+    it("여러 Print.Page가 각각 data-print-page를 가진다", () => {
+      const { container } = render(() => (
+        <Print>
+          <Print.Page>페이지 1</Print.Page>
+          <Print.Page>페이지 2</Print.Page>
+          <Print.Page>페이지 3</Print.Page>
+        </Print>
+      ));
+      const pages = container.querySelectorAll("[data-print-page]");
+      expect(pages.length).toBe(3);
+    });
+
+    it("Print.Page children이 렌더링된다", () => {
+      const { getByText } = render(() => (
+        <Print>
+          <Print.Page>페이지 내용</Print.Page>
+        </Print>
+      ));
+      expect(getByText("페이지 내용")).toBeTruthy();
+    });
+  });
+});

package/tests/components/form-control/Button.spec.tsx

@@ -0,0 +1,119 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { Button } from "../../../src/components/form-control/Button";
+
+describe("Button 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("children이 버튼 내부에 표시된다", () => {
+      const { getByRole } = render(() => <Button>Click Me</Button>);
+      const button = getByRole("button");
+
+      expect(button.textContent).toBe("Click Me");
+    });
+
+    it("type 속성 기본값은 button이다", () => {
+      const { getByRole } = render(() => <Button>Click</Button>);
+      const button = getByRole("button");
+
+      expect(button.getAttribute("type")).toBe("button");
+    });
+
+    it("type 속성을 submit으로 오버라이드할 수 있다", () => {
+      const { getByRole } = render(() => <Button type="submit">Submit</Button>);
+      const button = getByRole("button");
+
+      expect(button.getAttribute("type")).toBe("submit");
+    });
+  });
+
+  describe("theme 속성", () => {
+    it("theme prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
+      const { getByRole: getThemed } = render(() => <Button theme="danger">Click</Button>);
+
+      expect(getDefault("button").className).not.toBe(getThemed("button").className);
+    });
+  });
+
+  describe("variant 속성", () => {
+    it("variant prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getOutline } = render(() => <Button>Click</Button>);
+      const { getByRole: getSolid } = render(() => <Button variant="solid">Click</Button>);
+      const { getByRole: getGhost } = render(() => <Button variant="ghost">Click</Button>);
+
+      const outlineClass = getOutline("button").className;
+      const solidClass = getSolid("button").className;
+      const ghostClass = getGhost("button").className;
+
+      expect(outlineClass).not.toBe(solidClass);
+      expect(solidClass).not.toBe(ghostClass);
+      expect(outlineClass).not.toBe(ghostClass);
+    });
+  });
+
+  describe("size 속성", () => {
+    it("size prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
+      const { getByRole: getSm } = render(() => <Button size="sm">Click</Button>);
+      const { getByRole: getLg } = render(() => <Button size="lg">Click</Button>);
+
+      const defaultClass = getDefault("button").className;
+      const smClass = getSm("button").className;
+      const lgClass = getLg("button").className;
+
+      expect(defaultClass).not.toBe(smClass);
+      expect(defaultClass).not.toBe(lgClass);
+      expect(smClass).not.toBe(lgClass);
+    });
+  });
+
+  describe("inset 속성", () => {
+    it("inset prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
+      const { getByRole: getInset } = render(() => <Button inset>Click</Button>);
+
+      expect(getDefault("button").className).not.toBe(getInset("button").className);
+    });
+  });
+
+  describe("disabled 속성", () => {
+    it("disabled prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
+      const { getByRole: getDisabled } = render(() => <Button disabled>Click</Button>);
+
+      expect(getDefault("button").className).not.toBe(getDisabled("button").className);
+    });
+
+    it("disabled=true일 때 HTML disabled 속성이 설정된다", () => {
+      const { getByRole } = render(() => <Button disabled>Click</Button>);
+
+      expect(getByRole("button").hasAttribute("disabled")).toBe(true);
+    });
+  });
+
+  describe("이벤트 핸들링", () => {
+    it("onClick handler가 버튼 클릭 시 호출된다", () => {
+      const handleClick = vi.fn();
+      const { getByRole } = render(() => <Button onClick={handleClick}>Click</Button>);
+
+      fireEvent.click(getByRole("button"));
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("disabled 상태에서는 클릭이 차단된다", () => {
+      const { getByRole } = render(() => <Button disabled>Click</Button>);
+
+      expect(getByRole("button").hasAttribute("disabled")).toBe(true);
+    });
+  });
+
+  describe("class 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { getByRole } = render(() => <Button class="my-custom-class">Click</Button>);
+
+      expect(getByRole("button").classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+});

package/tests/components/form-control/checkbox/Checkbox.spec.tsx

@@ -0,0 +1,120 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { Checkbox } from "../../../../src/components/form-control/checkbox/Checkbox";
+
+describe("Checkbox 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("checkbox role로 렌더링된다", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      expect(getByRole("checkbox")).toBeTruthy();
+    });
+
+    it("children이 라벨로 표시된다", () => {
+      const { getByText } = render(() => <Checkbox>동의합니다</Checkbox>);
+      expect(getByText("동의합니다")).toBeTruthy();
+    });
+
+    it("기본값은 unchecked이다", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("클릭 동작", () => {
+    it("클릭하면 checked 상태가 토글된다", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      const checkbox = getByRole("checkbox");
+
+      fireEvent.click(checkbox);
+      expect(checkbox.getAttribute("aria-checked")).toBe("true");
+
+      fireEvent.click(checkbox);
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("disabled 상태에서는 클릭해도 변경되지 않는다", () => {
+      const { getByRole } = render(() => <Checkbox disabled />);
+      const checkbox = getByRole("checkbox");
+
+      fireEvent.click(checkbox);
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("키보드 동작", () => {
+    it("Space 키로 토글된다", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      const checkbox = getByRole("checkbox");
+
+      fireEvent.keyDown(checkbox, { key: " " });
+      expect(checkbox.getAttribute("aria-checked")).toBe("true");
+
+      fireEvent.keyDown(checkbox, { key: " " });
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("controlled 패턴", () => {
+    it("value prop이 checked 상태로 반영된다", () => {
+      const { getByRole } = render(() => <Checkbox value={true} />);
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("onValueChange가 클릭 시 호출된다", () => {
+      const handleChange = vi.fn();
+      const { getByRole } = render(() => <Checkbox value={false} onValueChange={handleChange} />);
+
+      fireEvent.click(getByRole("checkbox"));
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it("외부 상태 변경 시 업데이트된다", () => {
+      const [value, setValue] = createSignal(false);
+      const { getByRole } = render(() => <Checkbox value={value()} onValueChange={setValue} />);
+
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
+
+      setValue(true);
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("스타일 변형", () => {
+    it("theme prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Checkbox value={true} />);
+      const { getByRole: getDanger } = render(() => <Checkbox value={true} theme="danger" />);
+
+      const defaultIndicator = getDefault("checkbox").querySelector("div") as HTMLElement;
+      const dangerIndicator = getDanger("checkbox").querySelector("div") as HTMLElement;
+      expect(defaultIndicator.className).not.toBe(dangerIndicator.className);
+    });
+
+    it("size prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Checkbox />);
+      const { getByRole: getSm } = render(() => <Checkbox size="sm" />);
+
+      expect(getDefault("checkbox").className).not.toBe(getSm("checkbox").className);
+    });
+
+    it("inset prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Checkbox />);
+      const { getByRole: getInset } = render(() => <Checkbox inset />);
+
+      expect(getDefault("checkbox").className).not.toBe(getInset("checkbox").className);
+    });
+
+    it("disabled 스타일이 적용된다", () => {
+      const { getByRole } = render(() => <Checkbox disabled />);
+      expect(getByRole("checkbox").classList.contains("opacity-50")).toBe(true);
+    });
+  });
+
+  describe("class 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { getByRole } = render(() => <Checkbox class="my-custom-class" />);
+      expect(getByRole("checkbox").classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+});