Merge branch 'release' into feat/state-inspector-context-menu

appsmithorg · Feb 14, 2025 · 060aff5 · 060aff5
2 parents 6424b6f + 0e67bbc
commit 060aff5
Show file tree

Hide file tree

Showing 7 changed files with 401 additions and 19 deletions.
diff --git a/app/client/src/components/formControls/DropDownControl.test.tsx b/app/client/src/components/formControls/DropDownControl.test.tsx
@@ -6,6 +6,7 @@ import "@testing-library/jest-dom";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import type { SelectOptionProps } from "@appsmith/ads";
+import type { ReduxAction } from "actions/ReduxActionTypes";
 
 const mockStore = configureStore([]);
 
@@ -221,11 +222,14 @@ describe("DropDownControl grouping tests", () => {
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let store: any;
+  const formName = "GroupingTestForm";
 
   beforeEach(() => {
     store = mockStore({
       form: {
-        GroupingTestForm: { values: { actionConfiguration: { testPath: [] } } },
+        [formName]: {
+          values: { actionConfiguration: { testPath: { data: "" } } },
+        },
       },
     });
   });
@@ -295,6 +299,220 @@ describe("DropDownControl grouping tests", () => {
     expect(group2Option).toBeInTheDocument();
     expect(othersOption).toBeInTheDocument();
   });
+
+  it("should append group identifiers to values when appendGroupIdentifierToValue is true", async () => {
+    const mockOptionGroupConfig = {
+      group1: { label: "Group 1", children: [] },
+      group2: { label: "Group 2", children: [] },
+    };
+
+    const mockOptions = [
+      {
+        label: "Option 1",
+        value: "1",
+        optionGroupType: "group1",
+        children: [],
+      },
+      {
+        label: "Option 2",
+        value: "2",
+        children: [],
+      },
+      {
+        label: "Option 3",
+        value: "3",
+        optionGroupType: "group2",
+        children: [],
+      },
+    ];
+
+    const props = {
+      ...dropDownProps,
+      options: mockOptions,
+      optionGroupConfig: mockOptionGroupConfig,
+      appendGroupIdentifierToValue: true,
+      isMultiSelect: false,
+    };
+
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...props} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+
+    // Open dropdown
+    const dropdownSelect = await waitFor(async () =>
+      screen.findByTestId("t--dropdown-actionConfiguration.testPath"),
+    );
+
+    fireEvent.mouseDown(dropdownSelect.querySelector(".rc-select-selector")!);
+
+    // Select Option 1 (from group1)
+    const option1 = screen.getByText("Option 1");
+
+    fireEvent.click(option1);
+
+    const actions = store.getActions();
+
+    expect(actions[actions.length - 1].payload).toEqual("group1:1");
+
+    // // Select Option 2 (from others group)
+    fireEvent.mouseDown(dropdownSelect.querySelector(".rc-select-selector")!);
+
+    const option2 = screen.getByText("Option 2");
+
+    fireEvent.click(option2);
+
+    expect(actions[actions.length - 1].payload).toEqual("others:2");
+  });
+
+  it("should handle multi-select with group identifiers correctly", async () => {
+    const mockOptionGroupConfig = {
+      group1: { label: "Group 1", children: [] },
+      group2: { label: "Group 2", children: [] },
+    };
+
+    const mockOptions = [
+      {
+        label: "Option 1",
+        value: "1",
+        optionGroupType: "group1",
+        children: [],
+      },
+      {
+        label: "Option 2",
+        value: "2",
+        children: [],
+      },
+      {
+        label: "Option 3",
+        value: "3",
+        optionGroupType: "group2",
+        children: [],
+      },
+    ];
+
+    const props = {
+      ...dropDownProps,
+      options: mockOptions,
+      optionGroupConfig: mockOptionGroupConfig,
+      appendGroupIdentifierToValue: true,
+      isMultiSelect: true,
+    };
+
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...props} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+
+    // Open dropdown
+    const dropdownSelect = await waitFor(async () =>
+      screen.findByTestId("t--dropdown-actionConfiguration.testPath"),
+    );
+
+    fireEvent.mouseDown(dropdownSelect.querySelector(".rc-select-selector")!);
+
+    // Select multiple options
+    const option1 = screen.getByText("Option 1");
+    const option2 = screen.getByText("Option 2");
+
+    fireEvent.click(option1);
+    fireEvent.click(option2);
+
+    // Verify the stored values include group identifiers
+    let actions = store.getActions();
+    // store the values of last 2 actions in a variable
+    const lastTwoActions = actions
+      .slice(-2)
+      .map((action: ReduxAction<unknown>) => action.payload);
+
+    expect(lastTwoActions).toEqual([["group1:1"], ["others:2"]]);
+
+    // Test removal of an option
+    const selectedOption1 = screen.getByText("Option 1");
+
+    fireEvent.click(selectedOption1);
+    actions = store.getActions();
+
+    // Verify the option was removed correctly
+    expect(actions[actions.length - 1].payload).toEqual(["group1:1"]);
+  });
+
+  it("should handle edge cases with appendGroupIdentifierToValue", async () => {
+    const mockOptionGroupConfig = {
+      group1: { label: "Group 1", children: [] },
+    };
+
+    const mockOptions = [
+      {
+        label: "Option with colon",
+        value: "value:with:colon",
+        optionGroupType: "group1",
+        children: [],
+      },
+      {
+        label: "Option without group",
+        value: "no_group_value",
+        children: [],
+      },
+    ];
+
+    const props = {
+      ...dropDownProps,
+      options: mockOptions,
+      optionGroupConfig: mockOptionGroupConfig,
+      appendGroupIdentifierToValue: true,
+      isMultiSelect: true,
+    };
+
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...props} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+
+    // Open dropdown
+    const dropdownSelect = await waitFor(async () =>
+      screen.findByTestId("t--dropdown-actionConfiguration.testPath"),
+    );
+
+    fireEvent.mouseDown(dropdownSelect.querySelector(".rc-select-selector")!);
+
+    // Select both options
+    const option1 = screen.getByText("Option with colon");
+    const option2 = screen.getByText("Option without group");
+
+    fireEvent.click(option1);
+    fireEvent.click(option2);
+
+    // Verify the stored values handle special cases correctly
+    let actions = store.getActions();
+    const lastTwoActions = actions
+      .slice(-2)
+      .map((action: ReduxAction<unknown>) => action.payload);
+
+    expect(lastTwoActions).toEqual([
+      ["group1:value:with:colon"],
+      ["others:no_group_value"],
+    ]);
+
+    // Test removal of an option
+    const selectedOption1 = screen.getByText("Option with colon");
+
+    fireEvent.click(selectedOption1);
+    actions = store.getActions();
+
+    expect(actions[actions.length - 1].payload).toEqual([
+      "group1:value:with:colon",
+    ]);
+  });
 });
 
 describe("DropdownControl Single select tests", () => {