testing handleHostStoreChange()

Author: forman

chartlets.js/packages/lib/src/actions/handleHostStoreChange.ts

@@ -11,6 +11,7 @@ import { formatObjPath } from "@/utils/objPath";
 import { invokeCallbacks } from "@/actions/helpers/invokeCallbacks";
 import type { ContributionState } from "@/types/state/contribution";
 import type { HostStore } from "@/types/state/options";
+import type { store } from "@/store";
 
 /**
  * A reference to a property of an input of a callback of a contribution.
@@ -23,12 +24,16 @@ export interface PropertyRef extends ContribRef, CallbackRef, InputRef {
 export function handleHostStoreChange() {
   const { extensions, configuration, contributionsRecord } = store.getState();
   const { hostStore } = configuration;
-  if (!hostStore || extensions.length === 0) {
-    // Exit if no host store configured or
-    // there are no extensions (yet)
+  if (!hostStore) {
+    // Exit if no host store configured.
+    // Actually, we should not come here.
     return;
   }
   synchronizeThemeMode(hostStore);
+  if (extensions.length === 0) {
+    // Exit if there are no extensions (yet)
+    return;
+  }
   const propertyRefs = getHostStorePropertyRefs();
   if (!propertyRefs || propertyRefs.length === 0) {
     // Exit if there are is nothing to be changed

chartlets.js/packages/lib/src/actions/handleHostStoreChanges.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { store } from "@/store";
+import { handleHostStoreChange } from "./handleHostStoreChange";
+
+describe("handleHostStoreChange", () => {
+  let listeners: (() => void)[] = [];
+  let hostState: Record<string, unknown> = {};
+  const hostStore = {
+    get: (key: string) => hostState[key],
+    set: (key: string, value: unknown) => {
+      hostState = { ...hostState, [key]: value };
+      listeners.forEach((l) => void l());
+    },
+    subscribe: (_l: () => void) => {
+      listeners.push(_l);
+    },
+  };
+
+  beforeEach(() => {
+    listeners = [];
+    hostState = {};
+  });
+
+  it("should do nothing without host store", () => {
+    store.setState({ configuration: {} });
+    const oldState = store.getState();
+    handleHostStoreChange();
+    const newState = store.getState();
+    expect(newState).toBe(oldState);
+    expect(newState).toEqual(oldState);
+  });
+
+  it("should synchronize theme mode", () => {
+    store.setState({ configuration: { hostStore } });
+    expect(store.getState().themeMode).toBeUndefined();
+    hostStore.set("themeMode", "light");
+    handleHostStoreChange();
+    expect(store.getState().themeMode).toEqual("light");
+  });
+
+  it("should generate callback requests", () => {
+    const extensions = [{ name: "e0", version: "0", contributes: ["panels"] }];
+    store.setState({
+      configuration: { hostStore },
+      extensions,
+      contributionsResult: {
+        status: "ok",
+        data: {
+          extensions,
+          contributions: {
+            panels: [
+              {
+                name: "p0",
+                extension: "e0",
+                layout: {
+                  function: {
+                    name: "layout",
+                    parameters: [],
+                    return: {},
+                  },
+                  inputs: [],
+                  outputs: [],
+                },
+                callbacks: [
+                  {
+                    function: {
+                      name: "callback",
+                      parameters: [],
+                      return: {},
+                    },
+                    inputs: [{ id: "@app", property: "variableName" }],
+                    outputs: [{ id: "select", property: "value" }],
+                  },
+                ],
+                initialState: {},
+              },
+            ],
+          },
+        },
+      },
+    });
+    hostStore.set("variableName", "CHL");
+    handleHostStoreChange();
+  });
+});