@simplysm/solid 13.0.70 → 13.0.71

package/tests/components/form-control/combobox/Combobox.spec.tsx

@@ -2,7 +2,7 @@ import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { Combobox } from "../../../../src/components/form-control/combobox/Combobox";
 
-describe("Combobox 컴포넌트", () => {
+describe("Combobox component", () => {
   const mockLoadItems = vi.fn(() => Promise.resolve([]));
 
   beforeEach(() => {
@@ -29,7 +29,7 @@ describe("Combobox 컴포넌트", () => {
       expect(input?.getAttribute("placeholder")).toBe("검색하세요");
     });
 
-    it("input의 autocomplete 기본값은 one-time-code이다", () => {
+    it("defaults input autocomplete to one-time-code", () => {
       const { container } = render(() => (
         <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
       ));
@@ -37,7 +37,7 @@ describe("Combobox 컴포넌트", () => {
       expect(input.autocomplete).toBe("one-time-code");
     });
 
-    it("disabled일 때 aria-disabled가 설정된다", () => {
+    it("sets aria-disabled when disabled", () => {
       const { getByRole } = render(() => (
         <Combobox loadItems={mockLoadItems} disabled renderValue={(v) => <>{v}</>} />
       ));
@@ -46,7 +46,7 @@ describe("Combobox 컴포넌트", () => {
   });
 
   describe("dropdown opening/closing", () => {
-    it("입력 시 드롭다운이 열린다", async () => {
+    it("opens dropdown on input", async () => {
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
       const { container } = render(() => (
         <Combobox loadItems={loadItems} renderValue={(v: { name: string }) => <>{v.name}</>} />
@@ -60,7 +60,7 @@ describe("Combobox 컴포넌트", () => {
       });
     });
 
-    it("아이템 선택 시 드롭다운이 닫힌다", async () => {
+    it("closes dropdown when item is selected", async () => {
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
       const { container, getByRole } = render(() => (
         <Combobox loadItems={loadItems} renderValue={(v: { name: string }) => <>{v.name}</>} />
@@ -81,7 +81,7 @@ describe("Combobox 컴포넌트", () => {
       });
     });
 
-    it("Escape 키로 드롭다운이 닫힌다", async () => {
+    it("closes dropdown with Escape key", async () => {
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
       const { container, getByRole } = render(() => (
         <Combobox loadItems={loadItems} renderValue={(v: { name: string }) => <>{v.name}</>} />
@@ -102,8 +102,8 @@ describe("Combobox 컴포넌트", () => {
     });
   });
 
-  describe("값 선택", () => {
-    it("아이템 선택 시 onValueChange가 호출된다", async () => {
+  describe("value selection", () => {
+    it("calls onValueChange when item is selected", async () => {
       const handleChange = vi.fn();
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
 
@@ -129,8 +129,8 @@ describe("Combobox 컴포넌트", () => {
     });
   });
 
-  describe("디바운스", () => {
-    it("입력 후 디바운스 시간이 지나면 loadItems가 호출된다", async () => {
+  describe("debounce", () => {
+    it("calls loadItems after debounce delay", async () => {
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "결과" }]));
 
       const { container } = render(() => (
@@ -144,7 +144,7 @@ describe("Combobox 컴포넌트", () => {
       const input = container.querySelector("input")!;
       fireEvent.input(input, { target: { value: "검색어" } });
 
-      // 디바운스 후 loadItems가 호출됨
+      // loadItems is called after debounce
       await waitFor(
         () => {
           expect(loadItems).toHaveBeenCalledWith("검색어");
@@ -155,7 +155,7 @@ describe("Combobox 컴포넌트", () => {
   });
 
   describe("allowCustomValue", () => {
-    it("allowCustomValue가 true일 때 Enter로 커스텀 값 입력 가능", () => {
+    it("allows entering custom value with Enter when allowCustomValue is true", () => {
       const handleChange = vi.fn();
       const loadItems = vi.fn(() => Promise.resolve([]));
 
@@ -175,7 +175,7 @@ describe("Combobox 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith("새로운 값");
     });
 
-    it("parseCustomValue로 커스텀 값을 변환할 수 있다", () => {
+    it("transforms custom value using parseCustomValue", () => {
       const handleChange = vi.fn();
       const loadItems = vi.fn(() => Promise.resolve([]));
 
@@ -211,7 +211,7 @@ describe("Combobox 컴포넌트", () => {
       expect(hiddenInput.validationMessage).toBe("This field is required");
     });
 
-    it("required일 때 값이 있으면 유효하다", () => {
+    it("is valid when required and value exists", () => {
       const { container } = render(() => (
         <Combobox
           loadItems={mockLoadItems}
@@ -224,7 +224,7 @@ describe("Combobox 컴포넌트", () => {
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러를 반환하면 해당 메시지가 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <Combobox
           loadItems={mockLoadItems}
@@ -237,7 +237,7 @@ describe("Combobox 컴포넌트", () => {
       expect(hiddenInput.validationMessage).toBe("허용되지 않는 값입니다");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
         <Combobox
           loadItems={mockLoadItems}

package/tests/components/form-control/combobox/ComboboxItem.spec.tsx

@@ -16,8 +16,8 @@ const createMockContext = (
   ...overrides,
 });
 
-describe("ComboboxItem 컴포넌트", () => {
-  it("아이템이 렌더링된다", () => {
+describe("ComboboxItem component", () => {
+  it("renders the item", () => {
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext()}>
         <ComboboxItem value="apple">사과</ComboboxItem>
@@ -28,7 +28,7 @@ describe("ComboboxItem 컴포넌트", () => {
     expect(getByRole("option").textContent).toContain("사과");
   });
 
-  it("클릭 시 selectValue가 호출된다", () => {
+  it("calls selectValue on click", () => {
     const selectValue = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ selectValue })}>
@@ -40,7 +40,7 @@ describe("ComboboxItem 컴포넌트", () => {
     expect(selectValue).toHaveBeenCalledWith("apple");
   });
 
-  it("선택된 상태일 때 aria-selected가 true", () => {
+  it("sets aria-selected=true when selected", () => {
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ isSelected: () => true })}>
         <ComboboxItem value="apple">사과</ComboboxItem>
@@ -50,7 +50,7 @@ describe("ComboboxItem 컴포넌트", () => {
     expect(getByRole("option").getAttribute("aria-selected")).toBe("true");
   });
 
-  it("disabled일 때 클릭이 동작하지 않는다", () => {
+  it("does not respond to click when disabled", () => {
     const selectValue = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ selectValue })}>
@@ -64,7 +64,7 @@ describe("ComboboxItem 컴포넌트", () => {
     expect(selectValue).not.toHaveBeenCalled();
   });
 
-  it("클릭 시 closeDropdown이 호출된다", () => {
+  it("calls closeDropdown on click", () => {
     const closeDropdown = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ closeDropdown })}>
@@ -76,7 +76,7 @@ describe("ComboboxItem 컴포넌트", () => {
     expect(closeDropdown).toHaveBeenCalled();
   });
 
-  it("data-combobox-item 속성이 설정된다", () => {
+  it("sets data-combobox-item attribute", () => {
     render(() => (
       <ComboboxContext.Provider value={createMockContext()}>
         <ComboboxItem value="apple">사과</ComboboxItem>

package/tests/components/form-control/date-range-picker/DateRangePicker.spec.tsx

@@ -5,7 +5,7 @@ import { DateRangePicker } from "../../../../src/components/form-control/date-ra
 import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
-describe("DateRangePicker 컴포넌트", () => {
+describe("DateRangePicker component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
@@ -15,7 +15,7 @@ describe("DateRangePicker 컴포넌트", () => {
   });
 
   describe("basic rendering", () => {
-    it("Select와 DatePicker가 렌더링된다", () => {
+    it("renders Select and DatePicker", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <DateRangePicker />
@@ -32,7 +32,7 @@ describe("DateRangePicker 컴포넌트", () => {
       expect(inputs?.length).toBeGreaterThan(0);
     });
 
-    it("기본 periodType은 'range'이다", () => {
+    it("defaults periodType to 'range'", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <DateRangePicker />
@@ -40,14 +40,14 @@ describe("DateRangePicker 컴포넌트", () => {
       ));
       const wrapper = container.querySelector("[data-date-range-picker]");
 
-      // 범위 모드에서는 DatePicker 2개가 렌더링됨
+      // range mode renders 2 DatePickers
       const inputs = wrapper?.querySelectorAll("input[type='date']");
       expect(inputs?.length).toBe(2);
     });
   });
 
-  describe("'range' 모드 렌더링", () => {
-    it("DatePicker 2개와 '~' 구분자가 렌더링된다", () => {
+  describe("'range' mode rendering", () => {
+    it("renders 2 DatePickers and a '~' separator", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <DateRangePicker periodType="range" />
@@ -58,13 +58,13 @@ describe("DateRangePicker 컴포넌트", () => {
       const inputs = wrapper?.querySelectorAll("input[type='date']");
       expect(inputs?.length).toBe(2);
 
-      // "~" 구분자 확인
+      // verify "~" separator
       expect(wrapper?.textContent).toContain("~");
     });
   });
 
-  describe("'day' 모드 렌더링", () => {
-    it("DatePicker 1개(type=date)가 렌더링되고 '~'가 없다", () => {
+  describe("'day' mode rendering", () => {
+    it("renders 1 DatePicker (type=date) with no '~'", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <DateRangePicker periodType="day" />
@@ -75,14 +75,14 @@ describe("DateRangePicker 컴포넌트", () => {
       const dateInputs = wrapper?.querySelectorAll("input[type='date']");
       expect(dateInputs?.length).toBe(1);
 
-      // "~" 구분자가 없어야 함
+      // "~" separator must not be present
       const textNodes = wrapper?.textContent ?? "";
       expect(textNodes).not.toContain("~");
     });
   });
 
-  describe("'month' 모드 렌더링", () => {
-    it("DatePicker 1개(type=month)가 렌더링되고 '~'가 없다", () => {
+  describe("'month' mode rendering", () => {
+    it("renders 1 DatePicker (type=month) with no '~'", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <DateRangePicker periodType="month" />
@@ -93,17 +93,17 @@ describe("DateRangePicker 컴포넌트", () => {
       const monthInputs = wrapper?.querySelectorAll("input[type='month']");
       expect(monthInputs?.length).toBe(1);
 
-      // date 타입 input이 없어야 함
+      // no date-type inputs
       const dateInputs = wrapper?.querySelectorAll("input[type='date']");
       expect(dateInputs?.length).toBe(0);
 
-      // "~" 구분자가 없어야 함
+      // "~" separator must not be present
       expect(wrapper?.textContent).not.toContain("~");
     });
   });
 
-  describe("from 변경 - 'day' 모드", () => {
-    it("from 변경 시 onToChange도 같은 값으로 호출된다", () => {
+  describe("from change - 'day' mode", () => {
+    it("calls onToChange with the same value when from changes", () => {
       const onFromChange = vi.fn();
       const onToChange = vi.fn();
 
@@ -122,22 +122,22 @@ describe("DateRangePicker 컴포넌트", () => {
       const wrapper = container.querySelector("[data-date-range-picker]");
       const input = wrapper?.querySelector("input[type='date']") as HTMLInputElement;
 
-      // input에 새 값을 입력하여 from 변경 트리거
+      // trigger from change by inputting a new value
       input.value = "2025-06-15";
       input.dispatchEvent(new Event("change", { bubbles: true }));
 
-      // "day" 모드에서는 from 변경 시 to도 같은 값으로 설정됨
+      // in "day" mode, to is set to the same value as from
       const expectedDate = new DateOnly(2025, 6, 15);
       expect(onToChange).toHaveBeenCalledWith(expectedDate);
     });
   });
 
-  describe("from 변경 - 'range' 모드", () => {
-    it("from > to이면 onToChange(from)이 호출된다", () => {
+  describe("from change - 'range' mode", () => {
+    it("calls onToChange(from) when from > to", () => {
       const onFromChange = vi.fn();
       const onToChange = vi.fn();
       const originalTo = new DateOnly(2025, 3, 1);
-      const newFrom = new DateOnly(2025, 6, 15); // to보다 큰 값
+      const newFrom = new DateOnly(2025, 6, 15); // greater than to
 
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -155,18 +155,18 @@ describe("DateRangePicker 컴포넌트", () => {
       const inputs = wrapper?.querySelectorAll("input[type='date']");
       const fromInput = inputs?.[0] as HTMLInputElement;
 
-      // from input에 to보다 큰 날짜 입력
+      // enter a date greater than to into from input
       expect(fromInput).toBeDefined();
       fromInput.value = "2025-06-15";
       fromInput.dispatchEvent(new Event("change", { bubbles: true }));
 
-      // from > to이므로 to도 from 값으로 변경되어야 함
+      // since from > to, to must be updated to match from
       expect(onToChange).toHaveBeenCalledWith(newFrom);
     });
   });
 
   describe("disabled state", () => {
-    it("Select에 aria-disabled가 적용된다", () => {
+    it("applies aria-disabled to Select", () => {
       const { container } = render(() => <DateRangePicker disabled />);
       const wrapper = container.querySelector("[data-date-range-picker]");