Merge pull request #12 from OpenPecha/profile-test-cases

added test cases

src/components/user-profile/UserProfile.jsx

@@ -27,7 +27,7 @@ function UserProfile() {
     }
 
     return (
-        <div className="user-profile">
+        <div className="user-profile" data-testid="user-profile">
             {
                 isAuthenticated ? renderProfileViaSocialLogin() : renderProfileViaPechaLogin()
             }

src/components/user-profile/UserProfile.test.jsx

@@ -0,0 +1,31 @@
+import {mockAxios, mockReactI18Nest, mockUseAuth} from "../../test-utils/CommonMocks.js";
+import {QueryClient, QueryClientProvider} from "react-query";
+import {render, screen} from "@testing-library/react";
+import {BrowserRouter as Router} from "react-router-dom";
+import "@testing-library/jest-dom";
+
+
+import UserProfile from "./UserProfile.jsx";
+
+
+mockReactI18Nest();
+mockAxios();
+mockUseAuth()
+
+describe("UserProfile Component", () => {
+
+  const queryClient = new QueryClient();
+  const setup = () => {
+    render(
+      <Router>
+        <QueryClientProvider client={queryClient}>
+          <UserProfile/>
+        </QueryClientProvider>
+      </Router>
+    );
+  };
+  test("renders the registration form with all fields and buttons", async () => {
+    setup();
+    await expect(screen.getByTestId("user-profile")).toBeInTheDocument()
+  })
+});

src/components/user-profile/edit-user-profile/EditUserProfile.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Form, Button, Row, Col } from "react-bootstrap";
 import "./EditUserProfile.scss";
-import {useLocation} from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
 
 const EditUserProfile = () => {
 
@@ -23,6 +23,7 @@ const EditUserProfile = () => {
     facebook: userInfo.facebook || "",
     youtubeChannel: userInfo.youtubeChannel || "",
   });
+  const navigate = useNavigate()
   console.log(userInfo)
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -269,7 +270,7 @@ const EditUserProfile = () => {
         </Row>
 
         <div className="form-buttons">
-          <Button variant="secondary" type="button">
+          <Button variant="secondary" type="button" onClick={() => navigate(-1)}>
             Cancel
           </Button>
           <Button variant="primary" type="submit">

src/components/user-profile/edit-user-profile/EditUserProfile.test.jsx

@@ -0,0 +1,107 @@
+import React from "react";
+import {render, screen, fireEvent, waitFor} from "@testing-library/react";
+import {BrowserRouter as Router, MemoryRouter, useNavigate} from "react-router-dom";
+import EditUserProfile from "./EditUserProfile";
+import {QueryClient, QueryClientProvider} from "react-query";
+import {mockAxios, mockReactI18Nest, mockUseAuth} from "../../../test-utils/CommonMocks.js";
+import "@testing-library/jest-dom";
+
+
+// Mock `useNavigate`
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom"); // Import the actual module for non-mocked exports
+  return {
+    ...actual,
+    useNavigate: vi.fn(), // Mock `useNavigate`
+    useLocation: vi.fn(() => ({
+      state: {
+        userInfo: {
+          firstName: "John",
+          lastName: "Doe",
+          title: "Developer",
+          organization: "Tech Corp",
+          website: "https://example.com",
+          location: "New York",
+          education: ["B.Sc. Computer Science"],
+          aboutMe: "Software Engineer with 5 years of experience.",
+          email: "[email protected]",
+          profileUrl: "https://profile.example.com",
+          twitterHandle: "@johndoe",
+          linkedIn: "https://linkedin.com/in/johndoe",
+          facebook: "https://facebook.com/johndoe",
+          youtubeChannel: "https://youtube.com/johndoe",
+        },
+      },
+    })),
+  };
+});
+
+const mockNavigate = useNavigate();
+
+mockReactI18Nest();
+mockAxios();
+mockUseAuth()
+
+describe("EditUserProfile Component", () => {
+  const queryClient = new QueryClient();
+
+  const setup = () => {
+    render(
+      <Router>
+        <QueryClientProvider client={queryClient}>
+          <EditUserProfile/>
+        </QueryClientProvider>
+      </Router>
+    );
+  };
+
+  it("renders the form with pre-filled values from userInfo", () => {
+    setup();
+
+
+    expect(screen.getByLabelText("First Name")).toHaveValue("John");
+    expect(screen.getByLabelText("Last Name")).toHaveValue("Doe");
+    expect(screen.getByLabelText("Title")).toHaveValue("Developer");
+    expect(screen.getByLabelText("Organization")).toHaveValue("Tech Corp");
+    expect(screen.getByLabelText("Website")).toHaveValue("https://example.com");
+    expect(screen.getByLabelText("Location")).toHaveValue("New York");
+    expect(screen.getByLabelText("Email")).toHaveValue("[email protected]");
+  });
+
+  it("updates the form values when the user types in the input fields", () => {
+    setup();
+
+
+    const firstNameInput = screen.getByLabelText("First Name");
+    fireEvent.change(firstNameInput, { target: { value: "Jane" } });
+
+    expect(firstNameInput).toHaveValue("Jane");
+  });
+
+  it("adds a new education field when the '+' button is clicked", async () => {
+    setup();
+
+
+    const addButton = screen.getByText("+");
+    fireEvent.click(addButton);
+
+    const educationFields = screen.getAllByPlaceholderText("Enter your education");
+    expect(educationFields).toHaveLength(2);
+  });
+
+
+
+  it("Cancel button", () => {
+    setup();
+    expect(screen.getByText("Cancel")).toBeInTheDocument()
+
+  });
+
+  it("Submit button", () => {
+    setup();
+    const submitButton = screen.getByText("Submit");
+    fireEvent.click(submitButton);
+
+    expect(screen.getByText("Submit")).toBeInTheDocument()
+  });
+});

