added analysis dashboard test

Signed-off-by: Duncan Ragsdale <[email protected]>

doc/updateProcess.md

@@ -108,12 +108,12 @@ The current process is to add all the analysis files into our pvhb s3 bucket and
     #!/bin/bash
 
     API_URL="http://api:8005/analysis/create/"
-    ANALYSIS_NAME="Time Shift Analysis"
+    analysis_name="Time Shift Analysis"
     EVALUATION_SCRIPT_PATH="/pv-validation-hub-bucket/evaluation_scripts/3/pvinsight-time-shift-runner.py"
     MAX_CONCURRENT_SUBMISSION_EVALUATION="100"
 
     curl -X POST -H "Content-Type: multipart/form-data" \
-    -F "analysis_name=$ANALYSIS_NAME" \
+    -F "analysis_name=$analysis_name" \
     -F "evaluation_script=@$EVALUATION_SCRIPT_PATH" \
     -F "max_concurrent_submission_evaluation=$MAX_CONCURRENT_SUBMISSION_EVALUATION" \
     $API_URL

frontend/package.json

@@ -21,6 +21,7 @@
     "react-frame-component": "^5.2.3",
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
+    "react-router": "^6.22.1",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",
     "react-share": "^4.4.1",

frontend/src/__tests__/test.js

@@ -1,5 +1,7 @@
 // This file is used to run all the tests in the application
 import AppTests from '../components/App/App.testsuite.js';
+import DashboardTests from '../components/Analyses/Analyses.tests.js';
 
 // This is the exported function that checks the main app page
 AppTests();
+DashboardTests();

frontend/src/components/Analyses/Analyses.jsx

@@ -16,16 +16,16 @@ import { isDevelopment } from '../../config/environment.js';
 
 export default function Dashboard() {
   const navigate = useNavigate();
-  const [analysis_id, setAnalysisId] = useState();
+  const [analysis_id, setanalysis_id] = useState();
 
   useEffect(() => {
     if (analysis_id !== null && analysis_id !== undefined) {
       navigate(`/analysis/${analysis_id}`);
     }
   }, [analysis_id, navigate]);
 
-  const handleCardClick = (card_id, card_title) => {
-    setAnalysisId(card_id);
+  const handleCardClick = (cardId, cardTitle) => {
+    setanalysis_id(cardId);
   };
 
   const [isLoading, isError, cardDetails] = DashboardService.useGetAnalysisSet('/analysis/home');
@@ -81,6 +81,7 @@ export default function Dashboard() {
                                     index={index}
                                     card={card}
                                     onClick={handleCardClick}
+                                    testId={`analysis-card${index}`}
                                   />
                                 ))
                             }
@@ -92,7 +93,7 @@ export default function Dashboard() {
   );
 }
 
-function CustomizedCard({ index, card, onClick }) {
+function CustomizedCard({ index, card, onClick, testId }) {
   const [shortDescription, setShortDescription] = useState('');
   const [cardDir, setCardDir] = useState('');
 
@@ -113,6 +114,7 @@ function CustomizedCard({ index, card, onClick }) {
         sx={{ maxWidth: 345, height: 380 }}
         key={card.analysis_id}
         onClick={() => onClick(card.analysis_id, card.analysis_name)}
+        data-testid={testId}
       >
         <CardHeader
           sx={{ height: 61 }}

frontend/src/components/Analyses/Analyses.tests.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import {
+  render, screen, cleanup, waitForElementToBeRemoved, waitFor, fireEvent, getByTestId, findByTestId,
+} from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import * as router from 'react-router';
+import Dashboard from './Analyses.jsx';
+
+// Mock window.location.hostname
+global.window = Object.create(window);
+Object.defineProperty(window, 'location', {
+  value: {
+    hostname: 'localhost',
+  },
+});
+
+// Mock the DashboardService module
+jest.mock('../../services/dashboard_service.js', () => ({
+  useGetAnalysisSet: jest.fn(() => [false, false, [{ id: 'development', title: 'Dev Analysis' }]]),
+}));
+
+// This is the exported function that contains all the tests
+export default function DashboardTests() {
+  // Cleanup after each test
+  afterEach(cleanup);
+
+  describe('Analyses component', () => {
+    it('renders without crashing', () => {
+      render(<Dashboard />, { wrapper: BrowserRouter });
+    });
+
+    it('displays circular progress bar while loading', () => {
+      render(<Dashboard />, { wrapper: BrowserRouter });
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    it('updates card once loading is done', async () => {
+      render(<Dashboard />, { wrapper: BrowserRouter });
+      await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+      expect(screen.getByText('Dev Analysis')).toBeInTheDocument();
+    });
+  });
+/*
+This test needs to be fixed/completed when I have more time. Its... tricky.
+  describe('Analysis Cards', () => {
+    it('Should navigate to each analysis page when the card was clicked', async () => {
+      render(<Dashboard />, { wrapper: BrowserRouter });
+
+      const navigate = jest.fn();
+      jest.spyOn(router, 'useNavigate').mockImplementation(() => navigate);
+
+      // Wait for the progress bar to be removed
+      await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+
+      // Find the card by its analysis_name
+      const card = screen.getByTestId('analysis-card0');
+
+      // Simulate a user clicking the card
+      await userEvent.click(card);
+      console.log("here", navigate);
+
+      // Check if navigation was called
+      await waitFor(() => expect(navigate).toHaveBeenCalled());
+    });
+  });
+  */
+}