test: add tests for privacy-policy banner

__tests__/components/banner/PrivacyPolicy.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+import PrivacyPolicyBanner from "@/components/banner/PrivacyPolicy";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { fireEvent, screen } from "@testing-library/react";
+
+const mockPush = jest.fn();
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(() => ({
+    locale: "en",
+    push: mockPush,
+  })),
+}));
+
+jest.mock("next-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key === "signup-page.privacy" ? "Translated Privacy Policy" : key,
+  }),
+}));
+
+describe("PrivacyPolicyBanner", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render PrivacyPolicy", () => {
+    const { getByTestId } = renderWithRedux(<PrivacyPolicyBanner />, {
+      banner: { showCookiePolicy: true },
+    });
+    const privacyPolicy = getByTestId("PrivacyPolicy");
+    expect(privacyPolicy).toBeInTheDocument();
+  });
+
+  it("should accept the cookies policy and not render PrivacyPolicy after the user clicks on the close button", () => {
+    const { queryByTestId } = renderWithRedux(<PrivacyPolicyBanner />, {
+      banner: { showCookiePolicy: false },
+    });
+    const closeButton = screen.getByTestId("closeButton");
+    expect(closeButton).toBeInTheDocument();
+    fireEvent.click(closeButton);
+    expect(queryByTestId("PrivacyPolicy")).not.toBeInTheDocument();
+  });
+
+});

src/components/banner/PrivacyPolicy.tsx

@@ -33,18 +33,18 @@ export default function PrivacyPolicyBanner(): ReactElement {
 
   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 data-testid="PrivacyPolicy" 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">
+        <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
+            data-testid="closeButton"
+            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>