@milaboratories/uikit 2.10.45 → 2.11.0

package/src/components/PlNumberField/__test__/PlNumberField.spec.ts

@@ -0,0 +1,296 @@
+import PlNumberField from "../PlNumberField.vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+describe("PlNumberField.vue", () => {
+  it("renders correctly with default props", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    expect(wrapper.find("input").element.value).toBe("10");
+  });
+
+  it("displays the label when provided", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        label: "Test Label",
+      },
+    });
+    expect(wrapper.find("label").text()).toBe("Test Label");
+  });
+
+  it("increments the value when increment button is clicked", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 2,
+      },
+    });
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    await incrementButton.trigger("click");
+    expect(wrapper.vm.modelValue).toEqual(12);
+  });
+
+  it("decrements the value when decrement button is clicked", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 1,
+      },
+    });
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    await decrementButton.trigger("click");
+    expect(wrapper.vm.modelValue).toEqual(9);
+  });
+
+  it("disables increment button when value exceeds maxValue", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        maxValue: 10,
+      },
+    });
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    expect(incrementButton.classes()).toContain("disabled");
+  });
+
+  it("disables decrement button when value is below minValue", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 1,
+        minValue: 1,
+      },
+    });
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(decrementButton.classes()).toContain("disabled");
+  });
+
+  it("renders external errorMessage with priority", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+        errorMessage: "Custom error message",
+      },
+    });
+    const errorText = wrapper.find(".pl-number-field__error").text();
+    expect(errorText).toBe("Custom error message");
+  });
+
+  it("renders validation error when no external errorMessage", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+      },
+    });
+    const errorText = wrapper.find(".pl-number-field__error").text();
+    expect(errorText).toBe("Value must be higher than 10");
+  });
+
+  it("disables step buttons when input has an error", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("abc");
+
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(incrementButton.classes()).toContain("disabled");
+    expect(decrementButton.classes()).toContain("disabled");
+  });
+
+  describe("typing and value updates", () => {
+    it("updates model for valid input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("15");
+      expect(wrapper.vm.modelValue).toEqual(15);
+    });
+
+    it("does not change model for invalid input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("abc");
+      expect(wrapper.vm.modelValue).toEqual(15);
+    });
+
+    it("clears to undefined for partial input (-) on blur", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("-");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(undefined);
+      expect(input.element.value).toBe("");
+    });
+
+    it("clears to undefined for partial input (.) on blur", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue(".");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(undefined);
+      expect(input.element.value).toBe("");
+    });
+
+    it("accepts negative numbers", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("-1");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(-1);
+      expect(input.element.value).toBe("-1");
+    });
+
+    it("shows separator error for comma-formatted input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1,5");
+      expect(wrapper.vm.modelValue).toEqual(5); // unchanged
+      expect(wrapper.find(".pl-number-field__error").text()).toContain("separator");
+    });
+  });
+
+  describe("blur/enter formatting", () => {
+    it("formats trailing dot on blur: '123.' → '123'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("123.");
+      expect(wrapper.vm.modelValue).toEqual(123);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("123");
+    });
+
+    it("formats leading dot on blur: '.5' → '0.5'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue(".5");
+      expect(wrapper.vm.modelValue).toEqual(0.5);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("0.5");
+    });
+
+    it("formats leading zero on blur: '01' → '1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("01");
+      expect(wrapper.vm.modelValue).toEqual(1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1");
+    });
+
+    it("formats trailing zeros on blur: '1.10' → '1.1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1.10");
+      expect(wrapper.vm.modelValue).toEqual(1.1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1.1");
+    });
+
+    it("formats exponential on blur: '1e-5' → '0.00001'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1e-5");
+      expect(wrapper.vm.modelValue).toEqual(0.00001);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("0.00001");
+    });
+
+    it("formats partial exponential on blur: '1e' → '1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1e");
+      expect(wrapper.vm.modelValue).toEqual(1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1");
+    });
+  });
+
+  it("update model with undefined when input is cleared", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(undefined);
+  });
+
+  it("external modelValue change", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+
+    const input = wrapper.find("input");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(10);
+    expect(input.element.value).toEqual("10");
+
+    await input.setValue("");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(undefined);
+
+    wrapper.setProps({ modelValue: 1 });
+
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(1);
+    expect(input.element.value).toEqual("1");
+
+    await input.setValue("10");
+    expect(wrapper.vm.modelValue).toEqual(10);
+    expect(input.element.value).toEqual("10");
+  });
+});

package/src/components/PlNumberField/__test__/parseNumber.spec.ts

