Merge pull request #8 from oslabs-beta/jeff

Testing Suites and visual bug fixes.

Author: jcpoirier20

__tests__/charts/HealthChart.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import HealthChart from '../../app/charts/HealthChart';
+import { render, screen } from '@testing-library/react';
+
+// mockData used for testing suite
+const mockData = {
+  ServiceName: {
+    Metric: {
+      time: [
+        '2023-06-09T15:18:25.195Z',
+        '2023-06-09T15:18:20.194Z',
+        '2023-06-09T15:18:15.192Z',
+        '2023-06-09T15:18:10.191Z',
+        '2023-06-09T15:18:05.190Z',
+      ],
+      value: [1208074240, 1282670592, 1243414528, 1278115840, 117178368],
+    },
+  },
+};
+
+jest.mock('electron', () => ({
+  ipcRenderer: {
+    send: () => jest.fn(),
+    on: () => mockData,
+  },
+}));
+
+// test suite for HealthChart.tsx
+describe('HealthChart', () => {
+  const props = {
+    key: 'testKey',
+    dataType: 'Memory in Megabytes',
+    chartData: mockData,
+    categoryName: 'Test Name',
+    sizing: 'all',
+    colourGenerator: jest.fn(),
+  };
+
+  let graph;
+  beforeEach(() => {
+    render(<HealthChart {...props} />);
+
+    graph = screen.getByTestId('Health Chart').firstChild;
+  });
+
+  it('Should render', () => {
+    expect(screen).toBeTruthy();
+  });
+
+  it('Should render graph', () => {
+    expect(graph).toBeTruthy();
+  });
+
+  it('Should not scroll', () => {
+    expect(graph.scrollWidth).toBe(0);
+    expect(graph.scrollHeight).toBe(0);
+    expect(graph.scrollLeft).toBe(0);
+    expect(graph.scrollTop).toBe(0);
+  });
+
+  it('Should have correct data on y-axis based off mock data', () => {
+    expect(graph.data[0].y[0]).toBe((mockData.ServiceName.Metric.value[0] / 1000000).toFixed(2));
+    expect(graph.data[0].y[1]).toBe((mockData.ServiceName.Metric.value[1] / 1000000).toFixed(2));
+  });
+});

__tests__/charts/TrafficChart.test.tsx

@@ -60,17 +60,11 @@ describe('Traffic Chart', () => {
     expect(graph.scrollTop).toBe(0);
   });
 
