From 801858a091aad3dd4d81251985f484cd4a03bb94 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 11 Aug 2022 01:00:53 +0100
Subject: [PATCH] Convert some Enzyme tests to RTL (#9163)

---
 test/accessibility/RovingTabIndex-test.tsx | 70 +++++++++++-----------
 test/utils/tooltipify-test.tsx             | 15 ++---
 2 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/test/accessibility/RovingTabIndex-test.tsx b/test/accessibility/RovingTabIndex-test.tsx
index 708fc3c928..9f7364658d 100644
--- a/test/accessibility/RovingTabIndex-test.tsx
+++ b/test/accessibility/RovingTabIndex-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import * as React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { render } from "@testing-library/react";
 
 import {
     IState,
@@ -32,10 +31,10 @@ const Button = (props) => {
     return <button {...props} onFocus={onFocus} tabIndex={isActive ? 0 : -1} ref={ref} />;
 };
 
-const checkTabIndexes = (buttons: ReactWrapper, expectations: number[]) => {
+const checkTabIndexes = (buttons: NodeListOf<HTMLElement>, expectations: number[]) => {
     expect(buttons.length).toBe(expectations.length);
     for (let i = 0; i < buttons.length; i++) {
-        expect(buttons.at(i).prop("tabIndex")).toBe(expectations[i]);
+        expect(buttons[i].tabIndex).toBe(expectations[i]);
     }
 };
 
@@ -52,15 +51,15 @@ Object.defineProperty(HTMLElement.prototype, "offsetParent", {
 
 describe("RovingTabIndex", () => {
     it("RovingTabIndexProvider renders children as expected", () => {
-        const wrapper = mount(<RovingTabIndexProvider>
+        const { container } = render(<RovingTabIndexProvider>
             { () => <div><span>Test</span></div> }
         </RovingTabIndexProvider>);
-        expect(wrapper.text()).toBe("Test");
-        expect(wrapper.html()).toBe('<div><span>Test</span></div>');
+        expect(container.textContent).toBe("Test");
+        expect(container.innerHTML).toBe('<div><span>Test</span></div>');
     });
 
     it("RovingTabIndexProvider works as expected with useRovingTabIndex", () => {
-        const wrapper = mount(<RovingTabIndexProvider>
+        const { container, rerender } = render(<RovingTabIndexProvider>
             { () => <React.Fragment>
                 { button1 }
                 { button2 }
@@ -69,40 +68,44 @@ describe("RovingTabIndex", () => {
         </RovingTabIndexProvider>);
 
         // should begin with 0th being active
-        checkTabIndexes(wrapper.find("button"), [0, -1, -1]);
+        checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
         // focus on 2nd button and test it is the only active one
-        wrapper.find("button").at(2).simulate("focus");
-        wrapper.update();
-        checkTabIndexes(wrapper.find("button"), [-1, -1, 0]);
+        container.querySelectorAll("button")[2].focus();
+        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
 
         // focus on 1st button and test it is the only active one
-        wrapper.find("button").at(1).simulate("focus");
-        wrapper.update();
-        checkTabIndexes(wrapper.find("button"), [-1, 0, -1]);
+        container.querySelectorAll("button")[1].focus();
+        checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
         // check that the active button does not change even on an explicit blur event
-        wrapper.find("button").at(1).simulate("blur");
-        wrapper.update();
-        checkTabIndexes(wrapper.find("button"), [-1, 0, -1]);
+        container.querySelectorAll("button")[1].blur();
+        checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
         // update the children, it should remain on the same button
-        wrapper.setProps({
-            children: () => [button1, button4, button2, button3],
-        });
-        wrapper.update();
-        checkTabIndexes(wrapper.find("button"), [-1, -1, 0, -1]);
+        rerender(<RovingTabIndexProvider>
+            { () => <React.Fragment>
+                { button1 }
+                { button4 }
+                { button2 }
+                { button3 }
+            </React.Fragment> }
+        </RovingTabIndexProvider>);
+        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0, -1]);
 
         // update the children, remove the active button, it should move to the next one
-        wrapper.setProps({
-            children: () => [button1, button4, button3],
-        });
-        wrapper.update();
-        checkTabIndexes(wrapper.find("button"), [-1, -1, 0]);
+        rerender(<RovingTabIndexProvider>
+            { () => <React.Fragment>
+                { button1 }
+                { button4 }
+                { button3 }
+            </React.Fragment> }
+        </RovingTabIndexProvider>);
+        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
     });
 
     it("RovingTabIndexProvider works as expected with RovingTabIndexWrapper", () => {
-        const wrapper = mount(<RovingTabIndexProvider>
+        const { container } = render(<RovingTabIndexProvider>
             { () => <React.Fragment>
                 { button1 }
                 { button2 }
@@ -118,12 +121,11 @@ describe("RovingTabIndex", () => {
         </RovingTabIndexProvider>);
 
         // should begin with 0th being active
-        checkTabIndexes(wrapper.find("button"), [0, -1, -1]);
+        checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
         // focus on 2nd button and test it is the only active one
-        wrapper.find("button").at(2).simulate("focus");
-        wrapper.update();
-        checkTabIndexes(wrapper.find("button"), [-1, -1, 0]);
+        container.querySelectorAll("button")[2].focus();
+        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
     });
 
     describe("reducer functions as expected", () => {
@@ -206,7 +208,7 @@ describe("RovingTabIndex", () => {
             const ref3 = React.createRef<HTMLElement>();
             const ref4 = React.createRef<HTMLElement>();
 
-            mount(<React.Fragment>
+            render(<React.Fragment>
                 <span ref={ref1} />
                 <span ref={ref2} />
                 <span ref={ref3} />
diff --git a/test/utils/tooltipify-test.tsx b/test/utils/tooltipify-test.tsx
index 1cad2a0ea2..0049bf7acc 100644
--- a/test/utils/tooltipify-test.tsx
+++ b/test/utils/tooltipify-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import { tooltipifyLinks } from '../../src/utils/tooltipify';
 import PlatformPeg from '../../src/PlatformPeg';
@@ -27,8 +26,7 @@ describe('tooltipify', () => {
         .mockReturnValue({ needsUrlTooltips: () => true } as unknown as BasePlatform);
 
     it('does nothing for empty element', () => {
-        const component = mount(<div />);
-        const root = component.getDOMNode();
+        const { container: root } = render(<div />);
         const originalHtml = root.outerHTML;
         const containers: Element[] = [];
         tooltipifyLinks([root], [], containers);
@@ -37,8 +35,7 @@ describe('tooltipify', () => {
     });
 
     it('wraps single anchor', () => {
-        const component = mount(<div><a href="/foo">click</a></div>);
-        const root = component.getDOMNode();
+        const { container: root } = render(<div><a href="/foo">click</a></div>);
         const containers: Element[] = [];
         tooltipifyLinks([root], [], containers);
         expect(containers).toHaveLength(1);
@@ -49,8 +46,7 @@ describe('tooltipify', () => {
     });
 
     it('ignores node', () => {
-        const component = mount(<div><a href="/foo">click</a></div>);
-        const root = component.getDOMNode();
+        const { container: root } = render(<div><a href="/foo">click</a></div>);
         const originalHtml = root.outerHTML;
         const containers: Element[] = [];
         tooltipifyLinks([root], [root.children[0]], containers);
@@ -59,8 +55,7 @@ describe('tooltipify', () => {
     });
 
     it("does not re-wrap if called multiple times", () => {
-        const component = mount(<div><a href="/foo">click</a></div>);
-        const root = component.getDOMNode();
+        const { container: root } = render(<div><a href="/foo">click</a></div>);
         const containers: Element[] = [];
         tooltipifyLinks([root], [], containers);
         tooltipifyLinks([root], [], containers);