@simplysm/solid 13.0.0-beta.6

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

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

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

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

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

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

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