@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,317 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { Pagination } from "../../../src/components/data/Pagination";
+
+describe("Pagination 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("nav 요소로 렌더링된다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={5} />);
+
+      expect(container.querySelector("nav")).toBeTruthy();
+    });
+
+    it("data-pagination 속성이 적용된다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={5} />);
+
+      expect(container.querySelector("[data-pagination]")).toBeTruthy();
+    });
+
+    it("4개의 네비게이션 버튼과 페이지 버튼이 렌더링된다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={5} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      // 4 navigation buttons (<<, <, >, >>) + 5 page buttons
+      expect(buttons.length).toBe(9);
+    });
+
+    it("페이지 번호가 1-based로 표시된다", () => {
+      const { getByText } = render(() => <Pagination pageIndex={0} totalPageCount={3} />);
+
+      expect(getByText("1")).toBeTruthy();
+      expect(getByText("2")).toBeTruthy();
+      expect(getByText("3")).toBeTruthy();
+    });
+
+    it("custom class가 nav 요소에 전달된다", () => {
+      const { container } = render(() => (
+        // eslint-disable-next-line tailwindcss/no-custom-classname
+        <Pagination pageIndex={0} totalPageCount={5} class="my-custom" />
+      ));
+
+      const nav = container.querySelector("nav");
+      expect(nav?.className).toContain("my-custom");
+    });
+  });
+
+  describe("displayPageCount 기본값", () => {
+    it("displayPageCount 기본값은 10이다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={25} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      // 4 nav + 10 page buttons
+      expect(buttons.length).toBe(14);
+    });
+
+    it("displayPageCount=5로 설정하면 5개의 페이지 버튼이 표시된다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={25} displayPageCount={5} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      // 4 nav + 5 page buttons
+      expect(buttons.length).toBe(9);
+    });
+  });
+
+  describe("현재 페이지 표시", () => {
+    it("현재 페이지 버튼은 다른 variant를 가진다", () => {
+      const { container } = render(() => <Pagination pageIndex={2} totalPageCount={5} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      // buttons[0]=<<, [1]=<, [2]=page1, [3]=page2, [4]=page3(현재), [5]=page4, [6]=page5, [7]=>, [8]=>>
+      const currentButton = buttons[4]; // page 3 (0-based index 2)
+      const otherButton = buttons[2]; // page 1
+
+      expect(currentButton.className).not.toBe(otherButton.className);
+    });
+  });
+
+  describe("페이지 그룹 계산", () => {
+    it("page=0, displayPageCount=5일 때 페이지 1~5가 표시된다", () => {
+      const { getByText, queryByText } = render(() => (
+        <Pagination pageIndex={0} totalPageCount={20} displayPageCount={5} />
+      ));
+
+      expect(getByText("1")).toBeTruthy();
+      expect(getByText("2")).toBeTruthy();
+      expect(getByText("3")).toBeTruthy();
+      expect(getByText("4")).toBeTruthy();
+      expect(getByText("5")).toBeTruthy();
+      expect(queryByText("6")).toBeFalsy();
+    });
+
+    it("page=5, displayPageCount=5일 때 페이지 6~10이 표시된다", () => {
+      const { getByText, queryByText } = render(() => (
+        <Pagination pageIndex={5} totalPageCount={20} displayPageCount={5} />
+      ));
+
+      expect(queryByText("5")).toBeFalsy();
+      expect(getByText("6")).toBeTruthy();
+      expect(getByText("7")).toBeTruthy();
+      expect(getByText("8")).toBeTruthy();
+      expect(getByText("9")).toBeTruthy();
+      expect(getByText("10")).toBeTruthy();
+      expect(queryByText("11")).toBeFalsy();
+    });
+
+    it("page=12, displayPageCount=10일 때 페이지 11~20이 표시된다", () => {
+      const { getByText, queryByText } = render(() => (
+        <Pagination pageIndex={12} totalPageCount={25} displayPageCount={10} />
+      ));
+
+      expect(queryByText("10")).toBeFalsy();
+      expect(getByText("11")).toBeTruthy();
+      expect(getByText("20")).toBeTruthy();
+      expect(queryByText("21")).toBeFalsy();
+    });
+
+    it("마지막 그룹에서 totalPageCount보다 적은 페이지만 표시된다", () => {
+      const { container, getByText, queryByText } = render(() => (
+        <Pagination pageIndex={7} totalPageCount={8} displayPageCount={5} />
+      ));
+
+      // page=7, displayPageCount=5: from = Math.floor(7/5)*5 = 5, pages = 5,6,7 (totalPageCount=8)
+      expect(getByText("6")).toBeTruthy();
+      expect(getByText("7")).toBeTruthy();
+      expect(getByText("8")).toBeTruthy();
+      expect(queryByText("9")).toBeFalsy();
+
+      const buttons = container.querySelectorAll("[data-button]");
+      // 4 nav + 3 page buttons
+      expect(buttons.length).toBe(7);
+    });
+  });
+
+  describe("네비게이션 버튼 비활성화", () => {
+    it("첫 번째 그룹일 때 first/prev 버튼이 비활성화된다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={20} displayPageCount={5} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      const firstBtn = buttons[0]; // <<
+      const prevBtn = buttons[1]; // <
+
+      expect(firstBtn.hasAttribute("disabled")).toBe(true);
+      expect(prevBtn.hasAttribute("disabled")).toBe(true);
+    });
+
+    it("마지막 그룹일 때 next/last 버튼이 비활성화된다", () => {
+      const { container } = render(() => <Pagination pageIndex={18} totalPageCount={20} displayPageCount={5} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      const nextBtn = buttons[buttons.length - 2]; // >
+      const lastBtn = buttons[buttons.length - 1]; // >>
+
+      expect(nextBtn.hasAttribute("disabled")).toBe(true);
+      expect(lastBtn.hasAttribute("disabled")).toBe(true);
+    });
+
+    it("중간 그룹일 때 모든 네비게이션 버튼이 활성화된다", () => {
+      const { container } = render(() => <Pagination pageIndex={5} totalPageCount={20} displayPageCount={5} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      const firstBtn = buttons[0];
+      const prevBtn = buttons[1];
+      const nextBtn = buttons[buttons.length - 2];
+      const lastBtn = buttons[buttons.length - 1];
+
+      expect(firstBtn.hasAttribute("disabled")).toBe(false);
+      expect(prevBtn.hasAttribute("disabled")).toBe(false);
+      expect(nextBtn.hasAttribute("disabled")).toBe(false);
+      expect(lastBtn.hasAttribute("disabled")).toBe(false);
+    });
+  });
+
+  describe("페이지 클릭", () => {
+    it("페이지 버튼 클릭 시 onPageChange가 호출된다", () => {
+      const onPageChange = vi.fn();
+      const { getByText } = render(() => (
+        <Pagination pageIndex={0} totalPageCount={5} onPageIndexChange={onPageChange} />
+      ));
+
+      fireEvent.click(getByText("3"));
+
+      expect(onPageChange).toHaveBeenCalledWith(2); // 0-based
+    });
+
+    it("현재 페이지 클릭 시에도 onPageChange가 호출된다", () => {
+      const onPageChange = vi.fn();
+      const { getByText } = render(() => (
+        <Pagination pageIndex={0} totalPageCount={5} onPageIndexChange={onPageChange} />
+      ));
+
+      fireEvent.click(getByText("1"));
+
+      expect(onPageChange).toHaveBeenCalledWith(0);
+    });
+  });
+
+  describe("first 버튼 (<<)", () => {
+    it("first 버튼 클릭 시 page 0으로 이동한다", () => {
+      const onPageChange = vi.fn();
+      const { container } = render(() => (
+        <Pagination pageIndex={15} totalPageCount={20} displayPageCount={5} onPageIndexChange={onPageChange} />
+      ));
+
+      const buttons = container.querySelectorAll("[data-button]");
+      fireEvent.click(buttons[0]); // <<
+
+      expect(onPageChange).toHaveBeenCalledWith(0);
+    });
+  });
+
+  describe("last 버튼 (>>)", () => {
+    it("last 버튼 클릭 시 마지막 페이지로 이동한다", () => {
+      const onPageChange = vi.fn();
+      const { container } = render(() => (
+        <Pagination pageIndex={0} totalPageCount={20} displayPageCount={5} onPageIndexChange={onPageChange} />
+      ));
+
+      const buttons = container.querySelectorAll("[data-button]");
+      fireEvent.click(buttons[buttons.length - 1]); // >>
+
+      expect(onPageChange).toHaveBeenCalledWith(19); // totalPageCount - 1
+    });
+  });
+
+  describe("prev 그룹 버튼 (<)", () => {
+    it("prev 버튼 클릭 시 이전 그룹의 마지막 페이지로 이동한다", () => {
+      const onPageChange = vi.fn();
+      const { container } = render(() => (
+        <Pagination pageIndex={7} totalPageCount={20} displayPageCount={5} onPageIndexChange={onPageChange} />
+      ));
+
+      // page=7, displayPageCount=5: from = Math.floor(7/5)*5 = 5
+      // prev click → from - 1 = 4
+      const buttons = container.querySelectorAll("[data-button]");
+      fireEvent.click(buttons[1]); // <
+
+      expect(onPageChange).toHaveBeenCalledWith(4);
+    });
+  });
+
+  describe("next 그룹 버튼 (>)", () => {
+    it("next 버튼 클릭 시 다음 그룹의 첫 페이지로 이동한다", () => {
+      const onPageChange = vi.fn();
+      const { container } = render(() => (
+        <Pagination pageIndex={3} totalPageCount={20} displayPageCount={5} onPageIndexChange={onPageChange} />
+      ));
+
+      // page=3, displayPageCount=5: from=0, last in group = min(0+5, 20)-1 = 4
+      // next click → last + 1 = 5
+      const buttons = container.querySelectorAll("[data-button]");
+      fireEvent.click(buttons[buttons.length - 2]); // >
+
+      expect(onPageChange).toHaveBeenCalledWith(5);
+    });
+  });
+
+  describe("size prop", () => {
+    it("size prop이 전달되면 스타일이 달라진다", () => {
+      const { container: defaultContainer } = render(() => <Pagination pageIndex={0} totalPageCount={5} />);
+      const { container: smContainer } = render(() => <Pagination pageIndex={0} totalPageCount={5} size="sm" />);
+      const { container: lgContainer } = render(() => <Pagination pageIndex={0} totalPageCount={5} size="lg" />);
+
+      const defaultNav = defaultContainer.querySelector("nav");
+      const smNav = smContainer.querySelector("nav");
+      const lgNav = lgContainer.querySelector("nav");
+
+      // sm과 lg는 default와 다른 클래스를 가져야 한다
+      expect(smNav?.className).not.toBe(defaultNav?.className);
+      expect(lgNav?.className).not.toBe(defaultNav?.className);
+    });
+  });
+
+  describe("반응형 동작", () => {
+    it("page가 시그널로 변경되면 UI가 업데이트된다", () => {
+      const [page, setPage] = createSignal(0);
+
+      const { container, getByText } = render(() => (
+        <Pagination pageIndex={page()} totalPageCount={20} displayPageCount={5} onPageIndexChange={setPage} />
+      ));
+
+      // 초기 상태: 페이지 1~5 표시
+      expect(getByText("1")).toBeTruthy();
+
+      // 페이지 6 클릭 시뮬레이션 (next 그룹으로 이동)
+      const buttons = container.querySelectorAll("[data-button]");
+      fireEvent.click(buttons[buttons.length - 2]); // > 클릭 → page 5
+
+      // 페이지가 변경되면 6~10 그룹이 표시되어야 한다
+      expect(getByText("6")).toBeTruthy();
+    });
+  });
+
+  describe("엣지 케이스", () => {
+    it("totalPageCount=1일 때 네비게이션 버튼이 모두 비활성화된다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={1} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      const firstBtn = buttons[0];
+      const prevBtn = buttons[1];
+      const nextBtn = buttons[buttons.length - 2];
+      const lastBtn = buttons[buttons.length - 1];
+
+      expect(firstBtn.hasAttribute("disabled")).toBe(true);
+      expect(prevBtn.hasAttribute("disabled")).toBe(true);
+      expect(nextBtn.hasAttribute("disabled")).toBe(true);
+      expect(lastBtn.hasAttribute("disabled")).toBe(true);
+    });
+
+    it("totalPageCount=0일 때 페이지 버튼이 표시되지 않는다", () => {
+      const { container } = render(() => <Pagination pageIndex={0} totalPageCount={0} />);
+
+      const buttons = container.querySelectorAll("[data-button]");
+      // 4 nav buttons only, no page buttons
+      expect(buttons.length).toBe(4);
+    });
+  });
+});

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

