@simplysm/solid 13.0.70 → 13.0.71

package/tests/components/data/Pagination.spec.tsx

@@ -3,21 +3,21 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Pagination } from "../../../src/components/data/Pagination";
 
-describe("Pagination 컴포넌트", () => {
+describe("Pagination component", () => {
   describe("basic rendering", () => {
-    it("nav 요소로 렌더링된다", () => {
+    it("renders as nav element", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
 
       expect(container.querySelector("nav")).toBeTruthy();
     });
 
-    it("data-pagination 속성이 적용된다", () => {
+    it("applies data-pagination attribute", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
 
       expect(container.querySelector("[data-pagination]")).toBeTruthy();
     });
 
-    it("4개의 네비게이션 버튼과 페이지 버튼이 렌더링된다", () => {
+    it("renders 4 navigation buttons and page buttons", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
 
       const buttons = container.querySelectorAll("[data-button]");
@@ -25,7 +25,7 @@ describe("Pagination 컴포넌트", () => {
       expect(buttons.length).toBe(9);
     });
 
-    it("페이지 번호가 1-based로 표시된다", () => {
+    it("displays page numbers as 1-based", () => {
       const { getByText } = render(() => <Pagination page={1} totalPageCount={3} />);
 
       expect(getByText("1")).toBeTruthy();
@@ -33,7 +33,7 @@ describe("Pagination 컴포넌트", () => {
       expect(getByText("3")).toBeTruthy();
     });
 
-    it("custom class가 nav 요소에 전달된다", () => {
+    it("passes custom class to nav element", () => {
       const { container } = render(() => (
         // eslint-disable-next-line tailwindcss/no-custom-classname
         <Pagination page={1} totalPageCount={5} class="my-custom" />
@@ -44,8 +44,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("displayPageCount 기본값", () => {
-    it("displayPageCount 기본값은 10이다", () => {
+  describe("displayPageCount default", () => {
+    it("default displayPageCount is 10", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={25} />);
 
       const buttons = container.querySelectorAll("[data-button]");
@@ -53,7 +53,7 @@ describe("Pagination 컴포넌트", () => {
       expect(buttons.length).toBe(14);
     });
 
-    it("displayPageCount=5로 설정하면 5개의 페이지 버튼이 표시된다", () => {
+    it("displays 5 page buttons when displayPageCount=5", () => {
       const { container } = render(() => (
         <Pagination page={1} totalPageCount={25} displayPageCount={5} />
       ));
@@ -64,12 +64,12 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("현재 페이지 표시", () => {
-    it("현재 페이지 버튼은 다른 variant를 가진다", () => {
+  describe("current page display", () => {
+    it("current page button has a different variant", () => {
       const { container } = render(() => <Pagination page={3} totalPageCount={5} />);
 
       const buttons = container.querySelectorAll("[data-button]");
-      // buttons[0]=<<, [1]=<, [2]=page1, [3]=page2, [4]=page3(현재), [5]=page4, [6]=page5, [7]=>, [8]=>>
+      // buttons[0]=<<, [1]=<, [2]=page1, [3]=page2, [4]=page3(current), [5]=page4, [6]=page5, [7]=>, [8]=>>
       const currentButton = buttons[4]; // page 3 (1-based page=3)
       const otherButton = buttons[2]; // page 1
 
@@ -77,8 +77,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("페이지 그룹 계산", () => {
-    it("page=1, displayPageCount=5일 때 페이지 1~5가 표시된다", () => {
+  describe("page group calculation", () => {
+    it("displays pages 1-5 when page=1, displayPageCount=5", () => {
       const { getByText, queryByText } = render(() => (
         <Pagination page={1} totalPageCount={20} displayPageCount={5} />
       ));
@@ -91,7 +91,7 @@ describe("Pagination 컴포넌트", () => {
       expect(queryByText("6")).toBeFalsy();
     });
 
-    it("page=6, displayPageCount=5일 때 페이지 6~10이 표시된다", () => {
+    it("displays pages 6-10 when page=6, displayPageCount=5", () => {
       const { getByText, queryByText } = render(() => (
         <Pagination page={6} totalPageCount={20} displayPageCount={5} />
       ));
@@ -105,7 +105,7 @@ describe("Pagination 컴포넌트", () => {
       expect(queryByText("11")).toBeFalsy();
     });
 
-    it("page=13, displayPageCount=10일 때 페이지 11~20이 표시된다", () => {
+    it("displays pages 11-20 when page=13, displayPageCount=10", () => {
       const { getByText, queryByText } = render(() => (
         <Pagination page={13} totalPageCount={25} displayPageCount={10} />
       ));
@@ -116,7 +116,7 @@ describe("Pagination 컴포넌트", () => {
       expect(queryByText("21")).toBeFalsy();
     });
 
-    it("마지막 그룹에서 totalPageCount보다 적은 페이지만 표시된다", () => {
+    it("displays only remaining pages in the last group below totalPageCount", () => {
       const { container, getByText, queryByText } = render(() => (
         <Pagination page={8} totalPageCount={8} displayPageCount={5} />
       ));
@@ -133,8 +133,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("네비게이션 버튼 비활성화", () => {
-    it("첫 번째 그룹일 때 first/prev 버튼이 비활성화된다", () => {
+  describe("navigation button disabled state", () => {
+    it("disables first/prev buttons in the first group", () => {
       const { container } = render(() => (
         <Pagination page={1} totalPageCount={20} displayPageCount={5} />
       ));
@@ -147,7 +147,7 @@ describe("Pagination 컴포넌트", () => {
       expect(prevBtn.hasAttribute("disabled")).toBe(true);
     });
 
-    it("마지막 그룹일 때 next/last 버튼이 비활성화된다", () => {
+    it("disables next/last buttons in the last group", () => {
       const { container } = render(() => (
         <Pagination page={19} totalPageCount={20} displayPageCount={5} />
       ));
@@ -160,7 +160,7 @@ describe("Pagination 컴포넌트", () => {
       expect(lastBtn.hasAttribute("disabled")).toBe(true);
     });
 
-    it("중간 그룹일 때 모든 네비게이션 버튼이 활성화된다", () => {
+    it("all navigation buttons are enabled in a middle group", () => {
       const { container } = render(() => (
         <Pagination page={6} totalPageCount={20} displayPageCount={5} />
       ));
@@ -178,8 +178,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("페이지 클릭", () => {
-    it("페이지 버튼 클릭 시 onPageChange가 호출된다", () => {
+  describe("page click", () => {
+    it("calls onPageChange when a page button is clicked", () => {
       const onPageChange = vi.fn();
       const { getByText } = render(() => (
         <Pagination page={1} totalPageCount={5} onPageChange={onPageChange} />
@@ -190,7 +190,7 @@ describe("Pagination 컴포넌트", () => {
       expect(onPageChange).toHaveBeenCalledWith(3); // 1-based
     });
 
-    it("현재 페이지 클릭 시에도 onPageChange가 호출된다", () => {
+    it("calls onPageChange even when clicking the current page", () => {
       const onPageChange = vi.fn();
       const { getByText } = render(() => (
         <Pagination page={1} totalPageCount={5} onPageChange={onPageChange} />
@@ -202,8 +202,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("first 버튼 (<<)", () => {
-    it("first 버튼 클릭 시 page 1으로 이동한다", () => {
+  describe("first button (<<)", () => {
+    it("navigates to page 1 when first button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination
@@ -221,8 +221,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("last 버튼 (>>)", () => {
-    it("last 버튼 클릭 시 마지막 페이지로 이동한다", () => {
+  describe("last button (>>)", () => {
+    it("navigates to last page when last button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination page={1} totalPageCount={20} displayPageCount={5} onPageChange={onPageChange} />
@@ -235,8 +235,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("prev 그룹 버튼 (<)", () => {
-    it("prev 버튼 클릭 시 이전 그룹의 마지막 페이지로 이동한다", () => {
+  describe("prev group button (<)", () => {
+    it("navigates to last page of previous group when prev button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination page={8} totalPageCount={20} displayPageCount={5} onPageChange={onPageChange} />
@@ -251,8 +251,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("next 그룹 버튼 (>)", () => {
-    it("next 버튼 클릭 시 다음 그룹의 첫 페이지로 이동한다", () => {
+  describe("next group button (>)", () => {
+    it("navigates to first page of next group when next button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination page={4} totalPageCount={20} displayPageCount={5} onPageChange={onPageChange} />
@@ -268,7 +268,7 @@ describe("Pagination 컴포넌트", () => {
   });
 
   describe("size prop", () => {
-    it("size prop이 전달되면 스타일이 달라진다", () => {
+    it("applies different styles when size prop is provided", () => {
       const { container: defaultContainer } = render(() => (
         <Pagination page={1} totalPageCount={5} />
       ));
@@ -283,34 +283,34 @@ describe("Pagination 컴포넌트", () => {
       const smNav = smContainer.querySelector("nav");
       const lgNav = lgContainer.querySelector("nav");
 
-      // sm과 lg는 default와 다른 클래스를 가져야 한다
+      // sm and lg should have different classes from default
       expect(smNav?.className).not.toBe(defaultNav?.className);
       expect(lgNav?.className).not.toBe(defaultNav?.className);
     });
   });
 
-  describe("반응형 동작", () => {
-    it("page가 시그널로 변경되면 UI가 업데이트된다", () => {
+  describe("reactive behavior", () => {
+    it("updates UI when page signal changes", () => {
       const [page, setPage] = createSignal(1);
 
       const { container, getByText } = render(() => (
         <Pagination page={page()} totalPageCount={20} displayPageCount={5} onPageChange={setPage} />
       ));
 
-      // 초기 상태: 페이지 1~5 표시
+      // initial state: pages 1-5 are displayed
       expect(getByText("1")).toBeTruthy();
 
-      // next 그룹으로 이동 (> 클릭 → page 6)
+      // navigate to next group (> click → page 6)
       const buttons = container.querySelectorAll("[data-button]");
-      fireEvent.click(buttons[buttons.length - 2]); // > 클릭 → page 6
+      fireEvent.click(buttons[buttons.length - 2]); // > click → page 6
 
-      // 페이지가 변경되면 6~10 그룹이 표시되어야 한다
+      // after page change, group 6-10 should be displayed
       expect(getByText("6")).toBeTruthy();
     });
   });
 
-  describe("엣지 케이스", () => {
-    it("totalPageCount=1일 때 네비게이션 버튼이 모두 비활성화된다", () => {
+  describe("edge cases", () => {
+    it("all navigation buttons are disabled when totalPageCount=1", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={1} />);
 
       const buttons = container.querySelectorAll("[data-button]");
@@ -325,7 +325,7 @@ describe("Pagination 컴포넌트", () => {
       expect(lastBtn.hasAttribute("disabled")).toBe(true);
     });
 
-    it("totalPageCount=0일 때 페이지 버튼이 표시되지 않는다", () => {
+    it("no page buttons displayed when totalPageCount=0", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={0} />);
 
       const buttons = container.querySelectorAll("[data-button]");

package/tests/components/data/Table.spec.tsx

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Table } from "../../../src/components/data/Table";
 
-describe("Table 컴포넌트", () => {
+describe("Table component", () => {
   describe("basic rendering", () => {
-    it("children이 Table 내부에 표시된다", () => {
+    it("renders children inside Table", () => {
       const { container } = render(() => (
         <Table>
           <tbody>
@@ -24,8 +24,8 @@ describe("Table 컴포넌트", () => {
     });
   });
 
-  describe("inset 속성", () => {
-    it("inset prop에 따라 스타일이 달라진다", () => {
+  describe("inset prop", () => {
+    it("applies different styles based on inset prop", () => {
       const { container: defaultContainer } = render(() => <Table>Content</Table>);
       const { container: insetContainer } = render(() => <Table inset>Content</Table>);
 

package/tests/components/data/kanban/Kanban.selection.spec.tsx

@@ -2,7 +2,7 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { Kanban } from "../../../../src/components/data/kanban/Kanban";
 
-describe("Kanban 선택 시스템", () => {
+describe("Kanban selection system", () => {
   function renderKanban(options?: {
     selectedValues?: unknown[];
     onSelectedValuesChange?: (v: unknown[]) => void;
@@ -36,8 +36,8 @@ describe("Kanban 선택 시스템", () => {
     ));
   }
 
-  describe("Shift+Click 선택", () => {
-    it("Shift+Click으로 카드가 선택된다", () => {
+  describe("Shift+Click selection", () => {
+    it("selects a card with Shift+Click", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [],
@@ -48,7 +48,7 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).toHaveBeenCalledWith([1]);
     });
 
-    it("이미 선택된 카드를 Shift+Click하면 선택 해제된다", () => {
+    it("deselects an already selected card with Shift+Click", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [1],
@@ -59,7 +59,7 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).toHaveBeenCalledWith([]);
     });
 
-    it("Shift 없는 클릭은 선택을 변경하지 않는다", () => {
+    it("click without Shift does not change selection", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [],
@@ -70,7 +70,7 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).not.toHaveBeenCalled();
     });
 
-    it("selectable=false인 카드는 Shift+Click해도 선택되지 않는다", () => {
+    it("does not select card with selectable=false on Shift+Click", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [],
@@ -84,8 +84,8 @@ describe("Kanban 선택 시스템", () => {
     });
   });
 
-  describe("선택 시각 피드백", () => {
-    it("선택된 카드에 ring + shadow 클래스가 적용된다", () => {
+  describe("selection visual feedback", () => {
+    it("applies ring + shadow classes to selected card", () => {
       const { getByText } = renderKanban({ selectedValues: [1] });
       const card1Content = getByText("Card 1").closest("[data-card]") as HTMLElement;
       expect(card1Content.classList.contains("ring-2")).toBe(true);
@@ -93,21 +93,21 @@ describe("Kanban 선택 시스템", () => {
       expect(card1Content.classList.contains("shadow-md")).toBe(true);
     });
 
-    it("선택되지 않은 카드에는 ring 클래스가 없다", () => {
+    it("unselected card has no ring class", () => {
       const { getByText } = renderKanban({ selectedValues: [1] });
       const card2Content = getByText("Card 2").closest("[data-card]") as HTMLElement;
       expect(card2Content.classList.contains("ring-2")).toBe(false);
     });
   });
 
-  describe("레인별 전체 선택 체크박스", () => {
-    it("selectable 카드가 있는 레인에 전체 선택 체크박스가 표시된다", () => {
+  describe("per-lane select-all checkbox", () => {
+    it("displays select-all checkbox in lanes that have selectable cards", () => {
       const { container } = renderKanban({ selectedValues: [] });
       const checkboxes = container.querySelectorAll("[role='checkbox']");
       expect(checkboxes.length).toBe(2);
     });
 
-    it("전체 선택 체크박스 클릭 시 레인 내 모든 selectable 카드가 선택된다", () => {
+    it("selects all selectable cards in lane when select-all checkbox is clicked", () => {
       const handleChange = vi.fn();
       const { container } = renderKanban({
         selectedValues: [],
@@ -119,7 +119,7 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).toHaveBeenCalledWith([1, 2]);
     });
 
-    it("전체 선택 상태에서 체크박스 클릭 시 레인 내 카드만 선택 해제된다", () => {
+    it("deselects only cards in the lane when clicking checkbox in fully-selected state", () => {
       const handleChange = vi.fn();
       const { container } = renderKanban({
         selectedValues: [1, 2, 4],
@@ -131,14 +131,14 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).toHaveBeenCalledWith([4]);
     });
 
-    it("모든 selectable 카드가 선택되면 체크박스가 체크 상태이다", () => {
+    it("checkbox is checked when all selectable cards are selected", () => {
       const { container } = renderKanban({ selectedValues: [1, 2] });
       const firstLane = container.querySelector("[data-kanban-lane]") as HTMLElement;
       const checkbox = firstLane.querySelector("[role='checkbox']") as HTMLElement;
       expect(checkbox.getAttribute("aria-checked")).toBe("true");
     });
 
-    it("일부만 선택되면 체크박스가 미체크 상태이다", () => {
+    it("checkbox is unchecked when only some cards are selected", () => {
       const { container } = renderKanban({ selectedValues: [1] });
       const firstLane = container.querySelector("[data-kanban-lane]") as HTMLElement;
       const checkbox = firstLane.querySelector("[role='checkbox']") as HTMLElement;
@@ -146,7 +146,7 @@ describe("Kanban 선택 시스템", () => {
     });
   });
 
-  describe("Long press 단독 선택", () => {
+  describe("long press exclusive selection", () => {
     beforeEach(() => {
       vi.useFakeTimers();
     });
@@ -155,7 +155,7 @@ describe("Kanban 선택 시스템", () => {
       vi.useRealTimers();
     });
 
-    it("500ms 이상 누르면 해당 카드만 단독 선택된다", () => {
+    it("exclusively selects that card when pressed for 500ms or more", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [2, 4],
@@ -169,7 +169,7 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).toHaveBeenCalledWith([1]);
     });
 
-    it("500ms 미만으로 누르면 선택이 변경되지 않는다", () => {
+    it("does not change selection when pressed for less than 500ms", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [],
@@ -184,7 +184,7 @@ describe("Kanban 선택 시스템", () => {
       expect(handleChange).not.toHaveBeenCalled();
     });
 
-    it("selectable=false인 카드는 long press해도 선택되지 않는다", () => {
+    it("does not select card with selectable=false on long press", () => {
       const handleChange = vi.fn();
       const { getByText } = renderKanban({
         selectedValues: [],
@@ -201,8 +201,8 @@ describe("Kanban 선택 시스템", () => {
     });
   });
 
-  describe("Uncontrolled 모드", () => {
-    it("onSelectedValuesChange 없이도 Shift+Click 선택이 동작한다", () => {
+  describe("uncontrolled mode", () => {
+    it("Shift+Click selection works without onSelectedValuesChange", () => {
       const { getByText } = renderKanban();
       const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
       fireEvent.click(card1, { shiftKey: true });