@simplysm/solid 13.0.0-beta.6 → 13.0.1

package/tests/components/display/Barcode.spec.tsx

@@ -1,61 +0,0 @@
-import { render } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { createSignal } from "solid-js";
-import { Barcode } from "../../../src/components/display/Barcode";
-
-describe("Barcode 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("data-barcode 속성으로 렌더링된다", () => {
-      const { container } = render(() => <Barcode type="qrcode" value="test" />);
-      expect(container.querySelector("[data-barcode]")).toBeTruthy();
-    });
-
-    it("value가 있으면 SVG가 렌더링된다", () => {
-      const { container } = render(() => <Barcode type="qrcode" value="hello" />);
-      const el = container.querySelector("[data-barcode]")!;
-      expect(el.querySelector("svg")).toBeTruthy();
-    });
-
-    it("value가 없으면 내용이 비어있다", () => {
-      const { container } = render(() => <Barcode type="qrcode" />);
-      const el = container.querySelector("[data-barcode]")!;
-      expect(el.innerHTML).toBe("");
-    });
-  });
-
-  describe("반응성", () => {
-    it("value 변경 시 SVG가 업데이트된다", () => {
-      const [value, setValue] = createSignal("first");
-      const { container } = render(() => <Barcode type="qrcode" value={value()} />);
-      const el = container.querySelector("[data-barcode]")!;
-
-      const firstSvg = el.innerHTML;
-      setValue("second");
-      const secondSvg = el.innerHTML;
-
-      expect(firstSvg).not.toBe("");
-      expect(secondSvg).not.toBe("");
-      expect(firstSvg).not.toBe(secondSvg);
-    });
-
-    it("value가 빈 문자열로 변경되면 SVG가 제거된다", () => {
-      const [value, setValue] = createSignal("hello");
-      const { container } = render(() => <Barcode type="qrcode" value={value()} />);
-      const el = container.querySelector("[data-barcode]")!;
-
-      expect(el.querySelector("svg")).toBeTruthy();
-
-      setValue("");
-      expect(el.innerHTML).toBe("");
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <Barcode type="qrcode" value="test" class="my-custom" />);
-      const el = container.querySelector("[data-barcode]")!;
-      expect(el.classList.contains("my-custom")).toBe(true);
-    });
-  });
-});

package/tests/components/display/Card.spec.tsx

@@ -1,41 +0,0 @@
-import { render } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { Card } from "../../../src/components/display/Card";
-
-describe("Card 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("children이 Card 내부에 표시된다", () => {
-      const { getByText } = render(() => <Card>Card Content</Card>);
-      expect(getByText("Card Content")).toBeTruthy();
-    });
-
-    it("div 요소로 렌더링된다", () => {
-      const { container } = render(() => <Card>Content</Card>);
-      const card = container.firstChild as HTMLElement;
-      expect(card.tagName).toBe("DIV");
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <Card class="my-custom-class">Content</Card>);
-      const card = container.firstChild as HTMLElement;
-      expect(card.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
-  describe("HTML 속성 전달", () => {
-    it("data-* 속성이 전달된다", () => {
-      const { container } = render(() => <Card data-testid="test-card">Content</Card>);
-      const card = container.firstChild as HTMLElement;
-      expect(card.getAttribute("data-testid")).toBe("test-card");
-    });
-
-    it("id 속성이 전달된다", () => {
-      const { container } = render(() => <Card id="my-card">Content</Card>);
-      const card = container.firstChild as HTMLElement;
-      expect(card.id).toBe("my-card");
-    });
-  });
-});

package/tests/components/display/Tag.spec.tsx

