redirect user when they click log out to the home page

jest.setup.js

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom'

package.json

@@ -43,8 +43,10 @@
         "@commitlint/config-conventional": "^17.7.0",
         "@svgr/webpack": "^8.1.0",
         "@tailwindcss/typography": "^0.5.10",
-        "@testing-library/jest-dom": "^6.1.3",
+        "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.5.1",
+        "@types/jest": "^29.5.8",
         "@types/react": "^18.2.28",
         "autoprefixer": "^10.4.16",
         "cz-conventional-changelog": "^3.3.0",
@@ -56,6 +58,7 @@
         "git-cz": "^4.9.0",
         "husky": "^8.0.3",
         "jest": "^29.7.0",
+        "jest-dom": "^4.0.0",
         "jest-environment-jsdom": "^29.7.0",
         "lint-staged": "^14.0.1",
         "next-sitemap": "^4.2.3",
@@ -65,7 +68,9 @@
         "prettier": "^3.0.3",
         "react-test-renderer": "^18.2.0",
         "standard-version": "^9.5.0",
-        "tailwindcss": "^3.3.3"
+        "tailwindcss": "^3.3.3",
+        "ts-jest": "^29.1.1",
+        "typescript": "^5.2.2"
     },
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx}": [

src/components/blogcard/BlogCard.jsx

