@simplysm/solid 13.0.71 → 13.0.74

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

@@ -34,7 +34,7 @@ describe("Dialog", () => {
       expect(content).toBeNull();
     });
 
-    it("sets data-modal attribute", async () => {
+    it("sets data-dialog attribute", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -44,8 +44,8 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const modal = document.querySelector("[data-modal]");
-        expect(modal).not.toBeNull();
+        const dialog = document.querySelector("[data-dialog]");
+        expect(dialog).not.toBeNull();
       });
     });
 
@@ -60,7 +60,7 @@ describe("Dialog", () => {
       ));
 
       await waitFor(() => {
-        const header = document.querySelector("[data-modal-header]");
+        const header = document.querySelector("[data-dialog-header]");
         expect(header?.textContent).toContain("테스트 제목");
       });
     });
@@ -80,7 +80,7 @@ describe("Dialog", () => {
         const content = document.querySelector('[data-testid="content"]');
         expect(content).not.toBeNull();
       });
-      const header = document.querySelector("[data-modal-header]");
+      const header = document.querySelector("[data-dialog-header]");
       expect(header).toBeNull();
     });
 
@@ -112,9 +112,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
-      const closeBtn = document.querySelector("[data-modal-close]");
+      const closeBtn = document.querySelector("[data-dialog-close]");
       expect(closeBtn).toBeNull();
     });
   });
@@ -131,9 +131,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-close]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-close]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-close]")!);
+      fireEvent.click(document.querySelector("[data-dialog-close]")!);
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
@@ -148,9 +148,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-backdrop]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-backdrop]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-backdrop]")!);
+      fireEvent.click(document.querySelector("[data-dialog-backdrop]")!);
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
@@ -165,9 +165,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-backdrop]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-backdrop]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-backdrop]")!);
+      fireEvent.click(document.querySelector("[data-dialog-backdrop]")!);
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
 
@@ -182,7 +182,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       fireEvent.keyDown(document, { key: "Escape" });
       expect(handleOpenChange).toHaveBeenCalledWith(false);
@@ -199,7 +199,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       fireEvent.keyDown(document, { key: "Escape" });
       expect(handleOpenChange).toHaveBeenCalledWith(false);
@@ -216,7 +216,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       fireEvent.keyDown(document, { key: "Escape" });
       expect(handleOpenChange).not.toHaveBeenCalled();
@@ -233,9 +233,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-close]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-close]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-close]")!);
+      fireEvent.click(document.querySelector("[data-dialog-close]")!);
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
   });
@@ -251,7 +251,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.getAttribute("role")).toBe("dialog");
         expect(dialog.getAttribute("aria-modal")).toBe("true");
@@ -269,7 +269,7 @@ describe("Dialog", () => {
       ));
 
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         const headerId = dialog.getAttribute("aria-labelledby");
         expect(headerId).toBeTruthy();
         const header = document.getElementById(headerId!);
@@ -287,7 +287,7 @@ describe("Dialog", () => {
       ));
 
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.hasAttribute("aria-labelledby")).toBe(false);
       });
@@ -303,7 +303,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.getAttribute("role")).toBe("dialog");
         expect(dialog.hasAttribute("aria-modal")).toBe(false);
@@ -324,7 +324,7 @@ describe("Dialog", () => {
       await waitFor(() => {
         expect(document.querySelector('[data-testid="content"]')).not.toBeNull();
       });
-      const backdrop = document.querySelector("[data-modal-backdrop]");
+      const backdrop = document.querySelector("[data-dialog-backdrop]");
       expect(backdrop).toBeNull();
     });
   });
@@ -340,7 +340,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.style.width).toBe("100%");
         expect(dialog.style.height).toBe("100%");
@@ -359,7 +359,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.style.width).toBe("400px");
         expect(dialog.style.height).toBe("300px");
@@ -376,7 +376,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.style.minWidth).toBe("300px");
         expect(dialog.style.minHeight).toBe("200px");
@@ -410,7 +410,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       const bars = document.querySelectorAll("[data-resize-bar]");
       expect(bars.length).toBe(0);
@@ -428,7 +428,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.classList.contains("transition-[opacity,transform]")).toBe(true);
         expect(dialog.classList.contains("duration-200")).toBe(true);

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

@@ -1,15 +1,17 @@
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
 import { DialogProvider } from "../../../src/components/disclosure/DialogProvider";
 import { useDialog } from "../../../src/components/disclosure/DialogContext";
 import { useDialogInstance } from "../../../src/components/disclosure/DialogInstanceContext";
