fix: tests

Author: MaxFrank13

src/containers/ProgramDashboard/ProgramsList/ProgressCategoryBubbles.test.tsx

@@ -12,8 +12,8 @@ describe('ProgressCategoryBubbles', () => {
       </IntlProvider>,
     );
 
-    expect(screen.getByText(1)).toBeInTheDocument();
-    expect(screen.getByText(2)).toBeInTheDocument();
-    expect(screen.getByText(0)).toBeInTheDocument();
+    expect(screen.getByTestId('completed-count')).toHaveTextContent('0');
+    expect(screen.getByTestId('in-progress-count')).toHaveTextContent('1');
+    expect(screen.getByTestId('remaining-count')).toHaveTextContent('2');
   });
 });

src/containers/ProgramDashboard/ProgramsList/ProgressCategoryBubbles.tsx

@@ -10,11 +10,11 @@ const ProgressCategoryBubbles: React.FC<Progress> = ({ notStarted, inProgress, c
   return (
     <Stack direction="horizontal" gap={2} className="flex-wrap">
       <Stack direction="vertical" className="align-items-center" gap={1}>
-        <Bubble className="bg-gray-500" data-testid="remaining-count">
-          {notStarted}
+        <Bubble variant="success" data-testid="completed-count">
+          {completed}
         </Bubble>
         <div>
-          {formatMessage(messages.progressCategoryBubblesRemaining)}
+          {formatMessage(messages.progressCategoryBubblesSuccess)}
         </div>
       </Stack>
 
@@ -28,11 +28,11 @@ const ProgressCategoryBubbles: React.FC<Progress> = ({ notStarted, inProgress, c
       </Stack>
 
       <Stack direction="vertical" className="align-items-center" gap={1}>
-        <Bubble className="bg-success-500" data-testid="completed-count">
-          {completed}
+        <Bubble className="text-gray-900" variant="warning" data-testid="remaining-count">
+          {notStarted}
         </Bubble>
         <div>
-          {formatMessage(messages.progressCategoryBubblesSuccess)}
+          {formatMessage(messages.progressCategoryBubblesRemaining)}
         </div>
       </Stack>
     </Stack>

src/index.jsx

@@ -5,7 +5,7 @@ import 'regenerator-runtime/runtime';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
-  Route, Routes,
+  Navigate, Route, Routes,
 } from 'react-router-dom';
 
 import {
@@ -48,7 +48,7 @@ subscribe(APP_READY, () => {
               <Route path="programs/:uuid" element={<div>program details page</div>} />
             </>
           )}
-          {/* <Route path="*" element={<Navigate to="/" replace />} /> */}
+          <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
         <FooterSlot />
       </AppProvider>