@@ -0,0 +1,204 @@
+import { describe, expect, it } from "vitest";
+import { tryParseNumber, numberToDecimalString, validateNumber } from "../parseNumber";
+
+describe("tryParseNumber", () => {
+  describe("empty and partial inputs → {} (no value, no error)", () => {
+    it.each(["", "-", ".", "-."])("'%s' → {}", (input) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBeUndefined();
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("trailing dot → value, no error", () => {
+    it.each([
+      ["123.", 123],
+      ["-123.", -123],
+      ["0.", 0],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("partial exponential → completed and parsed", () => {
+    it.each([
+      ["1e", 1],
+      ["1e-", 1],
+      ["1e+", 1],
+      ["5e", 5],
+      ["5E", 5],
+      ["5e-", 5],
+      ["5e+", 5],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("exact match → value, no error", () => {
+    it.each([
+      ["123", 123],
+      ["-5", -5],
+      ["0", 0],
+      ["0.5", 0.5],
+      ["-0.5", -0.5],
+      ["1000", 1000],
+      ["999999", 999999],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("decimal form of very small numbers → value, no error", () => {
+    it("'0.0000000001' → { value: 1e-10 }", () => {
+      const result = tryParseNumber("0.0000000001");
+      expect(result.value).toBe(1e-10);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("exponential notation → value, no error", () => {
+    it.each([
+      ["1e-5", 0.00001],
+      ["2e+10", 2e10],
+      ["1E-5", 0.00001],
+      ["1e5", 1e5],
+      ["1.5e2", 150],
+      ["-3e4", -30000],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("non-canonical but parseable → value, no error (formatted on blur)", () => {
+    it.each([
+      [".5", 0.5],
+      ["01", 1],
+      ["007", 7],
+      ["1.0", 1],
+      ["1.10", 1.1],
+      ["+5", 5],
+      ["00.5", 0.5],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("locale-formatted numbers → separator error", () => {
+    it.each([
+      "1,5",
+      "1.232,111",
+      "1.237.62",
+      "555.555.555,100",
+      "1,222,333.05",
+      "1 234",
+      "1.000.000",
+    ])("'%s' → separator error", (input) => {
+      const result = tryParseNumber(input);
+      expect(result.error).toBe("Use dot as decimal separator, e.g. 3.14");
+      expect(result.value).toBeUndefined();
+    });
+  });
+
+  describe("non-numeric input → 'not a number' error", () => {
+    it.each(["abc", "12abc", "1.237.asdf62", "hello", "#$%", "1.2.3a"])(
+      "'%s' → not a number error",
+      (input) => {
+        const result = tryParseNumber(input);
+        expect(result.error).toBe("Value is not a number");
+        expect(result.value).toBeUndefined();
+      },
+    );
+  });
+
+  describe("precision loss → error with actual value", () => {
+    it("too many decimal digits", () => {
+      const result = tryParseNumber("0.1234567890123456789");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("integer exceeds safe range", () => {
+      const result = tryParseNumber("9007199254740993");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("trailing zeros beyond precision", () => {
+      const result = tryParseNumber("1.00000000000000001");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("safe integer does not trigger precision error", () => {
+      const result = tryParseNumber("9007199254740991");
+      expect(result.value).toBe(9007199254740991);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("whitespace handling", () => {
+    it("trims leading/trailing spaces", () => {
+      const result = tryParseNumber("  123  ");
+      expect(result.value).toBe(123);
+    });
+
+    it("space inside number → separator error", () => {
+      const result = tryParseNumber("1 234");
+      expect(result.error).toBe("Use dot as decimal separator, e.g. 3.14");
+    });
+  });
+});
+
+describe("numberToDecimalString", () => {
+  it("undefined → empty string", () => {
+    expect(numberToDecimalString(undefined)).toBe("");
+  });
+
+  it("plain numbers pass through", () => {
+    expect(numberToDecimalString(123)).toBe("123");
+    expect(numberToDecimalString(0.5)).toBe("0.5");
+    expect(numberToDecimalString(-42)).toBe("-42");
+    expect(numberToDecimalString(0)).toBe("0");
+  });
+
+  it("converts exponential to decimal form", () => {
+    expect(numberToDecimalString(1e-7)).toBe("0.0000001");
+    expect(numberToDecimalString(1e-10)).toBe("0.0000000001");
+    expect(numberToDecimalString(2e10)).toBe("20000000000");
+  });
+});
+
+describe("validateNumber", () => {
+  it("returns undefined when within bounds", () => {
+    expect(validateNumber(5, { minValue: 0, maxValue: 10 })).toBeUndefined();
+  });
+
+  it("returns error when below minValue", () => {
+    expect(validateNumber(-1, { minValue: 0 })).toBe("Value must be higher than 0");
+  });
+
+  it("returns error when above maxValue", () => {
+    expect(validateNumber(11, { maxValue: 10 })).toBe("Value must be less than 10");
+  });
+
+  it("runs custom validate function", () => {
+    const validate = (v: number) => (v % 2 !== 0 ? "Must be even" : undefined);
+    expect(validateNumber(3, { validate })).toBe("Must be even");
+    expect(validateNumber(4, { validate })).toBeUndefined();
+  });
+
+  it("minValue/maxValue checked before custom validate", () => {
+    const validate = (v: number) => (v % 2 !== 0 ? "Must be even" : undefined);
+    expect(validateNumber(-1, { minValue: 0, validate })).toBe("Value must be higher than 0");
+  });
+});