Add dark mode, add Provider to tests

Author: JuliaHa0902

src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.css

@@ -29,4 +29,35 @@
 
 .total-material-cost-per-project .select__menu {
   font-size: 12px;
+}
+
+/* Dark mode for the Select Dropdown */
+.dark-mode .material-cost-per-project-dropdown .select__control {
+  background-color: var(--section-bg) !important;
+  border-color: var(--section-title-bg) !important;
+  color: var(--text-color) !important;
+}
+
+.dark-mode .material-cost-per-project-dropdown .select__menu {
+  background-color: var(--section-bg) !important;
+}
+
+.dark-mode .material-cost-per-project-dropdown .select__option:hover {
+  background-color: #0d55b3;
+}
+
+.dark-mode .material-cost-per-project-dropdown .select__option--is-focused{
+  background-color: #0d55b3;
+}
+
+.dark-mode .material-cost-per-project-dropdown .select__multi-value {
+  background-color: #375071;
+}
+
+.dark-mode .material-cost-per-project-dropdown .select__multi-value__label {
+  color: white;
+}
+
+.dark-mode .material-cost-per-project-dropdown .css-tj5bde-Svg:hover {
+  fill: white;
 }

src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import Select from 'react-select';
 import {
   Chart as ChartJS,
@@ -13,8 +14,6 @@ import { Bar } from 'react-chartjs-2';
 import { toast } from 'react-toastify';
 import axios from 'axios';
 import './TotalMaterialCostPerProject.css';
-import { useEffect } from 'react';
-import { useMemo } from 'react';
 import { ENDPOINTS } from 'utils/URL';
 import Loading from 'components/common/Loading';
 
@@ -43,37 +42,49 @@ const projectDemoCosts = {
   '8': 876,
 };
 
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      position: 'top',
-    },
-    title: {
-      display: false,
-    },
-  },
-  scales: {
-    x: {
-      ticks: {
-        font: {
-          size: 11,
-        },
-        callback(val) {
-          const label = this.getLabelForValue(val);
-          return label.length > 20 ? `${label.slice(0, 20)}…` : label;
-        },
-      },
-    },
-  },
-};
-
 function TotalMaterialCostPerProject() {
   const [dataLoaded, setDataLoaded] = useState(false);
   const [allProjects, setAllProjects] = useState([]);
   const [projectCosts, setProjectCosts] = useState({});
   const [selectedProjects, setSelectedProjects] = useState([]);
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const textColor = darkMode ? '#ffffff' : '#666';
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'top',
+        labels: { color: textColor },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        grid: { display: false },
+        ticks: {
+          color: textColor,
+          font: {
+            size: 11,
+          },
+          callback(val) {
+            // eslint-disable-next-line react/no-this-in-sfc
+            const label = this.getLabelForValue(val);
+            return label.length > 20 ? `${label.slice(0, 20)}…` : label;
+          },
+        },
+      },
+      y: {
+        grid: { color: '#ccc' },
+        ticks: {
+          color: textColor,
+        },
+      },
+    },
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -124,15 +135,15 @@ function TotalMaterialCostPerProject() {
         {
           label: 'Total Material Cost (*1000$)',
           data: selectedProjects.map(p => projectCosts[p.value]),
-          backgroundColor: 'rgba(20, 137, 175, 1)',
+          backgroundColor: 'rgb(23, 154, 197)',
           borderRadius: 10,
         },
       ],
     };
   }, [selectedProjects, projectCosts]);
 
   return (
-    <div className="total-material-cost-per-project">
+    <div className={`total-material-cost-per-project ${darkMode ? 'dark-mode' : ''}`}>
       <h2 className="total-material-cost-per-project-chart-title">
         Total Material Cost Per Project
       </h2>
@@ -145,7 +156,7 @@ function TotalMaterialCostPerProject() {
               options={allProjects}
               value={selectedProjects}
               onChange={setSelectedProjects}
-              className="basic-multi-select"
+              className="material-cost-per-project-dropdown basic-multi-select"
               classNamePrefix="select"
               defaultValue={allProjects}
               placeholder="Select Projects"

src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/__tests__/TotalMaterialCostPerProject.test.js

@@ -2,6 +2,8 @@ import { render, screen, waitFor, within, fireEvent } from '@testing-library/rea
 import axios from 'axios';
 import { toast } from 'react-toastify';
 import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
 import TotalMaterialCostPerProject from '../TotalMaterialCostPerProject';
 
 // Mocks
@@ -22,6 +24,12 @@ jest.mock('react-chartjs-2', () => ({
   ),
 }));
 
+const mockStore = configureStore([]);
+const store = mockStore({
+  theme: { darkMode: false }, // Mock dark mode value
+  // Include other necessary mock slices if needed
+});
+
 const mockProjects = [
   { projectId: 1, projectName: 'Project A' },
   { projectId: 2, projectName: 'Project B' },
@@ -46,23 +54,35 @@ describe('TotalMaterialCostPerProject', () => {
   });
 
   it('shows loading spinner on initial render and hide the spinner when data loads', async () => {
-    const { getByTestId } = render(<TotalMaterialCostPerProject />);
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <TotalMaterialCostPerProject />
+      </Provider>,
+    );
     const loadingSpinner = getByTestId('loading');
     expect(loadingSpinner).toBeInTheDocument();
 
     await waitFor(() => expect(loadingSpinner).not.toBeInTheDocument());
   });
 
   it('renders bar chart when data loads successfully', async () => {
-    render(<TotalMaterialCostPerProject />);
+    render(
+      <Provider store={store}>
+        <TotalMaterialCostPerProject />
+      </Provider>,
+    );
     await waitFor(() => {
       // The slash help test partial content
       expect(screen.getByText(/Project A,Project B/)).toBeInTheDocument();
     });
   });
 
   it('render selector when data loads successfully', async () => {
-    render(<TotalMaterialCostPerProject />);
+    render(
+      <Provider store={store}>
+        <TotalMaterialCostPerProject />
+      </Provider>,
+    );
     await waitFor(() => {
       expect(screen.getByText('Project A')).toBeInTheDocument();
     });
@@ -74,7 +94,11 @@ describe('TotalMaterialCostPerProject', () => {
   });
 
   it('when select or deselect items in selector, the bar chart updates too', async () => {
-    render(<TotalMaterialCostPerProject />);
+    render(
+      <Provider store={store}>
+        <TotalMaterialCostPerProject />
+      </Provider>,
+    );
     await waitFor(() => {
       expect(screen.getByText('Project A')).toBeInTheDocument();
     });
@@ -109,7 +133,11 @@ describe('TotalMaterialCostPerProject', () => {
       }
       return Promise.reject(new Error('not found'));
     });
-    render(<TotalMaterialCostPerProject />);
+    render(
+      <Provider store={store}>
+        <TotalMaterialCostPerProject />
+      </Provider>,
+    );
     await waitFor(() => expect(toast.error).toHaveBeenCalled());
   });
 
@@ -123,7 +151,11 @@ describe('TotalMaterialCostPerProject', () => {
       }
       return Promise.reject(new Error('not found'));
     });
-    render(<TotalMaterialCostPerProject />);
+    render(
+      <Provider store={store}>
+        <TotalMaterialCostPerProject />
+      </Provider>,
+    );
     await waitFor(() => expect(toast.error).toHaveBeenCalled());
   });
 });