tests: added test for <Input />

client/package.json

@@ -81,6 +81,7 @@
     "@graphql-codegen/typescript": "^1.14.0",
     "@graphql-codegen/typescript-operations": "^1.14.0",
     "@graphql-codegen/typescript-react-apollo": "^1.14.0",
-    "jest-environment-jsdom-sixteen": "^1.0.3"
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "prettier": "^2.0.5"
   }
 }

client/src/@convoy-ui/Input.tsx

@@ -90,14 +90,14 @@ export const InputWrapper = styled.div`
   }
 `;
 
-interface InputProps {
+interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
+  name?: string;
   label?: string | React.ReactNode;
   icon?: any;
   postfixIcon?: any;
   inputRef?: any;
   errors?: any;
   onPostfixIconClick?: (input?: HTMLInputElement) => void;
-  [x: string]: any;
 }
 
 export const Textarea = styled(StyledInput).attrs(p => ({ as: "textarea" }))`
@@ -106,6 +106,7 @@ export const Textarea = styled(StyledInput).attrs(p => ({ as: "textarea" }))`
 `;
 
 export const Input: React.FC<InputProps> = ({
+  name,
   label,
   inputRef,
   errors,
@@ -115,25 +116,27 @@ export const Input: React.FC<InputProps> = ({
   ...props
 }) => {
   let _inputRef = useRef<HTMLInputElement>();
-  let hasErrors = errors && errors[props?.name];
+  let hasErrors = errors && errors[name];
 
   return (
     <InputWrapper className="form--input__wrapper">
       <StyledLabel hasErrors={hasErrors}>
         {label && <span>{label}</span>}
 
         <Flex align="center" className={!!Icon ? "input__wrapper" : ""}>
-          {Icon && <Icon className="input__icon" />}
+          {Icon && <Icon data-testid="input-icon" className="input__icon" />}
           <StyledInput
             ref={e => {
               _inputRef.current = e;
               inputRef && inputRef(e);
             }}
             {...props}
+            aria-label={name}
           />
           {PostFixIcon && (
             <PostFixIcon
               onClick={() => onPostfixIconClick(_inputRef?.current)}
+              data-testid="input-postfix-icon"
               className="input__icon postfix-icon"
             />
           )}
@@ -144,7 +147,7 @@ export const Input: React.FC<InputProps> = ({
           data-testid="input-error"
           className={`text--error ${hasErrors && "show-error"}`}
         >
-          <ErrorMessage errors={errors} name={props?.name} />
+          <ErrorMessage errors={errors} name={name} />
         </div>
       )}
     </InputWrapper>

client/src/tests/Input.test.tsx

@@ -0,0 +1,52 @@
+import "./__mocks__/matchMedia";
+import React from "react";
+import { fireEvent } from "@testing-library/react";
+
+import { Input } from "@convoy-ui";
+import { renderWithStyledTheme } from "./testUtils";
+import { FaCog, FaAnchor } from "react-icons/fa";
+
+describe("<Input />", () => {
+  it("should renders <Input>", () => {
+    const { getByText, getByLabelText } = renderWithStyledTheme(
+      <Input name="test" label="This is a label" defaultValue="hello world" />
+    );
+    expect(getByLabelText(/test/i)).toBeInTheDocument();
+    expect(getByLabelText(/test/i)).toHaveValue("hello world");
+    expect(getByText(/This is a label/i)).toBeInTheDocument();
+  });
+
+  it("should have icons", () => {
+    const onPostfixIconClick = jest.fn();
+    const { getByLabelText, getByTestId } = renderWithStyledTheme(
+      <Input
+        icon={FaCog}
+        postfixIcon={FaAnchor}
+        onPostfixIconClick={onPostfixIconClick}
+        name="test"
+        label="name"
+        defaultValue="hello world"
+      />
+    );
+    expect(getByLabelText(/test/i)).toBeInTheDocument();
+    expect(getByTestId("input-icon")).toBeInTheDocument();
+    expect(getByTestId("input-postfix-icon")).toBeInTheDocument();
+
+    fireEvent.click(getByTestId("input-postfix-icon"));
+    expect(onPostfixIconClick).toHaveBeenCalledWith(getByLabelText(/test/i));
+  });
+
+  it("should have errors", () => {
+    const { getByLabelText, getByTestId } = renderWithStyledTheme(
+      <Input
+        errors={{ test: { type: "", message: "Invalid", isManual: true } }}
+        name="test"
+        label="name"
+        defaultValue="hello world"
+      />
+    );
+    expect(getByLabelText(/test/i)).toBeInTheDocument();
+    expect(getByTestId("input-error")).toBeInTheDocument();
+    expect(getByTestId("input-error")).toHaveTextContent("Invalid");
+  });
+});