@@ -1,47 +0,0 @@
-import { render } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { Tag } from "../../../src/components/display/Tag";
-
-describe("Tag 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("children이 Tag 내부에 표시된다", () => {
-      const { getByText } = render(() => <Tag>New</Tag>);
-      expect(getByText("New")).toBeTruthy();
-    });
-
-    it("span 요소로 렌더링된다", () => {
-      const { container } = render(() => <Tag>Tag</Tag>);
-      const tag = container.firstChild as HTMLElement;
-      expect(tag.tagName).toBe("SPAN");
-    });
-  });
-
-  describe("theme 속성", () => {
-    it("theme prop에 따라 스타일이 달라진다", () => {
-      const { container: defaultContainer } = render(() => <Tag>Tag</Tag>);
-      const { container: themedContainer } = render(() => <Tag theme="danger">Tag</Tag>);
-
-      const defaultClass = (defaultContainer.firstChild as HTMLElement).className;
-      const themedClass = (themedContainer.firstChild as HTMLElement).className;
-
-      expect(defaultClass).not.toBe(themedClass);
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <Tag class="my-tag">Tag</Tag>);
-      const tag = container.firstChild as HTMLElement;
-      expect(tag.classList.contains("my-tag")).toBe(true);
-    });
-  });
-
-  describe("HTML 속성 전달", () => {
-    it("data-* 속성이 전달된다", () => {
-      const { container } = render(() => <Tag data-testid="test-tag">Tag</Tag>);
-      const tag = container.firstChild as HTMLElement;
-      expect(tag.getAttribute("data-testid")).toBe("test-tag");
-    });
-  });
-});

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

@@ -1,41 +0,0 @@
-import { render, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
-import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
-
-describe("Notification Live Region", () => {
-  it("Provider에 role=status인 live region이 있다", () => {
-    render(() => <NotificationProvider>content</NotificationProvider>);
-
-    const liveRegion = document.querySelector('[role="status"][aria-live="polite"]');
-    expect(liveRegion).not.toBeNull();
-  });
-
-  it("알림 발생 시 live region 텍스트가 업데이트된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트 제목", "테스트 메시지");
-
-    await waitFor(() => {
-      const liveRegion = document.querySelector('[role="status"]');
-      expect(liveRegion?.textContent).toContain("알림: 테스트 제목");
-      expect(liveRegion?.textContent).toContain("테스트 메시지");
-    });
-  });
-
-  it("live region은 시각적으로 숨겨져 있다 (sr-only)", () => {
-    render(() => <NotificationProvider>content</NotificationProvider>);
-
-    const liveRegion = document.querySelector('[role="status"]');
-    expect(liveRegion?.classList.contains("sr-only")).toBe(true);
-  });
-});

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

@@ -1,164 +0,0 @@
-import { render, fireEvent, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
-import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
-import { NotificationBanner } from "../../../../src/components/feedback/notification/NotificationBanner";
-import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
-
-describe("NotificationBanner", () => {
-  it("알림이 없으면 배너가 표시되지 않는다", () => {
-    const { container } = render(() => (
-      <NotificationProvider>
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    expect(container.querySelector("[data-notification-banner]")).toBeNull();
-  });
-
-  it("알림이 있으면 배너가 표시된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트 제목", "테스트 메시지");
-
-    await waitFor(() => {
-      const banner = document.querySelector("[data-notification-banner]");
-      expect(banner).not.toBeNull();
-      expect(banner?.textContent).toContain("테스트 제목");
-      expect(banner?.textContent).toContain("테스트 메시지");
-    });
-  });
-
-  it("닫기 버튼 클릭 시 배너가 사라진다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트");
-
-    await waitFor(() => {
-      expect(document.querySelector("[data-notification-banner]")).not.toBeNull();
-    });
-
-    const closeButton = document.querySelector("[data-notification-banner] [aria-label='알림 닫기']");
-    fireEvent.click(closeButton!);
-
-    await waitFor(() => {
-      expect(document.querySelector("[data-notification-banner]")).toBeNull();
-    });
-  });
-
-  it("role=alert 속성이 있다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트");
-
-    await waitFor(() => {
-      const banner = document.querySelector("[data-notification-banner]");
-      expect(banner?.getAttribute("role")).toBe("alert");
-    });
-  });
-
-  it("테마별로 data-theme 속성이 설정된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    notification!.danger("에러");
-
-    await waitFor(() => {
-      const banner = document.querySelector("[data-notification-banner]");
-      expect(banner?.getAttribute("data-theme")).toBe("danger");
-    });
-  });
-
-  it("action이 있으면 액션 버튼이 표시된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-    const handleAction = vi.fn();
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트", "메시지", {
-      action: { label: "확인", onClick: handleAction },
-    });
-
-    await waitFor(() => {
-      const actionButton = document.querySelector("[data-notification-banner] button:not([aria-label])");
-      expect(actionButton?.textContent).toBe("확인");
-    });
-
-    const actionButton = document.querySelector("[data-notification-banner] button:not([aria-label])");
-    fireEvent.click(actionButton!);
-
-    expect(handleAction).toHaveBeenCalled();
-  });
-
-  it("새 알림이 오면 배너가 교체된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBanner />
-      </NotificationProvider>
-    ));
-
-    notification!.info("첫 번째");
-
-    await waitFor(() => {
-      expect(document.querySelector("[data-notification-banner]")?.textContent).toContain("첫 번째");
-    });
-
-    notification!.info("두 번째");
-
-    await waitFor(() => {
-      expect(document.querySelector("[data-notification-banner]")?.textContent).toContain("두 번째");
-    });
-  });
-});

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

