fix: evaluation of navigateScreen (#977)

fix evaluation of navigateScreen

Author: sagardspeed2

.changeset/blue-cheetahs-deliver.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+fix navigateScreen action screen name and inputs evaluation

packages/runtime/src/runtime/hooks/__tests__/useEnsembleAction.test.tsx

@@ -1,10 +1,21 @@
 /* eslint import/first: 0 */
 import { act, renderHook } from "@testing-library/react";
-import { ScreenContextProvider } from "@ensembleui/react-framework";
+import {
+  ScreenContextProvider,
+  ApplicationContextProvider,
+} from "@ensembleui/react-framework";
 import { useEnsembleAction } from "../useEnsembleAction";
+import { useNavigateScreen } from "../useNavigateScreen";
 
 jest.mock("react-markdown", jest.fn());
-jest.mock("react-router-dom");
+
+const mockNavigate = jest.fn();
+const mockLocation = jest.fn();
+
+jest.mock("react-router-dom", () => ({
+  useNavigate: () => mockNavigate,
+  useLocation: () => mockLocation,
+}));
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ScreenContextProvider
@@ -61,3 +72,143 @@ describe("Test cases for useEnsembleAction Hook", () => {
     expect(execResult).toBe(2);
   });
 });
+
+const navigateScreenWrapper: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => (
+  <ApplicationContextProvider
+    app={{
+      screens: [
+        { name: "Home", id: "home", body: { name: "Button", properties: {} } },
+        {
+          name: "Details",
+          id: "details",
+          body: { name: "Button", properties: {} },
+        },
+      ],
+      customWidgets: [],
+      home: {
+        name: "Home",
+        id: "home",
+        body: { name: "Button", properties: {} },
+      },
+      themes: {},
+      id: "testApp",
+      scripts: [],
+    }}
+  >
+    <ScreenContextProvider
+      context={{
+        widgets: {
+          myWidget: {
+            values: {
+              value: "home",
+            },
+            invokable: {
+              id: "myWidget",
+            },
+          },
+        },
+        data: {},
+        storage: {},
+      }}
+      screen={{
+        id: "home",
+        name: "Home",
+        body: { name: "Button", properties: {} },
+      }}
+    >
+      {children}
+    </ScreenContextProvider>
+  </ApplicationContextProvider>
+);
+
+describe("Test cases for useNavigateScreen Hook", () => {
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  it("should not navigate when no action is provided", () => {
+    const { result } = renderHook(() => useNavigateScreen(undefined), {
+      wrapper: navigateScreenWrapper,
+    });
+
+    act(() => {
+      result.current?.callback();
+    });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("should navigate when action is a string", () => {
+    const { result } = renderHook(
+      // eslint-disable-next-line no-template-curly-in-string
+      () => useNavigateScreen("home"),
+      {
+        wrapper: navigateScreenWrapper,
+      },
+    );
+
+    act(() => {
+      result.current?.callback();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith("/home", { state: undefined });
+  });
+
+  it("should navigate when action name is a variable", () => {
+    const { result } = renderHook(
+      // eslint-disable-next-line no-template-curly-in-string
+      () => useNavigateScreen("${myWidget.value}"),
+      {
+        wrapper: navigateScreenWrapper,
+      },
+    );
+
+    act(() => {
+      result.current?.callback();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith("/home", { state: undefined });
+  });
+
+  it("should navigate with inputs when action is an object", () => {
+    const action = {
+      name: "Details",
+      inputs: {
+        id: 123,
+        category: "test",
+      },
+    };
+
+    const { result } = renderHook(() => useNavigateScreen(action), {
+      wrapper: navigateScreenWrapper,
+    });
+
+    act(() => {
+      result.current?.callback();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith("/details", {
+      state: {
+        id: 123,
+        category: "test",
+      },
+    });
+  });
+
+  it("should not navigate when screen is not found", () => {
+    const { result } = renderHook(
+      () => useNavigateScreen("NonExistentScreen"),
+      {
+        wrapper: navigateScreenWrapper,
+      },
+    );
+
+    act(() => {
+      result.current?.callback();
+    });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});

packages/runtime/src/runtime/hooks/useNavigateScreen.ts

@@ -3,13 +3,17 @@ import { isNil, isString, merge, cloneDeep } from "lodash-es";
 import { useNavigate } from "react-router-dom";
 import {
   useCommandCallback,
-  evaluate,
   useScreenModel,
   useApplicationContext,
   evaluateDeep,
 } from "@ensembleui/react-framework";
 import type { EnsembleActionHook } from "./useEnsembleAction";
 
+type EvaluatedData = {
+  screenName: string;
+  inputs?: { [key: string]: unknown };
+};
+
 export const useNavigateScreen: EnsembleActionHook<NavigateScreenAction> = (
   action,
 ) => {
@@ -23,26 +27,26 @@ export const useNavigateScreen: EnsembleActionHook<NavigateScreenAction> = (
 
       const context = merge({}, evalContext, args[0]);
 
-      const screenName = isString(action) ? action : action.name;
-      const evaluatedName = evaluate<string>(
-        { model: screenModel },
-        screenName,
+      const { screenName, inputs } = evaluateDeep(
+        {
+          screenName: isString(action) ? action : action.name,
+          inputs:
+            !isString(action) && !isNil(action.inputs)
+              ? cloneDeep(action.inputs)
+              : undefined,
+        },
+        screenModel,
         context,
-      );
+      ) as EvaluatedData;
 
       const matchingScreen = appContext?.application?.screens.find(
-        (s) => s.name?.toLowerCase() === evaluatedName.toLowerCase(),
+        (s) => s.name?.toLowerCase() === screenName.toLowerCase(),
       );
 
       if (!matchingScreen?.name) return;
 
-      const evaluatedInputs =
-        !isString(action) && !isNil(action.inputs)
-          ? evaluateDeep(cloneDeep(action.inputs), screenModel, context)
-          : undefined;
-
       navigate(`/${matchingScreen.name.toLowerCase()}`, {
-        state: evaluatedInputs,
+        state: inputs,
       });
     },
     { navigate },