@simplysm/solid 13.0.70 → 13.0.72

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

@@ -17,33 +17,33 @@ describe("Collapse", () => {
   });
 
   describe("rendering", () => {
-    it("open={false}일 때 콘텐츠가 visibility:hidden", () => {
+    it("sets visibility:hidden when open={false}", () => {
       const { container } = render(() => <Collapse open={false}>Content</Collapse>);
       const contentDiv = container.querySelector("[data-collapse]")
         ?.firstElementChild as HTMLElement;
       expect(contentDiv.style.visibility).toBe("hidden");
     });
 
-    it("open={true}일 때 콘텐츠가 visible", () => {
+    it("sets content visible when open={true}", () => {
       const { container } = render(() => <Collapse open={true}>Content</Collapse>);
       const contentDiv = container.querySelector("[data-collapse]")
         ?.firstElementChild as HTMLElement;
       expect(contentDiv.style.visibility).not.toBe("hidden");
     });
 
-    it("open이 undefined일 때 false로 처리 (visibility:hidden)", () => {
+    it("treats undefined open as false (visibility:hidden)", () => {
       const { container } = render(() => <Collapse>Content</Collapse>);
       const contentDiv = container.querySelector("[data-collapse]")
         ?.firstElementChild as HTMLElement;
       expect(contentDiv.style.visibility).toBe("hidden");
     });
 
-    it("콘텐츠가 비어있어도 정상 렌더링", () => {
+    it("renders correctly with no children", () => {
       const { container } = render(() => <Collapse open={false} />);
       expect(container.firstChild).toBeTruthy();
     });
 
-    it("추가 class가 병합됨", () => {
+    it("merges custom classes", () => {
       const { container } = render(() => (
         // eslint-disable-next-line tailwindcss/no-custom-classname
         <Collapse open={true} class="my-test-class">
@@ -51,14 +51,14 @@ describe("Collapse", () => {
         </Collapse>
       ));
       expect(container.querySelector(".my-test-class")).toBeTruthy();
-      // overflow: hidden은 inline style로 적용됨
+      // overflow: hidden is applied as inline style
       const rootDiv = container.querySelector("[data-collapse]") as HTMLElement;
       expect(rootDiv.style.overflow).toBe("hidden");
     });
   });
 
-  describe("margin-top 계산", () => {
-    it("open={false}일 때 margin-top이 콘텐츠 높이의 음수값", async () => {
+  describe("margin-top calculation", () => {
+    it("sets margin-top to negative content height when open={false}", async () => {
       const { container } = render(() => (
         <Collapse open={false}>
           <div style={{ height: "100px" }}>Content</div>
@@ -68,16 +68,16 @@ describe("Collapse", () => {
         ?.firstElementChild as HTMLElement;
       expect(contentDiv).toBeTruthy();
 
-      // ResizeObserver가 측정을 완료할 때까지 대기
+      // wait for ResizeObserver to finish measuring
       await waitFor(() => {
         const marginTop = contentDiv.style.marginTop;
-        // margin-top이 음수값인지 확인 (실제 높이 측정됨)
+        // verify margin-top is negative (actual height measured)
         expect(marginTop).toMatch(/^-\d+px$/);
         expect(parseInt(marginTop)).toBeLessThan(0);
       });
     });
 
-    it("open={true}일 때 margin-top이 없음", () => {
+    it("clears margin-top when open={true}", () => {
       const { container } = render(() => (
         <Collapse open={true}>
           <div style={{ height: "100px" }}>Content</div>
@@ -89,14 +89,14 @@ describe("Collapse", () => {
     });
   });
 
-  describe("초기 렌더링 및 transition", () => {
-    it("마운트 후 transition 클래스가 적용됨", () => {
+  describe("initial render and transition", () => {
+    it("applies transition class after mount", () => {
       const { container } = render(() => <Collapse open={false}>Content</Collapse>);
       const contentDiv = container.querySelector("[data-collapse]")?.firstElementChild;
       expect(contentDiv?.classList.contains("transition-[margin-top]")).toBeTruthy();
     });
 
-    it("open 상태 변경 시 transition class 유지되며 margin-top 변경", async () => {
+    it("retains transition class and updates margin-top on open state change", async () => {
       const [open, setOpen] = createSignal(false);
       const { container } = render(() => (
         <Collapse open={open()}>
@@ -107,17 +107,17 @@ describe("Collapse", () => {
       const contentDiv = container.querySelector("[data-collapse]")
         ?.firstElementChild as HTMLElement;
 
-      // 초기 상태: 닫힘, margin-top 음수
+      // initial state: closed, negative margin-top
       await waitFor(() => {
         expect(parseInt(contentDiv.style.marginTop)).toBeLessThan(0);
       });
       expect(contentDiv.classList.contains("transition-[margin-top]")).toBeTruthy();
       expect(contentDiv.classList.contains("duration-200")).toBeTruthy();
 
-      // 열림 상태로 변경
+      // change to open state
       setOpen(true);
 
-      // transition class 유지, margin-top 변경
+      // transition class retained, margin-top updated
       await waitFor(() => {
         const marginTop = contentDiv.style.marginTop;
         expect(!marginTop || marginTop === "").toBeTruthy();
@@ -126,8 +126,8 @@ describe("Collapse", () => {
     });
   });
 
-  describe("동적 상태 변경", () => {
-    it("open 상태 변경 시 visibility 업데이트", () => {
+  describe("dynamic state changes", () => {
+    it("updates visibility when open state changes", () => {
       const [open, setOpen] = createSignal(false);
       const { container } = render(() => <Collapse open={open()}>Content</Collapse>);
 
@@ -139,7 +139,7 @@ describe("Collapse", () => {
       expect(contentDiv.style.visibility).not.toBe("hidden");
     });
 
-    it("콘텐츠 높이 변경 시 margin-top 재계산", async () => {
+    it("recalculates margin-top when content height changes", async () => {
       const [showExtra, setShowExtra] = createSignal(false);
       const { container } = render(() => (
         <Collapse open={false}>
@@ -151,7 +151,7 @@ describe("Collapse", () => {
       const contentDiv = container.querySelector("[data-collapse]")
         ?.firstElementChild as HTMLElement;
 
-      // 초기 높이 측정 대기
+      // wait for initial height measurement
       await waitFor(() => {
         const initialMarginTop = parseInt(contentDiv.style.marginTop);
         expect(initialMarginTop).toBeLessThan(0);
@@ -159,13 +159,13 @@ describe("Collapse", () => {
 
       const initialMarginTop = parseInt(contentDiv.style.marginTop);
 
-      // 콘텐츠 추가로 높이 변경
+      // add content to change height
       setShowExtra(true);
 
-      // ResizeObserver가 새 높이를 감지하고 margin-top 재계산 대기
+      // wait for ResizeObserver to detect new height and recalculate margin-top
       await waitFor(() => {
         const newMarginTop = parseInt(contentDiv.style.marginTop);
-        // 새 margin-top이 초기값보다 더 작아야 함 (더 큰 음수)
+        // new margin-top should be more negative than initial (larger content)
         expect(newMarginTop).toBeLessThan(initialMarginTop);
       });
     });

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

@@ -4,9 +4,9 @@ import { Dialog } from "../../../src/components/disclosure/Dialog";
 import { I18nProvider } from "../../../src/providers/i18n/I18nContext";
 import { ConfigProvider } from "../../../src/providers/ConfigContext";
 
-describe("Dialog 컴포넌트", () => {
+describe("Dialog", () => {
   describe("basic rendering", () => {
-    it("open=true일 때 다이얼로그가 렌더링된다", async () => {
+    it("renders when open=true", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -21,7 +21,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("open=false일 때 다이얼로그가 DOM에 없다", () => {
+    it("is absent from DOM when open=false", () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={false}>
@@ -34,7 +34,7 @@ describe("Dialog 컴포넌트", () => {
       expect(content).toBeNull();
     });
 
-    it("data-modal 속성이 설정된다", async () => {
+    it("sets data-modal attribute", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -49,7 +49,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("Dialog.Header 슬롯이 헤더에 렌더링된다", async () => {
+    it("renders Dialog.Header slot in header", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -66,8 +66,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("헤더 옵션", () => {
-    it("Dialog.Header 미제공 시 헤더가 렌더링되지 않는다", async () => {
+  describe("header options", () => {
+    it("does not render header when Dialog.Header is absent", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -84,7 +84,7 @@ describe("Dialog 컴포넌트", () => {
       expect(header).toBeNull();
     });
 
-    it("Dialog.Action 슬롯이 닫기 버튼 옆에 렌더링된다", async () => {
+    it("renders Dialog.Action slot beside the close button", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -102,7 +102,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("closable={false}일 때 닫기 버튼이 없다", async () => {
+    it("hides close button when closable={false}", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} closable={false}>
@@ -119,8 +119,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("닫힘 동작", () => {
-    it("닫기 버튼 클릭 시 onOpenChange(false)가 호출된다", async () => {
+  describe("close behavior", () => {
+    it("calls onOpenChange(false) when close button is clicked", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -137,7 +137,7 @@ describe("Dialog 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("closeOnBackdrop=true일 때 백드롭 클릭으로 닫힌다", async () => {
+    it("closes on backdrop click when closeOnBackdrop=true", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -154,7 +154,7 @@ describe("Dialog 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("closeOnBackdrop 미설정 시 백드롭 클릭으로 닫히지 않는다", async () => {
+    it("does not close on backdrop click when closeOnBackdrop is not set", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -171,7 +171,7 @@ describe("Dialog 컴포넌트", () => {
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
 
-    it("기본적으로 Escape 키로 닫힌다", async () => {
+    it("closes on Escape key by default", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -188,7 +188,7 @@ describe("Dialog 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("closeOnEscape=true일 때 Escape로 닫힌다", async () => {
+    it("closes on Escape when closeOnEscape=true", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -205,7 +205,7 @@ describe("Dialog 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("closeOnEscape=false일 때 Escape로 닫히지 않는다", async () => {
+    it("does not close on Escape when closeOnEscape=false", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -222,7 +222,7 @@ describe("Dialog 컴포넌트", () => {
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
 
-    it("canDeactivate가 false를 반환하면 닫히지 않는다", async () => {
+    it("does not close when canDeactivate returns false", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -241,7 +241,7 @@ describe("Dialog 컴포넌트", () => {
   });
 
   describe("accessibility", () => {
-    it("role=dialog와 aria-modal 속성이 설정된다", async () => {
+    it("sets role=dialog and aria-modal attributes", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -258,7 +258,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("aria-labelledby가 Dialog.Header 요소를 참조한다", async () => {
+    it("aria-labelledby references the Dialog.Header element", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -277,7 +277,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("Dialog.Header 미제공 시 aria-labelledby가 없다", async () => {
+    it("omits aria-labelledby when Dialog.Header is absent", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -293,7 +293,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("float 모드에서는 aria-modal이 설정되지 않는다", async () => {
+    it("does not set aria-modal in float mode", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} float>
@@ -311,8 +311,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("float 모드", () => {
-    it("float=true일 때 백드롭이 없다", async () => {
+  describe("float mode", () => {
+    it("has no backdrop when float=true", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} float>
@@ -329,8 +329,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("fill 모드", () => {
-    it("fill=true일 때 다이얼로그에 fill 스타일이 적용된다", async () => {
+  describe("fill mode", () => {
+    it("applies fill style to dialog when fill=true", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} fill>
@@ -348,8 +348,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("크기 제어", () => {
-    it("width, height가 적용된다", async () => {
+  describe("size control", () => {
+    it("applies width and height", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} width={400} height={300}>
@@ -366,7 +366,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("minWidth, minHeight가 적용된다", async () => {
+    it("applies minWidth and minHeight", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} minWidth={300} minHeight={200}>
@@ -384,8 +384,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("리사이즈", () => {
-    it("resizable=true일 때 리사이즈 바가 렌더링된다", async () => {
+  describe("resize", () => {
+    it("renders resize bars when resizable=true", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true} resizable>
@@ -400,7 +400,7 @@ describe("Dialog 컴포넌트", () => {
       });
     });
 
-    it("resizable=false(기본)일 때 리사이즈 바가 없다", async () => {
+    it("has no resize bars when resizable=false (default)", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -417,8 +417,8 @@ describe("Dialog 컴포넌트", () => {
     });
   });
 
-  describe("애니메이션", () => {
-    it("열림 시 transition 클래스가 적용된다", async () => {
+  describe("animation", () => {
+    it("applies transition classes on open", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>

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

@@ -4,7 +4,7 @@ import { DialogProvider } from "../../../src/components/disclosure/DialogProvide
 import { useDialog } from "../../../src/components/disclosure/DialogContext";
 import { useDialogInstance } from "../../../src/components/disclosure/DialogInstanceContext";
 
-// 테스트용 다이얼로그 콘텐츠 컴포넌트
+// dialog content component for testing
 function TestContent() {
   const dialog = useDialogInstance<string>();
   return (
@@ -20,7 +20,7 @@ function TestContent() {
   );
 }
 
-// useDialog를 호출하는 테스트용 컴포넌트
+// test component that calls useDialog
 function TestApp() {
   const dialog = useDialog();
 
@@ -36,7 +36,7 @@ function TestApp() {
   );
 }
 
-// header 없이 열리는 테스트용 컴포넌트
+// test component that opens without a header
 function TestAppNoHeader() {
   const dialog = useDialog();
 
@@ -53,7 +53,7 @@ function TestAppNoHeader() {
 }
 
 describe("DialogProvider", () => {
-  it("show()로 다이얼로그가 표시된다", async () => {
+  it("displays dialog via show()", async () => {
     render(() => (
       <DialogProvider>
         <TestApp />
@@ -67,7 +67,7 @@ describe("DialogProvider", () => {
     });
   });
 
-  it("useDialogInstance로 close를 호출하면 다이얼로그가 닫힌다", async () => {
+  it("closes dialog when close is called via useDialogInstance", async () => {
     render(() => (
       <DialogProvider>
         <TestApp />
@@ -82,13 +82,13 @@ describe("DialogProvider", () => {
 
     fireEvent.click(document.querySelector('[data-testid="close-btn"]')!);
 
-    // 닫힘 애니메이션 fallback timer(200ms) 후 다이얼로그 콘텐츠가 제거됨
+    // dialog content is removed after close animation fallback timer (200ms)
     await waitFor(() => {
       expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
     });
   });
 
-  it("close() 호출 시 다이얼로그가 닫힌다", async () => {
+  it("closes dialog when close() is called", async () => {
     render(() => (
       <DialogProvider>
         <TestApp />
@@ -108,7 +108,7 @@ describe("DialogProvider", () => {
     });
   });
 
-  it("다이얼로그 header가 표시된다", async () => {
+  it("displays dialog header", async () => {
     render(() => (
       <DialogProvider>
         <TestApp />
@@ -124,7 +124,7 @@ describe("DialogProvider", () => {
     });
   });
 
-  it("header 미제공 시 헤더가 렌더링되지 않는다", async () => {
+  it("does not render header when header is not provided", async () => {
     render(() => (
       <DialogProvider>
         <TestAppNoHeader />