mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 01:18:42 +00:00
chore(test): rewritten breadcrumbs test using rtl (#4921)
This commit is contained in:
parent
7d68f69ab4
commit
6fe78fe302
1 changed files with 29 additions and 17 deletions
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue