some progress

__tests__/Home.test.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import Home from "src/pages/Home";
+import { useGetChatsQuery } from "../backend/redux/api_slice";
+
+// Mock Redux store
+const mockStore = configureStore([]);
+
+// Mock the useGetChatsQuery hook
+jest.mock("src/backend/redux/api_slice", () => ({
+  useGetChatsQuery: jest.fn(),
+}));
+
+describe("Home Page", () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({});
+  });
+
+  test("renders Home page with loading state", () => {
+    useGetChatsQuery.mockReturnValue({ isLoading: true });
+
+    render(
+      <Provider store={store}>
+        <Home />
+      </Provider>
+    );
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+
+  test("renders Home page with chat data", () => {
+    const chatsData = [{ id: 1, name: "Chat 1" }, { id: 2, name: "Chat 2" }];
+    useGetChatsQuery.mockReturnValue({ data: chatsData, isLoading: false });
+
+    render(
+      <Provider store={store}>
+        <Home />
+      </Provider>
+    );
+
+    expect(screen.getByText("Chat 1")).toBeInTheDocument();
+    expect(screen.getByText("Chat 2")).toBeInTheDocument();
+  });
+
+  test("renders error message when fetching chats fails", () => {
+    useGetChatsQuery.mockReturnValue({ error: true, isLoading: false });
+
+    render(
+      <Provider store={store}>
+        <Home />
+      </Provider>
+    );
+
+    expect(screen.getByText(/error/i)).toBeInTheDocument();
+  });
+});

__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");
+  });
+});