vueless 1.3.7-beta.1 → 1.3.7-beta.3

package/ui.dropdown-button/tests/UDropdownButton.test.ts

@@ -15,10 +15,8 @@ describe("UDropdownButton.vue", () => {
     { value: 3, label: "Option 3" },
   ];
 
-  // Props tests
   describe("Props", () => {
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Dropdown Button";
 
       const component = mount(UDropdownButton, {
@@ -31,8 +29,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("label")).toBe(label);
     });
 
-    // ModelValue prop
-    it("selects the correct option based on modelValue", async () => {
+    it("ModelValue – selects the correct option based on modelValue", async () => {
       const modelValue = 2;
 
       const component = mount(UDropdownButton, {
@@ -48,8 +45,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("label")).toBe(selectedOption?.label);
     });
 
-    // Multiple prop with modelValue
-    it("handles multiple selections correctly", async () => {
+    it("Multiple – handles multiple selections correctly", async () => {
       const modelValue = [1, 3];
 
       const component = mount(UDropdownButton, {
@@ -67,8 +63,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("label")).toBe(expectedLabel);
     });
 
-    // LabelDisplayCount prop
-    it("limits displayed labels based on labelDisplayCount", async () => {
+    it("LabelDisplayCount – limits displayed labels based on labelDisplayCount", async () => {
       const modelValue = [1, 2, 3];
       const labelDisplayCount = 1;
 
@@ -87,8 +82,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("label")).toBe(expectedLabel);
     });
 
-    // LabelDisplayCount prop with single value
-    it("correctly displays label when labelDisplayCount is 1 and only one value is selected", async () => {
+    it("LabelDisplayCount – displays label correctly with single value", async () => {
       const modelValue = [1];
       const labelDisplayCount = 1;
 
@@ -107,8 +101,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("label")).toBe(expectedLabel);
     });
 
-    // Variant prop
-    it("applies the correct variant class", async () => {
+    it("Variant – applies the correct variant class", async () => {
       const variants = ["solid", "outlined", "subtle", "soft", "ghost"];
 
       variants.forEach((variant) => {
@@ -123,8 +116,7 @@ describe("UDropdownButton.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -149,8 +141,7 @@ describe("UDropdownButton.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const sizes = ["2xs", "xs", "sm", "md", "lg", "xl"];
 
       sizes.forEach((size) => {
@@ -165,8 +156,7 @@ describe("UDropdownButton.vue", () => {
       });
     });
 
-    // Round prop
-    it("applies round class when round prop is true", () => {
+    it("Round – applies round class when round prop is true", () => {
       const round = true;
 
       const component = mount(UDropdownButton, {
@@ -179,8 +169,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("round")).toBe(round);
     });
 
-    // Square prop
-    it("applies square class when square prop is true", () => {
+    it("Square – applies square class when square prop is true", () => {
       const square = true;
 
       const component = mount(UDropdownButton, {
@@ -193,8 +182,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("square")).toBe(square);
     });
 
-    // Disabled prop
-    it("applies disabled attribute when disabled prop is true", () => {
+    it("Disabled – applies disabled attribute when disabled prop is true", () => {
       const disabled = true;
 
       const component = mount(UDropdownButton, {
@@ -207,8 +195,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("disabled")).toBe(disabled);
     });
 
-    // Block prop
-    it("applies class when prop is true", () => {
+    it("Block – applies class when prop is true", () => {
       const block = true;
       const expectedClass = "w-full";
 
@@ -223,8 +210,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).attributes("class")).toContain(expectedClass);
     });
 
-    // ToggleIcon prop (boolean: true)
-    it("shows default toggle icon when toggleIcon is true", () => {
+    it("ToggleIcon – shows default toggle icon when toggleIcon is true", () => {
       const toggleIcon = true;
 
       const component = mount(UDropdownButton, {
@@ -240,8 +226,7 @@ describe("UDropdownButton.vue", () => {
       expect(iconComponent.props("name")).toBe("keyboard_arrow_down");
     });
 
-    // ToggleIcon prop (boolean: false)
-    it("shows default toggle icon when toggleIcon is false", () => {
+    it("ToggleIcon – shows default toggle icon when toggleIcon is false", () => {
       const toggleIcon = false;
 
       const component = mount(UDropdownButton, {
@@ -256,8 +241,7 @@ describe("UDropdownButton.vue", () => {
       expect(iconComponent.exists()).toBe(false);
     });
 
-    // ToggleIcon prop (string)
-    it("shows custom toggle icon when toggleIcon is a string", () => {
+    it("ToggleIcon – shows custom toggle icon when toggleIcon is a string", () => {
       const toggleIcon = "custom_icon";
 
       const component = mount(UDropdownButton, {
@@ -273,8 +257,7 @@ describe("UDropdownButton.vue", () => {
       expect(iconComponent.props("name")).toBe(toggleIcon);
     });
 
-    // ID prop
-    it("applies the correct id attribute", () => {
+    it("ID – applies the correct id attribute", () => {
       const id = "test-dropdown-id";
 
       const component = mount(UDropdownButton, {
@@ -284,11 +267,10 @@ describe("UDropdownButton.vue", () => {
         },
       });
 
-      expect(component.findComponent(UButton).props("id")).toBe(id);
+      expect(component.attributes("id")).toBe(id);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-dropdown";
 
       const component = mount(UDropdownButton, {
@@ -301,8 +283,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).attributes("data-test")).toBe(dataTest);
     });
 
-    // OptionsLimit prop
-    it("passes optionsLimit prop to UListbox component", async () => {
+    it("OptionsLimit – passes optionsLimit prop to UListbox component", async () => {
       const optionsLimit = 2;
 
       const component = mount(UDropdownButton, {
@@ -335,8 +316,7 @@ describe("UDropdownButton.vue", () => {
       expect(options[0].text()).toBe("Option 2");
     });
 
-    // VisibleOptions prop
-    it("passes visibleOptions prop to UListbox component", async () => {
+    it("VisibleOptions – passes visibleOptions prop to UListbox component", async () => {
       const visibleOptions = 5;
 
       const component = mount(UDropdownButton, {
@@ -351,8 +331,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UListbox).props("visibleOptions")).toBe(visibleOptions);
     });
 
-    // GroupLabelKey prop
-    it("passes groupLabelKey prop to UListbox component", async () => {
+    it("GroupLabelKey – passes groupLabelKey prop to UListbox component", async () => {
       const groupLabelKey = "category";
       const groupedOptions = [
         { groupLabel: "Group 1", category: "group1" },
@@ -373,8 +352,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UListbox).props("groupLabelKey")).toBe(groupLabelKey);
     });
 
-    // CloseOnSelect prop
-    it("keeps dropdown open when closeOnSelect is false", async () => {
+    it("CloseOnSelect – keeps dropdown open when closeOnSelect is false", async () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,
@@ -391,12 +369,100 @@ describe("UDropdownButton.vue", () => {
 
       expect(component.findComponent(UListbox).exists()).toBe(true);
     });
+
+    it("XPosition – passes xPosition prop to dropdown", () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          xPosition: "right",
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("xPosition")).toBe("right");
+    });
+
+    it("YPosition – passes yPosition prop to dropdown", () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          yPosition: "top",
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("yPosition")).toBe("top");
+    });
+
+    it("LabelKey – uses custom label key for options", async () => {
+      const customOptions = [
+        { id: 1, name: "First" },
+        { id: 2, name: "Second" },
+      ];
+
+      const component = mount(UDropdownButton, {
+        props: {
+          options: customOptions,
+          labelKey: "name",
+          valueKey: "id",
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("labelKey")).toBe("name");
+    });
+
+    it("ValueKey – uses custom value key for options", async () => {
+      const customOptions = [
+        { id: 1, name: "First" },
+        { id: 2, name: "Second" },
+      ];
+
+      const component = mount(UDropdownButton, {
+        props: {
+          options: customOptions,
+          labelKey: "name",
+          valueKey: "id",
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("valueKey")).toBe("id");
+    });
+
+    it("GroupValueKey – passes groupValueKey prop to dropdown", () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          groupValueKey: "items",
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("groupValueKey")).toBe("items");
+    });
+
+    it("Searchable – passes searchable prop to dropdown", () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("searchable")).toBe(true);
+    });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
       const label = "Dropdown Button";
 
@@ -413,8 +479,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const label = "Dropdown Button";
       const slotText = "Left";
       const slotClass = "left-content";
@@ -433,8 +498,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Toggle slot
-    it("renders content from toggle slot", () => {
+    it("Toggle – renders content from toggle slot", () => {
       const label = "Dropdown Button";
       const slotText = "Toggle";
       const slotClass = "toggle-content";
@@ -453,8 +517,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Before-option slot
-    it("renders content from before-option slot", async () => {
+    it("Before – renders content from before-option slot", async () => {
       const label = "Dropdown Button";
       const slotText = "Before";
       const slotClass = "before-option-content";
@@ -478,8 +541,7 @@ describe("UDropdownButton.vue", () => {
       expect(beforeOptionSlot.text()).toBe(slotText);
     });
 
-    // Option slot
-    it("renders custom content from option slot", async () => {
+    it("Option – renders custom content from option slot", async () => {
       const label = "Dropdown Button";
       const slotClass = "custom-option-content";
 
@@ -502,8 +564,7 @@ describe("UDropdownButton.vue", () => {
       expect(customOptionSlot.text()).toBe("Custom Option 1");
     });
 
-    // After-option slot
-    it("renders content from after-option slot", async () => {
+    it("After – renders content from after-option slot", async () => {
       const label = "Dropdown Button";
       const slotText = "After";
       const slotClass = "after-option-content";
@@ -527,8 +588,7 @@ describe("UDropdownButton.vue", () => {
       expect(afterOptionSlot.text()).toBe(slotText);
     });
 
-    // Empty slot
-    it("renders custom content from empty slot", async () => {
+    it("Empty – renders custom content from empty slot", async () => {
       const label = "Dropdown Button";
       const slotContent = "No options available";
       const slotClass = "custom-empty";
@@ -553,10 +613,8 @@ describe("UDropdownButton.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event to open dropdown
-    it("opens dropdown when button is clicked", async () => {
+    it("Click – opens dropdown when button is clicked", async () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,
@@ -573,8 +631,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UListbox).exists()).toBe(true);
     });
 
-    // update:modelValue event
-    it("emits update:modelValue event when an option is selected", async () => {
+    it("update:modelValue – emits update:modelValue event when an option is selected", async () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,
@@ -595,8 +652,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]);
     });
 
-    // clickOption event
-    it("emits clickOption event when an option is clicked", async () => {
+    it("clickOption – emits clickOption event when an option is clicked", async () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,
@@ -617,8 +673,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.emitted("clickOption")?.[0]).toEqual([defaultOptions[1]]);
     });
 
-    // Close dropdown when clicking outside
-    it("closes dropdown when clicking outside", async () => {
+    it("Close – closes dropdown when clicking outside", async () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,
@@ -629,20 +684,81 @@ describe("UDropdownButton.vue", () => {
       await component.findComponent(UButton).trigger("click");
       expect(component.findComponent(UListbox).exists()).toBe(true);
 
-      // Directly call the hideOptions function
+      // Directly call the hide function
       // This is equivalent to what happens when clicking outside
-      component.vm.hideOptions();
+      component.vm.hide();
       await component.vm.$nextTick();
 
       // Dropdown should be closed
       expect(component.findComponent(UListbox).exists()).toBe(false);
     });
+
+    it("Open – emits open event when dropdown is opened", async () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      expect(component.emitted("open")).toBeTruthy();
+    });
+
+    it("Close – emits close event when dropdown is closed", async () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      component.vm.hide();
+      await component.vm.$nextTick();
+
+      expect(component.emitted("close")).toBeTruthy();
+    });
+
+    it("SearchChange – emits searchChange event when search value changes", async () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      dropdown.vm.$emit("searchChange", "test query");
+
+      expect(component.emitted("searchChange")).toBeTruthy();
+      expect(component.emitted("searchChange")?.[0]).toEqual(["test query"]);
+    });
+
+    it("Update:search – emits update:search event when search value updates", async () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      dropdown.vm.$emit("update:search", "new search");
+
+      expect(component.emitted("update:search")).toBeTruthy();
+      expect(component.emitted("update:search")?.[0]).toEqual(["new search"]);
+    });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,