some progress

__tests__/SignIn.test.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import SignIn from "../pages/SignIn";
+import { displayMessage } from "../backend/notifications/notifications";
+import { post } from "../backend/api";
+
+// Mock the displayMessage and post functions
+jest.mock("../backend/notifications/notifications", () => ({
+  displayMessage: jest.fn(),
+}));
+jest.mock("../backend/api", () => ({
+  post: jest.fn(),
+}));
+
+describe("SignIn Page", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders SignIn form", () => {
+    render(<SignIn />);
+    expect(screen.getByLabelText(/username/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByText(/sign in/i)).toBeInTheDocument();
+  });
+
+  test("displays error message on failed login", async () => {
+    post.mockResolvedValueOnce({ ok: false, data: { message: "Invalid credentials" } });
+
+    render(<SignIn />);
+    fireEvent.change(screen.getByLabelText(/username/i), { target: { value: "user" } });
+    fireEvent.change(screen.getByLabelText(/password/i), { target: { value: "password" } });
+    fireEvent.click(screen.getByText(/sign in/i));
+
+    expect(await screen.findByText(/invalid credentials/i)).toBeInTheDocument();
+    expect(displayMessage).toHaveBeenCalledWith("Invalid credentials", "error");
+  });
+
+  test("displays additional info message after multiple login attempts", async () => {
+    post.mockResolvedValueOnce({ ok: false, data: { message: "Invalid credentials" } });
+
+    render(<SignIn />);
+    fireEvent.change(screen.getByLabelText(/username/i), { target: { value: "user" } });
+    fireEvent.change(screen.getByLabelText(/password/i), { target: { value: "password" } });
+
+    // Simulate two failed login attempts
+    fireEvent.click(screen.getByText(/sign in/i));
+    fireEvent.click(screen.getByText(/sign in/i));
+
+    expect(displayMessage).toHaveBeenCalledWith("Note that you need to enter your ID name", "info");
+  });
+});