fix: Updating JSFunctionSettings unit test to fix failure (#40480)

## Description

Updating JSFunctionSettings unit test to fix failure

Fixes [#39833](https://github.com/appsmithorg/appsmith/issues/39833)

## Automation

/ok-to-test tags=""

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Tests have not run on the HEAD
d74c7de3a24a5a63d30f1ba013da89e299746fde yet
> <hr>Tue, 29 Apr 2025 16:47:47 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a "Run behavior" dropdown for actions, queries, and APIs,
allowing users to select between "On page load" and "Manual" execution
modes.
- Added descriptive subtext to run behavior options for improved
clarity.
- **Enhancements**
- Replaced the previous "Run on page load" switch with a more flexible
run behavior selector across the UI.
- Updated editor and settings panels to reflect the new run behavior
configuration.
- **Bug Fixes**
- Ensured consistent handling and synchronization of run behavior
settings throughout the application.
- **Documentation**
  - Updated tooltips and labels to clarify run behavior options.
- **Tests**
- Added and updated tests to cover the new run behavior feature and its
integration.
- **Chores**
- Updated internal configurations and test data to use the new run
behavior property.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/support/Pages/JSEditor.ts

@@ -51,10 +51,10 @@ export class JSEditor {
     "div.t--js-response-parse-error-call-out";
 
   private _onPageLoadSwitch = (functionName: string) =>
-    `.${functionName}-on-page-load-setting
+    `.${functionName}-run-behavior
-    input[role="switch"]`;
+    input[role="combobox"]`;
   private _onPageLoadSwitchStatus = (functionName: string) =>
-    `//div[contains(@class, '${functionName}-on-page-load-setting')]//label/input`;
+    `//div[contains(@class, '${functionName}-run-behavior-setting')]//label/input`;
 
   private _jsObjName = this.locator._activeEntityTab;
   public _jsObjTxt = this.locator._activeEntityTabInput;

app/client/src/PluginActionEditor/constants/PluginActionConstants.ts

@@ -12,11 +12,13 @@ export const RUN_BEHAVIOR = {
     label: "On page load",
     subText: "Query runs when the page loads or when manually triggered",
     value: ActionRunBehaviour.ON_PAGE_LOAD,
+    children: "On page load",
   },
   MANUAL: {
     label: "Manual",
     subText: "Query only runs when called in an event or JS with .run()",
     value: ActionRunBehaviour.MANUAL,
+    children: "Manual",
   },
 };
 

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx

@@ -2,14 +2,9 @@ import React from "react";
 import "@testing-library/jest-dom";
 import { render, screen } from "test/testUtils";
 import { JSFunctionSettings } from "./JSFunctionSettings";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { JSObjectFactory } from "test/factories/Actions/JSObject";
 import { ActionRunBehaviour } from "PluginActionEditor/constants/PluginActionConstants";
 
-// Mock the useFeatureFlag hook
-jest.mock("utils/hooks/useFeatureFlag");
-const mockUseFeatureFlag = useFeatureFlag as jest.Mock;
-
 const JSObject = JSObjectFactory.build();
 
 const actions = JSObject.actions;
@@ -21,9 +16,7 @@ describe("JSFunctionSettings", () => {
     jest.clearAllMocks();
   });
 
-  it("disables the switch when the component is disabled", () => {
+  it("disables the run behavior when the component is disabled", () => {
-    mockUseFeatureFlag.mockReturnValue(true);
-
     render(
       <JSFunctionSettings
         actions={actions}
@@ -35,9 +28,7 @@ describe("JSFunctionSettings", () => {
     expect(screen.getByLabelText(actions[0].name)).toBeDisabled();
   });
 
-  it("renders the correct number of switches for the actions", () => {
+  it("renders the correct number of dropdowns for the actions", () => {
-    mockUseFeatureFlag.mockReturnValue(true);
-
     render(
       <JSFunctionSettings
         actions={actions}
@@ -46,12 +37,10 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    expect(screen.getAllByRole("switch")).toHaveLength(actions.length);
+    expect(screen.getAllByRole(`combobox`)).toHaveLength(actions.length);
   });
 
-  it("renders the switch state correctly", () => {
+  it("renders the run behavior correctly", () => {
-    mockUseFeatureFlag.mockReturnValue(true);
-
     const updatedJSActions = [
       {
         ...actions[0],
@@ -71,10 +60,14 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    const switchElement1 = screen.getByLabelText(updatedJSActions[0].name);
+    const selectedItem1 = screen.getByText("On page load", {
-    const switchElement2 = screen.getByLabelText(updatedJSActions[1].name);
+      selector: ".myFun1-run-behavior-setting .rc-select-selection-item",
+    });
+    const selectedItem2 = screen.getByText("Manual", {
+      selector: ".myFun2-run-behavior-setting .rc-select-selection-item",
+    });
 
-    expect(switchElement1).toBeChecked();
+    expect(selectedItem1).toBeInTheDocument();
-    expect(switchElement2).not.toBeChecked();
+    expect(selectedItem2).toBeInTheDocument();
   });
 });

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx

@@ -45,7 +45,8 @@ interface FunctionSettingsRowProps extends Omit<Props, "actions"> {
 
 const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
   const [runBehavior, setRunBehavior] = useState(props.action.runBehavior);
-  const options = RUN_BEHAVIOR_VALUES as Omit<SelectOptionProps, "children">[];
+  const options = RUN_BEHAVIOR_VALUES as SelectOptionProps[];
+  const selectedValue = options.find((opt) => opt.value === runBehavior);
 
   const onSelectOptions = useCallback(
     (newRunBehavior: ActionRunBehaviour) => {
@@ -67,29 +68,30 @@ const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
   return (
     <Flex
       alignItems="center"
-      className={`t--async-js-function-settings ${props.action.name}-on-page-load-setting`}
+      className={`t--async-js-function-settings ${props.action.name}-run-behavior-setting`}
       gap="spaces-4"
       id={`${props.action.name}-settings`}
       justifyContent="space-between"
       key={props.action.id}
       w="100%"
     >
-      <Text renderAs="label">{props.action.name}</Text>
+      <Text htmlFor={props.action.id} renderAs="label">
+        {props.action.name}
+      </Text>
       <StyledSelect
         data-testid={`execute-on-page-load-${props.action.id}`}
-        defaultValue={runBehavior}
+        defaultValue={selectedValue}
+        id={props.action.id}
         isDisabled={props.disabled}
         listHeight={240}
         onSelect={onSelectOptions}
         size="sm"
-        value={runBehavior}
+        value={selectedValue}
-        virtual
       >
         {options.map((option) => (
           <Option
             aria-label={option.label}
             disabled={option.disabled}
-            isDisabled={option.isDisabled}
             key={option.value}
             label={option.label}
             value={option.value}