Merge pull request #32 from oslabs-beta/Eshaan

Pull request to update testing files

Author: WongJonathann

__tests__/ImageTab.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as helper from '../src/components/helper/commands';
 import { describe, beforeEach, expect, test, jest } from '@jest/globals';
 import Images from '../src/components/tabs/Images';
 import {
@@ -57,14 +58,15 @@ describe('Images', () => {
   });
 
   // currently gets stuck at window.runExec method --> reads undefined
-  // describe('pull button on click', () => {
-  //   test('fires pull button functionality', () => {
-  //     const { container } = render(<Images {...props} />);
-  //     const pullButton = screen.getByRole('button', { name: 'Pull' });
-  //     fireEvent.click(pullButton);
-  //     expect(pullButton).toBeCalled;
-  //   });
-  // });
+  describe('pull button on click', () => {
+    test('fires pull button functionality', () => {
+      // const { container } = render(<Images {...props} />);
+      const pullButton = screen.getByRole('button', { name: 'PULL' });
+      fireEvent.click(pullButton);
+      expect(pullButton).toBeCalled;
+      expect(Images.handleClick).toBeCalled;
+    });
+  });
 
   describe('Images', () => {
     test('Renders an image if one is found', () => {

__tests__/ProcessLogHelper.test.js

@@ -9,18 +9,19 @@ import {
 import {describe, beforeEach,afterEach, expect, test} from '@jest/globals';
 
 describe('makeArrayOfObjects', () => {
-  test('returns an array', () => {
-    const string = `HelloZ from Docker!
-
-    This message shows that your installation appears to be working correctly.
-    
+  test('returns a result array with appropriately constructed object elements', () => {
+    const string2 = `2022-12-22T19:36:44.564948926Z 2022/12/22 19:36:44 [notice] 1#1: start worker process 22\n2022-12-22T20:12:01.081323805Z 2022/12/22 20:12:01 [notice] 22#22: gracefully shutting down
     `;
-    const result = makeArrayOfObjects(string);
+
+    const result = makeArrayOfObjects(string2);
+    console.log(result);
     expect(result).toBeInstanceOf(Array);
     expect(result.length).toEqual(2);
     expect(result.containerName).toBe(undefined);
-    expect(result[0].logMsg).toEqual('HelloZ from Docker!');
-    expect(result[0].timeStamp).toBeUndefined();
+    expect(result[0].logMsg).toEqual('1#1: start worker process 22');
+    expect(result[0].timeStamp).toBe('12/22/2022, 1:36:44 PM');
+    expect(result[1].logMsg).toEqual('22#22: gracefully shutting down');
+    expect(result[1].timeStamp).toBe('12/22/2022, 2:12:01 PM');
   });
 
   // Can be addressed through TS

__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,39 @@ 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).toHaveBeenCalled;
+  });
+
+  test('Register Button navigates to Sign Up Page', async () => {    
+    // select the register button
+    const registerButton = screen.getByRole('register');
+    // fire event to click the button, navigating to new page
+    await act(() => {
+      fireEvent.click(registerButton);
+    });
+    // assert that the event happened
+    expect(registerButton).toBeCalled;
+
+    // on new page, select the title h1 element -> 'Sign Up'
+    const title = document.querySelector('h1');
+    
+    // assert that the title element has the SIgn Up text
+    expect(title.textContent).toBe('Sign Up');
   });
 
   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={{
@@ -117,6 +118,7 @@ const Login = () => {
             <Button
               variant='contained'
               size='small'
+              role='register'
               className='register login-buttons'
               onClick={() => navigate('/userSignup')}
               sx={{

src/components/tabs/Images.tsx

@@ -126,7 +126,7 @@ const Images = (props: ImagesProps) => {
               setRepo(e.target.value);
             }}
           ></input>
-          <button className="etc-btn" onClick={() => handleClick()}>
+          <button className="etc-btn" name='pull' onClick={() => handleClick()}>
             PULL
           </button>
         </span>