@cfasim-ui/components 0.1.9 → 0.1.10

package/src/NumberInput/NumberInput.test.ts

@@ -1,580 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import NumberInput from "./NumberInput.vue";
-
-describe("NumberInput", () => {
-  it("renders hint trigger when hint prop is provided", () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 1000,
-        label: "Population",
-        hint: "Population must be between 1,000 and 100,000.",
-      },
-    });
-
-    const hintButton = wrapper.find(".HintTrigger");
-    expect(hintButton.exists()).toBe(true);
-  });
-
-  it("renders a label element when label prop is provided", () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 42,
-        label: "Population",
-      },
-    });
-
-    const label = wrapper.find("label.input-label");
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toContain("Population");
-    expect(label.find("input").exists()).toBe(true);
-  });
-
-  it("does not render a label element when label is not provided", () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 42,
-      },
-    });
-
-    expect(wrapper.find("label").exists()).toBe(false);
-    expect(wrapper.find("input").exists()).toBe(true);
-  });
-
-  it("does not render hint trigger when hint is not provided", () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 1000,
-      },
-    });
-
-    expect(wrapper.find(".HintTrigger").exists()).toBe(false);
-  });
-
-  it("does not emit update on typing, only on blur", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(200);
-    // Model should not have updated yet
-    expect(wrapper.props("modelValue")).toBe(100);
-
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBe(200);
-  });
-
-  it("emits update on Enter keydown", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(300);
-    expect(wrapper.props("modelValue")).toBe(100);
-
-    await input.trigger("keydown.enter");
-    expect(wrapper.props("modelValue")).toBe(300);
-  });
-
-  it("displays fraction as percentage when percent prop is set", () => {
-    const wrapper = mount(NumberInput, {
-      props: { modelValue: 0.91, label: "Immunity", percent: true },
-    });
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("91");
-    expect(wrapper.find(".input-suffix").text()).toBe("%");
-  });
-
-  it("commits displayed percentage back as fraction", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 0.5,
-        label: "Rate",
-        percent: true,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue(85);
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBeCloseTo(0.85);
-  });
-
-  it("validates min/max for percent mode", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 0.5,
-        label: "Rate",
-        percent: true,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-
-    await input.setValue(110);
-    await input.trigger("blur");
-    expect(wrapper.find(".input-error").text()).toBe("Max 100%");
-    expect(wrapper.props("modelValue")).toBe(0.5);
-
-    await input.setValue(-5);
-    await input.trigger("blur");
-    expect(wrapper.find(".input-error").text()).toBe("Min 0%");
-    expect(wrapper.props("modelValue")).toBe(0.5);
-  });
-
-  it("does not show suffix when percent is not set", () => {
-    const wrapper = mount(NumberInput, {
-      props: { modelValue: 42, label: "Count" },
-    });
-    expect(wrapper.find(".input-suffix").exists()).toBe(false);
-  });
-
-  it("shows error and does not commit when value exceeds max", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 50,
-        label: "Count",
-        max: 100,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(200);
-    await input.trigger("blur");
-
-    expect(wrapper.props("modelValue")).toBe(50);
-    expect(wrapper.find(".input-error").exists()).toBe(true);
-    expect(wrapper.find(".input-error").text()).toBe("Max 100");
-    expect(
-      (input.element as HTMLInputElement).getAttribute("aria-invalid"),
-    ).toBe("true");
-  });
-
-  it("shows error and does not commit when value is below min", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 50,
-        label: "Count",
-        min: 10,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(5);
-    await input.trigger("blur");
-
-    expect(wrapper.props("modelValue")).toBe(50);
-    expect(wrapper.find(".input-error").text()).toBe("Min 10");
-  });
-
-  it("clears error when valid value is committed", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 50,
-        label: "Count",
-        max: 100,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(200);
-    await input.trigger("blur");
-    expect(wrapper.find(".input-error").exists()).toBe(true);
-
-    await input.setValue(80);
-    await input.trigger("blur");
-    expect(wrapper.find(".input-error").exists()).toBe(false);
-    expect(wrapper.props("modelValue")).toBe(80);
-  });
-
-  it("shows percent suffix in error message for percent mode", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 0.5,
-        label: "Rate",
-        percent: true,
-        max: 0.99,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(100);
-    await input.trigger("blur");
-
-    expect(wrapper.props("modelValue")).toBe(0.5);
-    expect(wrapper.find(".input-error").text()).toBe("Max 99%");
-  });
-
-  it("slider with live prop emits updates while dragging", async () => {
-    const updates: number[] = [];
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 50,
-        label: "Count",
-        slider: true,
-        live: true,
-        min: 0,
-        max: 100,
-        "onUpdate:modelValue": (v: number | undefined) => {
-          if (v != null) updates.push(v);
-          wrapper.setProps({ modelValue: v });
-        },
-      },
-    });
-
-    const slider = wrapper.findComponent({ name: "SliderRoot" });
-    expect(slider.exists()).toBe(true);
-
-    // Simulate slider update (as if dragging)
-    slider.vm.$emit("update:modelValue", [75]);
-    expect(updates).toContain(75);
-  });
-
-  it("slider without live prop does not emit on update", async () => {
-    const updates: number[] = [];
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 50,
-        label: "Count",
-        slider: true,
-        min: 0,
-        max: 100,
-        "onUpdate:modelValue": (v: number | undefined) => {
-          if (v != null) updates.push(v);
-          wrapper.setProps({ modelValue: v });
-        },
-      },
-    });
-
-    const slider = wrapper.findComponent({ name: "SliderRoot" });
-    slider.vm.$emit("update:modelValue", [75]);
-    expect(updates).not.toContain(75);
-  });
-
-  it("live input commits immediately on change event (spinner/arrow keys)", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        live: true,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue(200);
-    await input.trigger("change");
-    expect(wrapper.props("modelValue")).toBe(200);
-  });
-
-  it("live input debounces on typing (input event only)", async () => {
-    vi.useFakeTimers();
-    const updates: number[] = [];
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        live: true,
-        "onUpdate:modelValue": (v: number | undefined) => {
-          if (v != null) updates.push(v);
-          wrapper.setProps({ modelValue: v });
-        },
-      },
-    });
-
-    const input = wrapper.find("input");
-    // setValue triggers both input and change, so the change handler
-    // commits immediately. To test debounce in isolation, we verify
-    // that the debounce timer exists by checking two rapid changes:
-    // the second should cancel the first's timer.
-    await input.setValue(200);
-    // change fires immediately, so 200 is committed
-    expect(updates).toContain(200);
-
-    // Now simulate rapid typing: two changes in quick succession
-    // Both trigger immediate commit via change, confirming live works
-    await input.setValue(300);
-    await input.setValue(400);
-    expect(updates).toContain(400);
-
-    vi.useRealTimers();
-  });
-
-  it("increments value on ArrowUp", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.trigger("keydown", { key: "ArrowUp" });
-    expect(wrapper.props("modelValue")).toBe(101);
-    expect((input.element as HTMLInputElement).value).toBe("101");
-  });
-
-  it("decrements value on ArrowDown", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.trigger("keydown", { key: "ArrowDown" });
-    expect(wrapper.props("modelValue")).toBe(99);
-  });
-
-  it("steps by custom step prop", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        step: 5,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.trigger("keydown", { key: "ArrowUp" });
-    expect(wrapper.props("modelValue")).toBe(105);
-  });
-
-  it("steps by 10x with shift+arrow", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.trigger("keydown", { key: "ArrowUp", shiftKey: true });
-    expect(wrapper.props("modelValue")).toBe(110);
-  });
-
-  it("converts step prop to display units in percent mode", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 0.5,
-        label: "Rate",
-        percent: true,
-        step: 0.01,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("50");
-
-    await input.trigger("keydown", { key: "ArrowUp" });
-    expect(wrapper.props("modelValue")).toBeCloseTo(0.51);
-    expect((input.element as HTMLInputElement).value).toBe("51");
-  });
-
-  it("clamps arrow step to min/max", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 99,
-        label: "Count",
-        max: 100,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.trigger("keydown", { key: "ArrowUp" });
-    expect(wrapper.props("modelValue")).toBe(100);
-    await input.trigger("keydown", { key: "ArrowUp" });
-    expect(wrapper.props("modelValue")).toBe(100);
-  });
-
-  it("displays numbers with comma separators", () => {
-    const wrapper = mount(NumberInput, {
-      props: { modelValue: 1000000, label: "Population" },
-    });
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("1,000,000");
-  });
-
-  it("keeps commas during editing and commits on blur", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 1500,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("1,500");
-
-    await input.setValue("2500");
-    await input.trigger("blur");
-    expect((input.element as HTMLInputElement).value).toBe("2,500");
-    expect(wrapper.props("modelValue")).toBe(2500);
-  });
-
-  it("accepts comma-formatted input and parses correctly", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("1,234,567");
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBe(1234567);
-  });
-
-  it("does not reformat while typing a decimal point", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 15,
-        label: "Count",
-      },
-    });
-    const input = wrapper.find("input");
-    // Simulate typing "15." — reformatInput should not strip the trailing dot
-    (input.element as HTMLInputElement).value = "15.";
-    await input.trigger("input");
-    expect((input.element as HTMLInputElement).value).toBe("15.");
-
-    // Typing "15.60" — trailing zero after decimal should also be preserved
-    (input.element as HTMLInputElement).value = "15.60";
-    await input.trigger("input");
-    expect((input.element as HTMLInputElement).value).toBe("15.60");
-  });
-
-  it("truncates decimal to integer when numberType is integer", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 15,
-        label: "Count",
-        numberType: "integer" as const,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("15.6");
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBe(15);
-    expect((input.element as HTMLInputElement).value).toBe("15");
-  });
-
-  it("integer with percent allows whole percentages like 0.42", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 0.5,
-        label: "Rate",
-        percent: true,
-        numberType: "integer" as const,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    // 42% → internal 0.42 (display value 42 is a whole number, so allowed)
-    await input.setValue("42");
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBeCloseTo(0.42);
-  });
-
-  it("integer with percent truncates fractional percentages", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 0.5,
-        label: "Rate",
-        percent: true,
-        numberType: "integer" as const,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    // 42.7% should truncate display to 42 → internal 0.42
-    await input.setValue("42.7");
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBeCloseTo(0.42);
-    expect((input.element as HTMLInputElement).value).toBe("42");
-  });
-
-  it("displays .0 suffix for whole numbers when numberType is float", () => {
-    const wrapper = mount(NumberInput, {
-      props: { modelValue: 100, label: "Rate", numberType: "float" as const },
-    });
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("100.0");
-  });
-
-  it("does not add .0 suffix for non-whole floats", () => {
-    const wrapper = mount(NumberInput, {
-      props: { modelValue: 2.5, label: "Rate", numberType: "float" as const },
-    });
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("2.5");
-  });
-
-  it("adds .0 suffix after committing a whole number in float mode", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 2.5,
-        label: "Rate",
-        numberType: "float" as const,
-        "onUpdate:modelValue": (v: number | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("3");
-    await input.trigger("blur");
-    expect((input.element as HTMLInputElement).value).toBe("3.0");
-  });
-
-  it("syncs local value when model changes externally", async () => {
-    const wrapper = mount(NumberInput, {
-      props: {
-        modelValue: 100,
-        label: "Count",
-      },
-    });
-
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("100");
-
-    await wrapper.setProps({ modelValue: 5000 });
-    expect((input.element as HTMLInputElement).value).toBe("5,000");
-  });
-});