@@ -1,207 +0,0 @@
-import { render, fireEvent, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
-import { NotificationBell } from "../../../../src/components/feedback/notification/NotificationBell";
-import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
-
-describe("NotificationBell", () => {
-  beforeEach(() => {
-    vi.stubGlobal("innerWidth", 1024);
-    vi.stubGlobal("innerHeight", 768);
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it("버튼이 렌더링된다", () => {
-    const { container } = render(() => (
-      <NotificationProvider>
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    expect(container.querySelector("[data-notification-bell]")).not.toBeNull();
-  });
-
-  it("알림이 없으면 뱃지가 표시되지 않는다", () => {
-    render(() => (
-      <NotificationProvider>
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    const badge = document.querySelector("[data-notification-badge]");
-    expect(badge).toBeNull();
-  });
-
-  it("알림이 있으면 뱃지에 개수가 표시된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    notification!.info("알림1");
-    notification!.info("알림2");
-
-    await waitFor(() => {
-      const badge = document.querySelector("[data-notification-badge]");
-      expect(badge?.textContent).toBe("2");
-    });
-  });
-
-  it("버튼 클릭 시 Dropdown이 열린다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트");
-
-    const button = document.querySelector("[data-notification-bell]");
-    fireEvent.click(button!);
-
-    await waitFor(() => {
-      const dropdown = document.querySelector("[data-dropdown]");
-      expect(dropdown).not.toBeNull();
-    });
-  });
-
-  it("Dropdown에 알림 목록이 표시된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    notification!.info("알림1", "메시지1");
-    notification!.success("알림2", "메시지2");
-
-    const button = document.querySelector("[data-notification-bell]");
-    fireEvent.click(button!);
-
-    await waitFor(() => {
-      const dropdown = document.querySelector("[data-dropdown]");
-      expect(dropdown?.textContent).toContain("알림1");
-      expect(dropdown?.textContent).toContain("알림2");
-    });
-  });
-
-  it("aria-label에 알림 개수가 포함된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    notification!.info("알림");
-
-    await waitFor(() => {
-      const button = document.querySelector("[data-notification-bell]");
-      expect(button?.getAttribute("aria-label")).toContain("1");
-    });
-  });
-
-  it("aria-haspopup과 aria-expanded가 올바르게 설정된다", async () => {
-    render(() => (
-      <NotificationProvider>
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    const button = document.querySelector("[data-notification-bell]");
-    expect(button?.getAttribute("aria-haspopup")).toBe("true");
-    expect(button?.getAttribute("aria-expanded")).toBe("false");
-
-    fireEvent.click(button!);
-
-    await waitFor(() => {
-      expect(button?.getAttribute("aria-expanded")).toBe("true");
-    });
-  });
-
-  it("드롭다운 열면 모든 알림이 읽음 처리된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    notification!.info("테스트1");
-    notification!.info("테스트2");
-
-    await waitFor(() => {
-      expect(notification!.unreadCount()).toBe(2);
-    });
-
-    const button = document.querySelector("[data-notification-bell]");
-    fireEvent.click(button!);
-
-    await waitFor(() => {
-      expect(notification!.unreadCount()).toBe(0);
-    });
-  });
-
-  it("전체 삭제 버튼 클릭 시 clear가 호출된다", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <NotificationProvider>
-        {(() => {
-          notification = useNotification();
-          return null;
-        })()}
-        <NotificationBell />
-      </NotificationProvider>
-    ));
-
-    notification!.info("알림1");
-    notification!.info("알림2");
-
-    const button = document.querySelector("[data-notification-bell]");
-    fireEvent.click(button!);
-
-    await waitFor(() => {
-      expect(document.querySelector("[data-dropdown]")).not.toBeNull();
-    });
-
-    const clearButton = document.querySelector("[data-notification-clear]");
-    fireEvent.click(clearButton!);
-
-    await waitFor(() => {
-      expect(notification!.items().length).toBe(0);
-    });
-  });
-});