Replace react-dom tests with react testing-library tests (#10260)

matrix-org · Mar 1, 2023 · e5291c1 · e5291c1
1 parent 5398db2
commit e5291c1
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 184 deletions.
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
@@ -68,8 +68,7 @@ interface IState {
 }
 
 export default class MemberList extends React.Component<IProps, IState> {
-    // XXX: exported for tests
-    public showPresence = true;
+    private readonly showPresence: boolean;
     private mounted = false;
 
     public static contextType = SDKContext;
@@ -260,32 +259,6 @@ export default class MemberList extends React.Component<IProps, IState> {
         });
     };
 
-    /**
-     * SHOULD ONLY BE USED BY TESTS
-     */
-    public memberString(member: RoomMember): string {
-        if (!member) {
-            return "(null)";
-        } else {
-            const u = member.user;
-            return (
-                "(" +
-                member.name +
-                ", " +
-                member.powerLevel +
-                ", " +
-                (u ? u.lastActiveAgo : "<null>") +
-                ", " +
-                (u ? u.getLastActiveTs() : "<null>") +
-                ", " +
-                (u ? u.currentlyActive : "<null>") +
-                ", " +
-                (u ? u.presence : "<null>") +
-                ")"
-            );
-        }
-    }
-
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
         if (prevProps.searchQuery !== this.props.searchQuery) {
             this.updateListNow(false);

diff --git a/test/components/views/elements/TooltipTarget-test.tsx b/test/components/views/elements/TooltipTarget-test.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, renderIntoDocument, Simulate } from "react-dom/test-utils";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Alignment } from "../../../../src/components/views/elements/Tooltip";
 import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";
@@ -28,27 +28,19 @@ describe("<TooltipTarget />", () => {
         "label": "test label",
         "alignment": Alignment.Left,
         "id": "test id",
-        "data-test-id": "test",
+        "data-testid": "test",
     };
 
-    afterEach(() => {
-        // clean up renderer tooltips
-        const wrapper = document.querySelector(".mx_Tooltip_wrapper");
-        while (wrapper?.firstChild) {
-            wrapper.removeChild(wrapper.lastChild!);
-        }
-    });
-
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLSpanElement>(
+        const wrapper = render(
             // wrap in element so renderIntoDocument can render functional component
             <span>
                 <TooltipTarget {...defaultProps} {...props}>
                     <span>child</span>
                 </TooltipTarget>
             </span>,
-        ) as HTMLSpanElement;
-        return wrapper.querySelector("[data-test-id=test]");
+        );
+        return wrapper.getByTestId("test");
     };
 
     const getVisibleTooltip = () => document.querySelector(".mx_Tooltip.mx_Tooltip_visible");
@@ -62,41 +54,29 @@ describe("<TooltipTarget />", () => {
     const alignmentKeys = Object.keys(Alignment).filter((o: any) => isNaN(o));
     it.each(alignmentKeys)("displays %s aligned tooltip on mouseover", async (alignment: any) => {
         const wrapper = getComponent({ alignment: Alignment[alignment] })!;
-        act(() => {
-            Simulate.mouseOver(wrapper);
-        });
+        fireEvent.mouseOver(wrapper);
         expect(getVisibleTooltip()).toMatchSnapshot();
     });
 
     it("hides tooltip on mouseleave", () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.mouseOver(wrapper);
-        });
+        fireEvent.mouseOver(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
-        act(() => {
-            Simulate.mouseLeave(wrapper);
-        });
+        fireEvent.mouseLeave(wrapper);
         expect(getVisibleTooltip()).toBeFalsy();
     });
 
     it("displays tooltip on focus", () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.focus(wrapper);
-        });
+        fireEvent.focus(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
     });
 
     it("hides tooltip on blur", async () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.focus(wrapper);
-        });
+        fireEvent.focus(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
-        act(() => {
-            Simulate.blur(wrapper);
-        });
+        fireEvent.blur(wrapper);
         expect(getVisibleTooltip()).toBeFalsy();
     });
 });
diff --git a/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap b/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
@@ -95,7 +95,7 @@ exports[`<TooltipTarget /> renders container 1`] = `
 <div
   aria-describedby="test id"
   class="test tooltipTargetClassName"
-  data-test-id="test"
+  data-testid="test"
   tabindex="0"
 >
   <span>