From f2924070fce7318f9031f837fb4193e6bcb70bc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?=
 <yasincaliskandev@gmail.com>
Date: Wed, 28 Jul 2021 20:48:50 +0300
Subject: [PATCH 1/3] feat(input): Add input tests with number type

---
 src/form/input/input.test.tsx | 224 +++++++++++++++++++++++-----------
 1 file changed, 153 insertions(+), 71 deletions(-)

diff --git a/src/form/input/input.test.tsx b/src/form/input/input.test.tsx
index fda08a7e..26495fca 100644
--- a/src/form/input/input.test.tsx
+++ b/src/form/input/input.test.tsx
@@ -1,71 +1,153 @@
-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("<Input />", () => {
-  const defaultInputProps: InputProps = {
-    testid: "input",
-    name: "input",
-    onChange: jest.fn()
-  };
-
-  it("should render correctly", () => {
-    render(<Input {...defaultInputProps} />);
-  });
-
-  it("should pass a11y test", async () => {
-    const {container} = render(<Input {...defaultInputProps} />);
-
-    await testA11y(container, {rules: {label: {enabled: false}}});
-  });
-
-  it("should run onChange event handler correctly", () => {
-    render(<Input {...defaultInputProps} />);
-
-    const input = screen.getByRole("textbox");
-
-    userEvent.type(input, "test");
-
-    expect(defaultInputProps.onChange).toHaveBeenCalled();
-  });
-
-  it("should update value on change", () => {
-    render(<Input {...defaultInputProps} />);
-
-    const input = screen.getByRole("textbox");
-
-    userEvent.type(input, "test");
-
-    expect(input).toHaveValue("test");
-  });
-
-  it("should render left and right icons correctly", () => {
-    const iconContent = <p data-testid={"icon"}>{"Test"}</p>;
-
-    const {rerender, container} = render(
-      <Input leftIcon={iconContent} {...defaultInputProps} />
-    );
-
-    const leftIcon = screen.getByText("Test");
-
-    expect(container).toContainElement(leftIcon);
-
-    rerender(<Input rightIcon={iconContent} {...defaultInputProps} />);
-
-    const rightIcon = screen.getByText("Test");
-
-    expect(container).toContainElement(rightIcon);
-  });
-
-  it("should add disabled attribute and input--is-disabled class when isDisabled is true", () => {
-    render(<Input isDisabled={true} {...defaultInputProps} />);
-
-    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("<Input />", () => {
+  const defaultInputProps: InputProps = {
+    testid: "input",
+    name: "input",
+    onChange: jest.fn()
+  };
+
+  it("should render correctly", () => {
+    render(<Input {...defaultInputProps} />);
+  });
+
+  it("should pass a11y test", async () => {
+    const {container} = render(<Input {...defaultInputProps} />);
+
+    await testA11y(container, {rules: {label: {enabled: false}}});
+  });
+
+  it("should run onChange event handler correctly", () => {
+    render(<Input {...defaultInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, "test");
+
+    expect(defaultInputProps.onChange).toHaveBeenCalled();
+  });
+
+  it("should update value on change", () => {
+    render(<Input {...defaultInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, "test");
+
+    expect(input).toHaveValue("test");
+  });
+
+  it("should render left and right icons correctly", () => {
+    const iconContent = <p data-testid={"icon"}>{"Test"}</p>;
+
+    const {rerender, container} = render(
+      <Input leftIcon={iconContent} {...defaultInputProps} />
+    );
+
+    const leftIcon = screen.getByText("Test");
+
+    expect(container).toContainElement(leftIcon);
+
+    rerender(<Input rightIcon={iconContent} {...defaultInputProps} />);
+
+    const rightIcon = screen.getByText("Test");
+
+    expect(container).toContainElement(rightIcon);
+  });
+
+  it("should add disabled attribute and input--is-disabled class when isDisabled is true", () => {
+    render(<Input isDisabled={true} {...defaultInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    expect(input).toBeDisabled();
+  });
+});
+
+describe('<Input type={"number"} />', () => {
+  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(<Input {...numberInputProps} />);
+  });
+
+  it("should pass a11y test", async () => {
+    const {container} = render(<Input {...numberInputProps} />);
+
+    await testA11y(container, {rules: {label: {enabled: false}}});
+  });
+
+  it("should format value to locale string", () => {
+    render(<Input {...numberInputProps} value={"1234567.89"} />);
+
+    const input = screen.getByRole("textbox");
+
+    expect(input).toHaveValue("1,234,567.89");
+  });
+
+  it("should remove leading zeros", () => {
+    render(<Input {...numberInputProps} value={"0001234.50"} />);
+
+    const input = screen.getByRole("textbox");
+
+    expect(input).toHaveValue("1,234.50");
+  });
+
+  it("should parse to scientific notation", () => {
+    render(<Input {...numberInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, "1,234,567.89");
+
+    expect(input).toHaveValue("1234567.89");
+  });
+
+  it("should decimal part length be same with maximumFractionDigits", () => {
+    render(<Input {...numberInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, "100.55555");
+
+    expect(input).toHaveValue("100.55");
+  });
+
+  it("should not allow enter letter", () => {
+    render(<Input {...numberInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, "ABC");
+
+    expect(input).toHaveValue(undefined);
+  });
+
+  it("should not allow negative zero without decimal part", () => {
+    render(
+      <Input {...numberInputProps} localizationOptions={{maximumFractionDigits: 0}} />
+    );
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, "-0");
+
+    expect(input).toHaveValue(undefined);
+  });
+});

From 9493b480472fc241cc1564a5e32781216df40cc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?=
 <yasincaliskandev@gmail.com>
Date: Thu, 9 Sep 2021 18:25:40 +0300
Subject: [PATCH 2/3] fix(input): Add "empty string" test

---
 src/form/input/input.test.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/form/input/input.test.tsx b/src/form/input/input.test.tsx
index 26495fca..5cbad34b 100644
--- a/src/form/input/input.test.tsx
+++ b/src/form/input/input.test.tsx
@@ -93,7 +93,7 @@ describe('<Input type={"number"} />', () => {
     await testA11y(container, {rules: {label: {enabled: false}}});
   });
 
-  it("should format value to locale string", () => {
+  it("should format value to with 'en-EN' locale", () => {
     render(<Input {...numberInputProps} value={"1234567.89"} />);
 
     const input = screen.getByRole("textbox");
@@ -119,7 +119,7 @@ describe('<Input type={"number"} />', () => {
     expect(input).toHaveValue("1234567.89");
   });
 
-  it("should decimal part length be same with maximumFractionDigits", () => {
+  it("should have at most 2 decimal places", () => {
     render(<Input {...numberInputProps} />);
 
     const input = screen.getByRole("textbox");
@@ -139,6 +139,16 @@ describe('<Input type={"number"} />', () => {
     expect(input).toHaveValue(undefined);
   });
 
+  it("should not allow enter empty string", () => {
+    render(<Input {...numberInputProps} />);
+
+    const input = screen.getByRole("textbox");
+
+    userEvent.type(input, " ");
+
+    expect(input).toHaveValue(undefined);
+  });
+
   it("should not allow negative zero without decimal part", () => {
     render(
       <Input {...numberInputProps} localizationOptions={{maximumFractionDigits: 0}} />

From b348912ac2efcfe553495d82b4d5fe9462113378 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?=
 <yasincaliskandev@gmail.com>
Date: Thu, 9 Sep 2021 18:36:31 +0300
Subject: [PATCH 3/3] fix(input): -0 turns into 0 if maxFractionDigits prop is
 0

---
 src/form/input/Input.tsx      | 2 +-
 src/form/input/input.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 5cbad34b..95bdd7a1 100644
--- a/src/form/input/input.test.tsx
+++ b/src/form/input/input.test.tsx
@@ -158,6 +158,6 @@ describe('<Input type={"number"} />', () => {
 
     userEvent.type(input, "-0");
 
-    expect(input).toHaveValue(undefined);
+    expect(input).toHaveValue("0");
   });
 });