+import { I18nProvider } from "../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../src/providers/ConfigContext";
 
 // dialog content component for testing
 function TestContent() {
   const dialog = useDialogInstance<string>();
   return (
     <div>
-      <span data-testid="modal-content">다이얼로그 내용</span>
+      <span data-testid="dialog-content">다이얼로그 내용</span>
       <button data-testid="close-btn" onClick={() => dialog?.close("result")}>
         닫기
       </button>
@@ -53,25 +55,37 @@ function TestAppNoHeader() {
 }
 
 describe("DialogProvider", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   it("displays dialog via show()", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
 
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).not.toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).not.toBeNull();
     });
   });
 
   it("closes dialog when close is called via useDialogInstance", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
@@ -84,15 +98,19 @@ describe("DialogProvider", () => {
 
     // dialog content is removed after close animation fallback timer (200ms)
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).toBeNull();
     });
   });
 
   it("closes dialog when close() is called", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
@@ -104,39 +122,47 @@ describe("DialogProvider", () => {
     fireEvent.click(document.querySelector('[data-testid="close-no-result"]')!);
 
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).toBeNull();
     });
   });
 
   it("displays dialog header", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
 
     await waitFor(() => {
-      const modal = document.querySelector("[data-modal]");
-      expect(modal).not.toBeNull();
-      expect(modal!.textContent).toContain("테스트 다이얼로그");
+      const dialog = document.querySelector("[data-dialog]");
+      expect(dialog).not.toBeNull();
+      expect(dialog!.textContent).toContain("테스트 다이얼로그");
     });
   });
 
   it("does not render header when header is not provided", async () => {
     render(() => (
-      <DialogProvider>
-        <TestAppNoHeader />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestAppNoHeader />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
 
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).not.toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).not.toBeNull();
     });
-    const header = document.querySelector("[data-modal-header]");
+    const header = document.querySelector("[data-dialog-header]");
     expect(header).toBeNull();
   });
 });

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

@@ -1,8 +1,10 @@
 import { render, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
 import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
 import { useDialog } from "../../../../src/components/disclosure/DialogContext";
 import { AddressSearchContent } from "../../../../src/components/features/address/AddressSearch";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 function TestApp() {
   const dialog = useDialog();
@@ -22,11 +24,17 @@ function TestApp() {
 }
 
 describe("AddressSearchContent", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   it("mounts and renders Daum Postcode widget inside content area", async () => {
     const { getByTestId } = render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test"><I18nProvider>
+        <DialogProvider>
+          <TestApp />
+        </DialogProvider>
+      </I18nProvider></ConfigProvider>
     ));
 
     getByTestId("open-btn").click();

package/tests/components/features/crud-detail/CrudDetail.spec.tsx

@@ -28,6 +28,7 @@ import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 // Helper: extract actions accessor from TopbarContext
 function ActionsReader(props: { onCapture: (actions: Accessor<JSX.Element | undefined>) => void }) {
   const actions = useTopbarActionsAccessor();
+   
   props.onCapture(actions);
   return null;
 }

package/tests/components/features/crud-sheet/CrudSheet.spec.tsx

@@ -91,6 +91,14 @@ describe("CrudSheet types", () => {
 });
 
 describe("CrudSheet rendering", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("test.i18n-locale");
+  });
+
   it("basic rendering: column, filter, and BusyContainer are displayed", async () => {
     const searchFn = () =>
       Promise.resolve({
@@ -245,6 +253,14 @@ describe("CrudSheet inline edit", () => {
 });
 
 describe("CrudSheet itemDeletable", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("test.i18n-locale");
+  });
+
   it("inline delete button is disabled for items where itemDeletable=false", async () => {
     const searchFn = () =>
       Promise.resolve({
@@ -286,6 +302,14 @@ describe("CrudSheet itemDeletable", () => {
 });
 
 describe("CrudSheet editable (renamed from canEdit)", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("test.i18n-locale");
+  });
+
   it("inline edit buttons are hidden when editable=false", async () => {
     const searchFn = () =>
       Promise.resolve({
@@ -327,10 +351,10 @@ describe("CrudSheet select mode", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  it("toolbar is hidden when selectMode is set", async () => {
+  it("toolbar is hidden when selectMode is set inside Dialog", async () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
-        <TestWrapper>
+        <DialogWrapper>
         <CrudSheet<TestItem, Record<string, never>>
           search={() => Promise.resolve({ items: [{ id: 1, name: "홍길동", isDeleted: false }] })}
           getItemKey={(item) => item.id}
@@ -345,7 +369,7 @@ describe("CrudSheet select mode", () => {
             {(ctx) => <div>{ctx.item.name}</div>}
           </CrudSheet.Column>
         </CrudSheet>
-      </TestWrapper>
+      </DialogWrapper>
       </I18nProvider></ConfigProvider>
     ));
 
@@ -373,7 +397,7 @@ describe("CrudSheet select mode", () => {
 
     await new Promise((r) => setTimeout(r, 100));
     // Dialog renders via Portal so content is in document.body
-    const dialogContent = document.querySelector("[data-modal-content]");
+    const dialogContent = document.querySelector("[data-dialog-content]");
     expect(dialogContent?.textContent).toContain("Confirm");
   });
 });
@@ -434,7 +458,7 @@ describe("CrudSheet control mode", () => {
   });
 });
 
-describe("CrudSheet modal mode", () => {
+describe("CrudSheet dialog mode", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
@@ -463,7 +487,7 @@ describe("CrudSheet modal mode", () => {
 
     await new Promise((r) => setTimeout(r, 100));
     // Dialog renders via Portal so content is in document.body
-    const dialogContent = document.querySelector("[data-modal-content]");
+    const dialogContent = document.querySelector("[data-dialog-content]");
     expect(dialogContent?.textContent).toContain("Confirm");
   });