@simplysm/solid 13.0.72 → 13.0.74

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();
   });

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

@@ -1,14 +1,21 @@
 import { render, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
 
 describe("Notification Live Region", () => {
+  beforeEach(() => {
+    localStorage.setItem("testApp.i18n-locale", JSON.stringify("en"));
+  });
+
   it("Provider has live region with role=status", () => {
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>content</NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>content</NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -21,12 +28,14 @@ describe("Notification Live Region", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -42,7 +51,9 @@ describe("Notification Live Region", () => {
   it("live region is visually hidden (sr-only)", () => {
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>content</NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>content</NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 

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

@@ -1,17 +1,23 @@
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 import { NotificationBanner } from "../../../../src/components/feedback/notification/NotificationBanner";
 import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
 
 describe("NotificationBanner", () => {
+  beforeEach(() => {
+    localStorage.setItem("testApp.i18n-locale", JSON.stringify("en"));
+  });
   it("does not display banner when no notification", () => {
     const { container } = render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -23,13 +29,15 @@ describe("NotificationBanner", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -48,13 +56,15 @@ describe("NotificationBanner", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -79,13 +89,15 @@ describe("NotificationBanner", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -102,13 +114,15 @@ describe("NotificationBanner", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -126,13 +140,15 @@ describe("NotificationBanner", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -160,13 +176,15 @@ describe("NotificationBanner", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBanner />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBanner />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 

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

@@ -2,6 +2,7 @@ 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 { NotificationBell } from "../../../../src/components/feedback/notification/NotificationBell";
 import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
 
@@ -18,9 +19,11 @@ describe("NotificationBell", () => {
   it("renders button", () => {
     const { container } = render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -30,9 +33,11 @@ describe("NotificationBell", () => {
   it("does not show badge when there are no notifications", () => {
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -45,13 +50,15 @@ describe("NotificationBell", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -69,13 +76,15 @@ describe("NotificationBell", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -95,13 +104,15 @@ describe("NotificationBell", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -123,13 +134,15 @@ describe("NotificationBell", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -144,9 +157,11 @@ describe("NotificationBell", () => {
   it("sets aria-haspopup and aria-expanded correctly", async () => {
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -166,13 +181,15 @@ describe("NotificationBell", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -196,13 +213,15 @@ describe("NotificationBell", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-          <NotificationBell />
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+            <NotificationBell />
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));