Logout testing

client/__FEtests__/App.test.tsx

@@ -1,33 +1,45 @@
-import React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import App from '../src/App';
+import React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import App from "../src/App";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+
+const mockStore = configureStore([]);
+const initialState = {
+  user: {
+    userData: null,
+    status: "idle",
+    error: null,
+  },
+};
 
 // MOCK THE BROWSER ROUTER SO THAT WE CAN WRAP APP COMPONENT WITH MEMORYROUTER
-jest.mock('react-router-dom', () => {
-    const originalModule = jest.requireActual('react-router-dom');
-    return {
-        ...originalModule,
-        BrowserRouter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    };
+jest.mock("react-router-dom", () => {
+  const originalModule = jest.requireActual("react-router-dom");
+  return {
+    ...originalModule,
+    BrowserRouter: ({ children }: { children: React.ReactNode }) => (
+      <div>{children}</div>
+    ),
+  };
 });
 
-describe('App Component', () => {
-    let component: RenderResult;
-
-    beforeEach(() => {
-        component = render(
-            <MemoryRouter initialEntries={['/']}>
-                <App />
-            </MemoryRouter>
-        );
-    });
-
-    test('renders LandingPage component at root path', () => {
-        expect(screen.getByText('Code Hammers')).toBeInTheDocument();
-    });
+describe("App Component", () => {
+  let component: RenderResult;
+
+  beforeEach(() => {
+    const store = mockStore(initialState);
+    component = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={["/"]}>
+          <App />
+        </MemoryRouter>
+      </Provider>
+    );
+  });
+
+  test("renders LandingPage component at root path", () => {
+    expect(screen.getByText("Code Hammers")).toBeInTheDocument();
+  });
 });
-
-
-
-

client/__FEtests__/AuthenticatedApp.test.tsx

@@ -8,20 +8,22 @@ import AuthenticatedApp from "../src/AuthenticatedApp";
 const mockStore = configureStore([]);
 const initialState = {
   user: {
-    userName: "TEST",
+    userData: null,
+    status: "idle",
+    error: null,
   },
 };
 
 jest.mock("react-router-dom", () => {
-    const originalModule = jest.requireActual("react-router-dom");
-    return {
-      ...originalModule,
-      BrowserRouter: ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
-      ),
-      useNavigate: () => jest.fn(), 
-    };
-  });
+  const originalModule = jest.requireActual("react-router-dom");
+  return {
+    ...originalModule,
+    BrowserRouter: ({ children }: { children: React.ReactNode }) => (
+      <div>{children}</div>
+    ),
+    useNavigate: () => jest.fn(),
+  };
+});
 
 describe("AuthenticatedApp Component", () => {
   let component: RenderResult;

client/src/components/Banner/Banner.test.tsx

@@ -1,25 +1,59 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import Banner from "./Banner";
+import { useAppDispatch } from "../../app/hooks";
+import { logout } from "../../features/user/userSlice";
+import { useNavigate } from "react-router-dom";
+
+// Mock the hooks and external dependencies
+jest.mock("../../app/hooks", () => ({
+  useAppDispatch: jest.fn(),
+}));
+jest.mock("../../features/user/userSlice", () => ({
+  logout: jest.fn(),
+}));
+jest.mock("react-router-dom", () => ({
+  useNavigate: jest.fn(),
+}));
 
 describe("Banner Component", () => {
-  it("renders the logo image correctly", () => {
-    const { getByAltText } = render(<Banner />);
-    const logo = getByAltText("Code Hammers Logo") as HTMLImageElement;
+  const mockDispatch = jest.fn();
+  const mockNavigate = jest.fn();
+
+  beforeEach(() => {
+    (useAppDispatch as jest.Mock).mockReturnValue(mockDispatch);
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
+  it("renders the logo image correctly", () => {
+    render(<Banner />);
+    const logo = screen.getByAltText("Code Hammers Logo");
     expect(logo).toBeInTheDocument();
   });
 
   it("renders the title text correctly", () => {
-    const { getByText } = render(<Banner />);
-    const title = getByText("Code Hammers");
-
+    render(<Banner />);
+    const title = screen.getByText("Code Hammers");
     expect(title).toBeInTheDocument();
   });
 
-  it("matches the snapshot", () => {
-    const { asFragment } = render(<Banner />);
-    expect(asFragment()).toMatchSnapshot();
+  it("renders the logout button and handles logout on click", () => {
+    render(<Banner />);
+    const logoutButton = screen.getByRole("button", { name: "Logout" });
+    expect(logoutButton).toBeInTheDocument();
+
+    // Simulate a click on the logout button
+    fireEvent.click(logoutButton);
+
+    // Expect the logout action to be dispatched
+    expect(mockDispatch).toHaveBeenCalledWith(logout());
+
+    // Expect navigation to have been called with the root path
+    expect(mockNavigate).toHaveBeenCalledWith("/");
   });
 });

client/src/features/user/userSlice.ts

@@ -4,11 +4,13 @@ import axios from "axios";
 interface UserState {
   userData: any; //TODO ADD PROPER TYPING ONCE USER OBJECT IS FINALIZED
   status: "idle" | "loading" | "failed";
+  error: string | null;
 }
 
 const initialState: UserState = {
   userData: null,
   status: "idle",
+  error: null,
 };
 
 export const loginUser = createAsyncThunk(
@@ -24,7 +26,8 @@ export const loginUser = createAsyncThunk(
       });
       return response.data;
     } catch (error) {
-      return thunkAPI.rejectWithValue(error.response.data);
+      //TODO BUILD BETTER ERROR FEEDBACK FROM AXIOS OF TEHRE
+      return thunkAPI.rejectWithValue("Something blew up!");
     }
   }
 );

client/src/pages/MainPage/__snapshots__/MainPage.test.tsx.snap

@@ -7,10 +7,11 @@ exports[`MainPage Component renders correctly 1`] = `
   <h1
     className="text-4xl font-extrabold mb-4"
   >
-    TEST
+    Main Page
   </h1>
   <h1>
-    TEST
+    Welcome 
+     !
   </h1>
 </div>
 `;