@simplysm/solid 13.0.70 → 13.0.71

package/tests/components/disclosure/Tabs.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Tabs } from "../../../src/components/disclosure/Tabs";
 
-describe("Tabs 컴포넌트", () => {
+describe("Tabs", () => {
   describe("basic rendering", () => {
-    it("tablist role로 렌더링된다", () => {
+    it("renders with tablist role", () => {
       const { getByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -14,7 +14,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getByRole("tablist")).toBeTruthy();
     });
 
-    it("Tabs.Tab이 tab role로 렌더링된다", () => {
+    it("renders Tabs.Tab with tab role", () => {
       const { getByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -23,7 +23,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getByRole("tab")).toBeTruthy();
     });
 
-    it("children이 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">탭 A</Tabs.Tab>
@@ -35,8 +35,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("선택 동작", () => {
-    it("클릭하면 aria-selected가 true가 된다", () => {
+  describe("selection behavior", () => {
+    it("sets aria-selected to true on click", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -50,7 +50,7 @@ describe("Tabs 컴포넌트", () => {
       expect(tabs[1].getAttribute("aria-selected")).toBe("false");
     });
 
-    it("다른 탭 클릭 시 선택이 변경된다", () => {
+    it("changes selection on different tab click", () => {
       const { getAllByRole } = render(() => (
         <Tabs value="a">
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -64,7 +64,7 @@ describe("Tabs 컴포넌트", () => {
       expect(tabs[0].getAttribute("aria-selected")).toBe("false");
     });
 
-    it("disabled 탭은 클릭해도 선택되지 않는다", () => {
+    it("does not select disabled tab on click", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <Tabs onValueChange={handleChange}>
@@ -80,8 +80,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("키보드 동작", () => {
-    it("Space 키로 선택된다", () => {
+  describe("keyboard behavior", () => {
+    it("selects tab with Space key", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -93,7 +93,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getAllByRole("tab")[0].getAttribute("aria-selected")).toBe("true");
     });
 
-    it("Enter 키로 선택된다", () => {
+    it("selects tab with Enter key", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -106,8 +106,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 선택 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
         <Tabs value="b">
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -119,7 +119,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getAllByRole("tab")[1].getAttribute("aria-selected")).toBe("true");
     });
 
-    it("onValueChange가 클릭 시 호출된다", () => {
+    it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <Tabs value="a" onValueChange={handleChange}>
@@ -132,7 +132,7 @@ describe("Tabs 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith("b");
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal("a");
       const { getAllByRole } = render(() => (
         <Tabs value={value()} onValueChange={setValue}>
@@ -149,8 +149,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("사이즈", () => {
-    it("size prop에 따라 스타일이 달라진다", () => {
+  describe("size", () => {
+    it("applies different styles per size prop", () => {
       const { getAllByRole: getDefault } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -167,7 +167,7 @@ describe("Tabs 컴포넌트", () => {
   });
 
   describe("accessibility", () => {
-    it("disabled 탭에 aria-disabled가 설정된다", () => {
+    it("sets aria-disabled on disabled tab", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -180,7 +180,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getAllByRole("tab")[1].getAttribute("aria-disabled")).toBe("true");
     });
 
-    it("disabled 탭의 tabIndex가 -1이다", () => {
+    it("sets tabIndex to -1 on disabled tab", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -195,7 +195,7 @@ describe("Tabs 컴포넌트", () => {
   });
 
   describe("class merging", () => {
-    it("Tabs에 사용자 정의 class가 병합된다", () => {
+    it("merges custom class on Tabs", () => {
       const { getByRole } = render(() => (
         // eslint-disable-next-line tailwindcss/no-custom-classname
         <Tabs class="my-tab-class">
@@ -205,7 +205,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getByRole("tablist").classList.contains("my-tab-class")).toBe(true);
     });
 
-    it("Tabs.Tab에 사용자 정의 class가 병합된다", () => {
+    it("merges custom class on Tabs.Tab", () => {
       const { getByRole } = render(() => (
         <Tabs>
           {/* eslint-disable-next-line tailwindcss/no-custom-classname */}

package/tests/components/disclosure/dialogZIndex.spec.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  registerDialog,
+  unregisterDialog,
+  getTopmostDialog,
+} from "../../../src/components/disclosure/dialogZIndex";
+
+describe("getTopmostDialog", () => {
+  let el1: HTMLElement;
+  let el2: HTMLElement;
+
+  beforeEach(() => {
+    el1 = document.createElement("div");
+    el2 = document.createElement("div");
+    // Clean up any leftover registrations
+    unregisterDialog(el1);
+    unregisterDialog(el2);
+  });
+
+  it("returns null when no dialogs are registered", () => {
+    expect(getTopmostDialog()).toBeNull();
+  });
+
+  it("returns the only registered dialog", () => {
+    registerDialog(el1);
+    expect(getTopmostDialog()).toBe(el1);
+    unregisterDialog(el1);
+  });
+
+  it("returns the last registered dialog when multiple are open", () => {
+    registerDialog(el1);
+    registerDialog(el2);
+    expect(getTopmostDialog()).toBe(el2);
+    unregisterDialog(el2);
+    unregisterDialog(el1);
+  });
+
+  it("returns previous dialog after topmost is unregistered", () => {
+    registerDialog(el1);
+    registerDialog(el2);
+    unregisterDialog(el2);
+    expect(getTopmostDialog()).toBe(el1);
+    unregisterDialog(el1);
+  });
+});

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

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Alert } from "../../../src/components/display/Alert";
 
-describe("Alert 컴포넌트", () => {
+describe("Alert", () => {
   describe("basic rendering", () => {
-    it("children이 Alert 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Alert>This is a note</Alert>);
       expect(getByText("This is a note")).toBeTruthy();
     });
@@ -16,8 +16,8 @@ describe("Alert 컴포넌트", () => {
     });
   });
 
-  describe("theme 속성", () => {
-    it("theme prop에 따라 스타일이 달라진다", () => {
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
       const { container: defaultContainer } = render(() => <Alert>Content</Alert>);
       const { container: themedContainer } = render(() => <Alert theme="danger">Content</Alert>);
 

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

@@ -3,28 +3,28 @@ import { describe, it, expect } from "vitest";
 import { createSignal } from "solid-js";
 import { Barcode } from "../../../src/components/display/Barcode";
 
-describe("Barcode 컴포넌트", () => {
+describe("Barcode", () => {
   describe("basic rendering", () => {
-    it("data-barcode 속성으로 렌더링된다", () => {
+    it("renders with data-barcode attribute", () => {
       const { container } = render(() => <Barcode type="qrcode" value="test" />);
       expect(container.querySelector("[data-barcode]")).toBeTruthy();
     });
 
-    it("value가 있으면 SVG가 렌더링된다", () => {
+    it("renders SVG when value is provided", () => {
       const { container } = render(() => <Barcode type="qrcode" value="hello" />);
       const el = container.querySelector("[data-barcode]")!;
       expect(el.querySelector("svg")).toBeTruthy();
     });
 
-    it("value가 없으면 내용이 비어있다", () => {
+    it("renders empty when value is absent", () => {
       const { container } = render(() => <Barcode type="qrcode" />);
       const el = container.querySelector("[data-barcode]")!;
       expect(el.innerHTML).toBe("");
     });
   });
 
-  describe("반응성", () => {
-    it("value 변경 시 SVG가 업데이트된다", () => {
+  describe("reactivity", () => {
+    it("updates SVG when value changes", () => {
       const [value, setValue] = createSignal("first");
       const { container } = render(() => <Barcode type="qrcode" value={value()} />);
       const el = container.querySelector("[data-barcode]")!;
@@ -38,7 +38,7 @@ describe("Barcode 컴포넌트", () => {
       expect(firstSvg).not.toBe(secondSvg);
     });
 
-    it("value가 빈 문자열로 변경되면 SVG가 제거된다", () => {
+    it("removes SVG when value changes to empty string", () => {
       const [value, setValue] = createSignal("hello");
       const { container } = render(() => <Barcode type="qrcode" value={value()} />);
       const el = container.querySelector("[data-barcode]")!;

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

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Card } from "../../../src/components/display/Card";
 
-describe("Card 컴포넌트", () => {
+describe("Card", () => {
   describe("basic rendering", () => {
-    it("children이 Card 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Card>Card Content</Card>);
       expect(getByText("Card Content")).toBeTruthy();
     });
@@ -32,7 +32,7 @@ describe("Card 컴포넌트", () => {
       expect(card.getAttribute("data-testid")).toBe("test-card");
     });
 
-    it("id 속성이 전달된다", () => {
+    it("passes id attribute", () => {
       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/Link.spec.tsx

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Link } from "../../../src/components/display/Link";
 
-describe("Link 컴포넌트", () => {
+describe("Link", () => {
   describe("basic rendering", () => {
-    it("children이 Link 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Link href="https://example.com">링크</Link>);
       expect(getByText("링크")).toBeTruthy();
     });
@@ -16,14 +16,14 @@ describe("Link 컴포넌트", () => {
     });
   });
 
-  describe("href 속성", () => {
-    it("href가 a 요소에 전달된다", () => {
+  describe("href prop", () => {
+    it("passes href to anchor element", () => {
       const { container } = render(() => <Link href="https://example.com">링크</Link>);
       const link = container.firstChild as HTMLAnchorElement;
       expect(link.getAttribute("href")).toBe("https://example.com");
     });
 
-    it("target 속성이 전달된다", () => {
+    it("passes target attribute", () => {
       const { container } = render(() => (
         <Link href="https://example.com" target="_blank">
           링크

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

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Tag } from "../../../src/components/display/Tag";
 
-describe("Tag 컴포넌트", () => {
+describe("Tag", () => {
   describe("basic rendering", () => {
-    it("children이 Tag 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Tag>New</Tag>);
       expect(getByText("New")).toBeTruthy();
     });
@@ -16,8 +16,8 @@ describe("Tag 컴포넌트", () => {
     });
   });
 
-  describe("theme 속성", () => {
-    it("theme prop에 따라 스타일이 달라진다", () => {
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
       const { container: defaultContainer } = render(() => <Tag>Tag</Tag>);
       const { container: themedContainer } = render(() => <Tag theme="danger">Tag</Tag>);
 

package/tests/components/features/address/AddressSearch.spec.tsx

@@ -22,7 +22,7 @@ function TestApp() {
 }
 
 describe("AddressSearchContent", () => {
-  it("마운트 시 Daum Postcode 위젯이 content 영역에 렌더된다", async () => {
+  it("mounts and renders Daum Postcode widget inside content area", async () => {
     const { getByTestId } = render(() => (
       <DialogProvider>
         <TestApp />
@@ -31,12 +31,12 @@ describe("AddressSearchContent", () => {
 
     getByTestId("open-btn").click();
 
-    // Daum Postcode 스크립트 로드 + 위젯 embed 대기
+    // wait for Daum Postcode script load + widget embed
     await waitFor(
       () => {
         const content = document.querySelector("[data-address-content]");
         expect(content).not.toBeNull();
-        // Daum Postcode 위젯이 embed되면 content 내부에 자식 요소가 생긴다
+        // once the Daum Postcode widget is embedded, content has child elements
         expect(content!.children.length).toBeGreaterThan(0);
       },
       { timeout: 10000 },

package/tests/components/features/crudRegistry.spec.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import {
+  registerCrud,
+  unregisterCrud,
+  activateCrud,
+  isActiveCrud,
+} from "../../../src/components/features/crudRegistry";
+
+// Mock dialogZIndex — we need to control getTopmostDialog
+vi.mock("../../../src/components/disclosure/dialogZIndex", () => ({
+  getTopmostDialog: vi.fn(() => null),
+}));
+
+import { getTopmostDialog } from "../../../src/components/disclosure/dialogZIndex";
+const mockGetTopmostDialog = vi.mocked(getTopmostDialog);
+
+describe("crudRegistry", () => {
+  let form1: HTMLFormElement;
+  let form2: HTMLFormElement;
+
+  beforeEach(() => {
+    form1 = document.createElement("form");
+    form2 = document.createElement("form");
+    // Clean state
+    unregisterCrud("a");
+    unregisterCrud("b");
+    mockGetTopmostDialog.mockReturnValue(null);
+  });
+
+  it("single registered crud is active", () => {
+    registerCrud("a", form1);
+    expect(isActiveCrud("a")).toBe(true);
+    unregisterCrud("a");
+  });
+
+  it("last registered crud is active (auto-activate on register)", () => {
+    registerCrud("a", form1);
+    registerCrud("b", form2);
+    expect(isActiveCrud("a")).toBe(false);
+    expect(isActiveCrud("b")).toBe(true);
+    unregisterCrud("a");
+    unregisterCrud("b");
+  });
+
+  it("activateCrud changes which crud is active", () => {
+    registerCrud("a", form1);
+    registerCrud("b", form2);
+    activateCrud("a");
+    expect(isActiveCrud("a")).toBe(true);
+    expect(isActiveCrud("b")).toBe(false);
+    unregisterCrud("a");
+    unregisterCrud("b");
+  });
+
+  it("unregistered crud is not active", () => {
+    registerCrud("a", form1);
+    unregisterCrud("a");
+    expect(isActiveCrud("a")).toBe(false);
+  });
+
+  it("returns false for unknown id", () => {
+    expect(isActiveCrud("unknown")).toBe(false);
+  });
+
+  it("Dialog boundary: only crud inside topmost Dialog is active", () => {
+    const dialogEl = document.createElement("div");
+    dialogEl.appendChild(form2);
+    mockGetTopmostDialog.mockReturnValue(dialogEl);
+
+    registerCrud("a", form1); // outside dialog
+    registerCrud("b", form2); // inside dialog
+
+    // b is inside the topmost dialog, so b should be active
+    expect(isActiveCrud("b")).toBe(true);
+    // a is outside, so a should not be active even if it was registered
+    expect(isActiveCrud("a")).toBe(false);
+
+    unregisterCrud("a");
+    unregisterCrud("b");
+  });
+
+  it("Dialog boundary: no crud inside topmost Dialog means none active", () => {
+    const dialogEl = document.createElement("div");
+    // form1 and form2 are NOT inside dialogEl
+    mockGetTopmostDialog.mockReturnValue(dialogEl);
+
+    registerCrud("a", form1);
+    registerCrud("b", form2);
+
+    expect(isActiveCrud("a")).toBe(false);
+    expect(isActiveCrud("b")).toBe(false);
+
+    unregisterCrud("a");
+    unregisterCrud("b");
+  });
+
+  it("Dialog boundary: most recently activated crud inside dialog wins", () => {
+    const dialogEl = document.createElement("div");
+    const form3 = document.createElement("form");
+    dialogEl.appendChild(form2);
+    dialogEl.appendChild(form3);
+    mockGetTopmostDialog.mockReturnValue(dialogEl);
+
+    registerCrud("a", form1);  // outside
+    registerCrud("b", form2);  // inside
+    registerCrud("c", form3);  // inside, last registered
+
+    expect(isActiveCrud("c")).toBe(true);
+    expect(isActiveCrud("b")).toBe(false);
+
+    activateCrud("b");
+    expect(isActiveCrud("b")).toBe(true);
+    expect(isActiveCrud("c")).toBe(false);
+
+    unregisterCrud("a");
+    unregisterCrud("b");
+    unregisterCrud("c");
+  });
+});

package/tests/components/features/data-select-button/DataSelectButton.spec.tsx

@@ -8,7 +8,7 @@ import { Dialog } from "../../../../src/components/disclosure/Dialog";
 import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
-// 테스트용 아이템 타입
+// item type for tests
 interface TestItem {
   id: number;
   name: string;
@@ -20,7 +20,7 @@ const testItems: TestItem[] = [
   { id: 3, name: "Cherry" },
 ];
 
-// load 함수 (키로 아이템 조회)
+// load function (fetch items by key)
 function createTestLoad() {
   const loadFn = vi.fn((keys: number[]) => {
     return testItems.filter((item) => keys.includes(item.id));
@@ -28,7 +28,7 @@ function createTestLoad() {
   return loadFn;
 }
 
-// 테스트용 모달 컴포넌트 (특정 키를 반환)
+// modal component for tests (returns specific keys)
 function TestModal(selectedKeys: number[]): () => JSX.Element {
   return () => {
     const instance = useDialogInstance<DataSelectModalResult<number>>();
@@ -48,7 +48,7 @@ function TestModal(selectedKeys: number[]): () => JSX.Element {
   };
 }
 
-// DialogProvider 래핑 헬퍼
+// helper to wrap with DialogProvider
 function renderWithDialog(ui: () => JSX.Element) {
   return render(() => (
     <ConfigProvider clientName="test"><I18nProvider>
@@ -74,7 +74,7 @@ describe("DataSelectButton", () => {
 
     const trigger = container.querySelector("[data-data-select-button]");
     expect(trigger).not.toBeNull();
-    // load는 빈 키로 호출되지 않아야 함
+    // load should not be called with empty keys
     expect(load).not.toHaveBeenCalled();
   });
 
@@ -261,7 +261,7 @@ describe("DataSelectButton", () => {
     const searchBtn = container.querySelector("[data-search-button]") as HTMLButtonElement;
     searchBtn.click();
 
-    // 모달이 열리면 확인 버튼 찾아서 클릭
+    // once modal opens, find and click confirm button
     await vi.waitFor(() => {
       const confirmBtn = document.querySelector(
         "[data-testid='modal-confirm']",
@@ -328,7 +328,7 @@ describe("DataSelectButton", () => {
       cancelBtn.click();
     });
 
-    // 값이 변경되지 않아야 함
+    // value should not change
     await new Promise((r) => setTimeout(r, 100));
     expect(onValueChange).not.toHaveBeenCalled();
   });
@@ -344,7 +344,7 @@ describe("DataSelectButton", () => {
       />
     ));
 
-    // Invalid 컴포넌트가 hidden input에 setCustomValidity 설정
+    // Invalid component sets setCustomValidity on hidden input
     const hiddenInput = container.querySelector("input[type='text']") as HTMLInputElement;
     expect(hiddenInput).not.toBeNull();
     expect(hiddenInput.validationMessage).toBe("Required field");