vueless 1.3.1 → 1.3.2-beta.0

package/ui.navigation-pagination/tests/UPagination.test.ts

@@ -8,10 +8,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types";
 
 describe("UPagination.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies the correct variant to buttons", async () => {
+    it("Variant – applies the correct variant to buttons", async () => {
       const variants = ["solid", "outlined", "subtle", "soft", "ghost"];
 
       variants.forEach((variant) => {
@@ -32,8 +30,7 @@ describe("UPagination.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size to buttons", async () => {
+    it("Size – applies the correct size to buttons", async () => {
       const sizes = {
         sm: "text-small",
         md: "text-medium",
@@ -59,8 +56,7 @@ describe("UPagination.vue", () => {
       });
     });
 
-    // ModelValue prop
-    it("correctly highlights the current page", () => {
+    it("ModelValue – correctly highlights the current page", () => {
       const currentPage = 3;
 
       const component = mount(UPagination, {
@@ -78,8 +74,7 @@ describe("UPagination.vue", () => {
       expect(activeButton?.props("variant")).toBe("solid");
     });
 
-    // Total and perPage props
-    it("calculates the correct number of pages", () => {
+    it("Total – calculates the correct number of pages", () => {
       const total = 100;
       const perPage = 10;
 
@@ -104,8 +99,7 @@ describe("UPagination.vue", () => {
       expect(pageButtons.length).toBeLessThanOrEqual(expectedAmountOfButtons);
     });
 
-    // Limit prop
-    it("respects the limit of visible pages", () => {
+    it("Limit – respects the limit of visible pages", () => {
       const limit = 3;
 
       const component = mount(UPagination, {
@@ -127,8 +121,7 @@ describe("UPagination.vue", () => {
       expect(pageButtons.length).toBeLessThanOrEqual(limit);
     });
 
-    // FirstLabel, PrevLabel, NextLabel, LastLabel props
-    it("displays custom navigation labels", () => {
+    it("FirstLabel, PrevLabel, NextLabel, LastLabel – displays custom navigation labels", () => {
       const firstLabel = "First";
       const prevLabel = "Prev";
       const nextLabel = "Next";
@@ -154,8 +147,7 @@ describe("UPagination.vue", () => {
       expect(buttons[buttons.length - 1].text()).toBe(lastLabel);
     });
 
-    // Disabled prop
-    it("disables all buttons when disabled prop is true", () => {
+    it("Disabled – disables all buttons when disabled prop is true", () => {
       const disabled = true;
 
       const component = mount(UPagination, {
@@ -181,8 +173,7 @@ describe("UPagination.vue", () => {
       });
     });
 
-    // Ellipsis prop
-    it("shows ellipsis when ellipsis prop is true", () => {
+    it("Ellipsis – shows ellipsis when ellipsis prop is true", () => {
       const ellipsis = true;
       const expectedEllipsis = "…";
 
@@ -199,8 +190,7 @@ describe("UPagination.vue", () => {
       expect(component.html()).toContain(expectedEllipsis);
     });
 
-    // ShowFirst and ShowLast props
-    it("hides first/last buttons when showFirst/showLast props are false", () => {
+    it("ShowFirst – hides first/last buttons when showFirst/showLast props are false", () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 5,
@@ -220,8 +210,7 @@ describe("UPagination.vue", () => {
       expect(lastButton.findComponent(UIcon).props("name")).toContain("chevron_right");
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-pagination";
 
       const component = mount(UPagination, {
@@ -240,10 +229,8 @@ describe("UPagination.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // First slot
-    it("renders content from first slot", () => {
+    it("First – renders content from first slot", () => {
       const slotContent = "Custom First";
       const slotClass = "first-content";
 
@@ -262,8 +249,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Prev slot
-    it("renders content from prev slot", () => {
+    it("Prev – renders content from prev slot", () => {
       const slotContent = "Custom Prev";
       const slotClass = "prev-content";
 
@@ -282,8 +268,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Ellipsis slot
-    it("renders content from ellipsis slot", () => {
+    it("Ellipsis – renders content from ellipsis slot", () => {
       const slotContent = "......";
       const slotClass = "ellipsis-content";
 
@@ -303,8 +288,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Next slot
-    it("renders content from next slot", () => {
+    it("Next – renders content from next slot", () => {
       const slotContent = "Custom Next";
       const slotClass = "next-content";
 
@@ -323,8 +307,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Last slot
-    it("renders content from last slot", () => {
+    it("Last – renders content from last slot", () => {
       const slotContent = "Custom Last";
       const slotClass = "last-content";
 
@@ -344,10 +327,8 @@ describe("UPagination.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Update:modelValue event
-    it("emits update:modelValue event when page is changed", async () => {
+    it("Update:modelValue – emits update:modelValue event when page is changed", async () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 1,
@@ -370,8 +351,7 @@ describe("UPagination.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]); // Second button value
     });
 
-    // Navigation button clicks
-    it("navigates to correct pages when navigation buttons are clicked", async () => {
+    it("Navigation – navigates to correct pages when navigation buttons are clicked", async () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 5,
@@ -400,10 +380,8 @@ describe("UPagination.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // paginationRef
-    it("exposes paginationRef", () => {
+    it("paginationRef – exposes paginationRef", () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 1,

package/ui.navigation-progress/tests/UProgress.test.ts

@@ -7,10 +7,8 @@ import UStepperProgress from "../UStepperProgress.vue";
 import type { Props } from "../types";
 
 describe("UProgress.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Value prop
-    it("sets the correct value for progress", () => {
+    it("Value – sets the correct value for progress", () => {
       const value = 50;
       const max = 100;
 
@@ -28,8 +26,7 @@ describe("UProgress.vue", () => {
       expect(progressElement.attributes("max")).toBe(max.toString());
     });
 
-    // Max prop (number)
-    it("sets the correct max value for progress", () => {
+    it("Max – sets the correct max value for progress", () => {
       const value = 5;
       const max = 10;
 
@@ -46,8 +43,7 @@ describe("UProgress.vue", () => {
       expect(progressElement.attributes("max")).toBe(max.toString());
     });
 
-    // Max prop (array)
-    it("handles array of steps for max prop", () => {
+    it("Max – handles array of steps for max prop", () => {
       const value = 1;
       const max = ["Step 1", "Step 2", "Step 3"];
 
@@ -65,8 +61,7 @@ describe("UProgress.vue", () => {
       expect(activeStep.text()).toBe(max[value]);
     });
 
-    // Size prop
-    it("applies the correct size class", () => {
+    it("Size – applies the correct size class", () => {
       const size = {
         xs: "h-0.5",
         sm: "h-1",
@@ -91,8 +86,7 @@ describe("UProgress.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", () => {
+    it("Color – applies the correct color class", () => {
       const colors = [
         "primary",
         "secondary",
@@ -121,8 +115,7 @@ describe("UProgress.vue", () => {
       });
     });
 
-    // Variant prop
-    it("renders the correct component based on variant", () => {
+    it("Variant – renders the correct component based on variant", () => {
       const value = 50;
       const max = 100;
       const variants = ["progress", "stepper"];
@@ -146,8 +139,7 @@ describe("UProgress.vue", () => {
       });
     });
 
-    // Indicator prop
-    it("shows indicator when indicator prop is true", () => {
+    it("Indicator – shows indicator when indicator prop is true", () => {
       const value = 50;
       const indicator = true;
 
@@ -169,8 +161,7 @@ describe("UProgress.vue", () => {
       expect(indicatorElement.attributes("style")).toContain(expectedWidth);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const value = 1;
       const dataTest = "test-progress";
 
@@ -186,10 +177,8 @@ describe("UProgress.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Indicator slot
-    it("renders content from indicator slot", () => {
+    it("Indicator – renders content from indicator slot", () => {
       const value = 50;
       const slotContent = "Custom Indicator";
       const slotClass = "indicator-content";
@@ -209,8 +198,7 @@ describe("UProgress.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Step slot
-    it("renders content from step slot", () => {
+    it("Step – renders content from step slot", () => {
       const value = 1;
       const max = ["Step 1", "Step 2", "Step 3"];
       const slotContent = "Custom Step";
@@ -232,10 +220,8 @@ describe("UProgress.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const value = 50;
 
       const component = mount(UProgress, {

package/ui.navigation-tab/tests/UTab.test.ts

@@ -16,10 +16,8 @@ describe("UTab.vue", () => {
     getUTabsSize: "md",
   };
 
-  // Props tests
   describe("Props", () => {
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Tab Item";
 
       const component = mount(UTab, {
@@ -35,8 +33,7 @@ describe("UTab.vue", () => {
       expect(component.text()).toBe(label);
     });
 
-    // Value prop
-    it("uses the provided value for tab identity", async () => {
+    it("Value – uses the provided value for tab identity", async () => {
       const value = "tab1";
       const setUTabsSelectedItem = vi.fn();
 
@@ -57,8 +54,7 @@ describe("UTab.vue", () => {
       expect(setUTabsSelectedItem).toHaveBeenCalledWith(value);
     });
 
-    // Icon prop
-    it("passes icon prop to UButton", () => {
+    it("Icon – passes icon prop to UButton", () => {
       const icon = "home";
 
       const component = mount(UTab, {
@@ -77,8 +73,7 @@ describe("UTab.vue", () => {
       expect(button.props("icon")).toBe(icon);
     });
 
-    // Left Icon prop
-    it("passes leftIcon prop to UButton", () => {
+    it("Left – passes leftIcon prop to UButton", () => {
       const leftIcon = "arrow-left";
 
       const component = mount(UTab, {
@@ -97,8 +92,7 @@ describe("UTab.vue", () => {
       expect(button.props("leftIcon")).toBe(leftIcon);
     });
 
-    // Right Icon prop
-    it("passes rightIcon prop to UButton", () => {
+    it("Right – passes rightIcon prop to UButton", () => {
       const rightIcon = "arrow-right";
 
       const component = mount(UTab, {
@@ -117,8 +111,7 @@ describe("UTab.vue", () => {
       expect(button.props("rightIcon")).toBe(rightIcon);
     });
 
-    // Disabled prop
-    it("passes disabled prop to UButton", () => {
+    it("Disabled – passes disabled prop to UButton", () => {
       const disabled = true;
 
       const component = mount(UTab, {
@@ -137,8 +130,7 @@ describe("UTab.vue", () => {
       expect(button.props("disabled")).toBe(disabled);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-tab";
 
       const component = mount(UTab, {
@@ -158,8 +150,7 @@ describe("UTab.vue", () => {
 
   // Active state tests
   describe("Active state", () => {
-    // Active state
-    it("applies active classes when tab is selected", () => {
+    it("Active – applies active classes when tab is selected", () => {
       const value = "tab1";
       const expectedClass = "border-primary";
 
@@ -181,8 +172,7 @@ describe("UTab.vue", () => {
       expect(button.attributes("class")).toContain(expectedClass);
     });
 
-    // Inactive state
-    it("applies inactive classes when tab is not selected", () => {
+    it("Inactive – applies inactive classes when tab is not selected", () => {
       const value = "tab1";
       const expectedClass = "border-transparent";
       const nonExpectedClass = "border-primary";
@@ -206,8 +196,7 @@ describe("UTab.vue", () => {
       expect(button.attributes("class")).not.toContain(nonExpectedClass);
     });
 
-    // Disabled does not activate
-    it("does not call setUTabsSelectedItem when disabled", async () => {
+    it("Disabled – does not call setUTabsSelectedItem when disabled", async () => {
       const disabled = true;
       const setUTabsSelectedItem = vi.fn();
 
@@ -232,8 +221,7 @@ describe("UTab.vue", () => {
 
   // Injected props tests
   describe("Injected props", () => {
-    // Size prop from UTabs
-    it("uses the size from UTabs provider", () => {
+    it("Size – uses the size from UTabs provider", () => {
       const size = "lg";
 
       const component = mount(UTab, {
@@ -254,8 +242,7 @@ describe("UTab.vue", () => {
       expect(button.props("size")).toBe(size);
     });
 
-    // Block prop from UTabs
-    it("uses the block prop from UTabs provider", () => {
+    it("Block – uses the block prop from UTabs provider", () => {
       const block = true;
 
       const component = mount(UTab, {
@@ -276,8 +263,7 @@ describe("UTab.vue", () => {
       expect(button.props("block")).toBe(block);
     });
 
-    // Square prop from UTabs
-    it("uses the square prop from UTabs provider", () => {
+    it("Square – uses the square prop from UTabs provider", () => {
       const square = true;
 
       const component = mount(UTab, {
@@ -298,8 +284,7 @@ describe("UTab.vue", () => {
       expect(button.props("square")).toBe(square);
     });
 
-    // Scrollable prop from UTabs
-    it("applies correct classes based on scrollable prop from UTabs", () => {
+    it("Scrollable – applies correct classes based on scrollable prop from UTabs", () => {
       const scrollable = false;
       const expectedClasses = "-mb-px";
 
@@ -322,10 +307,8 @@ describe("UTab.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const label = "Tab Item";
       const slotText = "Left";
       const slotClass = "left-content";
@@ -348,8 +331,7 @@ describe("UTab.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Label slot
-    it("renders content from label slot", () => {
+    it("Label – renders content from label slot", () => {
       const label = "Tab Item";
       const slotText = "Custom Label";
       const slotClass = "label-content";
@@ -372,8 +354,7 @@ describe("UTab.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Right slot
-    it("renders content from right slot", () => {
+    it("Right – renders content from right slot", () => {
       const label = "Tab Item";
       const slotText = "Right";
       const slotClass = "right-content";
@@ -396,8 +377,7 @@ describe("UTab.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Slot binding - active state
-    it("passes active state to slots", () => {
+    it("Slot – passes active state to slots", () => {
       const value = "tab1";
 
       const component = mount(UTab, {
@@ -419,8 +399,7 @@ describe("UTab.vue", () => {
       expect(component.find('[data-active="true"]').exists()).toBe(true);
     });
 
-    // Slot binding - icon-name
-    it("passes icon-name to slots", () => {
+    it("Slot – passes icon-name to slots", () => {
       const leftIcon = "home";
 
       const component = mount(UTab, {
@@ -441,10 +420,8 @@ describe("UTab.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event
-    it("calls setUTabsSelectedItem when clicked", async () => {
+    it("Click – calls setUTabsSelectedItem when clicked", async () => {
       const value = "tab1";
       const setUTabsSelectedItem = vi.fn();
 
@@ -466,10 +443,8 @@ describe("UTab.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // button ref
-    it("exposes button ref", () => {
+    it("button – exposes button ref", () => {
       const component = mount(UTab, {
         props: {
           label: "Tab Item",

package/ui.navigation-tabs/tests/UTabs.test.ts

@@ -15,10 +15,8 @@ describe("UTabs.vue", () => {
     { value: "tab3", label: "Tab 3" },
   ];
 
-  // Props tests
   describe("Props", () => {
-    // ModelValue prop
-    it("correctly sets the selected tab", () => {
+    it("ModelValue – correctly sets the selected tab", () => {
       const modelValue = "tab2";
       const expectedActiveClass = "border-primary";
 
@@ -41,8 +39,7 @@ describe("UTabs.vue", () => {
       expect(activeTab.classes()).toContain(expectedActiveClass);
     });
 
-    // Options prop
-    it("renders the correct number of tabs from options", () => {
+    it("Options – renders the correct number of tabs from options", () => {
       const component = mount(UTabs, {
         props: {
           options,
@@ -61,8 +58,7 @@ describe("UTabs.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size to tabs", () => {
+    it("Size – applies the correct size to tabs", () => {
       const sizes = ["2xs", "xs", "sm", "md", "lg", "xl"];
 
       sizes.forEach((size) => {
@@ -84,8 +80,7 @@ describe("UTabs.vue", () => {
       });
     });
 
-    // Scrollable prop
-    it("applies scrollable class when scrollable prop is true", () => {
+    it("Scrollable – applies scrollable class when scrollable prop is true", () => {
       const scrollable = true;
 
       const component = mount(UTabs, {
@@ -102,8 +97,7 @@ describe("UTabs.vue", () => {
       expect(tabsContainer.classes()).toContain("scroll-smooth");
     });
 
-    // Scroll buttons
-    it("shows scroll buttons when scrollable and content overflows", async () => {
+    it("Scroll – shows scroll buttons when scrollable and content overflows", async () => {
       const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
         value: `tab${i}`,
         label: `Tab ${i}`,
@@ -140,8 +134,7 @@ describe("UTabs.vue", () => {
       expect(nextButton).toBeDefined();
     });
 
-    // Block prop
-    it("provides block value to tabs", () => {
+    it("Block – provides block value to tabs", () => {
       const block = true;
 
       const component = mount(UTabs, {
@@ -161,8 +154,7 @@ describe("UTabs.vue", () => {
       expect(button.props("block")).toBe(block);
     });
 
-    // Square prop
-    it("provides square value to tabs", () => {
+    it("Square – provides square value to tabs", () => {
       const square = true;
 
       const component = mount(UTabs, {
@@ -182,8 +174,7 @@ describe("UTabs.vue", () => {
       expect(button.props("square")).toBe(square);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-tabs";
       const singleOption = [options[0]];
 
@@ -207,10 +198,8 @@ describe("UTabs.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Tabs";
       const slotClass = "custom-tabs";
 
@@ -224,8 +213,7 @@ describe("UTabs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Prev slot
-    it("renders content from prev slot when scrollable", async () => {
+    it("Prev – renders content from prev slot when scrollable", async () => {
       const slotContent = "Prev";
       const slotClass = "prev-content";
       const dataTest = "test-tabs";
@@ -261,8 +249,7 @@ describe("UTabs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Next slot
-    it("renders content from next slot when scrollable", async () => {
+    it("Next – renders content from next slot when scrollable", async () => {
       const slotContent = "Next";
       const slotClass = "next-content";
       const dataTest = "test-tabs";
@@ -299,10 +286,8 @@ describe("UTabs.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Update:modelValue event
-    it("emits update:modelValue event when tab is clicked", async () => {
+    it("Update:modelValue – emits update:modelValue event when tab is clicked", async () => {
       const component = mount(UTabs, {
         props: {
           options,
@@ -321,10 +306,8 @@ describe("UTabs.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const singleOption = [options[0]];
 
       const component = mount(UTabs, {