diff --git a/src/form/input/Input.tsx b/src/form/input/Input.tsx index c76b4fa3..74979db9 100644 --- a/src/form/input/Input.tsx +++ b/src/form/input/Input.tsx @@ -213,7 +213,7 @@ function Input(props: InputProps) { // IF maximumFractionDigits is set as 0, value can not be negative zero if (maximumFractionDigits === 0 && finalEventValue === "-0") { - finalEventValue = value as string; + finalEventValue = "0"; } // IF shouldFormatToLocaleString is defined, caret position should calculate according to thoudsandths separator count diff --git a/src/form/input/input.test.tsx b/src/form/input/input.test.tsx index fda08a7e..95bdd7a1 100644 --- a/src/form/input/input.test.tsx +++ b/src/form/input/input.test.tsx @@ -1,71 +1,163 @@ -import React from "react"; -import {render, screen} from "@testing-library/react"; -import "@testing-library/jest-dom"; -import userEvent from "@testing-library/user-event"; - -import Input, {InputProps} from "./Input"; -import {testA11y} from "../../core/utils/test/testUtils"; - -describe("", () => { - const defaultInputProps: InputProps = { - testid: "input", - name: "input", - onChange: jest.fn() - }; - - it("should render correctly", () => { - render(); - }); - - it("should pass a11y test", async () => { - const {container} = render(); - - await testA11y(container, {rules: {label: {enabled: false}}}); - }); - - it("should run onChange event handler correctly", () => { - render(); - - const input = screen.getByRole("textbox"); - - userEvent.type(input, "test"); - - expect(defaultInputProps.onChange).toHaveBeenCalled(); - }); - - it("should update value on change", () => { - render(); - - const input = screen.getByRole("textbox"); - - userEvent.type(input, "test"); - - expect(input).toHaveValue("test"); - }); - - it("should render left and right icons correctly", () => { - const iconContent =
{"Test"}
; - - const {rerender, container} = render( - - ); - - const leftIcon = screen.getByText("Test"); - - expect(container).toContainElement(leftIcon); - - rerender(); - - const rightIcon = screen.getByText("Test"); - - expect(container).toContainElement(rightIcon); - }); - - it("should add disabled attribute and input--is-disabled class when isDisabled is true", () => { - render(); - - const input = screen.getByRole("textbox"); - - expect(input).toBeDisabled(); - }); -}); +import React from "react"; +import {render, screen} from "@testing-library/react"; +import "@testing-library/jest-dom"; +import userEvent from "@testing-library/user-event"; + +import Input, {InputProps} from "./Input"; +import {testA11y} from "../../core/utils/test/testUtils"; + +describe("", () => { + const defaultInputProps: InputProps = { + testid: "input", + name: "input", + onChange: jest.fn() + }; + + it("should render correctly", () => { + render(); + }); + + it("should pass a11y test", async () => { + const {container} = render(); + + await testA11y(container, {rules: {label: {enabled: false}}}); + }); + + it("should run onChange event handler correctly", () => { + render(); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, "test"); + + expect(defaultInputProps.onChange).toHaveBeenCalled(); + }); + + it("should update value on change", () => { + render(); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, "test"); + + expect(input).toHaveValue("test"); + }); + + it("should render left and right icons correctly", () => { + const iconContent ={"Test"}
; + + const {rerender, container} = render( + + ); + + const leftIcon = screen.getByText("Test"); + + expect(container).toContainElement(leftIcon); + + rerender(); + + const rightIcon = screen.getByText("Test"); + + expect(container).toContainElement(rightIcon); + }); + + it("should add disabled attribute and input--is-disabled class when isDisabled is true", () => { + render(); + + const input = screen.getByRole("textbox"); + + expect(input).toBeDisabled(); + }); +}); + +describe('', () => { + const numberInputProps: InputProps = { + testid: "number-input", + name: "number-input", + type: "number", + localizationOptions: { + shouldFormatToLocaleString: true, + locale: "en-EN", + maximumFractionDigits: 2 + }, + onChange: jest.fn() + }; + + it("should render correctly", () => { + render(); + }); + + it("should pass a11y test", async () => { + const {container} = render(); + + await testA11y(container, {rules: {label: {enabled: false}}}); + }); + + it("should format value to with 'en-EN' locale", () => { + render(); + + const input = screen.getByRole("textbox"); + + expect(input).toHaveValue("1,234,567.89"); + }); + + it("should remove leading zeros", () => { + render(); + + const input = screen.getByRole("textbox"); + + expect(input).toHaveValue("1,234.50"); + }); + + it("should parse to scientific notation", () => { + render(); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, "1,234,567.89"); + + expect(input).toHaveValue("1234567.89"); + }); + + it("should have at most 2 decimal places", () => { + render(); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, "100.55555"); + + expect(input).toHaveValue("100.55"); + }); + + it("should not allow enter letter", () => { + render(); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, "ABC"); + + expect(input).toHaveValue(undefined); + }); + + it("should not allow enter empty string", () => { + render(); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, " "); + + expect(input).toHaveValue(undefined); + }); + + it("should not allow negative zero without decimal part", () => { + render( + + ); + + const input = screen.getByRole("textbox"); + + userEvent.type(input, "-0"); + + expect(input).toHaveValue("0"); + }); +});