From 8312ef0940971046e5a6cdc046a5d60f77fe9554 Mon Sep 17 00:00:00 2001
From: mhenriette <mhenriette00@gmail.com>
Date: Tue, 27 Aug 2024 18:30:33 +0200
Subject: [PATCH 1/3] test: add test for Header component

---
 .../submission/_partials/Header.test.tsx      | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 __tests__/components/popups/submission/_partials/Header.test.tsx

diff --git a/__tests__/components/popups/submission/_partials/Header.test.tsx b/__tests__/components/popups/submission/_partials/Header.test.tsx
new file mode 100644
index 000000000..04f918699
--- /dev/null
+++ b/__tests__/components/popups/submission/_partials/Header.test.tsx
@@ -0,0 +1,35 @@
+import SubmissionPopup from "@/components/popups/submission/_partials/Header";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+jest.mock("src/icons/arrow-left.svg", () => ({
+  __esModule: true,
+  default: () => <svg data-testid="arrow-left-icon" />,
+}));
+
+
+describe("SubmissionPopup", () => {
+  const mockOnClose = jest.fn();
+
+
+  it("renders the component with correct text", () => {
+    render(<SubmissionPopup onClose={mockOnClose} />);
+    expect(screen.getByText("communities.submission")).toBeInTheDocument();
+  });
+
+  it("calls onClose when clicking the arrow icon", () => {
+    render(<SubmissionPopup onClose={mockOnClose} />);
+
+    const arrowButton = screen.getByText("communities.submission").parentElement;
+    fireEvent.click(arrowButton!);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it("calls onClose when clicking the close button", () => {
+    render(<SubmissionPopup onClose={mockOnClose} />);
+    const closeButton = screen.getByRole("button");
+    fireEvent.click(closeButton);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+});

From e5d329ecb9b16e33d7bc5a2d1cb0f89c3687842a Mon Sep 17 00:00:00 2001
From: mhenriette <mhenriette00@gmail.com>
Date: Wed, 28 Aug 2024 14:09:14 +0200
Subject: [PATCH 2/3] feat: add test for submission popup

---
 .../submission/_partials/Header.test.tsx      |  6 -----
 .../popups/submission/indext.test.tsx         | 27 +++++++++++++++++++
 2 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 __tests__/components/popups/submission/indext.test.tsx

diff --git a/__tests__/components/popups/submission/_partials/Header.test.tsx b/__tests__/components/popups/submission/_partials/Header.test.tsx
index 04f918699..d6ba79f7e 100644
--- a/__tests__/components/popups/submission/_partials/Header.test.tsx
+++ b/__tests__/components/popups/submission/_partials/Header.test.tsx
@@ -2,12 +2,6 @@ import SubmissionPopup from "@/components/popups/submission/_partials/Header";
 import "@testing-library/jest-dom";
 import { render, screen, fireEvent } from "@testing-library/react";
 
-jest.mock("src/icons/arrow-left.svg", () => ({
-  __esModule: true,
-  default: () => <svg data-testid="arrow-left-icon" />,
-}));
-
-
 describe("SubmissionPopup", () => {
   const mockOnClose = jest.fn();
 
diff --git a/__tests__/components/popups/submission/indext.test.tsx b/__tests__/components/popups/submission/indext.test.tsx
new file mode 100644
index 000000000..b94797769
--- /dev/null
+++ b/__tests__/components/popups/submission/indext.test.tsx
@@ -0,0 +1,27 @@
+import SubmissionPopup from "@/components/popups/submission";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { fireEvent, screen } from "@testing-library/react";
+describe("SubmissionPopup", () => {
+
+  const mockOnClose = jest.fn();
+
+  it("renders the popup when show is true", () => {
+    renderWithRedux(<SubmissionPopup show={true} onClose={mockOnClose} submissionId="123" />);
+    expect(screen.getByTestId("overlay")).toBeInTheDocument();
+    expect(screen.getByText("communities.submission")).toBeInTheDocument();
+    expect(screen.getByTestId("viewId")).toBeInTheDocument();
+  });
+
+  it("does not render  the popup when show is false", () => {
+    renderWithRedux(<SubmissionPopup show={false} onClose={mockOnClose} submissionId="123" />);
+    expect(screen.queryByTestId("overlay")).not.toBeInTheDocument();
+  });
+
+  it("calls onClose when the close button is clicked", () => {
+    renderWithRedux(<SubmissionPopup show={true} onClose={mockOnClose} submissionId="123" />);
+    const buttonElement = screen.getByText("communities.submission").parentElement;
+    fireEvent.click(buttonElement!);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+});

From ffa980f89af2287c1193d3bd95b4b9d1b93a0383 Mon Sep 17 00:00:00 2001
From: mhenriette <mhenriette00@gmail.com>
Date: Wed, 28 Aug 2024 17:36:08 +0200
Subject: [PATCH 3/3] refactor: make testing text description more descriptive

---
 .../popups/submission/_partials/Header.test.tsx          | 9 ++++-----
 .../submission/{indext.test.tsx => index.test.tsx}       | 8 ++++----
 src/components/popups/submission/_partials/Header.tsx    | 2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)
 rename __tests__/components/popups/submission/{indext.test.tsx => index.test.tsx} (79%)

diff --git a/__tests__/components/popups/submission/_partials/Header.test.tsx b/__tests__/components/popups/submission/_partials/Header.test.tsx
index d6ba79f7e..c60cf6ec0 100644
--- a/__tests__/components/popups/submission/_partials/Header.test.tsx
+++ b/__tests__/components/popups/submission/_partials/Header.test.tsx
@@ -11,15 +11,14 @@ describe("SubmissionPopup", () => {
     expect(screen.getByText("communities.submission")).toBeInTheDocument();
   });
 
-  it("calls onClose when clicking the arrow icon", () => {
+  it("Invokes the onClose function when the arrow icon is clicked", () => {
     render(<SubmissionPopup onClose={mockOnClose} />);
-
-    const arrowButton = screen.getByText("communities.submission").parentElement;
-    fireEvent.click(arrowButton!);
+    const arrowButton = screen.getByTestId("arrow-button");
+    fireEvent.click(arrowButton);
     expect(mockOnClose).toHaveBeenCalled();
   });
 
-  it("calls onClose when clicking the close button", () => {
+  it("Invokes the onClose function when the close button is clicked", () => {
     render(<SubmissionPopup onClose={mockOnClose} />);
     const closeButton = screen.getByRole("button");
     fireEvent.click(closeButton);
diff --git a/__tests__/components/popups/submission/indext.test.tsx b/__tests__/components/popups/submission/index.test.tsx
similarity index 79%
rename from __tests__/components/popups/submission/indext.test.tsx
rename to __tests__/components/popups/submission/index.test.tsx
index b94797769..ee9a1451f 100644
--- a/__tests__/components/popups/submission/indext.test.tsx
+++ b/__tests__/components/popups/submission/index.test.tsx
@@ -13,15 +13,15 @@ describe("SubmissionPopup", () => {
     expect(screen.getByTestId("viewId")).toBeInTheDocument();
   });
 
-  it("does not render  the popup when show is false", () => {
+  it("does not render the popup when show is false", () => {
     renderWithRedux(<SubmissionPopup show={false} onClose={mockOnClose} submissionId="123" />);
     expect(screen.queryByTestId("overlay")).not.toBeInTheDocument();
   });
 
-  it("calls onClose when the close button is clicked", () => {
+  it("calls the onClose function when the close button is clicked", () => {
     renderWithRedux(<SubmissionPopup show={true} onClose={mockOnClose} submissionId="123" />);
-    const buttonElement = screen.getByText("communities.submission").parentElement;
-    fireEvent.click(buttonElement!);
+    const closeButton = screen.getByTestId("overlay");
+    fireEvent.click(closeButton);
     expect(mockOnClose).toHaveBeenCalled();
   });
 });
diff --git a/src/components/popups/submission/_partials/Header.tsx b/src/components/popups/submission/_partials/Header.tsx
index d6456939d..768fb1fd5 100644
--- a/src/components/popups/submission/_partials/Header.tsx
+++ b/src/components/popups/submission/_partials/Header.tsx
@@ -26,7 +26,7 @@ export default function SubmissionPopup({ onClose }: SubmissionPopup): ReactElem
   const { t } = useTranslation();
   return (
     <div className="flex justify-between items-center border-b border-solid border-gray-200">
-      <div className="text-left pl-5 flex items-center space-x-6 cursor-pointer" onClick={onClose}>
+      <div className="text-left pl-5 flex items-center space-x-6 cursor-pointer" onClick={onClose} data-testid="arrow-button">
         <ArrowLeftIcon className="block" />
         <span className="text-lg font-medium block">{t("communities.submission")}</span>
       </div>