diff --git a/__tests__/components/banner/PrivacyPolicy.test.tsx b/__tests__/components/banner/PrivacyPolicy.test.tsx new file mode 100644 index 00000000..34a2b793 --- /dev/null +++ b/__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(, { + banner: { showCookiePolicy: true }, + }); + const privacyPolicy = screen.getByTestId("PrivacyPolicy"); + expect(privacyPolicy).toBeInTheDocument(); + }); + + + it("should not render PrivacyPolicyBanner when showCookiePolicy is false", async () => { + renderWithRedux(, { + 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(, { + 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(, { + banner: { showCookiePolicy: true }, + }); + const closeButton = screen.getByTestId("closeButton"); + fireEvent.click(closeButton); + const privacyPolicy = screen.queryByTestId("PrivacyPolicy"); + expect(privacyPolicy).not.toBeInTheDocument(); + }); +}); diff --git a/jest.config.js b/jest.config.js index e7ccd4e1..d0aa6e23 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,6 +28,7 @@ const config = { "react-markdown": "/__mocks__/react-markdown.tsx", [`^(${esModules})-.*`]: "/__mocks__/plugin.ts", unified: "/__mocks__/unified.ts", + "^@/store/(.*)$": "/src/store/$1", }, }; diff --git a/src/components/banner/PrivacyPolicy.tsx b/src/components/banner/PrivacyPolicy.tsx index 42c24623..de4b22b6 100644 --- a/src/components/banner/PrivacyPolicy.tsx +++ b/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 ( - - - {t("signup-page.privacy.text")}{" "} - - {t("signup-page.privacy")} - - - - - - + return ( + + + {t("signup-page.privacy.text")}{" "} + + {t("signup-page.privacy")} + + + + + - ); + + ); return <>>; }