src/components/user-profile/pecha-user-profile/PechaUserProfile.test.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import {render, screen, fireEvent} from "@testing-library/react";
+import {BrowserRouter as Router} from "react-router-dom";
+import {Tabs, Tab} from "react-bootstrap";
+import "@testing-library/jest-dom";
+import PechaUserProfile from "./PechaUserProfile";
+import {QueryClient, QueryClientProvider} from "react-query";
+
+describe("PechaUserProfile Component", () => {
+  const queryClient = new QueryClient();
+
+
+  const mockUserInfo = {
+    name: "John Doe",
+    jobTitle: "Senior Software Engineer",
+    location: "Bangalore",
+    education: {
+      degree: "Master of Computer Application (MCA)",
+      bachelor: "Bachelor of Science, Physics",
+    },
+  };
+
+  const setup = () => {
+    render(
+      <Router>
+        <QueryClientProvider client={queryClient}>
+          <PechaUserProfile userInfo={mockUserInfo}/>
+        </QueryClientProvider>
+      </Router>
+    );
+  };
+
+  test("renders the user profile with all details", () => {
+    setup();
+
+    // Check if name and job title are rendered
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("Senior Software Engineer")).toBeInTheDocument();
+
+    // Check if location and education details are rendered
+    expect(screen.getByText("Bangalore")).toBeInTheDocument();
+    expect(screen.getByText("Master of Computer Application (MCA)")).toBeInTheDocument();
+    expect(screen.getByText("Bachelor of Science, Physics")).toBeInTheDocument();
+  });
+
+  test("Edit profile button", () => {
+    setup();
+    expect(screen.getByText("Edit Profile")).toBeInTheDocument()
+  });
+
+  test("renders all social media links with correct attributes", () => {
+    setup();
+
+    // Check social media links
+    const twitterLink = screen.getByLabelText("Twitter");
+    const youtubeLink = screen.getByLabelText("Youtube");
+    const linkedInLink = screen.getByLabelText("LinkedIn");
+    const facebookLink = screen.getByLabelText("Facebook");
+
+    expect(twitterLink).toBeInTheDocument();
+    expect(twitterLink).toHaveAttribute("href", "https://twitter.com/dummy");
+
+    expect(youtubeLink).toBeInTheDocument();
+    expect(youtubeLink).toHaveAttribute("href", "https://youtube.com/dummy");
+
+    expect(linkedInLink).toBeInTheDocument();
+    expect(linkedInLink).toHaveAttribute("href", "https://linkedin.com/in/dummy");
+
+    expect(facebookLink).toBeInTheDocument();
+    expect(facebookLink).toHaveAttribute("href", "https://facebook.com/dummy");
+  });
+
+  test("renders tab components and displays their content", () => {
+    setup();
+
+    // Check if the tabs are rendered
+    expect(screen.getAllByText("Sheets")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("Collections")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("Notes")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("Buddhist Text Tracker")[0]).toBeInTheDocument();
+
+    // Check default tab content
+    expect(screen.getByText("Manage your sheets and documents here.")).toBeInTheDocument();
+  });
+
+});