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();
+
+ 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();
+
+ const buttonComponent = screen.getByRole('button', { name: 'Click me' });
+
+ expect(buttonComponent).toHaveClass('primary');
+ });
+
+ test('when clicked, calls onButtonClick handler', async () => {
+ render();
+
+ 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();
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 | React.ChangeEvent) => {
- console.log(e);
-};
-
-const myChange2 = (e: React.ChangeEvent | React.ChangeEvent) => {
- console.log(e);
+// TODO: Remove when login functionality implemented in #8
+const tempHandler = () => {
+ return undefined;
};
function LoginScreen() {
@@ -21,9 +13,15 @@ function LoginScreen() {
Sign in to Nimble
>
);