ui unit test

booking-app/__tests__/FormNavigation.test.ts

@@ -0,0 +1,44 @@
+// __tests__/LandingPage.test.tsx
+import { render, screen } from "testUtils";
+
+import { MockAuthentication } from "firebase-mock";
+import MyBookingsPage from "@/components/src/client/routes/myBookings/myBookingsPage";
+import { useRouter } from "next/navigation";
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(),
+}));
+
+jest.mock("../lib/firebase/firebaseClient.ts", () => ({
+  auth: new MockAuthentication(),
+}));
+
+jest.mock(
+  "../components/src/client/routes/components/AuthProvider.tsx",
+  () => ({
+    useAuth: {
+      user: {
+        email: "abc12345",
+      },
+      loading: false,
+      error: null,
+    },
+  })
+);
+
+describe("Form Navigation", () => {
+  it('My Bookings page "book more" button goes to form landing page', () => {
+    // Mock the `push` function
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockReturnValue({
+      push,
+    });
+
+    render(MyBookingsPage());
+
+    const button = screen.getByTestId("book-btn");
+    button.click();
+
+    expect(push).toHaveBeenCalledWith("/book");
+  });
+});

booking-app/components/src/client/routes/components/bookingTable/BookMoreButton.tsx

@@ -40,6 +40,7 @@ export default function BookMoreButton() {
                 color: theme.palette.primary.main,
                 width: "100%",
               }}
+              data-testid="book-btn"
             >
               <Add /> Request a Reservation
             </Button>

booking-app/jest.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "jest";
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: "v8",
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  // Add more setup options before each test is run
+  // setupFiles: ["./jest.setup.ts"],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);