@@ -1,6 +1,9 @@
 const BlogCard = ({ blog }) => {
     return (
-        <div className='bg-white shadow-md rounded-xl ml-2 mr-2 mb-2 mt-2 px-2 py-2 verflow-hidden'>
+        <div
+            data-testid='blog-card'
+            className='bg-white shadow-md rounded-xl ml-2 mr-2 mb-2 mt-2 px-2 py-2 verflow-hidden'
+        >
             <div className='relative '>
                 <div className='bg-green-500 text-white absolute bottom-0 left-0 py-0 px-0 rounded-tr-lg'>
                     <p className='text-sm bg-green ml-0 px-3 py-2'>

src/components/developeravatar/DeveloperAvatar.jsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 const DeveloperAvatar = ({ name, avatarUrl, description, href }) => {
     return (
         <Link href={href}>
-            <div className='text-center flex flex-col items-center justify-center w-full md:w-80 rounded-lg  p-4 border border-gray hover:bg-slate-100'>
+            <div className='text-center flex flex-col items-center justify-center w-full md:w-80 rounded-lg  p-4 hover:bg-slate-100'>
                 <div className=' relative w-32 h-32 md:w-20 md:h-20 lg:w-36 lg:h-36  mb-2 mx-auto '>
                     <Image
                         src={avatarUrl}

src/components/navbar/AccountMenu.jsx

@@ -3,9 +3,20 @@ import Link from "next/link";
 import { useState } from "react";
 import { BiLogOut } from "react-icons/bi";
 import { MdAccountCircle } from "react-icons/md";
+import { useRouter } from "next/router";
+import { reload } from "firebase/auth";
 
 const AccountMenu = ({ logout }) => {
     const [openMenu, setOpenMenu] = useState(false);
+    const router = useRouter();
+
+    const handleLogout = () => {
+        // Perform logout action (call the provided logout function)
+        logout();
+
+        // Redirect to the home page
+        router.push("/");
+    };
 
     return (
         <div className='relative items-center justify-end hidden md:flex '>
@@ -38,7 +49,7 @@ const AccountMenu = ({ logout }) => {
                         </div>
                     </Link>
                     <button
-                        onClick={logout}
+                        onClick={handleLogout}
                         className='text-red whitespace-nowrap hover:opacity-75'
                     >
                         <div className='flex flex-row items-center gap-4 '>

test/articlecard.test.js

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import ArticleCard from "@/components/articlecard/ArticleCard";
+
+describe("ArticleCard", () => {
+  const mockArticle = {
+    title: "Test Article",
+    description: "This is a test article description.",
+    imageUrl: "/test-image.jpg",
+    articleUrl: "/test-article",
+  };
+
+  it("renders with content on the left by default", () => {
+    render(<ArticleCard {...mockArticle} />);
+    const titleElement = screen.getByText("Test Article");
+    const descriptionElement = screen.getByText("This is a test article description.");
+    const imageElement = screen.getByAltText("Test Article");
+    const buttonElement = screen.getByText("Read more");
+
+    expect(titleElement).toBeInTheDocument();
+    expect(descriptionElement).toBeInTheDocument();
+    expect(imageElement).toBeInTheDocument();
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  it("renders with content on the right when textOnleft is true", () => {
+    render(<ArticleCard {...mockArticle} textOnleft />);
+    const titleElement = screen.getByText("Test Article");
+    const descriptionElement = screen.getByText("This is a test article description.");
+    const imageElement = screen.getByAltText("Test Article");
+    const buttonElement = screen.getByText("Read more");
+
+    expect(titleElement).toBeInTheDocument();
+    expect(descriptionElement).toBeInTheDocument();
+    expect(imageElement).toBeInTheDocument();
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  it("does not render a Read more button when articleUrl is not provided", () => {
+    render(<ArticleCard title="Test Article" description="This is a test article description." imageUrl="/test-image.jpg" />);
+    const buttonElement = screen.queryByText("Read more");
+  });
+});

test/blogcard.test.js

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import BlogCard from "@/components/blogcard/BlogCard";
+
+describe("BlogCard", () => {
+  const mockBlog = {
+    title: "Test Blog",
+    description: "This is a test blog description.",
+    date: "2023-10-26",
+    image: "/test-image.jpg",
+  };
+
+  it("renders blog card with correct content", () => {
+    render(<BlogCard blog={mockBlog} />);
+
+    const titleElement = screen.getByText("Test Blog");
+    const descriptionElement = screen.getByText("This is a test blog description.");
+    const dateElement = screen.getByText("2023-10-26");
+    const imageElement = screen.getByAltText("Test Blog");
+
+    expect(titleElement).toBeInTheDocument();
+    expect(descriptionElement).toBeInTheDocument();
+    expect(dateElement).toBeInTheDocument();
+    expect(imageElement).toBeInTheDocument();
+  });
+
+  it("renders blog card with correct styles", () => {
+    render(<BlogCard blog={mockBlog} />);
+
+    const cardElement = screen.getByTestId("blog-card"); // Use a data-testid
+    const dateBadgeElement = screen.getByText("2023-10-26");
+
+    expect(cardElement).toHaveClass("bg-white");
+    expect(cardElement).toHaveClass("shadow-md");
+    expect(cardElement).toHaveClass("rounded-xl");
+    expect(cardElement).toHaveClass("ml-2");
+    expect(cardElement).toHaveClass("mr-2");
+    expect(cardElement).toHaveClass("mb-2");
+    expect(cardElement).toHaveClass("mt-2");
+    expect(cardElement).toHaveClass("px-2");
+    expect(cardElement).toHaveClass("py-2");
+    expect(cardElement).toHaveClass("verflow-hidden");
+
+    expect(dateBadgeElement).toHaveClass("text-sm");
+    expect(dateBadgeElement).toHaveClass("bg-green");
+    expect(dateBadgeElement).toHaveClass("ml-0");
+    expect(dateBadgeElement).toHaveClass("px-3");
+    expect(dateBadgeElement).toHaveClass("py-2");
+  });
+});

test/button.test.js

@@ -0,0 +1,49 @@
+// button.test.js
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Button from "@/components/button/Button";
+
+describe("Button", () => {
+  it("renders a button with default style", () => {
+    render(<Button>Click me</Button>);
+    const buttonElement = screen.getByRole("button");
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toHaveClass("bg-green", "text-white");
+  });
+
+  it("renders a link with default style when href is provided", () => {
+    render(<Button href="/path">Go to path</Button>);
+    const linkElement = screen.getByRole("link");
+
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveClass("bg-green", "text-white");
+  });
+
+  it("renders a button with outlinePrimary style", () => {
+    render(<Button variant="outlinePrimary">Click me</Button>);
+    const buttonElement = screen.getByRole("button");
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toHaveClass("bg-transparent", "border-green", "text-green");
+  });
+
+  it("renders a button with outlineSecondary style", () => {
+    render(<Button variant="outlineSecondary">Click me</Button>);
+    const buttonElement = screen.getByRole("button");
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toHaveClass("bg-transparent", "border-red", "text-red");
+  });
+
+  it("triggers the onClick handler when the button is clicked", () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    const buttonElement = screen.getByRole("button");
+
+    userEvent.click(buttonElement);
+
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
+});

test/delete-warning.test.js

@@ -0,0 +1,63 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DeleteWarning from "@/components/delete-warning/index";
+import { deleteDocData } from "@/lib/firebase/firestoreFunctions";
+
+jest.mock("@/lib/firebase/firestoreFunctions", () => ({
+  deleteDocData: jest.fn(),
+}));
+
+describe("DeleteWarning", () => {
+  const mockItem = {
+    id: "123",
+    // Add other properties as needed for your item
+  };
+
+  const mockSetDeleteWarningItem = jest.fn();
+  const mockSetItems = jest.fn();
+  const mockItems = [
+    // Sample items for testing
+    { id: "123", name: "Item 1" },
+    { id: "456", name: "Item 2" },
+    // Add more items as needed
+  ];
+
+  it("calls deleteDocData and updates state when 'Delete' button is clicked", async () => {
+    render(
+      <DeleteWarning
+        setDeleteWarningItem={mockSetDeleteWarningItem}
+        deleteWarningItem={mockItem.id}
+        setItems={mockSetItems}
+        items={mockItems}
+      />
+    );
+
+    const deleteButton = screen.getByText("Delete");
+    userEvent.click(deleteButton);
+
+    // Wait for asynchronous operations to complete
+    await waitFor(() => {
+      expect(deleteDocData).toHaveBeenCalledWith("items", mockItem.id);
+      expect(mockSetItems).toHaveBeenCalledWith(
+        mockItems.filter((item) => item.id !== mockItem.id)
+      );
+      expect(mockSetDeleteWarningItem).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it("cancels deletion when 'Cancel' button is clicked", () => {
+    render(
+      <DeleteWarning
+        setDeleteWarningItem={mockSetDeleteWarningItem}
+        deleteWarningItem={mockItem.id}
+        setItems={mockSetItems}
+        items={mockItems}
+      />
+    );
+
+    const cancelButton = screen.getByText("Cancel");
+    userEvent.click(cancelButton);
+
+    expect(mockSetDeleteWarningItem).toHaveBeenCalledWith(false);
+  });
+});