Merge pull request #2458 from OneCommunityGlobal/development

Frontend Release to Main [3.66]

src/__tests__/TaskTable/Selectors.test.js

@@ -12,7 +12,7 @@ describe('get_task_by_wbsId', () => {
     };
     const WbsTasksID = ['A','B'];
     const result = get_task_by_wbsId(WbsTasksID, mockTasks);
-    expect(result).toEqual([{ id: 2, wbsId: 'B' }]);
+    expect(result).toEqual([ { id: 1, wbsId: 'A' }, { id: 3, wbsId: 'A' }, { id: 2, wbsId: 'B' } ]);
   });
 
   it('returns the correct tasks based on WbsTasksID', () => {
@@ -26,7 +26,23 @@ describe('get_task_by_wbsId', () => {
     };
     const WbsTasksID = ['A'];
     const result = get_task_by_wbsId(WbsTasksID, mockTasks);
-    expect(result).toEqual(undefined);
+    console.log("RESULT: ");
+    console.log(result)
+    expect(result).toEqual([{"id": 1, "wbsId": "A"}, {"id": 3, "wbsId": "A"}]);
+  });
+
+  it('returns an empty array when WbsTasksID is not found', () => {
+    const mockTasks = {
+      fetched: true,
+      taskItems: [
+        { id: 1, wbsId: 'A' },
+        { id: 2, wbsId: 'B' },
+        { id: 3, wbsId: 'A' }
+      ]
+    };
+    const WbsTasksID = ['C']; // WbsTasksID not found
+    const result = get_task_by_wbsId(WbsTasksID, mockTasks);
+    expect(result).toEqual([]);
   });
 });
 

src/__tests__/TaskTable/TasksTable.test.js

@@ -16,7 +16,7 @@ describe('TasksTable component', () => {
 
   const renderComponent = () => render(
     <Provider store={store}>
-      <TasksTable WbsTasksID={['someId']} />
+      <TasksTable tasks={[]} />
     </Provider>
   );
 

src/actions/allTeamsAction.js

@@ -12,6 +12,7 @@ import {
   FETCH_TEAM_USERS_ERROR,
   TEAM_MEMBER_DELETE,
   TEAM_MEMBER_ADD,
+  UPDATE_TEAM_MEMBER_VISIBILITY,
 } from '../constants/allTeamsConstants';
 
 /**
@@ -102,6 +103,14 @@ export const teamMemberAddAction = (member) => ({
   member,
 });
 
+export const updateVisibilityAction = (visibility, userId, teamId) => ({
+  type: UPDATE_TEAM_MEMBER_VISIBILITY,
+  visibility,
+  userId,
+  teamId,
+});
+
+
 /**
  * fetching all user teams
  */
@@ -223,3 +232,27 @@ export const addTeamMember = (teamId, userId, firstName, lastName, role, addDate
     });
   };
 };
+
+export const updateTeamMemeberVisibility = (teamId, userId, visibility) => {
+  const updateData = { visibility, userId, teamId };
+  const updateVisibilityPromise = axios.put(ENDPOINTS.TEAM, updateData);
+
+  return async dispatch => {
+    updateVisibilityPromise
+      .then(res => {
+        dispatch(updateVisibilityAction(visibility, userId, teamId));
+      })
+      .catch(error => {
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          console.error('Error updating visibility:', error.response.data);
+        } else if (error.request) {
+          // The request was made but no response was received
+          console.error('Error updating visibility: No response received');
+        } else {
+          // Something happened in setting up the request that triggered an error
+          console.error('Error updating visibility:', error.message);
+        }
+      });
+  };
+};

src/components/Header/Header.css

@@ -89,3 +89,9 @@
     display: none;
   }
 }
+
+@media screen and (min-width: 1400px) and (max-width: 1700px) {
+  .owner-message {
+    display: none;
+  }
+}

src/components/PermissionsManagement/PermissionsManagement.jsx

@@ -18,13 +18,15 @@ import hasPermission from '../../utils/permissions';
 import CreateNewRolePopup from './NewRolePopUp';
 import PermissionChangeLogTable from './PermissionChangeLogTable';
 
