From 6fe78fe3027cbd4cd4927c3491531facb357546f Mon Sep 17 00:00:00 2001
From: Tharun Rajendran <rajendrantharun@live.com>
Date: Tue, 5 Apr 2022 00:45:28 +0530
Subject: [PATCH] chore(test): rewritten breadcrumbs test using rtl (#4921)

---
 .../Breadcrumbs/Breadcrumbs.tests.jsx         | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx
index 24b2337a90..c94ea32525 100644
--- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx
@@ -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);
   });