test dropdown items update when ensemble storage changes

Author: anserwaseem

packages/runtime/src/widgets/Form/Dropdown.tsx

@@ -13,7 +13,7 @@ import type {
   EnsembleAction,
   Expression,
 } from "@ensembleui/react-framework";
-import { get, isEmpty, isNull, isObject, isString } from "lodash-es";
+import { get, isArray, isEmpty, isNull, isObject, isString } from "lodash-es";
 import { WidgetRegistry } from "../../registry";
 import type {
   EnsembleWidgetProps,
@@ -145,7 +145,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
   const options = useMemo(() => {
     let dropdownOptions: React.ReactNode[] | null = null;
 
-    if (values?.items) {
+    if (values?.items && isArray(values.items)) {
       const tempOptions = values.items.map((item) => {
         if (item.type === "group") {
           // Render a group item with sub-items
@@ -166,7 +166,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
         }
         return (
           <Select.Option
-            className={`${values.id || ""}_option`}
+            className={`${values?.id || ""}_option`}
             key={item.value}
             value={item.value}
           >

packages/runtime/src/widgets/Form/__tests__/Dropdown.test.tsx

@@ -198,5 +198,110 @@ describe("Dropdown Widget", () => {
       );
     });
   });
+
+  test("dropdown items update when ensemble storage changes", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "Dropdown",
+            properties: {
+              id: "dynamicItems",
+              label: "Dynamic Items",
+              items: `\${ensemble.storage.get('dropdownItems')}`,
+            },
+          },
+          {
+            name: "Button",
+            properties: {
+              label: "Add Item",
+              onTap: {
+                executeCode: `
+                  const currentItems = ensemble.storage.get('dropdownItems') || [];
+                  ensemble.storage.set('dropdownItems', [
+                    ...currentItems,
+                    { label: 'New Item', value: 'newItem' }
+                  ]);
+                `,
+              },
+            },
+          },
+          {
+            name: "Button",
+            properties: {
+              label: "Remove Item",
+              onTap: {
+                executeCode: `
+                  const currentItems = ensemble.storage.get('dropdownItems') || [];
+                  const filteredItems = currentItems.filter(item => item.value !== 'newItem');
+                  ensemble.storage.set('dropdownItems', filteredItems);
+                `,
+              },
+            },
+          },
+          {
+            name: "Button",
+            properties: {
+              label: "Set Initial Items",
+              onTap: {
+                executeCode: `
+                  ensemble.storage.set('dropdownItems', [
+                    { label: 'Initial Item 1', value: 'initial1' },
+                    { label: 'Initial Item 2', value: 'initial2' }
+                  ]);
+                `,
+              },
+            },
+          },
+          ...defaultFormButton,
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+
+    const dropdown = screen.getByRole("combobox");
+    const setInitialButton = screen.getByText("Set Initial Items");
+    const addItemButton = screen.getByText("Add Item");
+    const removeItemButton = screen.getByText("Remove Item");
+
+    // Set initial items
+    fireEvent.click(setInitialButton);
+
+    // Open dropdown to see initial items
+    userEvent.click(dropdown);
+    await waitFor(() => {
+      expect(screen.getByTitle("Initial Item 1")).toBeInTheDocument();
+      expect(screen.getByTitle("Initial Item 2")).toBeInTheDocument();
+    });
+
+    // Close dropdown
+    userEvent.click(dropdown);
+
+    // Add a new item
+    fireEvent.click(addItemButton);
+
+    // Open dropdown to verify new item was added
+    userEvent.click(dropdown);
+    await waitFor(() => {
+      expect(screen.getByTitle("Initial Item 1")).toBeInTheDocument();
+      expect(screen.getByTitle("Initial Item 2")).toBeInTheDocument();
+      expect(screen.getByTitle("New Item")).toBeInTheDocument();
+    });
+
+    // Close dropdown
+    userEvent.click(dropdown);
+
+    // Remove the new item
+    fireEvent.click(removeItemButton);
+
+    // Open dropdown to verify item was removed
+    userEvent.click(dropdown);
+    await waitFor(() => {
+      expect(screen.getByTitle("Initial Item 1")).toBeInTheDocument();
+      expect(screen.getByTitle("Initial Item 2")).toBeInTheDocument();
+      expect(screen.queryByText("New Item")).not.toBeInTheDocument();
+    });
+  });
 });
 /* eslint-enable react/no-children-prop */