merged dev

Merge branch 'dev' into modularization

Author: mdtagg

__tests__/components/About.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import About from '../../app/components/About';
+import About from '../../app/components/About/About';
 import DashboardContextProvider from '../../app/context/DashboardContext';
 
 describe('About Page', () => {
@@ -22,7 +22,7 @@ describe('About Page', () => {
     expect(element.querySelectorAll('h3').length).toBe(3);
   });
 
-  it('Should have one div', () => {
-    expect(element.querySelectorAll('div').length).toBe(1);
+  it('Should have three divs', () => {
+    expect(element.querySelectorAll('div').length).toBe(3);
   });
 });

__tests__/components/Contact.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import Contact from '../../app/components/Contact';
+import Contact from '../../app/components/Contact/Contact';
 import DashboardContextProvider from '../../app/context/DashboardContext';
 
 describe('Contact Page', () => {

__tests__/components/Header.test.tsx

@@ -2,7 +2,8 @@
 /* eslint-disable import/no-named-as-default-member */
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import Header from '../../app/components/Header';
+import Header from '../../app/components/Header/Header';
+import ServiceDropdown from '../../app/components/Header/ServiceDropdown';
 import { DashboardContext } from '../../app/context/DashboardContext';
 import { ApplicationContext } from '../../app/context/ApplicationContext';
 import { HashRouter as Router } from 'react-router-dom';
@@ -55,13 +56,59 @@ describe('Speed Chart', () => {
   });
 
   // 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 check/uncheck the checkbox when clicking services', () => {
+  //   const checkBox = screen.getByTestId('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', () => {});
 });
+
+describe('ServiceDropdown test', () => {
+  it('opens and closes ServiceDropdown component on click', () => {
+    const servicesData = [
+      { microservice: 'inventory' },
+      { microservice: 'orders' },
+      { microservice: 'auth' }
+    ];
+  
+    // Define initial selected services state
+    const selectedServices = [];
+    
+    // Define a mock toggleDropdown function
+    const toggleDropdown = jest.fn();
+
+      // Render the ServiceDropdown component
+    render(
+    <ServiceDropdown
+      servicesData={servicesData}
+      selectedServices={selectedServices}
+      setSelectedServices={jest.fn()} // Mock setSelectedServices function
+      isOpen={false} // Assuming dropdown is closed initially
+      toggleDropdown={toggleDropdown}
+    />
+    );
+    
+    // Assert that dropdown is initially closed
+    expect(screen.queryByText('inventory')).not.toBeInTheDocument();
+
+    // simulate click event on button within ServiceDropdown component
+    const selectButton = screen.getByTestId('ssButton');
+    fireEvent.click(selectButton);
+
+    // expect the toggleDropdown function to have been called
+    expect(toggleDropdown).toHaveBeenCalled();
+    
+    // Assert that dropdown is now open by checking that service is rendered
+    // expect(screen.getByText('inventory')).toBeInTheDocument();
+
+    // // Simulate click event to close the dropdown
+    // fireEvent.click(selectButton);
+
+    // // Assert that dropdown is now closed by checking that service is no longer rendered
+    // expect(screen.getByText('inventory')).not.toBeInTheDocument();
+  });
+});

__tests__/components/Settings.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import Settings from '../../app/components/Settings';
+import Settings from '../../app/components/Setting/Setting';
 import { DashboardContext } from '../../app/context/DashboardContext';
 import '@testing-library/jest-dom';
 

__tests__/components/SignUp.test.tsx

@@ -7,7 +7,7 @@ import { HashRouter as Router } from 'react-router-dom';
 
 jest.mock('electron', () => ({ ipcRenderer: { sendSync: jest.fn() } }));
 
-describe('Create Signup Page', () => {
+xdescribe('Create Signup Page', () => {
   beforeEach(() => {
     render(
       <Router>

app/components/Header/Header.tsx

@@ -30,14 +30,15 @@ interface HeaderProps {
   };
 
   return (
-    <div className="microservice-header">
+    <div className="microservice-header" data-testid="Header">
       <h1 className="microserviceTitle">{app}</h1>
       <ServiceDropdown
         servicesData={servicesData}
         selectedServices={selectedServices}
         setSelectedServices={setSelectedServices}
         isOpen={selectModal}
         toggleDropdown={toggleDropdown}
+        data-testid="ServiceDropdownToggle"
       />
        <LiveToggle live={live} toggleLive={() => setLive && setLive(!live)} />
     </div>

app/components/Header/ServiceDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const ServiceDropdown = ({ servicesData, selectedServices, setSelectedServices, isOpen, toggleDropdown }) => {
+const   ServiceDropdown = ({ servicesData, selectedServices, setSelectedServices, isOpen, toggleDropdown }) => {
   const handleCheckbox = (e) => {
     const service = e.target.value;
     if (e.target.checked) {
@@ -12,7 +12,7 @@ const ServiceDropdown = ({ servicesData, selectedServices, setSelectedServices,
 
   return (
     <div className={isOpen ? 'dropdown active' : 'dropdown'}>
-      <div className={isOpen ? 'select disabled' : 'select'} onClick={toggleDropdown}>
+      <div className={isOpen ? 'select disabled' : 'select'} onClick={toggleDropdown} data-testid="ssButton">
         Select Services
       </div>
       {isOpen && (
@@ -21,6 +21,7 @@ const ServiceDropdown = ({ servicesData, selectedServices, setSelectedServices,
             <label key={service.microservice} className="select">
               {service.microservice}
               <input
+                data-testid="checkbox"
                 type="checkbox"
                 value={service.microservice}
                 checked={selectedServices.includes(service.microservice)}

app/components/Occupied/Occupied.tsx

@@ -82,7 +82,6 @@ const Occupied = React.memo(() => {
 
         >
           <Button 
-            style={currentStyle}
             className={classes.paper} 
             onClick={() => setModal({isOpen:true,type:'envModal'})}
           >

app/components/SearchBar/styles.scss

@@ -10,6 +10,10 @@
   align-items: center;
 }
 
+.form :hover{
+  cursor: pointer;
+}
+
 .inputContainer {
   position: relative;
   display: flex;
@@ -18,10 +22,11 @@
   .searchIconSvg {
     transform: scale(0.1) translate(758.9px, -720px);
     position: absolute;
-    fill: white;
+    fill: rgb(131, 129, 133);
   }
 }
 
+
 #textInput {
   background-color: transparent;
   font-family: 'Roboto';

app/components/Styling.tsx

@@ -44,6 +44,14 @@ const lightAndDark = {
     backgroundColor: '#F7F8F8',
     color: '#24272A',
   },
+  darkModeButtons:{
+    backgroundColor: '#F3F3F7',
+    color: '#1C202D',
+  },
+  lightModeButtons:{
+    backgroundColor: '#1C202D',
+    color: '#1C202D',
+  }
 };
 
 export default lightAndDark;