chore(test): rewritten breadcrumbs test using rtl (#4921)

This commit is contained in:
Tharun Rajendran 2022-04-05 00:45:28 +05:30 committed by GitHub
parent 7d68f69ab4
commit 6fe78fe302
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,47 +1,59 @@
import React from "react";
import { mount } from "enzyme";
import { fireEvent, render, screen } from "@testing-library/react";
import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs";
describe("Breadcrumbs - component", () => {
it("renders 3 Button components", () => {
const component = mount(<Breadcrumbs page={1} />);
expect(component.find("button").length).toEqual(3);
render(<Breadcrumbs page={1} />);
expect(screen.getAllByRole("button").length).toEqual(3);
});
it("renders page 1 Button as active when the page prop is 1", () => {
const component = mount(<Breadcrumbs page={1} />);
const page1Btn = component.find("button.registration-breadcrumbs__page--1");
const page2Btn = component.find("button.registration-breadcrumbs__page--2");
const page3Btn = component.find("button.registration-breadcrumbs__page--3");
const { container } = render(<Breadcrumbs page={1} />);
const page1Btn = container.querySelector(
"button.registration-breadcrumbs__page--1"
);
const page2Btn = container.querySelector(
"button.registration-breadcrumbs__page--2"
);
const page3Btn = container.querySelector(
"button.registration-breadcrumbs__page--3"
);
expect(page1Btn.prop("className")).toContain(
expect(page1Btn.className).toContain(
"registration-breadcrumbs__page--active"
);
expect(page2Btn.prop("className")).not.toContain(
expect(page2Btn.className).not.toContain(
"registration-breadcrumbs__page--active"
);
expect(page3Btn.prop("className")).not.toContain(
expect(page3Btn.className).not.toContain(
"registration-breadcrumbs__page--active"
);
});
it("calls the onClick prop with the page number when clicked", () => {
const onClickSpy = jest.fn();
const component = mount(<Breadcrumbs page={1} onClick={onClickSpy} />);
const page1Btn = component.find("button.registration-breadcrumbs__page--1");
const page2Btn = component.find("button.registration-breadcrumbs__page--2");
const page3Btn = component.find("button.registration-breadcrumbs__page--3");
const { container } = render(<Breadcrumbs page={1} onClick={onClickSpy} />);
const page1Btn = container.querySelector(
"button.registration-breadcrumbs__page--1"
);
const page2Btn = container.querySelector(
"button.registration-breadcrumbs__page--2"
);
const page3Btn = container.querySelector(
"button.registration-breadcrumbs__page--3"
);
page1Btn.simulate("click");
fireEvent.click(page1Btn);
expect(onClickSpy).toHaveBeenCalledWith(1);
page2Btn.simulate("click");
fireEvent.click(page2Btn);
expect(onClickSpy).toHaveBeenCalledWith(2);
page3Btn.simulate("click");
fireEvent.click(page3Btn);
expect(onClickSpy).toHaveBeenCalledWith(3);
});