@simplysm/solid 13.0.74 → 13.0.76

package/tests/components/feedback/notification/NotificationBell.spec.tsx

@@ -2,9 +2,9 @@ import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { NotificationBell } from "../../../../src/components/feedback/notification/NotificationBell";
-import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
+import { useNotification } from "../../../../src/components/feedback/notification/NotificationProvider";
 
 describe("NotificationBell", () => {
   beforeEach(() => {
@@ -16,20 +16,6 @@ describe("NotificationBell", () => {
     vi.unstubAllGlobals();
   });
 
-  it("renders button", () => {
-    const { container } = render(() => (
-      <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <I18nProvider>
-          <NotificationProvider>
-            <NotificationBell />
-          </NotificationProvider>
-        </I18nProvider>
-      </ConfigContext.Provider>
-    ));
-
-    expect(container.querySelector("[data-notification-bell]")).not.toBeNull();
-  });
-
   it("does not show badge when there are no notifications", () => {
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>

package/tests/components/feedback/notification/NotificationContext.spec.tsx

@@ -1,26 +1,12 @@
 import { describe, it, expect } from "vitest";
-import { createRoot } from "solid-js";
 import { render, waitFor } from "@solidjs/testing-library";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import {
   useNotification,
   type NotificationContextValue,
-} from "../../../../src/components/feedback/notification/NotificationContext";
-
-describe("NotificationContext", () => {
-  describe("useNotification", () => {
-    it("throws error when used without Provider", () => {
-      createRoot((dispose) => {
-        expect(() => useNotification()).toThrow(
-          "useNotification can only be used inside NotificationProvider",
-        );
-        dispose();
-      });
-    });
-  });
-});
+} from "../../../../src/components/feedback/notification/NotificationProvider";
 
 describe("NotificationProvider", () => {
   it("useNotification works normally inside Provider", () => {

package/tests/components/form-control/Button.spec.tsx

@@ -3,94 +3,6 @@ import { describe, it, expect, vi } from "vitest";
 import { Button } from "../../../src/components/form-control/Button";
 
 describe("Button component", () => {
-  describe("basic rendering", () => {
-    it("renders children inside the button", () => {
-      const { getByRole } = render(() => <Button>Click Me</Button>);
-      const button = getByRole("button");
-
-      expect(button.textContent).toBe("Click Me");
-    });
-
-    it("defaults type to button", () => {
-      const { getByRole } = render(() => <Button>Click</Button>);
-      const button = getByRole("button");
-
-      expect(button.getAttribute("type")).toBe("button");
-    });
-
-    it("overrides type with submit", () => {
-      const { getByRole } = render(() => <Button type="submit">Submit</Button>);
-      const button = getByRole("button");
-
-      expect(button.getAttribute("type")).toBe("submit");
-    });
-  });
-
-  describe("theme prop", () => {
-    it("applies different styles per theme", () => {
-      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
-      const { getByRole: getThemed } = render(() => <Button theme="danger">Click</Button>);
-
-      expect(getDefault("button").className).not.toBe(getThemed("button").className);
-    });
-  });
-
-  describe("variant prop", () => {
-    it("applies different styles per variant", () => {
-      const { getByRole: getOutline } = render(() => <Button>Click</Button>);
-      const { getByRole: getSolid } = render(() => <Button variant="solid">Click</Button>);
-      const { getByRole: getGhost } = render(() => <Button variant="ghost">Click</Button>);
-
-      const outlineClass = getOutline("button").className;
-      const solidClass = getSolid("button").className;
-      const ghostClass = getGhost("button").className;
-
-      expect(outlineClass).not.toBe(solidClass);
-      expect(solidClass).not.toBe(ghostClass);
-      expect(outlineClass).not.toBe(ghostClass);
-    });
-  });
-
-  describe("size prop", () => {
-    it("applies different styles per size", () => {
-      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
-      const { getByRole: getSm } = render(() => <Button size="sm">Click</Button>);
-      const { getByRole: getLg } = render(() => <Button size="lg">Click</Button>);
-
-      const defaultClass = getDefault("button").className;
-      const smClass = getSm("button").className;
-      const lgClass = getLg("button").className;
-
-      expect(defaultClass).not.toBe(smClass);
-      expect(defaultClass).not.toBe(lgClass);
-      expect(smClass).not.toBe(lgClass);
-    });
-  });
-
-  describe("inset prop", () => {
-    it("applies different styles when inset", () => {
-      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
-      const { getByRole: getInset } = render(() => <Button inset>Click</Button>);
-
-      expect(getDefault("button").className).not.toBe(getInset("button").className);
-    });
-  });
-
-  describe("disabled prop", () => {
-    it("applies different styles when disabled", () => {
-      const { getByRole: getDefault } = render(() => <Button>Click</Button>);
-      const { getByRole: getDisabled } = render(() => <Button disabled>Click</Button>);
-
-      expect(getDefault("button").className).not.toBe(getDisabled("button").className);
-    });
-
-    it("sets HTML disabled attribute when disabled=true", () => {
-      const { getByRole } = render(() => <Button disabled>Click</Button>);
-
-      expect(getByRole("button").hasAttribute("disabled")).toBe(true);
-    });
-  });
-
   describe("event handling", () => {
     it("calls onClick handler on click", () => {
       const handleClick = vi.fn();
@@ -107,13 +19,4 @@ describe("Button component", () => {
       expect(getByRole("button").hasAttribute("disabled")).toBe(true);
     });
   });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { getByRole } = render(() => <Button class="my-custom-class">Click</Button>);
-
-      expect(getByRole("button").classList.contains("my-custom-class")).toBe(true);
-    });
-  });
 });

package/tests/components/form-control/Invalid.spec.tsx

@@ -4,21 +4,6 @@ import { createSignal } from "solid-js";
 import { Invalid } from "../../../src/components/form-control/Invalid";
 
 describe("Invalid component", () => {
-  describe("Fragment rendering", () => {
-    it("renders children and hidden input without wrapper div", () => {
-      const { container } = render(() => (
-        <Invalid message="error">
-          <div data-testid="child">Content</div>
-        </Invalid>
-      ));
-      const child = container.querySelector("[data-testid='child']");
-      const hiddenInput = container.querySelector("input[aria-hidden='true']");
-      expect(child).toBeTruthy();
-      expect(hiddenInput).toBeTruthy();
-      expect(child!.parentElement).toBe(container);
-    });
-  });
-
   describe("setCustomValidity", () => {
     it("sets setCustomValidity when message is present", () => {
       const { container } = render(() => (

package/tests/components/form-control/checkbox/Checkbox.spec.tsx

@@ -2,30 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Checkbox } from "../../../../src/components/form-control/checkbox/Checkbox";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Checkbox component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders with checkbox role", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
-      expect(getByRole("checkbox")).toBeTruthy();
-    });
-
-    it("renders children as label", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox>동의합니다</Checkbox></I18nProvider></ConfigProvider>);
-      expect(getByText("동의합니다")).toBeTruthy();
-    });
-
-    it("defaults to unchecked", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
-      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
-    });
-  });
-
   describe("click behavior", () => {
     it("toggles checked state on click", () => {
       const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
@@ -85,35 +68,6 @@ describe("Checkbox component", () => {
     });
   });
 
-  describe("style variants", () => {
-    it("applies different styles per size", () => {
-      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
-      const { getByRole: getSm } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox size="sm" /></I18nProvider></ConfigProvider>);
-
-      expect(getDefault("checkbox").className).not.toBe(getSm("checkbox").className);
-    });
-
-    it("applies different styles when inset", () => {
-      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
-      const { getByRole: getInset } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox inset /></I18nProvider></ConfigProvider>);
-
-      expect(getDefault("checkbox").className).not.toBe(getInset("checkbox").className);
-    });
-
-    it("applies disabled style", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox disabled /></I18nProvider></ConfigProvider>);
-      expect(getByRole("checkbox").classList.contains("opacity-30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      expect(getByRole("checkbox").classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and unchecked", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox required value={false} /></I18nProvider></ConfigProvider>);

package/tests/components/form-control/checkbox/CheckboxGroup.spec.tsx

@@ -2,38 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { CheckboxGroup } from "../../../../src/components/form-control/checkbox/CheckboxGroup";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("CheckboxGroup component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders the container", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <CheckboxGroup>
-            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-          </CheckboxGroup>
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(container.querySelector("div")).toBeTruthy();
-    });
-
-    it("renders items as checkboxes", () => {
-      const { getAllByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <CheckboxGroup>
-            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-            <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
-          </CheckboxGroup>
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getAllByRole("checkbox").length).toBe(2);
-    });
-  });
-
   describe("controlled pattern", () => {
     it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (

package/tests/components/form-control/checkbox/Radio.spec.tsx

@@ -2,30 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Radio } from "../../../../src/components/form-control/checkbox/Radio";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Radio component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders with radio role", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio")).toBeTruthy();
-    });
-
-    it("renders children as label", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio>옵션 A</Radio></I18nProvider></ConfigProvider>);
-      expect(getByText("옵션 A")).toBeTruthy();
-    });
-
-    it("defaults to unchecked", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
-    });
-  });
-
   describe("click behavior", () => {
     it("selects on click", () => {
       const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
@@ -87,34 +70,6 @@ describe("Radio component", () => {
     });
   });
 
-  describe("style variants", () => {
-    it("indicator is circular", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      const indicator = getByRole("radio").querySelector("div") as HTMLElement;
-      expect(indicator.classList.contains("rounded-full")).toBe(true);
-    });
-
-    it("applies different styles per size", () => {
-      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      const { getByRole: getSm } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio size="sm" /></I18nProvider></ConfigProvider>);
-
-      expect(getDefault("radio").className).not.toBe(getSm("radio").className);
-    });
-
-    it("applies disabled style", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio disabled /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio").classList.contains("opacity-30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio").classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and not selected", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio required value={false} /></I18nProvider></ConfigProvider>);

package/tests/components/form-control/checkbox/RadioGroup.spec.tsx

@@ -2,38 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { RadioGroup } from "../../../../src/components/form-control/checkbox/RadioGroup";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("RadioGroup component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders the container", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <RadioGroup>
-            <RadioGroup.Item value="a">A</RadioGroup.Item>
-          </RadioGroup>
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(container.querySelector("div")).toBeTruthy();
-    });
-
-    it("renders items as radios", () => {
-      const { getAllByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <RadioGroup>
-            <RadioGroup.Item value="a">A</RadioGroup.Item>
-            <RadioGroup.Item value="b">B</RadioGroup.Item>
-          </RadioGroup>
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getAllByRole("radio").length).toBe(2);
-    });
-  });
-
   describe("controlled pattern", () => {
     it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (

package/tests/components/form-control/color-picker/ColorPicker.spec.tsx

@@ -2,28 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { ColorPicker } from "../../../../src/components/form-control/color-picker/ColorPicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("ColorPicker component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders input type=color", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("color");
-    });
-
-    it("defaults to #000000", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("#000000");
-    });
-  });
-
   describe("controlled pattern", () => {
     it("calls onValueChange on color change", () => {
       const handleChange = vi.fn();
@@ -57,21 +42,6 @@ describe("ColorPicker component", () => {
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.disabled).toBe(true);
     });
-
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker disabled /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.classList.contains("cursor-default")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.classList.contains("my-custom-class")).toBe(true);
-    });
   });
 
   describe("validation", () => {

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

@@ -1,7 +1,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";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Combobox component", () => {
@@ -12,50 +12,6 @@ describe("Combobox component", () => {
     mockLoadItems.mockClear();
   });
 
-  describe("basic rendering", () => {
-    it("renders trigger", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getByRole("combobox")).not.toBeNull();
-    });
-
-    it("displays placeholder", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox
-            loadItems={mockLoadItems}
-            placeholder="검색하세요"
-            renderValue={(v) => <>{v}</>}
-          />
-        </I18nProvider></ConfigProvider>
-      ));
-      const input = container.querySelector("input");
-      expect(input?.getAttribute("placeholder")).toBe("검색하세요");
-    });
-
-    it("defaults input autocomplete to one-time-code", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
-        </I18nProvider></ConfigProvider>
-      ));
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
-    it("sets aria-disabled when disabled", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox loadItems={mockLoadItems} disabled renderValue={(v) => <>{v}</>} />
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getByRole("combobox").getAttribute("aria-disabled")).toBe("true");
-    });
-  });
-
   describe("dropdown opening/closing", () => {
     it("opens dropdown on input", async () => {
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
@@ -175,8 +131,8 @@ describe("Combobox component", () => {
     });
   });
 
-  describe("allowCustomValue", () => {
-    it("allows entering custom value with Enter when allowCustomValue is true", () => {
+  describe("allowsCustomValue", () => {
+    it("allows entering custom value with Enter when allowsCustomValue is true", () => {
       const handleChange = vi.fn();
       const loadItems = vi.fn(() => Promise.resolve([]));
 
@@ -185,7 +141,7 @@ describe("Combobox component", () => {
           <Combobox
             loadItems={loadItems}
             onValueChange={handleChange}
-            allowCustomValue
+            allowsCustomValue
             renderValue={(v) => <>{v}</>}
           />
         </I18nProvider></ConfigProvider>
@@ -207,7 +163,7 @@ describe("Combobox component", () => {
           <Combobox
             loadItems={loadItems}
             onValueChange={handleChange}
-            allowCustomValue
+            allowsCustomValue
             parseCustomValue={(text) => ({ name: text, custom: true })}
             renderValue={(v: { name: string }) => <>{v.name}</>}
           />

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

@@ -1,10 +1,10 @@
 import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi } from "vitest";
 import {
+  Combobox,
   ComboboxContext,
   type ComboboxContextValue,
-} from "../../../../src/components/form-control/combobox/ComboboxContext";
-import { ComboboxItem } from "../../../../src/components/form-control/combobox/ComboboxItem";
+} from "../../../../src/components/form-control/combobox/Combobox";
 
 const createMockContext = (
   overrides: Partial<ComboboxContextValue> = {},
@@ -17,22 +17,11 @@ const createMockContext = (
 });
 
 describe("ComboboxItem component", () => {
-  it("renders the item", () => {
-    const { getByRole } = render(() => (
-      <ComboboxContext.Provider value={createMockContext()}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
-      </ComboboxContext.Provider>
-    ));
-
-    expect(getByRole("option")).not.toBeNull();
-    expect(getByRole("option").textContent).toContain("사과");
-  });
-
   it("calls selectValue on click", () => {
     const selectValue = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ selectValue })}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
+        <Combobox.Item value="apple">사과</Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -43,7 +32,7 @@ describe("ComboboxItem component", () => {
   it("sets aria-selected=true when selected", () => {
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ isSelected: () => true })}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
+        <Combobox.Item value="apple">사과</Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -54,9 +43,9 @@ describe("ComboboxItem component", () => {
     const selectValue = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ selectValue })}>
-        <ComboboxItem value="apple" disabled>
+        <Combobox.Item value="apple" disabled>
           사과
-        </ComboboxItem>
+        </Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -68,7 +57,7 @@ describe("ComboboxItem component", () => {
     const closeDropdown = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ closeDropdown })}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
+        <Combobox.Item value="apple">사과</Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -76,13 +65,4 @@ describe("ComboboxItem component", () => {
     expect(closeDropdown).toHaveBeenCalled();
   });
 
-  it("sets data-combobox-item attribute", () => {
-    render(() => (
-      <ComboboxContext.Provider value={createMockContext()}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
-      </ComboboxContext.Provider>
-    ));
-
-    expect(document.querySelector("[data-combobox-item]")).not.toBeNull();
-  });
 });