@simplysm/solid 13.0.74 → 13.0.76

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

@@ -5,58 +5,6 @@ import { IconCheck } from "@tabler/icons-solidjs";
 import { List } from "../../../src/components/data/list/List";
 
 describe("List component", () => {
-  describe("basic rendering", () => {
-    it("renders children inside List", () => {
-      const { getByText } = render(() => (
-        <List>
-          <List.Item>Item 1</List.Item>
-        </List>
-      ));
-
-      expect(getByText("Item 1")).toBeTruthy();
-    });
-
-    it("applies role=tree", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-
-      expect(getByRole("tree")).toBeTruthy();
-    });
-
-    it("applies data-list attribute", () => {
-      const { container } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-
-      expect(container.querySelector("[data-list]")).toBeTruthy();
-    });
-  });
-
-  describe("inset prop", () => {
-    it("applies different styles based on inset prop", () => {
-      const { container: defaultContainer } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-      const { container: insetContainer } = render(() => (
-        <List inset>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-
-      const defaultClass = (defaultContainer.querySelector("[data-list]") as HTMLElement).className;
-      const insetClass = (insetContainer.querySelector("[data-list]") as HTMLElement).className;
-
-      expect(defaultClass).not.toBe(insetClass);
-    });
-  });
-
   describe("keyboard navigation", () => {
     it("ArrowDown moves focus to next item", () => {
       const { getAllByRole } = render(() => (
@@ -255,38 +203,6 @@ describe("List component", () => {
 });
 
 describe("List.Item component", () => {
-  describe("basic rendering", () => {
-    it("renders children inside List.Item", () => {
-      const { getByText } = render(() => (
-        <List>
-          <List.Item>Test Item</List.Item>
-        </List>
-      ));
-
-      expect(getByText("Test Item")).toBeTruthy();
-    });
-
-    it("applies role=treeitem", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-
-      expect(getByRole("treeitem")).toBeTruthy();
-    });
-
-    it("applies data-list-item attribute", () => {
-      const { container } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-
-      expect(container.querySelector("[data-list-item]")).toBeTruthy();
-    });
-  });
-
   describe("nested list", () => {
     it("toggles collapse on click when List.Item.Children is present", () => {
       const { getByRole } = render(() => (
@@ -313,92 +229,6 @@ describe("List.Item component", () => {
       expect(item.getAttribute("aria-expanded")).toBe("false");
     });
 
-    it("shows chevron icon when List.Item.Children is present", () => {
-      const { container } = render(() => (
-        <List>
-          <List.Item>
-            Folder
-            <List.Item.Children>
-              <List.Item>File</List.Item>
-            </List.Item.Children>
-          </List.Item>
-        </List>
-      ));
-
-      const svg = container.querySelector("svg");
-      expect(svg).toBeTruthy();
-    });
-
-    it("hides chevron icon when List.Item.Children is absent", () => {
-      const { container } = render(() => (
-        <List>
-          <List.Item>Simple Item</List.Item>
-        </List>
-      ));
-
-      const button = container.querySelector("[data-list-item]") as HTMLElement;
-      const svg = button.querySelector("svg");
-      expect(svg).toBeFalsy();
-    });
-
-    it("no aria-expanded means no List.Item.Children", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item>Simple Item</List.Item>
-        </List>
-      ));
-
-      const item = getByRole("treeitem");
-      expect(item.hasAttribute("aria-expanded")).toBe(false);
-    });
-
-    it("applies role=group inside List.Item.Children", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item open>
-            Folder
-            <List.Item.Children>
-              <List.Item>File</List.Item>
-            </List.Item.Children>
-          </List.Item>
-        </List>
-      ));
-
-      expect(getByRole("group")).toBeTruthy();
-    });
-  });
-
-  describe("selected state", () => {
-    it("applies different styles based on selected prop", () => {
-      const { container: defaultContainer } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-      const { container: selectedContainer } = render(() => (
-        <List>
-          <List.Item selected>Item</List.Item>
-        </List>
-      ));
-
-      const defaultClass = (defaultContainer.querySelector("[data-list-item]") as HTMLElement)
-        .className;
-      const selectedClass = (selectedContainer.querySelector("[data-list-item]") as HTMLElement)
-        .className;
-
-      expect(defaultClass).not.toBe(selectedClass);
-    });
-
-    it("sets aria-selected", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item selected>Selected Item</List.Item>
-        </List>
-      ));
-
-      const item = getByRole("treeitem");
-      expect(item.getAttribute("aria-selected")).toBe("true");
-    });
   });
 
   describe("readonly state", () => {
@@ -406,7 +236,7 @@ describe("List.Item component", () => {
       const onClick = vi.fn();
       const { getByRole } = render(() => (
         <List>
-          <List.Item readonly onClick={onClick}>
+          <List.Item readOnly onClick={onClick}>
             Readonly Item
           </List.Item>
         </List>
@@ -418,48 +248,9 @@ describe("List.Item component", () => {
       expect(onClick).not.toHaveBeenCalled();
     });
 
-    it("applies different styles based on readonly prop", () => {
-      const { container: defaultContainer } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-      const { container: readonlyContainer } = render(() => (
-        <List>
-          <List.Item readonly>Item</List.Item>
-        </List>
-      ));
-
-      const defaultClass = (defaultContainer.querySelector("[data-list-item]") as HTMLElement)
-        .className;
-      const readonlyClass = (readonlyContainer.querySelector("[data-list-item]") as HTMLElement)
-        .className;
-
-      expect(defaultClass).not.toBe(readonlyClass);
-    });
   });
 
   describe("disabled state", () => {
-    it("applies different styles based on disabled prop", () => {
-      const { container: defaultContainer } = render(() => (
-        <List>
-          <List.Item>Item</List.Item>
-        </List>
-      ));
-      const { container: disabledContainer } = render(() => (
-        <List>
-          <List.Item disabled>Item</List.Item>
-        </List>
-      ));
-
-      const defaultClass = (defaultContainer.querySelector("[data-list-item]") as HTMLElement)
-        .className;
-      const disabledClass = (disabledContainer.querySelector("[data-list-item]") as HTMLElement)
-        .className;
-
-      expect(defaultClass).not.toBe(disabledClass);
-    });
-
     it("not clickable when disabled=true", () => {
       const onClick = vi.fn();
       const { getByRole } = render(() => (
@@ -476,61 +267,9 @@ describe("List.Item component", () => {
       expect(onClick).not.toHaveBeenCalled();
     });
 
-    it("applies tabindex=-1 when disabled=true", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item disabled>Disabled Item</List.Item>
-        </List>
-      ));
-
-      const item = getByRole("treeitem");
-      expect(item.getAttribute("tabindex")).toBe("-1");
-    });
-
-    it("sets aria-disabled", () => {
-      const { getByRole } = render(() => (
-        <List>
-          <List.Item disabled>Disabled Item</List.Item>
-        </List>
-      ));
-
-      const item = getByRole("treeitem");
-      expect(item.getAttribute("aria-disabled")).toBe("true");
-    });
   });
 
   describe("selectedIcon", () => {
-    it("shows icon when selectedIcon is provided and no List.Item.Children", () => {
-      const { container } = render(() => (
-        <List>
-          <List.Item selectedIcon={IconCheck}>Item</List.Item>
-        </List>
-      ));
-
-      const svg = container.querySelector("svg");
-      expect(svg).toBeTruthy();
-    });
-
-    it("applies different icon styles based on selectedIcon and selected state", () => {
-      const { container: unselectedContainer } = render(() => (
-        <List>
-          <List.Item selectedIcon={IconCheck}>Item</List.Item>
-        </List>
-      ));
-      const { container: selectedContainer } = render(() => (
-        <List>
-          <List.Item selectedIcon={IconCheck} selected>
-            Item
-          </List.Item>
-        </List>
-      ));
-
-      const unselectedSvg = unselectedContainer.querySelector("svg");
-      const selectedSvg = selectedContainer.querySelector("svg");
-
-      expect(unselectedSvg?.className).not.toBe(selectedSvg?.className);
-    });
-
     it("hides selectedIcon when List.Item.Children is present", () => {
       const { container } = render(() => (
         <List>

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

@@ -4,46 +4,6 @@ import { createSignal } from "solid-js";
 import { Pagination } from "../../../src/components/data/Pagination";
 
 describe("Pagination component", () => {
-  describe("basic rendering", () => {
-    it("renders as nav element", () => {
-      const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
-
-      expect(container.querySelector("nav")).toBeTruthy();
-    });
-
-    it("applies data-pagination attribute", () => {
-      const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
-
-      expect(container.querySelector("[data-pagination]")).toBeTruthy();
-    });
-
-    it("renders 4 navigation buttons and page buttons", () => {
-      const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
-
-      const buttons = container.querySelectorAll("[data-button]");
-      // 4 navigation buttons (<<, <, >, >>) + 5 page buttons
-      expect(buttons.length).toBe(9);
-    });
-
-    it("displays page numbers as 1-based", () => {
-      const { getByText } = render(() => <Pagination page={1} totalPageCount={3} />);
-
-      expect(getByText("1")).toBeTruthy();
-      expect(getByText("2")).toBeTruthy();
-      expect(getByText("3")).toBeTruthy();
-    });
-
-    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" />
-      ));
-
-      const nav = container.querySelector("nav");
-      expect(nav?.className).toContain("my-custom");
-    });
-  });
-
   describe("displayPageCount default", () => {
     it("default displayPageCount is 10", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={25} />);
@@ -64,19 +24,6 @@ describe("Pagination component", () => {
     });
   });
 
-  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(current), [5]=page4, [6]=page5, [7]=>, [8]=>>
-      const currentButton = buttons[4]; // page 3 (1-based page=3)
-      const otherButton = buttons[2]; // page 1
-
-      expect(currentButton.className).not.toBe(otherButton.className);
-    });
-  });
-
   describe("page group calculation", () => {
     it("displays pages 1-5 when page=1, displayPageCount=5", () => {
       const { getByText, queryByText } = render(() => (
@@ -267,28 +214,6 @@ describe("Pagination component", () => {
     });
   });
 
-  describe("size prop", () => {
-    it("applies different styles when size prop is provided", () => {
-      const { container: defaultContainer } = render(() => (
-        <Pagination page={1} totalPageCount={5} />
-      ));
-      const { container: smContainer } = render(() => (
-        <Pagination page={1} totalPageCount={5} size="sm" />
-      ));
-      const { container: lgContainer } = render(() => (
-        <Pagination page={1} totalPageCount={5} size="lg" />
-      ));
-
-      const defaultNav = defaultContainer.querySelector("nav");
-      const smNav = smContainer.querySelector("nav");
-      const lgNav = lgContainer.querySelector("nav");
-
-      // sm and lg should have different classes from default
-      expect(smNav?.className).not.toBe(defaultNav?.className);
-      expect(lgNav?.className).not.toBe(defaultNav?.className);
-    });
-  });
-
   describe("reactive behavior", () => {
     it("updates UI when page signal changes", () => {
       const [page, setPage] = createSignal(1);

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

@@ -1,7 +1,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";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Kanban selection system", () => {
@@ -94,22 +94,6 @@ describe("Kanban selection system", () => {
     });
   });
 
-  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);
-      expect(card1Content.className).toContain("ring-primary-500/50");
-      expect(card1Content.classList.contains("shadow-md")).toBe(true);
-    });
-
-    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("per-lane select-all checkbox", () => {
     it("displays select-all checkbox in lanes that have selectable cards", () => {
       const { container } = renderKanban({ selectedValues: [] });