Fix tests

Author: meronkahsay

tesfa/src/app/admin/performance/page.tsx

@@ -48,9 +48,9 @@ export default function PerformancePage() {
   const queryData = aggregateQueriesByMonth(filteredLogs);
   return (
     <div className="flex h-screen bg-gray-50 overflow-hidden">
-      {/* Sidebar stays fixed */}
+
       <Sidebar />
-      {/* Main scrollable content */}
+  
       <div className="flex-1 flex flex-col overflow-hidden">
 
         <div className="flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8 py-6">

tesfa/src/app/edit-profile/page.test.tsx

@@ -77,7 +77,7 @@ describe('EditProfilePage', () => {
       refetch: jest.fn(),
     });
     render(<EditProfilePage />);
-    expect(screen.getByText(/Loading.../i)).toBeInTheDocument();
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
   });
 
   it('renders error message', () => {
@@ -89,9 +89,8 @@ describe('EditProfilePage', () => {
       refetch: jest.fn(),
     });
     render(<EditProfilePage />);
-    expect(screen.getByText(error)).toBeInTheDocument();
+    expect(screen.getByText(error)).toBeInTheDocument(); 
   });
-
   it('submits form and navigates on success', async () => {
     jest.useFakeTimers();
     render(<EditProfilePage />);

tesfa/src/app/kanban/components/Board/index.test.tsx

@@ -59,19 +59,19 @@ describe('KanbanBoard', () => {
     jest.clearAllMocks();
   });
 
-  it('renders loading state', () => {
-    (fetchTaskModule.useFetchTaskAssignments as jest.Mock).mockReturnValue({
-      assignedTasks: [],
-      setAssignedTasks: jest.fn(),
-      loading: true,
-      error: null,
-      updateTaskStatus: jest.fn(),
-    });
-
-    render(<KanbanBoard />);
-    expect(screen.getByText(/Loading board.../i)).toBeInTheDocument();
+ it('renders loading state', () => {
+  (fetchTaskModule.useFetchTaskAssignments as jest.Mock).mockReturnValue({
+    assignedTasks: [],
+    setAssignedTasks: jest.fn(),
+    loading: true,
+    error: null,
+    updateTaskStatus: jest.fn(),
   });
 
+  render(<KanbanBoard />);
+  expect(screen.getByTestId('loader')).toBeInTheDocument();
+});
+
   it('renders error state', () => {
     (fetchTaskModule.useFetchTaskAssignments as jest.Mock).mockReturnValue({
       assignedTasks: [],

tesfa/src/app/profile/components/TaskSummary/index.test.tsx

@@ -1,17 +1,15 @@
-// src/app/profile/components/TaskSummary/index.test.tsx
+
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import TaskSummary from './index'; // or './TaskSummary' depending on your file
+import TaskSummary from './index'; 
 
-// Mock the hook
 const mockUseFetchTaskAssignments = jest.fn();
 
 jest.mock('@/app/hooks/useFetchTaskAssignment', () => ({
   __esModule: true,
   useFetchTaskAssignments: () => mockUseFetchTaskAssignments(),
 }));
 
-// Optional: mock icons for cleaner output
 jest.mock('lucide-react', () => {
   const original = jest.requireActual('lucide-react');
   return {
@@ -59,16 +57,14 @@ describe('TaskSummary', () => {
 
     render(<TaskSummary />);
 
-    // Page 1
+    
     expect(screen.getByText('Setup database')).toBeInTheDocument();
     expect(screen.queryByText('Review PR')).not.toBeInTheDocument();
 
-    // Go to page 2
     fireEvent.click(screen.getByText('Next'));
     expect(screen.getByText('Review PR')).toBeInTheDocument();
     expect(screen.queryByText('Setup database')).not.toBeInTheDocument();
 
-    // Go back to page 1
     fireEvent.click(screen.getByText('Previous'));
     expect(screen.getByText('Setup database')).toBeInTheDocument();
   });
@@ -88,7 +84,7 @@ describe('TaskSummary', () => {
     expect(prevBtn).toBeDisabled();
     expect(nextBtn).not.toBeDisabled();
 
-    fireEvent.click(nextBtn); // go to page 2
+    fireEvent.click(nextBtn); 
 
     expect(prevBtn).not.toBeDisabled();
     expect(nextBtn).toBeDisabled();
@@ -106,10 +102,9 @@ describe('TaskSummary', () => {
     expect(screen.getByText('0/0 Tasks Completed')).toBeInTheDocument();
     expect(screen.getByText('0%')).toBeInTheDocument();
 
-    // The "Recently Completed" heading is still shown (by design)
+  
     expect(screen.getByText('Recently Completed')).toBeInTheDocument();
 
-    // But no task items should appear
     expect(screen.queryByTestId('check-icon')).not.toBeInTheDocument();
   });
 });

tesfa/src/app/profile/page.test.tsx

@@ -62,19 +62,7 @@ describe('ProfilePage', () => {
     expect(screen.getByText('Network error')).toHaveClass('text-red-500');
   });
 
-  it('renders nothing when profile is null and no error', () => {
-    mockUseFetchOrganization.mockReturnValue({
-      user: null,
-      loading: false,
-      error: null,
-    });
-    mockUseFetchTaskAssignments.mockReturnValue({
-      assignedTasks: [],
-    });
-
-    const { container } = render(<ProfilePage />);
-    expect(container.firstChild).toBeNull();
-  });
+ 
 
   it('renders full profile when data is available', () => {
     const mockProfile = {

tesfa/src/app/profile/page.tsx

@@ -24,7 +24,6 @@ export default function ProfilePage() {
   const completedTasks = assignedTasks.filter((task) => task.status === "completed");
   const totalTasks = assignedTasks.length;
 
-  // Always render Layout
   return (
     <Layout>
       <div className="flex flex-col w-full items-center bg-[#FCF6F7] h-screen overflow-y-auto">
@@ -38,19 +37,19 @@ export default function ProfilePage() {
         <div className="flex flex-col lg:flex-row items-start w-full max-w-7xl gap-10 px-4 sm:px-6 md:px-8 lg:px-10 pb-20">
           <div className="w-full lg:w-1/2 bg-[#00363E] rounded-3xl shadow-lg">
             <div className="relative flex flex-col items-center p-22 ">
-              {/* Loading/Error states */}
+      
               {error && (
                 <div className="text-red-500 text-center p-4 w-full">
                   {error}
                 </div>
               )}
-              {/* Show loading spinner or skeleton while loading */}
+          
               {loading && (
                 <div className="flex items-center justify-center w-full h-[180px]">
                   <span className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#C3A041]"></span>
                 </div>
               )}
-              {/* Render content only if profile is loaded and not loading */}
+          
               {!loading && profile && (
                 <>
                   <div className="w-[150px] sm:w-[180px] h-[150px] sm:h-[180px] absolute  rounded-full border-4 border-[#C3A041] flex items-center justify-center overflow-hidden bg-white">
@@ -80,7 +79,7 @@ export default function ProfilePage() {
             </div>
 
             <div className="w-full bg-[#F3FBFD] rounded-3xl p-6 sm:p-10 flex flex-col gap-6 shadow-inner">
-              {/* Show skeleton or actual data */}
+          
               {loading && (
                 <div className="text-center text-gray-400">Loading profile...</div>
               )}
@@ -97,7 +96,7 @@ export default function ProfilePage() {
                       </p>
                     </div>
                   </div>
-                  {/* ...other fields... */}
+             
                   <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full">
                     <Mail className="w-7 h-7 text-[#C3A041]" />
                     <div className="flex flex-col sm:flex-row sm:items-center sm:gap-36">

tesfa/src/app/sharedComponents/Loader/index.tsx

@@ -1,6 +1,6 @@
 const Loader = () => {
   return (
-    <div className="flex justify-center items-center h-full">
+    <div className="flex justify-center items-center h-full" data-testid="loader">
 <div className="dashed-spinner"></div>
 <svg className="svg-logo" width="121" height="94" viewBox="0 0 141 114" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="83.0713" cy="60.1314" r="3.23202" transform="rotate(-0.756824 83.0713 60.1314)" fill="#00353D"/>

tesfa/src/app/tasks/components/TaskDetails/index.test.tsx

@@ -84,25 +84,27 @@ describe("TasksDetails component", () => {
       expect(pushMock).toHaveBeenCalledWith(expect.stringContaining("/kanban?newTasks="));
     });
   });
+it("displays loading state", () => {
+  (useFetchTasksHook.useFetchTasks as jest.Mock).mockReturnValue({
+    tasks: [],
+    setTasks: jest.fn(),
+    loading: true,
+    error: null,
+  });
 
-  it("displays loading and error states", () => {
-    (useFetchTasksHook.useFetchTasks as jest.Mock).mockReturnValue({
-      tasks: [],
-      setTasks: jest.fn(),
-      loading: true,
-      error: null,
-    });
-    const { rerender } = render(<TasksDetails />);
-    expect(screen.getByText(/loading tasks/i)).toBeInTheDocument();
-
-    (useFetchTasksHook.useFetchTasks as jest.Mock).mockReturnValue({
-      tasks: [],
-      setTasks: jest.fn(),
-      loading: false,
-      error: new Error("fail"),
-    });
+  render(<TasksDetails />);
+  expect(screen.getByTestId("loader")).toBeInTheDocument();
+});
 
-    rerender(<TasksDetails />);
-    expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+it("displays error state", () => {
+  (useFetchTasksHook.useFetchTasks as jest.Mock).mockReturnValue({
+    tasks: [],
+    setTasks: jest.fn(),
+    loading: false,
+    error: "Failed to load",
   });
+
+  render(<TasksDetails />);
+  expect(screen.getByText(/Something went Wrong/i)).toBeInTheDocument();
+});
 });