@simplysm/solid 13.0.71 → 13.0.74

package/tests/components/features/data-select-button/DataSelectButton.spec.tsx

@@ -1,10 +1,8 @@
-import { afterEach, describe, it, expect, vi } from "vitest";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { render, cleanup } from "@solidjs/testing-library";
 import { createSignal, type JSX } from "solid-js";
-import { DataSelectButton, type DataSelectModalResult } from "@simplysm/solid";
+import { DataSelectButton, type InjectedSelectProps } from "@simplysm/solid";
 import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { useDialogInstance } from "../../../../src/components/disclosure/DialogInstanceContext";
-import { Dialog } from "../../../../src/components/disclosure/Dialog";
 import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
@@ -28,24 +26,17 @@ function createTestLoad() {
   return loadFn;
 }
 
-// modal component for tests (returns specific keys)
-function TestModal(selectedKeys: number[]): () => JSX.Element {
-  return () => {
-    const instance = useDialogInstance<DataSelectModalResult<number>>();
-    return (
-      <Dialog open onOpenChange={() => undefined}>
-        <Dialog.Header>테스트 모달</Dialog.Header>
-        <div data-testid="modal-content">
-          <button data-testid="modal-confirm" onClick={() => instance?.close({ selectedKeys })}>
-            확인
-          </button>
-          <button data-testid="modal-cancel" onClick={() => instance?.close(undefined)}>
-            취소
-          </button>
-        </div>
-      </Dialog>
-    );
-  };
+// Dialog component for tests — receives InjectedSelectProps automatically
+function TestDialogComponent(props: { confirmKeys: number[] } & InjectedSelectProps) {
+  return (
+    <div data-testid="dialog-content">
+      <div data-testid="select-mode">{props.selectMode}</div>
+      <div data-testid="selected-keys">{JSON.stringify([...props.selectedKeys])}</div>
+      <button data-testid="dialog-confirm" onClick={() => props.onSelect({ keys: props.confirmKeys })}>
+        confirm
+      </button>
+    </div>
+  );
 }
 
 // helper to wrap with DialogProvider
@@ -58,6 +49,10 @@ function renderWithDialog(ui: () => JSX.Element) {
 }
 
 describe("DataSelectButton", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   afterEach(() => {
     cleanup();
   });
@@ -67,7 +62,7 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -84,7 +79,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -101,7 +96,7 @@ describe("DataSelectButton", () => {
         value={[1, 3]}
         multiple
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -122,7 +117,7 @@ describe("DataSelectButton", () => {
         value={value()}
         onValueChange={setValue}
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -142,7 +137,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -159,7 +154,7 @@ describe("DataSelectButton", () => {
         value={1}
         required
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -178,7 +173,7 @@ describe("DataSelectButton", () => {
         value={1}
         onValueChange={onValueChange}
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -202,7 +197,7 @@ describe("DataSelectButton", () => {
         multiple
         onValueChange={onValueChange}
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -222,7 +217,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         disabled
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -236,7 +231,7 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -245,7 +240,7 @@ describe("DataSelectButton", () => {
     expect(searchBtn).not.toBeNull();
   });
 
-  it("opens modal on search button click and applies result for single select", async () => {
+  it("opens dialog on search button click and applies result for single select", async () => {
     const load = createTestLoad();
     const onValueChange = vi.fn();
 
@@ -253,7 +248,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         onValueChange={onValueChange}
         load={load}
-        modal={TestModal([2])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [2] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -261,10 +256,10 @@ describe("DataSelectButton", () => {
     const searchBtn = container.querySelector("[data-search-button]") as HTMLButtonElement;
     searchBtn.click();
 
-    // once modal opens, find and click confirm button
+    // once dialog opens, find and click confirm button
     await vi.waitFor(() => {
       const confirmBtn = document.querySelector(
-        "[data-testid='modal-confirm']",
+        "[data-testid='dialog-confirm']",
       ) as HTMLButtonElement;
       expect(confirmBtn).not.toBeNull();
       confirmBtn.click();
@@ -275,7 +270,7 @@ describe("DataSelectButton", () => {
     });
   });
 
-  it("opens modal and applies result for multiple select", async () => {
+  it("opens dialog and applies result for multiple select", async () => {
     const load = createTestLoad();
     const onValueChange = vi.fn();
 
@@ -284,7 +279,7 @@ describe("DataSelectButton", () => {
         multiple
         onValueChange={onValueChange}
         load={load}
-        modal={TestModal([1, 3])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [1, 3] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -294,7 +289,7 @@ describe("DataSelectButton", () => {
 
     await vi.waitFor(() => {
       const confirmBtn = document.querySelector(
-        "[data-testid='modal-confirm']",
+        "[data-testid='dialog-confirm']",
       ) as HTMLButtonElement;
       expect(confirmBtn).not.toBeNull();
       confirmBtn.click();
@@ -305,7 +300,7 @@ describe("DataSelectButton", () => {
     });
   });
 
-  it("does not change value when modal is cancelled", async () => {
+  it("does not change value when dialog is cancelled", async () => {
     const load = createTestLoad();
     const onValueChange = vi.fn();
 
@@ -314,7 +309,7 @@ describe("DataSelectButton", () => {
         value={1}
         onValueChange={onValueChange}
         load={load}
-        modal={TestModal([2])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [2] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -323,13 +318,14 @@ describe("DataSelectButton", () => {
     searchBtn.click();
 
     await vi.waitFor(() => {
-      const cancelBtn = document.querySelector("[data-testid='modal-cancel']") as HTMLButtonElement;
-      expect(cancelBtn).not.toBeNull();
-      cancelBtn.click();
+      const dialogContent = document.querySelector("[data-testid='dialog-content']");
+      expect(dialogContent).not.toBeNull();
     });
 
-    // value should not change
-    await new Promise((r) => setTimeout(r, 100));
+    // Close via ESC key
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+
+    await new Promise((r) => setTimeout(r, 300));
     expect(onValueChange).not.toHaveBeenCalled();
   });
 
@@ -339,7 +335,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         required
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -356,7 +352,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
         validate={(v) => (v === 1 ? "1은 선택할 수 없습니다" : undefined)}
       />
@@ -375,7 +371,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         disabled
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -391,7 +387,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         required
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -400,7 +396,7 @@ describe("DataSelectButton", () => {
     expect(trigger.getAttribute("aria-required")).toBe("true");
   });
 
-  it("opens modal on Enter key press", async () => {
+  it("opens dialog on Enter key press", async () => {
     const load = createTestLoad();
     const onValueChange = vi.fn();
 
@@ -408,7 +404,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         onValueChange={onValueChange}
         load={load}
-        modal={TestModal([3])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [3] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -418,7 +414,7 @@ describe("DataSelectButton", () => {
 
     await vi.waitFor(() => {
       const confirmBtn = document.querySelector(
-        "[data-testid='modal-confirm']",
+        "[data-testid='dialog-confirm']",
       ) as HTMLButtonElement;
       expect(confirmBtn).not.toBeNull();
       confirmBtn.click();
@@ -439,7 +435,7 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={2}
         load={asyncLoad}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -454,7 +450,7 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -470,7 +466,7 @@ describe("DataSelectButton", () => {
         value={1}
         disabled
         load={load}
-        modal={TestModal([])}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -479,4 +475,29 @@ describe("DataSelectButton", () => {
     const clearBtn = container.querySelector("[data-clear-button]");
     expect(clearBtn).toBeNull();
   });
+
+  it("injects selectMode and selectedKeys into dialog component", async () => {
+    const load = createTestLoad();
+
+    const { container } = renderWithDialog(() => (
+      <DataSelectButton
+        value={1}
+        multiple
+        load={load}
+        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        renderItem={(item: TestItem) => <span>{item.name}</span>}
+      />
+    ));
+
+    const searchBtn = container.querySelector("[data-search-button]") as HTMLButtonElement;
+    searchBtn.click();
+
+    await vi.waitFor(() => {
+      const selectMode = document.querySelector("[data-testid='select-mode']");
+      expect(selectMode?.textContent).toBe("multiple");
+
+      const selectedKeys = document.querySelector("[data-testid='selected-keys']");
+      expect(selectedKeys?.textContent).toBe("[1]");
+    });
+  });
 });

package/tests/components/features/permission-table/PermissionTable.spec.tsx

@@ -1,5 +1,5 @@
 import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import {
   PermissionTable,
@@ -171,35 +171,39 @@ describe("changePermCheck", () => {
 // =====================
 
 describe("PermissionTable component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders as DataSheet (div with data-sheet attribute)", () => {
-      const { container } = render(() => <PermissionTable items={sampleItems} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       const wrapper = container.querySelector("[data-sheet]");
       expect(wrapper).toBeTruthy();
       expect(wrapper!.tagName).toBe("DIV");
     });
 
     it("renders a table inside DataSheet", () => {
-      const { container } = render(() => <PermissionTable items={sampleItems} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       const table = container.querySelector("[data-sheet] table");
       expect(table).toBeTruthy();
     });
 
     it("displays perm type columns in header", () => {
-      const { getByText } = render(() => <PermissionTable items={sampleItems} />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       expect(getByText("use")).toBeTruthy();
       expect(getByText("edit")).toBeTruthy();
       expect(getByText("approve")).toBeTruthy();
     });
 
     it("displays item titles", () => {
-      const { getByText } = render(() => <PermissionTable items={sampleItems} />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       expect(getByText("사용자 관리")).toBeTruthy();
       expect(getByText("시스템")).toBeTruthy();
     });
 
     it("child items are expanded by default", () => {
-      const { getByText } = render(() => <PermissionTable items={sampleItems} />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       expect(getByText("권한 설정")).toBeTruthy();
       expect(getByText("사용자 목록")).toBeTruthy();
     });
@@ -240,7 +244,7 @@ describe("PermissionTable component", () => {
 
   describe("expand/collapse", () => {
     it("rows with children have an expand/collapse toggle", () => {
-      const { getByText } = render(() => <PermissionTable items={sampleItems} />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       // find the row containing "사용자 관리" and check for expand toggle button
       const titleEl = getByText("사용자 관리");
       const row = titleEl.closest("tr")!;
@@ -249,7 +253,7 @@ describe("PermissionTable component", () => {
     });
 
     it("clicking collapse button removes children from the DOM", () => {
-      const { getByText, queryByText } = render(() => <PermissionTable items={sampleItems} />);
+      const { getByText, queryByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
 
       // initially: children are visible (all expanded by default)
       expect(getByText("권한 설정")).toBeTruthy();

package/tests/components/features/shared-data/SharedDataSelect.spec.tsx

@@ -0,0 +1,172 @@
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import { render, cleanup } from "@solidjs/testing-library";
+import { createSignal, type Accessor } from "solid-js";
+import {
+  SharedDataSelect,
+  type InjectedSelectProps,
+} from "@simplysm/solid";
+import { type SharedDataAccessor } from "../../../../src/providers/shared-data/SharedDataContext";
+import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
+
+interface TestItem {
+  id: number;
+  name: string;
+}
+
+const testItems: TestItem[] = [
+  { id: 1, name: "Apple" },
+  { id: 2, name: "Banana" },
+  { id: 3, name: "Cherry" },
+];
+
+function createMockAccessor(itemsSignal: Accessor<TestItem[]>): SharedDataAccessor<TestItem> {
+  return {
+    items: itemsSignal,
+    get: (key) => itemsSignal().find((item) => item.id === key),
+    emit: vi.fn(async () => {}),
+    getKey: (item) => item.id,
+    getSearchText: (item) => item.name,
+  };
+}
+
+function TestDialogComponent(props: { confirmKeys: number[] } & InjectedSelectProps) {
+  return (
+    <div data-testid="dialog-content">
+      <div data-testid="select-mode">{props.selectMode}</div>
+      <div data-testid="selected-keys">{JSON.stringify([...props.selectedKeys])}</div>
+      <button
+        data-testid="dialog-confirm"
+        onClick={() => props.onSelect({ keys: props.confirmKeys })}
+      >
+        confirm
+      </button>
+    </div>
+  );
+}
+
+function renderWithDialog(ui: () => import("solid-js").JSX.Element) {
+  return render(() => (
+    <ConfigProvider clientName="test"><I18nProvider>
+      <DialogProvider>{ui()}</DialogProvider>
+    </I18nProvider></ConfigProvider>
+  ));
+}
+
+describe("SharedDataSelect", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders items via ItemTemplate", () => {
+    const [items] = createSignal(testItems);
+    const accessor = createMockAccessor(items);
+
+    const { getByText } = renderWithDialog(() => (
+      <SharedDataSelect data={accessor} value={1} onValueChange={() => {}}>
+        <SharedDataSelect.ItemTemplate>
+          {(item: TestItem) => <span>{item.name}</span>}
+        </SharedDataSelect.ItemTemplate>
+      </SharedDataSelect>
+    ));
+
+    // Select should render with items from accessor
+    expect(getByText("Apple")).toBeTruthy();
+  });
+
+  it("renders custom Action button", () => {
+    const [items] = createSignal(testItems);
+    const accessor = createMockAccessor(items);
+    const onClick = vi.fn();
+
+    const { container } = renderWithDialog(() => (
+      <SharedDataSelect data={accessor} value={1} onValueChange={() => {}}>
+        <SharedDataSelect.ItemTemplate>
+          {(item: TestItem) => <span>{item.name}</span>}
+        </SharedDataSelect.ItemTemplate>
+        <SharedDataSelect.Action onClick={onClick}>
+          <span data-testid="custom-action">Edit</span>
+        </SharedDataSelect.Action>
+      </SharedDataSelect>
+    ));
+
+    const actionBtn = container.querySelector("[data-testid='custom-action']");
+    expect(actionBtn).not.toBeNull();
+  });
+
+  it("opens dialog and applies selection result", async () => {
+    const [items] = createSignal(testItems);
+    const accessor = createMockAccessor(items);
+    const onValueChange = vi.fn();
+
+    const { container } = renderWithDialog(() => (
+      <SharedDataSelect
+        data={accessor}
+        value={1}
+        onValueChange={onValueChange}
+        dialog={{
+          component: TestDialogComponent,
+          props: { confirmKeys: [2] },
+          option: { header: "Select Item" },
+        }}
+      >
+        <SharedDataSelect.ItemTemplate>
+          {(item: TestItem) => <span>{item.name}</span>}
+        </SharedDataSelect.ItemTemplate>
+      </SharedDataSelect>
+    ));
+
+    // Click search action button to open dialog
+    const searchBtn = container.querySelector("[data-select-action]") as HTMLButtonElement;
+    expect(searchBtn).not.toBeNull();
+    searchBtn.click();
+
+    // Confirm in dialog
+    await vi.waitFor(() => {
+      const confirmBtn = document.querySelector("[data-testid='dialog-confirm']") as HTMLButtonElement;
+      expect(confirmBtn).not.toBeNull();
+      confirmBtn.click();
+    });
+
+    await vi.waitFor(() => {
+      expect(onValueChange).toHaveBeenCalledWith(2);
+    });
+  });
+
+  it("passes selectedKeys to dialog component", async () => {
+    const [items] = createSignal(testItems);
+    const accessor = createMockAccessor(items);
+
+    const { container } = renderWithDialog(() => (
+      <SharedDataSelect
+        data={accessor}
+        value={3}
+        onValueChange={() => {}}
+        dialog={{
+          component: TestDialogComponent,
+          props: { confirmKeys: [] },
+        }}
+      >
+        <SharedDataSelect.ItemTemplate>
+          {(item: TestItem) => <span>{item.name}</span>}
+        </SharedDataSelect.ItemTemplate>
+      </SharedDataSelect>
+    ));
+
+    const searchBtn = container.querySelector("[data-select-action]") as HTMLButtonElement;
+    searchBtn.click();
+
+    await vi.waitFor(() => {
+      const selectedKeys = document.querySelector("[data-testid='selected-keys']");
+      expect(selectedKeys?.textContent).toBe("[3]");
+
+      const selectMode = document.querySelector("[data-testid='select-mode']");
+      expect(selectMode?.textContent).toBe("single");
+    });
+  });
+});

package/tests/components/features/shared-data/SharedDataSelectList.spec.tsx

@@ -1,8 +1,10 @@
-import { afterEach, describe, it, expect, vi } from "vitest";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@solidjs/testing-library";
 import { createSignal } from "solid-js";
 import { SharedDataSelectList } from "@simplysm/solid";
 import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // SharedDataAccessor mock factory
 function createMockAccessor<T>(
@@ -25,10 +27,20 @@ function createMockAccessor<T>(
 
 // DialogProvider wrapper
 function renderWithDialog(ui: () => import("solid-js").JSX.Element) {
-  return render(() => <DialogProvider>{ui()}</DialogProvider>);
+  return render(() => (
+    <ConfigProvider clientName="test">
+      <I18nProvider>
+        <DialogProvider>{ui()}</DialogProvider>
+      </I18nProvider>
+    </ConfigProvider>
+  ));
 }
 
 describe("SharedDataSelectList", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   afterEach(() => {
     cleanup();
   });