@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -1,331 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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);
-    });
-  });
-});