@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -1,317 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,209 +0,0 @@
-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);
-    });
-  });
-});