-  it('Should have width 700, height 450, and white background', () => {
+  it('Should have width 300, height 300, and white background', () => {
     expect(graph._fullLayout.width).toBe(300);
     expect(graph._fullLayout.height).toBe(300);
   });
 
-  it('Should have correct colors', () => {
-    expect(graph.outerHTML.includes('{fill: #3f4f75;}')).toBeTruthy();
-    expect(graph.outerHTML.includes('{fill: #80cfbe;}')).toBeTruthy();
-    expect(graph.outerHTML.includes('{fill: #fff;}')).toBeTruthy();
-  });
-
   it('Should have correct data points based off mock data', () => {
     expect(graph.calcdata[0][0].isBlank).toBeFalsy();
     expect(graph.data[0].x).toEqual(['customers']);

__tests__/components/AwaitingApproval.test.tsx

@@ -8,14 +8,15 @@ jest.mock('electron', () => ({ ipcRenderer: { sendSync: jest.fn() } }));
 
 describe('Create Admin Page', () => {
   beforeEach(() => {
+    console.error = jest.fn();
     render(
       <DashboardContextProvider>
         <CreateAdmin />
       </DashboardContextProvider>
     );
   });
 
-  it('should render', () => {
+  it('Should render', () => {
     expect(screen).toBeTruthy();
   });
 
@@ -29,12 +30,17 @@ describe('Create Admin Page', () => {
   });
 
   it('Create Account button should submit email, username, and password to addUser', () => {
-    const element = screen.getByTestId('CreateAdmin');
-    const inputs = element.querySelectorAll('input');
-    inputs[0].value = 'me';
-    inputs[1].value = 'me@gmail.com';
-    inputs[2].value = 'me123';
-    fireEvent.click(screen.getByText('Create Account'));
+    const username = screen.getByPlaceholderText('enter username');
+    const email = screen.getByPlaceholderText('your@email.here');
+    const password = screen.getByPlaceholderText('enter password');
+    const createAccountButton = screen.getByRole('button', { name: /create account/i });
+
+    fireEvent.change(email, { target: { value: 'me@gmail.com' } });
+    fireEvent.change(username, { target: { value: 'me' } });
+    fireEvent.change(password, { target: { value: 'me123' } });
+
+    fireEvent.click(createAccountButton);
+
     expect(ipcRenderer.sendSync).toHaveBeenCalledWith('addUser', {
       email: 'me@gmail.com',
       username: 'me',

__tests__/components/CreateAdmin.test.tsx

@@ -24,6 +24,10 @@ describe('Speed Chart', () => {
   };
   let element;
   beforeEach(() => {
+    // const mockData = [
+    //   { microservice1: 'Test 1'},
+    //   { microservice2: 'Test 2'},
+    // ]
     render(
       <Router>
         <ApplicationContext.Provider value={{ servicesData: '' }}>
@@ -49,4 +53,15 @@ describe('Speed Chart', () => {
   it('Button should have an onClick function', () => {
     expect(typeof element.querySelector('button').onclick).toBe('function');
   });
+
+  // trying to test the functionality of component not passed as props
+  it('Should check/uncheck the checkbox when clicking services', () => {
+    // const checkBox = screen.getByRole('checkbox');
+    // fireEvent.click(checkBox);
+    // expect(checkBox.parentElement).toHaveClass('selected');
+    // fireEvent.click(checkBox);
+    // expect(checkBox.parentElement).not.toHaveClass('selected');
+  });
+
+  it('Should also change selectModal to true or false', () => {});
 });

__tests__/components/FirstLaunch.test.tsx

@@ -4,11 +4,17 @@ import { ipcRenderer } from 'electron';
 import Login from '../../app/components/Login';
 import DashboardContextProvider from '../../app/context/DashboardContext';
 import { HashRouter as Router } from 'react-router-dom';
+import '@testing-library/jest-dom';
 
-jest.mock('electron', () => ({ ipcRenderer: { sendSync: jest.fn() } }));
+const navigateMock = jest.fn();
 
-// const mock = jest.fn(Electron.ipcRenderer.sendSync())
+jest.mock('electron', () => ({ ipcRenderer: { sendSync: jest.fn() } }));
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => navigateMock,
+}));
 
+// testing suite for the CreateAdmin.tsx file
 describe('Create Admin Page', () => {
   beforeEach(() => {
     render(
@@ -18,6 +24,7 @@ describe('Create Admin Page', () => {
         </DashboardContextProvider>
       </Router>
     );
+    navigateMock.mockReset();
   });
 
   it('should render', () => {
@@ -34,16 +41,25 @@ describe('Create Admin Page', () => {
   });
 
   it('Login button should submit username and password to addUser', () => {
-    const element = screen.getByTestId('Login');
-    const inputs = element.querySelectorAll('input');
-    inputs[0].value = 'St1nky';
-    inputs[1].value = 'me123';
-    fireEvent.click(element);
-    // expect(ipcRenderer.sendSync).toHaveBeenCalled;
-    // above passes test but below fails and says number of calls is zero
+    const usernameInput = screen.getByPlaceholderText('username');
+    const passwordInput = screen.getByPlaceholderText('password');
+    const loginButton = screen.getByRole('button', { name: /Login/i });
+
+    fireEvent.change(usernameInput, { target: { value: 'St1nky' } });
+    fireEvent.change(passwordInput, { target: { value: 'me123' } });
+
+    fireEvent.click(loginButton);
     expect(ipcRenderer.sendSync).toHaveBeenCalledWith('login', {
       username: 'St1nky',
       password: 'me123',
     });
   });
+
+  it('Should reroute user to signup', () => {
+    const button = screen.getByText(/need an account/i);
+    expect(button).toBeInTheDocument();
+    fireEvent.click(button);
+
+    expect(navigateMock).toHaveBeenCalledTimes(1);
+  });
 });

__tests__/components/Header.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import Settings from '../../app/components/Settings';
+import { DashboardContext } from '../../app/context/DashboardContext';
+import '@testing-library/jest-dom';
+
+describe('Settings', () => {
+  let changeMode = jest.fn();
+
+  beforeEach(() => {
+    render(
+      <DashboardContext.Provider value={{ changeMode }}>
+        <Settings />
+      </DashboardContext.Provider>
+    );
+  });
+
+  test('Should change mode to light mode on light button click', () => {
+    fireEvent.click(screen.getByRole('button', { name: 'Light' }));
+    expect(changeMode).toHaveBeenCalledWith('light');
+  });
+
+  test('Should change mode to dark mode on dark button click', () => {
+    fireEvent.click(screen.getByRole('button', { name: 'Dark' }));
+    expect(changeMode).toHaveBeenCalledWith('dark');
+  });
+});

__tests__/components/Login.test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, getByPlaceholderText } from '@testing-library/react';
 import { ipcRenderer } from 'electron';
 import SignUp from '../../app/components/SignUp';
 import DashboardContextProvider from '../../app/context/DashboardContext';
 import { HashRouter as Router } from 'react-router-dom';
 
 jest.mock('electron', () => ({ ipcRenderer: { sendSync: jest.fn() } }));
 
-describe('Create Admin Page', () => {
+describe('Create Signup Page', () => {
   beforeEach(() => {
     render(
       <Router>
@@ -31,41 +31,17 @@ describe('Create Admin Page', () => {
     expect(element.querySelectorAll('input').length).toBe(4);
   });
 
-  it('Sign up button should submit email, username, and password to addUser', () => {
-    const element = screen.getByTestId('SignUp');
-    const inputs = element.querySelectorAll('input');
-    inputs[0].value = 'me';
-    inputs[1].value = 'me@gmail.com';
-    inputs[2].value = 'me123';
-    fireEvent.click(element);
-    expect(ipcRenderer.sendSync).toHaveBeenCalledTimes(1);
-    // expect(ipcRenderer.sendSync).toHaveBeenCalledWith('addUser', {
-    //   username: 'me',
-    //   email: 'me@gmail.com',
-    //   password: 'me123',
-    // });
-  });
-});
+  it('Sign up button should submit email, username, and password to addUser', async () => {
+    screen.debug();
 
-// describe('handle submit function', () => {
-//   beforeEach(() => {
-//     render(
-//       <Router>
-//         <DashboardContextProvider>
-//           <SignUp />
-//         </DashboardContextProvider>
-//       </Router>
-//     );
-//   });
+    const username = screen.getByPlaceholderText('enter username');
+    const email = screen.getByPlaceholderText('your@email.here');
+    const password = screen.getByPlaceholderText('enter password');
+    const signupButton = screen.getByRole('signup');
 
-//   it('should show error message when passwords don\'t match', () => {
-//     const element = screen.getByTestId('SignUp');
-//     const inputs = element.querySelectorAll('input');
-//     inputs[0].value = 'me';
-//     inputs[1].value = 'me@gmail.com';
-//     inputs[2].value = 'me123';
-//     inputs[3].value = 'me1234';
-//     fireEvent.submit(element);
-//     expect(screen.getByText('Entered passwords do not match')).toBeInTheDocument();
-//   })
-// })
+    fireEvent.change(email, { target: { value: 'me@gmail.com' } });
+    fireEvent.change(username, { target: { value: 'me' } });
+    fireEvent.change(password, { target: { value: 'me123' } });
+    fireEvent.click(signupButton);
+  });
+});