[#7] Add tests for Button and cleanup

cypress/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["es5", "dom"],
     "types": ["node", "cypress", "@testing-library/cypress"],
     "moduleResolution": "node",

src/components/Button/index.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+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} />);
+
+    const buttonComponent = screen.getByRole('button', { name: 'Click me' });
+
+    expect(buttonComponent).toBeInTheDocument();
+    expect(buttonComponent).toHaveAttribute('type', 'button');
+  });
+
+  it('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');
+  });
+
+  test('when clicked, calls onButtonClick handler', async () => {
+    render(<Button text="Click me" type="button" onButtonClick={handleButtonClick} />);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Click me' }));
+
+    expect(handleButtonClick).toBeCalledTimes(1);
+  });
+});

src/components/Button/index.tsx

@@ -3,7 +3,7 @@ import styles from './Button.module.scss';
 type ButtonProps = {
   text: string;
   type: 'button' | 'submit' | 'reset';
-  className: string;
+  className?: string;
   onButtonClick: () => void;
 };
 

src/screens/Home/index.test.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 
 import HomeScreen from '.';
 
 describe('HomeScreen', () => {
-  it('renders learn react link', () => {
+  test('renders learn react link', () => {
     render(<HomeScreen />);
 
     const mainHeadingElement = screen.getByTestId('app-main-heading');

src/screens/Home/login.tsx

@@ -2,17 +2,9 @@ import logo from 'assets/images/logo.svg';
 import Button from 'components/Button';
 import Input from 'components/Input';
 
-const myFunc = () => {
-  console.log('hello');
-  alert('i');
-};
-
-const myChange = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
-  console.log(e);
-};
-
-const myChange2 = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
-  console.log(e);
+// TODO: Remove when login functionality implemented in #8
+const tempHandler = () => {
+  return undefined;
 };
 
 function LoginScreen() {
@@ -21,9 +13,15 @@ function LoginScreen() {
       <img className="inline-block" src={logo} alt="logo" />
       <p className="text-white opacity-50 my-8">Sign in to Nimble</p>
       <form>
-        <Input name="email" label="Email" type="text" className="block h-14 w-80 pl-3 my-3" onInputChange={myChange} />
-        <Input name="password" label="Password" type="password" className="block h-14 w-80 pl-3 my-3" onInputChange={myChange2} />
-        <Button type="button" text="Sign in" className="h-14 w-80" onButtonClick={myFunc} />
+        <Input name="email" label="Email" type="text" className="block h-14 w-80 pl-3 my-3" onInputChange={tempHandler} />
+        <Input
+          name="password"
+          label="Password"
+          type="password"
+          className="block h-14 w-80 pl-3 my-3"
+          onInputChange={tempHandler}
+        />
+        <Button type="button" text="Sign in" className="h-14 w-80" onButtonClick={tempHandler} />
       </form>
     </>
   );