@simplysm/solid 13.0.69 → 13.0.71

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

@@ -0,0 +1,362 @@
+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 { ConfigContext } from "../../../../src/providers/ConfigContext";
+import {
+  useNotification,
+  type NotificationContextValue,
+} from "../../../../src/components/feedback/notification/NotificationContext";
+
+describe("NotificationContext", () => {
+  describe("useNotification", () => {
+    it("throws error when used without Provider", () => {
+      createRoot((dispose) => {
+        expect(() => useNotification()).toThrow(
+          "useNotification can only be used inside NotificationProvider",
+        );
+        dispose();
+      });
+    });
+  });
+});
+
+describe("NotificationProvider", () => {
+  it("useNotification works normally inside Provider", () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    expect(notification!.items()).toEqual([]);
+    expect(notification!.unreadCount()).toBe(0);
+  });
+
+  it("adds notification when info is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test Title", "Test Message");
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(1);
+      expect(notification!.items()[0].theme).toBe("info");
+      expect(notification!.items()[0].title).toBe("Test Title");
+      expect(notification!.items()[0].message).toBe("Test Message");
+      expect(notification!.unreadCount()).toBe(1);
+    });
+  });
+
+  it("correctly applies success/warning/danger themes", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.success("Success", "Success message");
+    notification!.warning("Warning", "Warning message");
+    notification!.danger("Error", "Error message");
+
+    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("marks notification as read when markAsRead is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test", "Message");
+
+    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("removes all notifications when clear is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Notification 1");
+    notification!.info("Notification 2");
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(2);
+    });
+
+    notification!.clear();
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(0);
+    });
+  });
+
+  it("maintains maximum 50 notifications", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    // Add 51 notifications
+    for (let i = 0; i < 51; i++) {
+      notification!.info(`Notification ${i}`);
+    }
+
+    await waitFor(() => {
+      expect(notification!.items().length).toBe(50);
+      // First notification deleted, last notification retained
+      expect(notification!.items()[49].title).toBe("Notification 50");
+    });
+  });
+
+  it("latestUnread returns the most recent unread notification", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("First");
+    notification!.info("Second");
+
+    await waitFor(() => {
+      expect(notification!.latestUnread()?.title).toBe("Second");
+    });
+  });
+
+  it("latestUnread becomes undefined and marked as read when dismissBanner is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    notification!.info("Test");
+
+    await waitFor(() => {
+      expect(notification!.latestUnread()).toBeDefined();
+    });
+
+    notification!.dismissBanner();
+
+    await waitFor(() => {
+      expect(notification!.latestUnread()).toBeUndefined();
+      // Still exists in items but marked as read
+      expect(notification!.items().length).toBe(1);
+      expect(notification!.items()[0].read).toBe(true);
+      expect(notification!.unreadCount()).toBe(0);
+    });
+  });
+
+  it("returns id of created notification when info is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    const id = notification!.info("Test Title");
+
+    await waitFor(() => {
+      expect(typeof id).toBe("string");
+      expect(notification!.items()[0].id).toBe(id);
+    });
+  });
+
+  it("updates notification content when update is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    const id = notification!.info("Original Title", "Original Message");
+
+    notification!.update(id, { title: "Updated Title", message: "Updated Message" });
+
+    await waitFor(() => {
+      const item = notification!.items()[0];
+      expect(item.title).toBe("Updated Title");
+      expect(item.message).toBe("Updated Message");
+    });
+  });
+
+  it("removes notification when remove is called", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    const id = notification!.info("Notification to delete");
+    notification!.info("Notification to keep");
+
+    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("Notification to keep");
+    });
+  });
+
+  it("update with renotify: read notification changes back to unread", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    const id = notification!.info("Notification");
+    notification!.markAsRead(id);
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(0);
+    });
+
+    notification!.update(id, { message: "Done!" }, { renotify: true });
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(1);
+      expect(notification!.items()[0].read).toBe(false);
+    });
+  });
+
+  it("update with renotify: unread notification remains unread", async () => {
+    let notification: NotificationContextValue;
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <NotificationProvider>
+          {(() => {
+            notification = useNotification();
+            return null;
+          })()}
+        </NotificationProvider>
+      </ConfigContext.Provider>
+    ));
+
+    const id = notification!.info("Notification");
+
+    await waitFor(() => {
+      expect(notification!.unreadCount()).toBe(1);
+    });
+
+    notification!.update(id, { message: "Updated" }, { renotify: true });
+
+    await waitFor(() => {
+      // Still 1 (not increased)
+      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("basic rendering", () => {
+    it("renders children", () => {
+      const { getByText } = render(() => <Print>테스트 내용</Print>);
+      expect(getByText("테스트 내용")).toBeTruthy();
+    });
+  });
+
+  describe("Print.Page", () => {
+    it("renders with data-print-page attribute", () => {
+      const { container } = render(() => (
+        <Print>
+          <Print.Page>페이지 1</Print.Page>
+        </Print>
+      ));
+      const page = container.querySelector("[data-print-page]");
+      expect(page).toBeTruthy();
+    });
+
+    it("each Print.Page has data-print-page attribute", () => {
+      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("renders 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 component", () => {
+  describe("basic rendering", () => {
+    it("renders children inside the button", () => {
+      const { getByRole } = render(() => <Button>Click Me</Button>);
+      const button = getByRole("button");
+
+      expect(button.textContent).toBe("Click Me");
+    });
+
+    it("defaults type to button", () => {
+      const { getByRole } = render(() => <Button>Click</Button>);
+      const button = getByRole("button");
+
+      expect(button.getAttribute("type")).toBe("button");
+    });
+
+    it("overrides type with submit", () => {
+      const { getByRole } = render(() => <Button type="submit">Submit</Button>);
+      const button = getByRole("button");
+
+      expect(button.getAttribute("type")).toBe("submit");
+    });
+  });
+
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
+      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 prop", () => {
+    it("applies different styles per variant", () => {
+      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 prop", () => {
+    it("applies different styles per size", () => {
+      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 prop", () => {
+    it("applies different styles when inset", () => {
+      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 prop", () => {
+    it("applies different styles when disabled", () => {
+      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("sets HTML disabled attribute when disabled=true", () => {
+      const { getByRole } = render(() => <Button disabled>Click</Button>);
+
+      expect(getByRole("button").hasAttribute("disabled")).toBe(true);
+    });
+  });
+
+  describe("event handling", () => {
+    it("calls onClick handler on click", () => {
+      const handleClick = vi.fn();
+      const { getByRole } = render(() => <Button onClick={handleClick}>Click</Button>);
+
+      fireEvent.click(getByRole("button"));
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("blocks click when disabled", () => {
+      const { getByRole } = render(() => <Button disabled>Click</Button>);
+
+      expect(getByRole("button").hasAttribute("disabled")).toBe(true);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // 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/Invalid.spec.tsx

@@ -0,0 +1,131 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { createSignal } from "solid-js";
+import { Invalid } from "../../../src/components/form-control/Invalid";
+
+describe("Invalid component", () => {
+  describe("Fragment rendering", () => {
+    it("renders children and hidden input without wrapper div", () => {
+      const { container } = render(() => (
+        <Invalid message="error">
+          <div data-testid="child">Content</div>
+        </Invalid>
+      ));
+      const child = container.querySelector("[data-testid='child']");
+      const hiddenInput = container.querySelector("input[aria-hidden='true']");
+      expect(child).toBeTruthy();
+      expect(hiddenInput).toBeTruthy();
+      expect(child!.parentElement).toBe(container);
+    });
+  });
+
+  describe("setCustomValidity", () => {
+    it("sets setCustomValidity when message is present", () => {
+      const { container } = render(() => (
+        <Invalid message="This is a required field">
+          <div>Content</div>
+        </Invalid>
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("This is a required field");
+    });
+
+    it("is valid when no message is provided", () => {
+      const { container } = render(() => (
+        <Invalid>
+          <div>Content</div>
+        </Invalid>
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+
+    it("updates setCustomValidity when message changes", () => {
+      const [msg, setMsg] = createSignal<string | undefined>("error");
+      const { container } = render(() => (
+        <Invalid message={msg()}>
+          <div>Content</div>
+        </Invalid>
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("error");
+
+      setMsg(undefined);
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+  });
+
+  describe("variant='border'", () => {
+    it("adds border-danger-500 class to target when message is present", () => {
+      const { container } = render(() => (
+        <Invalid variant="border" message="error">
+          <div data-testid="target" class="border">
+            Content
+          </div>
+        </Invalid>
+      ));
+      const target = container.querySelector("[data-testid='target']") as HTMLElement;
+      expect(target.classList.contains("border-danger-500")).toBe(true);
+    });
+
+    it("does not have border-danger-500 class when no message", () => {
+      const { container } = render(() => (
+        <Invalid variant="border">
+          <div data-testid="target" class="border">
+            Content
+          </div>
+        </Invalid>
+      ));
+      const target = container.querySelector("[data-testid='target']") as HTMLElement;
+      expect(target.classList.contains("border-danger-500")).toBe(false);
+    });
+  });
+
+  describe("variant='dot' (default)", () => {
+    it("inserts dot element inside target when message is present", () => {
+      const { container } = render(() => (
+        <Invalid message="error">
+          <div data-testid="target">Content</div>
+        </Invalid>
+      ));
+      const target = container.querySelector("[data-testid='target']") as HTMLElement;
+      const dot = target.querySelector("[data-invalid-dot]");
+      expect(dot).toBeTruthy();
+    });
+
+    it("has no dot element when no message", () => {
+      const { container } = render(() => (
+        <Invalid>
+          <div data-testid="target">Content</div>
+        </Invalid>
+      ));
+      const target = container.querySelector("[data-testid='target']") as HTMLElement;
+      const dot = target.querySelector("[data-invalid-dot]");
+      expect(dot).toBeFalsy();
+    });
+  });
+
+  describe("touchMode", () => {
+    it("has no visual indication initially in touchMode", () => {
+      const { container } = render(() => (
+        <Invalid variant="border" message="error" touchMode>
+          <div data-testid="target" class="border">
+            Content
+          </div>
+        </Invalid>
+      ));
+      const target = container.querySelector("[data-testid='target']") as HTMLElement;
+      expect(target.classList.contains("border-danger-500")).toBe(false);
+    });
+
+    it("setCustomValidity is always set in touchMode", () => {
+      const { container } = render(() => (
+        <Invalid variant="border" message="error" touchMode>
+          <div>Content</div>
+        </Invalid>
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("error");
+    });
+  });
+});