@simplysm/solid 13.0.70 → 13.0.71

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 />

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

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Dropdown } from "../../../src/components/disclosure/Dropdown";
 
-describe("Dropdown 컴포넌트", () => {
+describe("Dropdown", () => {
   beforeEach(() => {
     vi.stubGlobal("innerWidth", 1024);
     vi.stubGlobal("innerHeight", 768);
@@ -15,8 +15,8 @@ describe("Dropdown 컴포넌트", () => {
     vi.unstubAllGlobals();
   });
 
-  describe("Trigger/Content 구조", () => {
-    it("Trigger 클릭 시 Content가 렌더링된다", async () => {
+  describe("Trigger/Content structure", () => {
+    it("renders Content on Trigger click", async () => {
       render(() => (
         <Dropdown>
           <Dropdown.Trigger>
@@ -38,7 +38,7 @@ describe("Dropdown 컴포넌트", () => {
       });
     });
 
-    it("Trigger 재클릭 시 닫힌다", () => {
+    it("closes on second Trigger click", () => {
       const [open, setOpen] = createSignal(false);
       const handleOpenChange = vi.fn((v: boolean) => setOpen(v));
 
@@ -61,7 +61,7 @@ describe("Dropdown 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("disabled 시 Trigger 클릭이 무시된다", () => {
+    it("ignores Trigger click when disabled", () => {
       const [open, setOpen] = createSignal(false);
       const handleOpenChange = vi.fn((v: boolean) => setOpen(v));
 
@@ -81,8 +81,8 @@ describe("Dropdown 컴포넌트", () => {
     });
   });
 
-  describe("Controlled 모드", () => {
-    it("open prop으로 제어된다", async () => {
+  describe("controlled mode", () => {
+    it("is controlled by open prop", async () => {
       const [open, setOpen] = createSignal(false);
 
       render(() => (
@@ -106,8 +106,8 @@ describe("Dropdown 컴포넌트", () => {
     });
   });
 
-  describe("Context menu (Trigger 없음)", () => {
-    it("position prop으로 위치가 설정된다", async () => {
+  describe("Context menu (no Trigger)", () => {
+    it("sets position via position prop", async () => {
       render(() => (
         <Dropdown position={{ x: 300, y: 200 }} open={true}>
           <Dropdown.Content>
@@ -124,8 +124,8 @@ describe("Dropdown 컴포넌트", () => {
     });
   });
 
-  describe("닫힘 감지", () => {
-    it("외부 pointerdown 시 닫힌다", async () => {
+  describe("close detection", () => {
+    it("closes on outside pointerdown", async () => {
       const handleOpenChange = vi.fn();
 
       render(() => (
@@ -150,7 +150,7 @@ describe("Dropdown 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("Escape 키로 닫힌다", async () => {
+    it("closes on Escape key", async () => {
       const handleOpenChange = vi.fn();
 
       render(() => (
@@ -174,7 +174,7 @@ describe("Dropdown 컴포넌트", () => {
   });
 
   describe("maxHeight", () => {
-    it("기본값 300px", async () => {
+    it("defaults to 300px", async () => {
       render(() => (
         <Dropdown open={true}>
           <Dropdown.Trigger>
@@ -192,7 +192,7 @@ describe("Dropdown 컴포넌트", () => {
       });
     });
 
-    it("커스텀 값 적용", async () => {
+    it("applies custom value", async () => {
       render(() => (
         <Dropdown open={true} maxHeight={500}>
           <Dropdown.Trigger>
@@ -210,4 +210,124 @@ describe("Dropdown 컴포넌트", () => {
       });
     });
   });
+
+  describe("keyboardNav tabbable navigation", () => {
+    it("ArrowDown from trigger focuses first tabbable in popup (input, not list item)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const triggerWrapper = document.querySelector("[data-dropdown-trigger]") as HTMLElement;
+      triggerWrapper.focus();
+
+      fireEvent.keyDown(triggerWrapper, { key: "ArrowDown" });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      expect(document.activeElement).toBe(search);
+    });
+
+    it("ArrowDown from input focuses next tabbable (button)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      search.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowDown" });
+
+      const actionBtn = document.querySelector('[data-testid="action-btn"]') as HTMLElement;
+      expect(document.activeElement).toBe(actionBtn);
+    });
+
+    it("ArrowUp from input focuses trigger (no prev tabbable, dir=down)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      search.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowUp" });
+
+      const triggerWrapper = document.querySelector("[data-dropdown-trigger]") as HTMLElement;
+      expect(document.activeElement).toBe(triggerWrapper);
+    });
+
+    it("ArrowUp from action button focuses prev tabbable (input)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const actionBtn = document.querySelector('[data-testid="action-btn"]') as HTMLElement;
+      actionBtn.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowUp" });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      expect(document.activeElement).toBe(search);
+    });
+  });
 });