@@ -0,0 +1,55 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { Table } from "../../../src/components/data/Table";
+
+describe("Table 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("children이 Table 내부에 표시된다", () => {
+      const { container } = render(() => (
+        <Table>
+          <tbody>
+            <tr>
+              <td>Content</td>
+            </tr>
+          </tbody>
+        </Table>
+      ));
+      expect(container.querySelector("td")?.textContent).toBe("Content");
+    });
+
+    it("table 요소로 렌더링된다", () => {
+      const { container } = render(() => <Table>Content</Table>);
+      const table = container.firstChild as HTMLElement;
+      expect(table.tagName).toBe("TABLE");
+    });
+  });
+
+  describe("inset 속성", () => {
+    it("inset prop에 따라 스타일이 달라진다", () => {
+      const { container: defaultContainer } = render(() => <Table>Content</Table>);
+      const { container: insetContainer } = render(() => <Table inset>Content</Table>);
+
+      const defaultClass = (defaultContainer.firstChild as HTMLElement).className;
+      const insetClass = (insetContainer.firstChild as HTMLElement).className;
+
+      expect(defaultClass).not.toBe(insetClass);
+    });
+  });
+
+  describe("class 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <Table class="my-table">Content</Table>);
+      const table = container.firstChild as HTMLElement;
+      expect(table.classList.contains("my-table")).toBe(true);
+    });
+  });
+
+  describe("HTML 속성 전달", () => {
+    it("data-* 속성이 전달된다", () => {
+      const { container } = render(() => <Table data-testid="test-table">Content</Table>);
+      const table = container.firstChild as HTMLElement;
+      expect(table.getAttribute("data-testid")).toBe("test-table");
+    });
+  });
+});

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

