Merge pull request #500 from janong24/FrontendTesting

Frontend testing

Author: janong24

client/app/aboutUs/aboutUs.test.js

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react';
+import { useRouter } from 'next/router';
+import { useAuth } from '../contexts/AuthContext';
+import GetAboutUs from './page.tsx';
+
+jest.mock("../contexts/PropContext", () => ({
+  __esModule: true,
+  useProp: jest.fn(() => ({
+    handlePopUp: jest.fn(),
+  })),
+}));
+
+const fakeUser = {
+  uid: "1"
+}
+
+jest.mock('../contexts/AuthContext', () => {
+  return {
+      useAuth: () => {
+          return {
+              user : fakeUser
+          }
+      }
+  }
+});
+
+const mockRouter= jest.fn();
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => {
+      return {
+          push: mockRouter
+      }
+  }
+}));
+
+jest.mock("../contexts/UserContext", () => {
+  return {
+    useUser: () =>{
+      return {
+          userInfo: {
+              uid: '1',
+          }
+      }
+    }
+  };
+});
+
+describe('GetAboutUs', () => {
+  it('returns GetAboutUsPage component', () => {
+    const { container } = render(<GetAboutUs />);
+
+    expect(container.textContent).toContain('Compass is a medical wellness app');
+  });
+});

client/app/aboutUs/aboutUsPage.test.js

@@ -1,17 +1,73 @@
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { useRouter } from 'next/router';
+import { useAuth } from '../contexts/AuthContext';
 import { render, screen } from '@testing-library/react';
+import AboutUsPage from './aboutUsPage';
+
+
+jest.mock("../contexts/PropContext", () => ({
+    __esModule: true,
+    useProp: jest.fn(() => ({
+      handlePopUp: jest.fn(),
+    })),
+  }));
+  
+  const fakeUser = {
+    uid: "1"
+  }
+  
+  jest.mock('../contexts/AuthContext', () => {
+    return {
+        useAuth: () => {
+            return {
+                user : fakeUser
+            }
+        }
+    }
+  });
+  
+  const mockRouter= jest.fn();
+  
+  jest.mock("next/navigation", () => ({
+    useRouter: () => {
+        return {
+            push: mockRouter
+        }
+    }
+  }));
+  
+  jest.mock("../contexts/UserContext", () => {
+    return {
+      useUser: () =>{
+        return {
+            userInfo: {
+                uid: '1',
+            }
+        }
+      }
+    };
+  });
 
 test("data is displayed correctly", async () => {
-    render(<aboutUsPage/>);
+    render(<AboutUsPage/>);
     setTimeout(() => {
         expect(screen.getByText("Compass is a medical wellness app that targets specifically people above 40 years old who might be interested in having some type of assistance to keep their healthy habits and lifestyles. Compass offers features of managing medical reminders, booking appointments,tracking user’s medications and treatments all in one consolidated application. In addition, having features of medical journals such as diabetic journals allows some patients to easily note their daily doses and treatment details making them able to follow the history of their treatments and use it as a reference for themselves or to show to their medical professional. Additionally,with the speed dial fast option to contact relatives during some emergency situations patients would be able to contact their relatives in a faster and easier way. With many features compass aims for users to be healthier and function hassle free.")).toBeInTheDocument();
     }, 1000);
 })
 
 test("data is displayed correctly", async () => {
-    render(<aboutUsPage/>);
+    render(<AboutUsPage/>);
     setTimeout(() => {
     expect(screen.getByText("About Compass")).toBeInTheDocument();
 
     }, 1000);
 })
+
+test("Back button redirects to settings page", async () => {
+    render(<AboutUsPage/>);
+    const backButton = screen.getAllByRole('button')[0];
+    await userEvent.click(backButton);
+    await mockRouter;
+    expect(mockRouter).toHaveBeenCalledWith('/settings');
+})

client/app/aboutUs/page.tsx

@@ -4,17 +4,9 @@ import React from "react";
 import { useAuth } from "../contexts/AuthContext";
 import AboutUsPage from "./aboutUsPage";
 
-export default function GetFoodJournals() {
+export default function GetAboutUs() {
 	const router = useRouter();
 	const { user } = useAuth();
 
-	// React.useEffect(() => {
-	// 	if (!user) router.push("/login");
-	// }, [user]);
-
-	// if (!user) {
-	//   return <div><Custom403/></div>
-	// }
-
 	return <AboutUsPage />;
 }

client/app/createActivityJournal/createActivityJournal.test.js

@@ -182,3 +182,11 @@ describe("Activity Journal tests", () => {
 		expect(mockRouter).toHaveBeenCalledWith("/getActivityJournals");
 	});
 });
+
+test("Back button redirects to getActivityJournals page", async () => {
+	render(<CreateActivityJournalPage/>);
+	const backButton = screen.getAllByRole('button')[0];
+	await userEvent.click(backButton);
+	await mockRouter;
+	expect(mockRouter).toHaveBeenCalledWith('/getActivityJournals');
+});

client/app/createActivityJournal/createActivityJournalPage.test.js

