@simplysm/solid 13.0.69 → 13.0.71

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

@@ -0,0 +1,187 @@
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
+import { ConfigContext } from "../../../../src/providers/ConfigContext";
+import { NotificationBanner } from "../../../../src/components/feedback/notification/NotificationBanner";
+import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
+
+describe("NotificationBanner", () => {
+  it("does not display banner when no notification", () => {
+    const { container } = render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    expect(container.querySelector("[data-notification-banner]")).toBeNull();
+  });
+
+  it("displays banner when notification is present", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test Title", "Test Message");
+
+    await waitFor(() => {
+      const banner = document.querySelector("[data-notification-banner]");
+      expect(banner).not.toBeNull();
+      expect(banner?.textContent).toContain("Test Title");
+      expect(banner?.textContent).toContain("Test Message");
+    });
+  });
+
+  it("closes banner when close button is clicked", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test");
+
+    await waitFor(() => {
+      expect(document.querySelector("[data-notification-banner]")).not.toBeNull();
+    });
+
+    const closeButton = document.querySelector(
+      "[data-notification-banner] [aria-label='Close notification']",
+    );
+    fireEvent.click(closeButton!);
+
+    await waitFor(() => {
+      expect(document.querySelector("[data-notification-banner]")).toBeNull();
+    });
+  });
+
+  it("has role=alert attribute", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test");
+
+    await waitFor(() => {
+      const banner = document.querySelector("[data-notification-banner]");
+      expect(banner?.getAttribute("role")).toBe("alert");
+    });
+  });
+
+  it("sets data-theme attribute for each theme", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.danger("Error");
+
+    await waitFor(() => {
+      const banner = document.querySelector("[data-notification-banner]");
+      expect(banner?.getAttribute("data-theme")).toBe("danger");
+    });
+  });
+
+  it("displays action button when action is present", async () => {
+    let notification: ReturnType<typeof useNotification>;
+    const handleAction = vi.fn();
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test", "Message", {
+      action: { label: "Confirm", onClick: handleAction },
+    });
+
+    await waitFor(() => {
+      const actionButton = document.querySelector(
+        "[data-notification-banner] button:not([aria-label])",
+      );
+      expect(actionButton?.textContent).toBe("Confirm");
+    });
+
+    const actionButton = document.querySelector(
+      "[data-notification-banner] button:not([aria-label])",
+    );
+    fireEvent.click(actionButton!);
+
+    expect(handleAction).toHaveBeenCalled();
+  });
+
+  it("replaces banner when new notification arrives", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBanner />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("First");
+
+    await waitFor(() => {
+      expect(document.querySelector("[data-notification-banner]")?.textContent).toContain("First");
+    });
+
+    notification!.info("Second");
+
+    await waitFor(() => {
+      expect(document.querySelector("[data-notification-banner]")?.textContent).toContain(
+        "Second",
+      );
+    });
+  });
+});

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

@@ -0,0 +1,226 @@
+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 { ConfigContext } from "../../../../src/providers/ConfigContext";
+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("renders button", () => {
+    const { container } = render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    expect(container.querySelector("[data-notification-bell]")).not.toBeNull();
+  });
+
+  it("does not show badge when there are no notifications", () => {
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    const badge = document.querySelector("[data-notification-badge]");
+    expect(badge).toBeNull();
+  });
+
+  it("shows count on badge when notifications are present", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("알림1");
+    notification!.info("알림2");
+
+    await waitFor(() => {
+      const badge = document.querySelector("[data-notification-badge]");
+      expect(badge?.textContent).toBe("2");
+    });
+  });
+
+  it("opens Dropdown on button click", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    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("shows notification list in Dropdown", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    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("includes notification count in aria-label", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("알림");
+
+    await waitFor(() => {
+      const button = document.querySelector("[data-notification-bell]");
+      expect(button?.getAttribute("aria-label")).toContain("1");
+    });
+  });
+
+  it("sets aria-haspopup and aria-expanded correctly", async () => {
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    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("marks all notifications as read when dropdown opens", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    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("calls clear when clear-all button is clicked", async () => {
+    let notification: ReturnType<typeof useNotification>;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+          <NotificationBell />
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    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);
+    });
+  });
+});