-function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode }) {
+function PermissionsManagement(props) {
+  const { auth, getUserRole, userProfile, darkMode } = props;
+  let { roles } = props;
   const [isNewRolePopUpOpen, setIsNewRolePopUpOpen] = useState(false);
   const [isUserPermissionsOpen, setIsUserPermissionsOpen] = useState(false);
 
-  const canPostRole = hasPermission('postRole');
-  const canPutRole = hasPermission('putRole');
-  const canManageUserPermissions = hasPermission('putUserProfilePermissions');
+  const canPostRole = props.hasPermission('postRole');
+  const canPutRole = props.hasPermission('putRole');
+  const canManageUserPermissions = props.hasPermission('putUserProfilePermissions');
 
   // Added permissionChangeLogs state management
   const [changeLogs, setChangeLogs] = useState([]);

src/components/Projects/Project/Project.jsx

@@ -6,7 +6,7 @@ import { NavItem } from 'reactstrap';
 import { connect } from 'react-redux';
 import hasPermission from 'utils/permissions';
 import { boxStyle } from 'styles';
-import { toast } from 'react-toastify'; 
+import { toast } from 'react-toastify';  
 
 const Project = props => {
   const { darkMode, index } = props;
@@ -59,12 +59,15 @@ const Project = props => {
   }, [projectData]);
 
   return (
-    <tr className={`projects__tr ${darkMode ? 'text-light' : ''}`} id={'tr_' + projectId}>
+    <tr className="projects__tr" id={'tr_' + props.projectId}>
+
       <th className="projects__order--input" scope="row">
         <div>{index + 1}</div>
       </th>
-      <td className="projects__name--input">
-        {(canPutProject) ? (
+
+      <td data-testid="projects__name--input" className="projects__name--input">
+        {(canPutProject || canSeeProjectManagementFullFunctionality) ? (
+
           <input
             type="text"
             className={`form-control ${darkMode ? 'bg-yinmn-blue border-0 text-light' : ''}`}
@@ -79,9 +82,13 @@ const Project = props => {
       <td className="projects__category--input">
         {(canPutProject) ? (
           <select
-            value={category}
-            onChange={onUpdateProjectCategory}
-            className={darkMode ? 'bg-yinmn-blue border-primary text-light' : ''}
+
+            data-testid="projects__category--input" //added for unit test
+            value={props.category}
+            onChange={e => {
+              setCategory(e.target.value);
+            }}
+
           >
             <option default value="Unspecified">Unspecified</option>
             <option value="Food">Food</option>
@@ -97,8 +104,12 @@ const Project = props => {
           category
         )}
       </td>
-      <td className="projects__active--input" onClick={canPutProject ? onUpdateProjectActive : null}>
-        {isActive ? (
+
+      {/* <td className="projects__active--input" data-testid="project-active" onClick={canPutProject ? updateActive : null}>
+        {props.active ? ( */}
+          <td className="projects__active--input" data-testid="project-active" onClick={canPutProject ? onUpdateProjectActive : null}>
+              {isActive ? (
+
           <div className="isActive">
             <i className="fa fa-circle" aria-hidden="true"></i>
           </div>
@@ -136,6 +147,7 @@ const Project = props => {
       {(canDeleteProject) ? (
         <td>
           <button
+            data-testid="delete-button"
             type="button"
             className="btn btn-outline-danger"
             onClick={onArchiveProject}

src/components/Projects/Project/Project.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { BrowserRouter } from 'react-router-dom';
+import Project from './Project';
+import thunk from 'redux-thunk';
+import { authMock, rolesMock, userProfileMock } from '../../../__tests__/mockStates';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+const renderProject = (props) => {
+  const store = mockStore({
+    auth: authMock,
+    userProfile: userProfileMock,
+    role: rolesMock.role,
+  });
+
+  return render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <Project {...props} />
+      </BrowserRouter>
+    </Provider>
+  );
+};
+
+describe('Project Component', () => {
+  const sampleProjectData = {
+    _id: '1',
+    projectName: 'Sample Project',
+    category: 'Unspecified',
+    isActive: true,
+  };
+
+  const sampleProps = {
+    projectData: sampleProjectData,
+    index: 0,
+    darkMode: false,
+    hasPermission: jest.fn((permission) => true),
+    onUpdateProject: jest.fn(),
+    onClickArchiveBtn: jest.fn(),
+  };
+
+  it('renders correctly with props', () => {
+    const { getByDisplayValue, getByText } = renderProject(sampleProps);
+
+    // Check if the input element is present
+    expect(getByDisplayValue('Sample Project')).toBeInTheDocument();
+
+    // Verify the category value
+    expect(getByText('Unspecified')).toBeInTheDocument();
+  });
+
+  it('updates project name on input change', async () => {
+    const { getByDisplayValue } = renderProject(sampleProps);
+
+    // Find the input element using getByDisplayValue
+    const inputElement = getByDisplayValue('Sample Project');
+
+    // Simulate a user changing the input value
+    fireEvent.change(inputElement, { target: { value: 'New Project Name' } });
+
+    await waitFor(() => {
+      // Check if the input value has been updated
+      expect(getByDisplayValue('New Project Name')).toBeInTheDocument();
+    });
+  });
+
+  it('toggles project active status on button click', () => {
+    const { getByTestId } = renderProject(sampleProps);
+
+    // Find the active status button and click it
+    const activeButton = getByTestId('project-active');
+    fireEvent.click(activeButton);
+
+    // Check if the onUpdateProject function has been called
+    expect(sampleProps.onUpdateProject).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers delete action on button click', () => {
+    const { getByTestId } = renderProject(sampleProps);
+
+    // Find the delete button and click it
+    const deleteButton = getByTestId('delete-button');
+    fireEvent.click(deleteButton);
+
+    // Check if the onClickArchiveBtn function has been called
+    expect(sampleProps.onClickArchiveBtn).toHaveBeenCalledTimes(1);
+  });
+});
+