From 3867bcf72633a94000811c33e8d69e7aa7f41d7d Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 30 Apr 2025 03:07:56 +0530 Subject: [PATCH 1/2] 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="" ### :mag: Cypress test results > [!WARNING] > Tests have not run on the HEAD d74c7de3a24a5a63d30f1ba013da89e299746fde yet >
Tue, 29 Apr 2025 16:47:47 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- app/client/cypress/support/Pages/JSEditor.ts | 6 ++-- .../constants/PluginActionConstants.ts | 2 ++ .../components/JSFunctionSettings.test.tsx | 31 +++++++------------ .../components/JSFunctionSettings.tsx | 16 +++++----- 4 files changed, 26 insertions(+), 29 deletions(-) diff --git a/app/client/cypress/support/Pages/JSEditor.ts b/app/client/cypress/support/Pages/JSEditor.ts index 85bc32fcd3..03dc0ca510 100644 --- a/app/client/cypress/support/Pages/JSEditor.ts +++ b/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 - input[role="switch"]`; + `.${functionName}-run-behavior + 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; diff --git a/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts b/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts index ce50c573b8..cb3947afcd 100644 --- a/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts +++ b/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", }, }; diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx index 5dff0fde77..a27f813cc8 100644 --- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx +++ b/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", () => { - mockUseFeatureFlag.mockReturnValue(true); - + it("disables the run behavior when the component is disabled", () => { render( { expect(screen.getByLabelText(actions[0].name)).toBeDisabled(); }); - it("renders the correct number of switches for the actions", () => { - mockUseFeatureFlag.mockReturnValue(true); - + it("renders the correct number of dropdowns for the actions", () => { render( { />, ); - expect(screen.getAllByRole("switch")).toHaveLength(actions.length); + expect(screen.getAllByRole(`combobox`)).toHaveLength(actions.length); }); - it("renders the switch state correctly", () => { - mockUseFeatureFlag.mockReturnValue(true); - + it("renders the run behavior correctly", () => { const updatedJSActions = [ { ...actions[0], @@ -71,10 +60,14 @@ describe("JSFunctionSettings", () => { />, ); - const switchElement1 = screen.getByLabelText(updatedJSActions[0].name); - const switchElement2 = screen.getByLabelText(updatedJSActions[1].name); + const selectedItem1 = screen.getByText("On page load", { + 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(switchElement2).not.toBeChecked(); + expect(selectedItem1).toBeInTheDocument(); + expect(selectedItem2).toBeInTheDocument(); }); }); diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx index 169ff0d3ed..8a4aa39593 100644 --- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx +++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx @@ -45,7 +45,8 @@ interface FunctionSettingsRowProps extends Omit { const FunctionSettingRow = (props: FunctionSettingsRowProps) => { const [runBehavior, setRunBehavior] = useState(props.action.runBehavior); - const options = RUN_BEHAVIOR_VALUES as Omit[]; + 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 ( - {props.action.name} + + {props.action.name} + {options.map((option) => (