@fiscozen/input 0.1.16 → 1.0.0-next.0

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -1,204 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import { FzCurrencyInput } from "..";
-
-describe.concurrent("FzCurrencyInput", () => {
-  it("renders floating numbers as currency", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 1234.56,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    await inputElement.trigger("blur");
-    // flushPromises doesn't seem to be enoughsince the implementation
-    // of the composable uses setTimeout itself
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1234,56");
-  });
-  it("should not allow inputs other than digits and separators", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 0,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    await inputElement.setValue("as12.3");
-    await inputElement.trigger("input");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("12.3");
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("12,30");
-  });
-
-  it("should allow to set value at 0", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 10,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("10,00");
-    wrapper.setProps({ amount: 0 });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("0,00");
-  });
-
-  it("should handle pasted values using the best possible euristic to parse and render it correctly", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    // we need to mock the paste event
-    await inputElement.trigger("paste", {
-      clipboardData: {
-        getData() {
-          return "1.233.222,43";
-        },
-      },
-    });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1233222,43");
-
-    await inputElement.trigger("paste", {
-      clipboardData: {
-        getData() {
-          return "1.23";
-        },
-      },
-    });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1,23");
-
-    await inputElement.trigger("paste", {
-      clipboardData: {
-        getData() {
-          return "1,23";
-        },
-      },
-    });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1,23");
-
-    await inputElement.trigger("paste", {
-      clipboardData: {
-        getData() {
-          return "1.232.111";
-        },
-      },
-    });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1232111,00");
-
-    await inputElement.trigger("paste", {
-      clipboardData: {
-        getData() {
-          return "1.232";
-        },
-      },
-    });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1,23");
-
-    await inputElement.trigger("paste", {
-      clipboardData: {
-        getData() {
-          return "1.232555";
-        },
-      },
-    });
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1,23");
-  });
-
-  it("should limit value according to min/max setting", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 10,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-        min: 2,
-        max: 20,
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("10,00");
-    await wrapper.setProps({ amount: 1 });
-    await inputElement.trigger("blur");
-    expect(inputElement.element.value).toBe("2,00");
-    await wrapper.setProps({ amount: 23 });
-    await inputElement.trigger("blur");
-    expect(inputElement.element.value).toBe("20,00");
-  });
-
-  it("should step correctly when using quantization via the 'step' prop", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 1,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-        step: 4,
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
-    const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
-
-    await inputElement.trigger("blur");
-    expect(inputElement.element.value).toBe("1,00");
-    await arrowUp.trigger("click");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("5,00");
-    await arrowDown.trigger("click");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1,00");
-    await arrowDown.trigger("click");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("-3,00");
-  });
-
-  it("should enforce quantization via the 'forcedStep' prop", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 8,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-        step: 4,
-        forceStep: true,
-      },
-    });
-
-    const inputElement = wrapper.find("input");
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("8,00");
-    await wrapper.setProps({ amount: 5 });
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("4,00");
-    await wrapper.setProps({ amount: -7 });
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("-8,00");
-  });
-});

package/src/__tests__/FzInput.spec.ts

@@ -1,181 +0,0 @@
-import { describe, it } from "vitest";
-import { mount } from "@vue/test-utils";
-import { FzInput } from "..";
-
-const NUMBER_OF_INPUTS = 1000;
-
-describe.concurrent("FzInput", () => {
-  it("renders label", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-      },
-      slots: {},
-    });
-
-    expect(wrapper.text()).toContain("Label");
-  });
-
-  it("renders leftIcon", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        leftIcon: "calendar-lines",
-      },
-      slots: {},
-    });
-
-    expect(wrapper.find(".fa-calendar-lines")).toBeTruthy();
-  });
-
-  it("renders rightIcon", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        rightIcon: "credit-card",
-      },
-      slots: {},
-    });
-
-    expect(wrapper.find(".fa-credit-card")).toBeTruthy();
-  });
-
-  it("renders helpText", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-      },
-      slots: {
-        helpText: "This is a helper text",
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.text()).toContain("This is a helper text");
-  });
-
-  it("renders errorMessage", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        error: true,
-      },
-      slots: {
-        errorMessage: "This is an error message",
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.text()).toContain("This is an error message");
-  });
-
-  it("renders disabled", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        disabled: true,
-      },
-      slots: {},
-    });
-
-    expect(wrapper.find("input").attributes("disabled")).toBe("");
-  });
-
-  it("renders required", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        required: true,
-      },
-      slots: {},
-    });
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.find("input").attributes("required")).toBe("");
-    expect(wrapper.text()).toContain("*");
-  });
-
-  it("renders email type", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        type: "email",
-      },
-      slots: {},
-    });
-
-    expect(wrapper.find("input").attributes("type")).toBe("email");
-  });
-
-  it("renders tel type", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        type: "tel",
-      },
-      slots: {},
-    });
-
-    expect(wrapper.find("input").attributes("type")).toBe("tel");
-  });
-
-  it("renders password type", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        type: "password",
-      },
-      slots: {},
-    });
-
-    expect(wrapper.find("input").attributes("type")).toBe("password");
-  });
-
-  it(`renders ${NUMBER_OF_INPUTS} input with different ids`, async ({
-    expect,
-  }) => {
-    const wrapperList = Array.from({ length: NUMBER_OF_INPUTS }).map((_, i) =>
-      mount(FzInput, {
-        props: {
-          label: `Label ${i}`,
-        },
-        slots: {},
-      }),
-    );
-
-    await Promise.all(wrapperList.map((w) => w.vm.$nextTick()));
-
-    const ids = wrapperList.map((w) => w.find("input").attributes("id"));
-
-    expect(new Set(ids).size).toBe(NUMBER_OF_INPUTS);
-  });
-
-  it("emits fzinput:right-icon-click event", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        rightIcon: "eye",
-      },
-      slots: {},
-    });
-
-    await wrapper.find(".fa-eye").trigger("click");
-
-    expect(wrapper.emitted("fzinput:right-icon-click")).toBeTruthy();
-  });
-
-  it("emits fzinput:left-icon-click event", async ({ expect }) => {
-    const wrapper = mount(FzInput, {
-      props: {
-        label: "Label",
-        leftIcon: "eye",
-      },
-      slots: {},
-    });
-
-    await wrapper.find(".fa-eye").trigger("click");
-
-    expect(wrapper.emitted("fzinput:left-icon-click")).toBeTruthy();
-  });
-});