[#7] Add some tests for Input componenet and clean up

src/components/Button/index.test.tsx

@@ -6,20 +6,13 @@ import Button from '.';
 const handleButtonClick = jest.fn();
 
 describe('Button', () => {
-  test('renders a button on the page', () => {
-    render(<Button text="Click me" type="button" onButtonClick={handleButtonClick} />);
+  test('renders a button of type button on the page with the given class', () => {
+    render(<Button text="Click me" type="button" className="primary" onButtonClick={handleButtonClick} />);
 
     const buttonComponent = screen.getByRole('button', { name: 'Click me' });
 
     expect(buttonComponent).toBeInTheDocument();
     expect(buttonComponent).toHaveAttribute('type', 'button');
-  });
-
-  test('renders a button with the given class', () => {
-    render(<Button text="Click me" type="button" className="primary" onButtonClick={handleButtonClick} />);
-
-    const buttonComponent = screen.getByRole('button', { name: 'Click me' });
-
     expect(buttonComponent).toHaveClass('primary');
   });
 

src/components/Input/index.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Input from '.';
+
+const handleInputChange = jest.fn();
+
+describe('Input', () => {
+  test('renders an Input of type Text on the page with the correct class', () => {
+    render(<Input name="email" label="email" type="text" className="input-class" onInputChange={handleInputChange} />);
+
+    const inputComponent = screen.getByRole('textbox', { name: 'email' });
+
+    expect(inputComponent).toBeInTheDocument();
+    expect(inputComponent).toHaveAttribute('type', 'text');
+    expect(inputComponent).toHaveClass('input-class');
+  });
+
+  test('renders an Input of type Text on the page with a label element', () => {
+    render(<Input name="email" label="email-label" type="text" onInputChange={handleInputChange} />);
+
+    const inputComponent = screen.getByRole('textbox', { name: 'email-label' });
+    const labelElement = screen.getByLabelText('email-label');
+
+    expect(inputComponent).toBeInTheDocument();
+    expect(labelElement).toBeInTheDocument();
+    expect(inputComponent).toHaveAttribute('type', 'text');
+  });
+
+  test('when text has changed, calls onInputChange handler', async () => {
+    render(<Input name="email" label="email-label" type="text" className="input-class" onInputChange={handleInputChange} />);
+
+    const user = userEvent.setup();
+
+    const inputComponent = screen.getByRole('textbox', { name: 'email-label' });
+
+    await user.type(inputComponent, 'test');
+
+    expect(handleInputChange).toBeCalledTimes(4);
+  });
+});

src/components/Input/index.tsx

@@ -1,10 +1,12 @@
+import { HTMLInputTypeAttribute } from 'react';
+
 import styles from './Input.module.scss';
 
 type InputProps = {
   name: string;
   label: string;
-  type: string;
-  className: string;
+  type?: HTMLInputTypeAttribute;
+  className?: string;
   onInputChange: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
 };