diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
index d7dc3af..96d25f8 100644
--- a/src/components/Button/index.test.tsx
+++ b/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();
+ test('renders a button of type button on the page with the given class', () => {
+ render();
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();
-
- const buttonComponent = screen.getByRole('button', { name: 'Click me' });
-
expect(buttonComponent).toHaveClass('primary');
});
diff --git a/src/components/Input/index.test.tsx b/src/components/Input/index.test.tsx
new file mode 100644
index 0000000..e16fa00
--- /dev/null
+++ b/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();
+
+ 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();
+
+ 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();
+
+ const user = userEvent.setup();
+
+ const inputComponent = screen.getByRole('textbox', { name: 'email-label' });
+
+ await user.type(inputComponent, 'test');
+
+ expect(handleInputChange).toBeCalledTimes(4);
+ });
+});
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 6ca17e8..99ee71a 100644
--- a/src/components/Input/index.tsx
+++ b/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 | React.ChangeEvent) => void;
};