@@ -0,0 +1,209 @@
+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 선택 시스템", () => {
+  function renderKanban(options?: {
+    selectedValues?: unknown[];
+    onSelectedValuesChange?: (v: unknown[]) => void;
+    selectable?: boolean;
+  }) {
+    return render(() => (
+      <Kanban
+        selectedValues={options?.selectedValues}
+        onSelectedValuesChange={options?.onSelectedValuesChange}
+        class="h-[400px]"
+      >
+        <Kanban.Lane value="lane-1">
+          <Kanban.LaneTitle>Lane 1</Kanban.LaneTitle>
+          <Kanban.Card value={1} selectable={options?.selectable ?? true} contentClass="p-2">
+            Card 1
+          </Kanban.Card>
+          <Kanban.Card value={2} selectable={options?.selectable ?? true} contentClass="p-2">
+            Card 2
+          </Kanban.Card>
+          <Kanban.Card value={3} selectable={false} contentClass="p-2">
+            Card 3 (not selectable)
+          </Kanban.Card>
+        </Kanban.Lane>
+        <Kanban.Lane value="lane-2">
+          <Kanban.LaneTitle>Lane 2</Kanban.LaneTitle>
+          <Kanban.Card value={4} selectable contentClass="p-2">
+            Card 4
+          </Kanban.Card>
+        </Kanban.Lane>
+      </Kanban>
+    ));
+  }
+
+  describe("Shift+Click 선택", () => {
+    it("Shift+Click으로 카드가 선택된다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [],
+        onSelectedValuesChange: handleChange,
+      });
+      const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.click(card1, { shiftKey: true });
+      expect(handleChange).toHaveBeenCalledWith([1]);
+    });
+
+    it("이미 선택된 카드를 Shift+Click하면 선택 해제된다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [1],
+        onSelectedValuesChange: handleChange,
+      });
+      const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.click(card1, { shiftKey: true });
+      expect(handleChange).toHaveBeenCalledWith([]);
+    });
+
+    it("Shift 없는 클릭은 선택을 변경하지 않는다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [],
+        onSelectedValuesChange: handleChange,
+      });
+      const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.click(card1);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it("selectable=false인 카드는 Shift+Click해도 선택되지 않는다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [],
+        onSelectedValuesChange: handleChange,
+      });
+      const card3 = getByText("Card 3 (not selectable)").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.click(card3, { shiftKey: true });
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("선택 시각 피드백", () => {
+    it("선택된 카드에 ring + shadow 클래스가 적용된다", () => {
+      const { getByText } = renderKanban({ selectedValues: [1] });
+      const card1Content = getByText("Card 1").closest("[data-card]") as HTMLElement;
+      expect(card1Content.classList.contains("ring-2")).toBe(true);
+      expect(card1Content.className).toContain("ring-primary-500/50");
+      expect(card1Content.classList.contains("shadow-md")).toBe(true);
+    });
+
+    it("선택되지 않은 카드에는 ring 클래스가 없다", () => {
+      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 카드가 있는 레인에 전체 선택 체크박스가 표시된다", () => {
+      const { container } = renderKanban({ selectedValues: [] });
+      const checkboxes = container.querySelectorAll("[role='checkbox']");
+      expect(checkboxes.length).toBe(2);
+    });
+
+    it("전체 선택 체크박스 클릭 시 레인 내 모든 selectable 카드가 선택된다", () => {
+      const handleChange = vi.fn();
+      const { container } = renderKanban({
+        selectedValues: [],
+        onSelectedValuesChange: handleChange,
+      });
+      const firstLane = container.querySelector("[data-kanban-lane]") as HTMLElement;
+      const checkbox = firstLane.querySelector("[role='checkbox']") as HTMLElement;
+      fireEvent.click(checkbox);
+      expect(handleChange).toHaveBeenCalledWith([1, 2]);
+    });
+
+    it("전체 선택 상태에서 체크박스 클릭 시 레인 내 카드만 선택 해제된다", () => {
+      const handleChange = vi.fn();
+      const { container } = renderKanban({
+        selectedValues: [1, 2, 4],
+        onSelectedValuesChange: handleChange,
+      });
+      const firstLane = container.querySelector("[data-kanban-lane]") as HTMLElement;
+      const checkbox = firstLane.querySelector("[role='checkbox']") as HTMLElement;
+      fireEvent.click(checkbox);
+      expect(handleChange).toHaveBeenCalledWith([4]);
+    });
+
+    it("모든 selectable 카드가 선택되면 체크박스가 체크 상태이다", () => {
+      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("일부만 선택되면 체크박스가 미체크 상태이다", () => {
+      const { container } = renderKanban({ selectedValues: [1] });
+      const firstLane = container.querySelector("[data-kanban-lane]") as HTMLElement;
+      const checkbox = firstLane.querySelector("[role='checkbox']") as HTMLElement;
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("Long press 단독 선택", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("500ms 이상 누르면 해당 카드만 단독 선택된다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [2, 4],
+        onSelectedValuesChange: handleChange,
+      });
+
+      const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.pointerDown(card1);
+      vi.advanceTimersByTime(500);
+
+      expect(handleChange).toHaveBeenCalledWith([1]);
+    });
+
+    it("500ms 미만으로 누르면 선택이 변경되지 않는다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [],
+        onSelectedValuesChange: handleChange,
+      });
+
+      const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.pointerDown(card1);
+      vi.advanceTimersByTime(400);
+      fireEvent.pointerUp(card1);
+
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it("selectable=false인 카드는 long press해도 선택되지 않는다", () => {
+      const handleChange = vi.fn();
+      const { getByText } = renderKanban({
+        selectedValues: [],
+        onSelectedValuesChange: handleChange,
+      });
+
+      const card3 = getByText("Card 3 (not selectable)").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.pointerDown(card3);
+      vi.advanceTimersByTime(500);
+
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Uncontrolled 모드", () => {
+    it("onSelectedValuesChange 없이도 Shift+Click 선택이 동작한다", () => {
+      const { getByText } = renderKanban();
+      const card1 = getByText("Card 1").closest("[data-kanban-card]") as HTMLElement;
+      fireEvent.click(card1, { shiftKey: true });
+      const card1Content = getByText("Card 1").closest("[data-card]") as HTMLElement;
+      expect(card1Content.classList.contains("ring-2")).toBe(true);
+    });
+  });
+});