Skip to content

test: add tests for privacy-policy banner #1297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

test: add tests for privacy-policy banner #1297

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d696de
test: add tests for privacy-policy
igorntwari Aug 28, 2024
17f53bf
refactor: separate test cases
igorntwari Aug 28, 2024
a318b4b
refactor: add more edge cases
igorntwari Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions __tests__/components/banner/PrivacyPolicy.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import "@testing-library/jest-dom";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the test also for not rendering the banner when showCookiePolicy is false

import PrivacyPolicyBanner from "@/components/banner/PrivacyPolicy";
import { renderWithRedux } from "@__mocks__/renderWithRedux";
import { fireEvent, screen } from "@testing-library/react";

describe("PrivacyPolicyBanner", () => {
beforeEach(() => {
jest.clearAllMocks();
});

it("should render PrivacyPolicy", () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
it("should render PrivacyPolicy", () => {
it("should render PrivacyPolicyBanner when showCookiePolicy is true", () => {

renderWithRedux(<PrivacyPolicyBanner />, {
banner: { showCookiePolicy: true },
});
const privacyPolicy = screen.getByTestId("PrivacyPolicy");
expect(privacyPolicy).toBeInTheDocument();
});

it("should render the close button", () => {
const { getByTestId } = renderWithRedux(<PrivacyPolicyBanner />, {
banner: { showCookiePolicy: false },
});
const closeButton = getByTestId("closeButton");
expect(closeButton).toBeInTheDocument();
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should add this test in should render PrivacyPolicyBanner when showCookiePolicy is true, because it should test if the component is rendered with all the right elements


it("should not render PrivacyPolicy after the user clicks on the close button", () => {
const { queryByTestId } = renderWithRedux(<PrivacyPolicyBanner />, {
banner: { showCookiePolicy: false },
});
const closeButton = screen.getByTestId("closeButton");
fireEvent.click(closeButton);
expect(queryByTestId("PrivacyPolicy")).not.toBeInTheDocument();
});


});
12 changes: 6 additions & 6 deletions src/components/banner/PrivacyPolicy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make data-testid a prop

<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"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the data-testid should be on the parent div, since it's the one that has an onClose

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>
Expand Down