From 060fa583622a54223db883c272db43e6468a469d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?=
 <yasincaliskandev@gmail.com>
Date: Wed, 20 Oct 2021 18:52:28 +0300
Subject: [PATCH 1/3] feat(typeahead-input): Add tests

---
 .../input/typeahead/typeahead-input.test.tsx  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/form/input/typeahead/typeahead-input.test.tsx b/src/form/input/typeahead/typeahead-input.test.tsx
index 5991cb84..7ee68b25 100644
--- a/src/form/input/typeahead/typeahead-input.test.tsx
+++ b/src/form/input/typeahead/typeahead-input.test.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import {render} from "@testing-library/react";
+import {render, screen} from "@testing-library/react";
 import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
 
 import {testA11y} from "../../../core/utils/test/testUtils";
 import TypeaheadInput, {TypeaheadInputProps} from "./TypeaheadInput";
@@ -22,4 +23,32 @@ describe("<TypeaheadInput />", () => {
 
     await testA11y(container);
   });
+
+  it("should update value on change", () => {
+    render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
+
+    const typeahedInput = screen.getByRole("textbox");
+
+    userEvent.type(typeahedInput, "test");
+
+    expect(typeahedInput).toHaveValue("test");
+  });
+
+  it("should render left and right icons correctly", () => {
+    const iconContent = <p data-testid={"icon"}>{"Test"}</p>;
+
+    const {rerender, container} = render(
+      <TypeaheadInput leftIcon={iconContent} {...defaultTypeaheadInputProps} />
+    );
+
+    const leftIcon = screen.getByText("Test");
+
+    expect(container).toContainElement(leftIcon);
+
+    rerender(<TypeaheadInput rightIcon={iconContent} {...defaultTypeaheadInputProps} />);
+
+    const rightIcon = screen.getByText("Test");
+
+    expect(container).toContainElement(rightIcon);
+  });
 });

From c98ed01eb2c481f8a80b8e6bed5e8e29a9c47f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?=
 <yasincaliskandev@gmail.com>
Date: Fri, 29 Oct 2021 17:59:25 +0300
Subject: [PATCH 2/3] feat(typeahead-input): Add test for `onQueryChange`

---
 .../input/typeahead/typeahead-input.test.tsx  | 120 ++++++++++--------
 1 file changed, 66 insertions(+), 54 deletions(-)

diff --git a/src/form/input/typeahead/typeahead-input.test.tsx b/src/form/input/typeahead/typeahead-input.test.tsx
index 7ee68b25..94656057 100644
--- a/src/form/input/typeahead/typeahead-input.test.tsx
+++ b/src/form/input/typeahead/typeahead-input.test.tsx
@@ -1,54 +1,66 @@
-import React from "react";
-import {render, screen} from "@testing-library/react";
-import "@testing-library/jest-dom";
-import userEvent from "@testing-library/user-event";
-
-import {testA11y} from "../../../core/utils/test/testUtils";
-import TypeaheadInput, {TypeaheadInputProps} from "./TypeaheadInput";
-
-describe("<TypeaheadInput />", () => {
-  const defaultTypeaheadInputProps: TypeaheadInputProps = {
-    testid: "typeahead-input",
-    name: "typeahead-input",
-    onQueryChange: jest.fn(),
-    placeholder: "typeahead input"
-  };
-
-  it("should render correctly", () => {
-    render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
-  });
-
-  it("should pass a11y test", async () => {
-    const {container} = render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
-
-    await testA11y(container);
-  });
-
-  it("should update value on change", () => {
-    render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
-
-    const typeahedInput = screen.getByRole("textbox");
-
-    userEvent.type(typeahedInput, "test");
-
-    expect(typeahedInput).toHaveValue("test");
-  });
-
-  it("should render left and right icons correctly", () => {
-    const iconContent = <p data-testid={"icon"}>{"Test"}</p>;
-
-    const {rerender, container} = render(
-      <TypeaheadInput leftIcon={iconContent} {...defaultTypeaheadInputProps} />
-    );
-
-    const leftIcon = screen.getByText("Test");
-
-    expect(container).toContainElement(leftIcon);
-
-    rerender(<TypeaheadInput rightIcon={iconContent} {...defaultTypeaheadInputProps} />);
-
-    const rightIcon = screen.getByText("Test");
-
-    expect(container).toContainElement(rightIcon);
-  });
-});
+import React from "react";
+import {render, screen} from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+
+import {testA11y} from "../../../core/utils/test/testUtils";
+import TypeaheadInput, {TypeaheadInputProps} from "./TypeaheadInput";
+
+describe("<TypeaheadInput />", () => {
+  const defaultTypeaheadInputProps: TypeaheadInputProps = {
+    testid: "typeahead-input",
+    name: "typeahead-input",
+    onQueryChange: jest.fn(),
+    placeholder: "typeahead input"
+  };
+
+  it("should render correctly", () => {
+    render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
+  });
+
+  it("should pass a11y test", async () => {
+    const {container} = render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
+
+    await testA11y(container);
+  });
+
+  it("should update value on change", () => {
+    render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
+
+    const typeaheadInput = screen.getByRole("textbox");
+
+    userEvent.type(typeaheadInput, "test");
+
+    expect(typeaheadInput).toHaveValue("test");
+  });
+
+  it("should render left and right icons correctly", () => {
+    const iconContent = <p data-testid={"icon"}>{"Test"}</p>;
+
+    const {rerender, container} = render(
+      <TypeaheadInput leftIcon={iconContent} {...defaultTypeaheadInputProps} />
+    );
+
+    const leftIcon = screen.getByText("Test");
+
+    expect(container).toContainElement(leftIcon);
+
+    rerender(<TypeaheadInput rightIcon={iconContent} {...defaultTypeaheadInputProps} />);
+
+    const rightIcon = screen.getByText("Test");
+
+    expect(container).toContainElement(rightIcon);
+  });
+
+  it("should run onQueryChange when value is changed", () => {
+    const handleQueryChange = jest.fn();
+
+    render(
+      <TypeaheadInput {...defaultTypeaheadInputProps} onQueryChange={handleQueryChange} />
+    );
+
+    handleQueryChange("test");
+
+    expect(handleQueryChange).toHaveBeenCalled();
+  });
+});

From e41cfefad4484b886dcfe8e399cd1c227a2ff0c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?=
 <yasincaliskandev@gmail.com>
Date: Wed, 12 Jan 2022 12:59:50 +0300
Subject: [PATCH 3/3] test(typeahead-input): Add placeholder test

---
 src/form/input/typeahead/typeahead-input.test.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/form/input/typeahead/typeahead-input.test.tsx b/src/form/input/typeahead/typeahead-input.test.tsx
index 94656057..cbc55e2f 100644
--- a/src/form/input/typeahead/typeahead-input.test.tsx
+++ b/src/form/input/typeahead/typeahead-input.test.tsx
@@ -63,4 +63,10 @@ describe("<TypeaheadInput />", () => {
 
     expect(handleQueryChange).toHaveBeenCalled();
   });
+
+  it("should add placeholder correctly", () => {
+    render(<TypeaheadInput {...defaultTypeaheadInputProps} />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "typeahead input");
+  });
 });