@@ -0,0 +1,62 @@
+import { render } from '@testing-library/react';
+import { useRouter } from 'next/router';
+import { useAuth } from '../contexts/AuthContext';
+import { createActivityJournal } from '../http/activityJournalAPI.ts';
+import CreateActivityJournal from './page.tsx';
+
+jest.mock("../contexts/PropContext", () => ({
+  __esModule: true,
+  useProp: jest.fn(() => ({
+    handlePopUp: jest.fn(),
+  })),
+}));
+
+const fakeUser = {
+  uid: "1"
+}
+
+jest.mock('../contexts/AuthContext', () => {
+  return {
+      useAuth: () => {
+          return {
+              user : fakeUser
+          }
+      }
+  }
+});
+
+jest.mock('../http/activityJournalAPI.ts', () => {
+  return {
+    createActivityJournal: jest.fn(),
+  }
+});
+
+const mockRouter= jest.fn();
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => {
+      return {
+          push: mockRouter
+      }
+  }
+}));
+
+jest.mock("../contexts/UserContext", () => {
+  return {
+    useUser: () =>{
+      return {
+          userInfo: {
+              uid: '1',
+          }
+      }
+    }
+  };
+});
+
+describe('CreateActivityJournal', () => {
+  it('returns CreateActivityJournalPage component', () => {
+    const { container } = render(<CreateActivityJournal />);
+
+    expect(container.textContent).toContain('Create Activity Journal');
+  });
+});

client/app/createActivityJournal/page.tsx

@@ -8,13 +8,5 @@ export default function CreateActivityJournal() {
 	const router = useRouter();
 	const { user } = useAuth();
 
-	// React.useEffect(() => {
-	// 	if (!user) router.push("/login");
-	// }, [user]);
-
-	// if (!user) {
-	//   return <div><Custom403/></div>
-	// }
-
 	return <CreateActivityJournalPage />;
 }

client/app/createBloodPressureJournal/createBloodPressureJournal.test.js

@@ -171,3 +171,10 @@ describe("Blood Pressure Journal tests", () => {
 	});
 });
 
+test("Back button redirects to getBloodPressureJournals page", async () => {
+	render(<CreateBloodPressureJournalPage/>);
+	const backButton = screen.getAllByRole('button')[0];
+	await userEvent.click(backButton);
+	await mockRouter;
+	expect(mockRouter).toHaveBeenCalledWith('/getBloodPressureJournals');
+})

client/app/createBloodPressureJournal/createBloodPressureJournalPage.test.js

@@ -0,0 +1,62 @@
+import { render } from '@testing-library/react';
+import { useRouter } from 'next/router';
+import { useAuth } from '../contexts/AuthContext';
+import { createBloodPressureJournal } from '../http/bloodPressureJournalAPI.ts';
+import CreateBloodPressureJournalPage from './page.tsx';
+
+jest.mock("../contexts/PropContext", () => ({
+  __esModule: true,
+  useProp: jest.fn(() => ({
+    handlePopUp: jest.fn(),
+  })),
+}));
+
+const fakeUser = {
+  uid: "1"
+}
+
+jest.mock('../contexts/AuthContext', () => {
+  return {
+      useAuth: () => {
+          return {
+              user : fakeUser
+          }
+      }
+  }
+});
+
+jest.mock('../http/bloodPressureJournalAPI.ts', () => {
+  return {
+    createBloodPressureJournal: jest.fn(),
+  }
+});
+
+const mockRouter= jest.fn();
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => {
+      return {
+          push: mockRouter
+      }
+  }
+}));
+
+jest.mock("../contexts/UserContext", () => {
+  return {
+    useUser: () =>{
+      return {
+          userInfo: {
+              uid: '1',
+          }
+      }
+    }
+  };
+});
+
+describe('CreateBloodPressureJournal', () => {
+  it('returns CreateBloodPressureJournalPage component', () => {
+    const { container } = render(<CreateBloodPressureJournalPage />);
+
+    expect(container.textContent).toContain('Add an Entry - Blood Pressure');
+  });
+});

client/app/createBloodPressureJournal/page.tsx

@@ -8,13 +8,5 @@ export default function CreateBloodPressureJournal() {
 	const router = useRouter();
 	const { user } = useAuth();
 
-	// React.useEffect(() => {
-	// 	if (!user) router.push("/login");
-	// }, [user]);
-
-	// if (!user) {
-	//   return <div><Custom403/></div>
-	// }
-
 	return <CreateBloodPressureJournalPage />;
 }

client/app/createFoodJournal/createFoodJournal.test.js

@@ -4,9 +4,19 @@ import userEvent from "@testing-library/user-event";
 import { auth } from "../config/firebase";
 import { createFoodIntakeJournal } from "../http/foodJournalAPI";
 import CreateFoodJournalPage from "./createFoodJournalPage";
+
 const fakeUser = {
 	uid: "1",
 };
+
+jest.mock('next/navigation', () => ({
+  useSearchParams: () =>{
+    return {
+        get: useSearchParams
+    }
+  }
+}));
+
 jest.mock("../contexts/AuthContext", () => {
 	return {
 		useAuth: () => {
@@ -196,3 +206,11 @@ describe("Food journal tests", () => {
 		expect(mockRouter).toHaveBeenCalledWith("/getFoodJournals");
 	});
 });
+
+test("Back button redirects to getFoodJournals page", async () => {
+	render(<CreateFoodJournalPage/>);
+	const backButton = screen.getAllByRole('button')[0];
+	await userEvent.click(backButton);
+	await mockRouter;
+	expect(mockRouter).toHaveBeenCalledWith('/getFoodJournals');
+})