Add Input component unit test

airbytehq · Apr 27, 2022 · 775e990 · 775e990
1 parent 9481f26
commit 775e990
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/airbyte-webapp/src/components/base/Input/Input.test.tsx 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 = "[email protected]";
+    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
@@ -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}