Fixing login button test to assert user Auth

Author: eshaan32

__tests__/loginPage.test.js

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import {render, fireEvent, screen} from '@testing-library/react';
 import App from '../src/renderer/App';
-import Login from '../src/components/login/login';
+import {authenticateUser} from '../src/components/Login';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import store from '../src/renderer/store';
@@ -11,11 +11,6 @@ import fetchMock from 'jest-fetch-mock';
 import { act } from 'react-test-renderer';
 import Docketeer from '../assets/docketeer-title.png';
 
-const mockedUsedNavigate = jest.fn();
-// jest.mock('react-router-dom', () => ({
-//  useNavigate: () => mockedUsedNavigate,
-// }));
-
 fetchMock.enableMocks();
 
 describe('Login Page Renders', () => {
@@ -46,13 +41,22 @@ describe('Login Page Renders', () => {
   });
 
   test('Login button', async () => {
-    fetch.mockResponseOnce(JSON.stringify({ username: 'sysadmin', password: 'belugas' }));
+    fetch.mockResponseOnce(JSON.stringify({ username: 'csgroup', password: 'csgroup' }));
     const alert = window.alert = jest.fn();
-    const loginButton = screen.getByRole('button');
+
+    // mock the login module as a whole, accessing the imported authenticateUser function property
+    jest.mock('../src/components/Login');
+
+    // select login button
+    const loginButton2 = screen.getByRole('login');
+    // fire event to click login button
     await act(()=>{
-      fireEvent.click(loginButton);
+      fireEvent.click(loginButton2);
     });
-    // need to fix issue of localhost/4000 not rendering anything after you login
+    // should ensure the login button has been clicked
+    expect(loginButton2).toBeCalled;
+    // should ensure that the authenticate user function invoked by button click is called
+    expect(authenticateUser).toBeCalled;
   });
 
   test('Docketeer Image', async () => {

src/components/Login.tsx

@@ -104,6 +104,7 @@ const Login = () => {
               color='primary'
               type='submit'
               size='medium'
+              role='login'
               className='login-buttons'
               onClick={() => handleLogin}
               sx={{