From ebd3198d23def3d74d3aa30f4d0e575b9487236b Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Wed, 15 Feb 2023 10:24:24 +0700
Subject: [PATCH] [#7] Add tests for Button and cleanup

---
 cypress/tsconfig.json                |  2 +-
 src/components/Button/index.test.tsx | 33 ++++++++++++++++++++++++++++
 src/components/Button/index.tsx      |  2 +-
 src/screens/Home/index.test.tsx      |  4 +---
 src/screens/Home/login.tsx           | 26 ++++++++++------------
 5 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Button/index.test.tsx

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index d02ddfd..a943f82 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["es5", "dom"],
     "types": ["node", "cypress", "@testing-library/cypress"],
     "moduleResolution": "node",
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
new file mode 100644
index 0000000..282ab06
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 13c5ae9..c1722dd 100644
--- a/src/components/Button/index.tsx
+++ b/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;
 };
 
diff --git a/src/screens/Home/index.test.tsx b/src/screens/Home/index.test.tsx
index b6a10ba..436904d 100644
--- a/src/screens/Home/index.test.tsx
+++ b/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');
diff --git a/src/screens/Home/login.tsx b/src/screens/Home/login.tsx
index 20df5d5..a45aea9 100644
--- a/src/screens/Home/login.tsx
+++ b/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>
     </>
   );