test: add tests for privacy-policy banner

__tests__/components/banner/PrivacyPolicy.test.tsx

@@ -0,0 +1,53 @@
+import "@testing-library/jest-dom";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import PrivacyPolicyBanner from "@/components/banner/PrivacyPolicy";
+
+jest.mock('@/store/feature/banner.slice', () => ({
+  ...jest.requireActual('@/store/feature/banner.slice'),
+  checkCookiePolicy: jest.fn(() => ({ type: 'mockedCheckCookiePolicy' })),
+}));
+
+describe("PrivacyPolicyBanner", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render PrivacyPolicyBanner when showCookiePolicy is true", () => {
+    renderWithRedux(<PrivacyPolicyBanner />, {
+      banner: { showCookiePolicy: true },
+    });
+    const privacyPolicy = screen.getByTestId("PrivacyPolicy");
+    expect(privacyPolicy).toBeInTheDocument();
+  });
+
+
+  it("should not render PrivacyPolicyBanner when showCookiePolicy is false", async () => {
+    renderWithRedux(<PrivacyPolicyBanner />, {
+      banner: { showCookiePolicy: false },
+    });
+
+    await waitFor(() => {
+      const privacyPolicy = screen.queryByTestId("PrivacyPolicy");
+      expect(privacyPolicy).not.toBeInTheDocument(); 
+    });
+  });
+
+  it("should render the close button when showCookiePolicy is true", () => {
+    renderWithRedux(<PrivacyPolicyBanner />, {
+      banner: { showCookiePolicy: true },
+    });
+    const closeButton = screen.getByTestId("closeButton");
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it("should not render PrivacyPolicy after the user clicks on the close button", () => {
+    renderWithRedux(<PrivacyPolicyBanner />, {
+      banner: { showCookiePolicy: true },
+    });
+    const closeButton = screen.getByTestId("closeButton");
+    fireEvent.click(closeButton);
+    const privacyPolicy = screen.queryByTestId("PrivacyPolicy");
+    expect(privacyPolicy).not.toBeInTheDocument();
+  });
+});

jest.config.js

@@ -28,6 +28,7 @@ const config = {
     "react-markdown": "<rootDir>/__mocks__/react-markdown.tsx",
     [`^(${esModules})-.*`]: "<rootDir>/__mocks__/plugin.ts",
     unified: "<rootDir>/__mocks__/unified.ts",
+    "^@/store/(.*)$": "<rootDir>/src/store/$1",
   },
 };
 

src/components/banner/PrivacyPolicy.tsx

@@ -9,11 +9,16 @@ import { checkCookiePolicy, acceptCookiePolicy } from "@/store/feature/banner.sl
 /**
  * PrivacyPolicyBanner component.
  *
+ * @param {string} dataTestId - The test ID for the banner element.
  * @returns {ReactElement} The rendered component.
  * @date 2023-03-27
  */
 
-export default function PrivacyPolicyBanner(): ReactElement {
+interface PrivacyPolicyBannerProps {
+  dataTestId?: string;
+}
+
+export default function PrivacyPolicyBanner({ dataTestId = "PrivacyPolicy" }: PrivacyPolicyBannerProps): ReactElement {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -26,29 +31,28 @@ export default function PrivacyPolicyBanner(): ReactElement {
   /**
    * Handles the user accepting the cookie policy.
    */
-
   const onAcceptCookiesPolicy = () => {
     dispatch(acceptCookiePolicy());
   };
-
   if (showBanner)
-    return (
-      <div className="fixed bottom-0 left-0 right-0 z-999 flex flex-row justify-center md:justify-between bg-brand">
-        <div className="text-white py-8 text-center mx-auto lg:text-base text-sm md:text-lg justify-center md:max-w-none px-6">
-          {t("signup-page.privacy.text")}{" "}
-          <Link href="/privacy-policy" className="underline">
-            {t("signup-page.privacy")}
-          </Link>
-        </div>
-        <div
-          className="flex absolute lg:relative lg:p-6 md:py-0 lg:justify-center right-0 top-0 lg:items-center items-center"
-          onClick={onAcceptCookiesPolicy}
-        >
-          <div className="z-50 lg:h-8 h-7 lg:w-8 w-7 flex items-center text-white rounded-full lg:border-solid lg:border lg:border-white hover:bg-blue-700 bg-transparent cursor-pointer place-content-center">
-            <CloseIcon />
-          </div>
+  return (
+    <div data-testid={dataTestId} className="fixed bottom-0 left-0 right-0 z-999 flex flex-row justify-center md:justify-between bg-brand">
+      <div className="text-white py-8 text-center mx-auto lg:text-base text-sm md:text-lg justify-center md:max-w-none px-6">
+        {t("signup-page.privacy.text")}{" "}
+        <Link href="/privacy-policy" className="underline">
+          {t("signup-page.privacy")}
+        </Link>
+      </div>
+      <div
+        data-testid="closeButton"
+        className="flex absolute lg:relative lg:p-6 md:py-0 lg:justify-center right-0 top-0 lg:items-center items-center"
+        onClick={onAcceptCookiesPolicy}
+      >
+        <div className="z-50 lg:h-8 h-7 lg:w-8 w-7 flex items-center text-white rounded-full lg:border-solid lg:border lg:border-white hover:bg-blue-700 bg-transparent cursor-pointer place-content-center">
+          <CloseIcon />
         </div>
       </div>
-    );
+    </div>
+  );
   return <></>;
 }