From 775e990de35fa613fca311ab50c97f1037e2db1f Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
Date: Wed, 27 Apr 2022 10:05:59 -0400
Subject: [PATCH] Add Input component unit test

---
 .../src/components/base/Input/Input.test.tsx  | 34 +++++++++++++++++++
 .../src/components/base/Input/Input.tsx       |  8 ++++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 airbyte-webapp/src/components/base/Input/Input.test.tsx

diff --git a/airbyte-webapp/src/components/base/Input/Input.test.tsx b/airbyte-webapp/src/components/base/Input/Input.test.tsx
new file mode 100644
index 000000000000..2b70069abcfb
--- /dev/null
+++ b/airbyte-webapp/src/components/base/Input/Input.test.tsx
@@ -0,0 +1,34 @@
+import { render } from "@testing-library/react";
+
+import { Input } from "./Input";
+
+describe("<Input />", () => {
+  test("renders text input", () => {
+    const value = "aribyte@example.com";
+    const { getByTestId, queryByTestId } = render(<Input defaultValue={value} />);
+
+    expect(getByTestId("input")).toHaveAttribute("type", "text");
+    expect(getByTestId("input")).toHaveValue(value);
+    expect(queryByTestId("toggle-password-visibility-button")).toBeFalsy();
+  });
+
+  test("renders password input with visibilty button", () => {
+    const value = "eight888";
+    const { getByTestId, getByRole } = render(<Input type="password" defaultValue={value} />);
+
+    expect(getByTestId("input")).toHaveAttribute("type", "password");
+    expect(getByTestId("input")).toHaveValue(value);
+    expect(getByRole("img", { hidden: true })).toHaveAttribute("data-icon", "eye");
+  });
+
+  test("renders visible password when visibility button is clicked", () => {
+    const value = "eight888";
+    const { getByTestId, getByRole } = render(<Input type="password" defaultValue={value} />);
+
+    getByTestId("toggle-password-visibility-button").click();
+
+    expect(getByTestId("input")).toHaveAttribute("type", "text");
+    expect(getByTestId("input")).toHaveValue(value);
+    expect(getByRole("img", { hidden: true })).toHaveAttribute("data-icon", "eye-slash");
+  });
+});
diff --git a/airbyte-webapp/src/components/base/Input/Input.tsx b/airbyte-webapp/src/components/base/Input/Input.tsx
index f8ece5a49ce4..51bd0015be47 100644
--- a/airbyte-webapp/src/components/base/Input/Input.tsx
+++ b/airbyte-webapp/src/components/base/Input/Input.tsx
@@ -92,9 +92,15 @@ const Input: React.FC<InputProps> = (props) => {
         isPassword={isPassword}
         onFocus={onInputFocusChange}
         onBlur={onInputFocusChange}
+        data-testid="input"
       />
       {isVisibilityButtonVisible ? (
-        <VisibilityButton iconOnly onClick={() => setIsContentVisible(!isContentVisible)} type="button">
+        <VisibilityButton
+          iconOnly
+          onClick={() => setIsContentVisible(!isContentVisible)}
+          type="button"
+          data-testid="toggle-password-visibility-button"
+        >
           <FontAwesomeIcon icon={isContentVisible ? faEyeSlash : faEye} fixedWidth />
         </VisibilityButton>
       ) : null}