Migrate ZoomButtons-test to react-testing-library (#10104)

matrix-org · Feb 8, 2023 · 2c30e6d · 2c30e6d
1 parent cb67457
commit 2c30e6d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 80 deletions.
diff --git a/src/components/views/location/ZoomButtons.tsx b/src/components/views/location/ZoomButtons.tsx
@@ -39,15 +39,15 @@ const ZoomButtons: React.FC<Props> = ({ map }) => {
         <div className="mx_ZoomButtons">
             <AccessibleButton
                 onClick={onZoomIn}
-                data-test-id="map-zoom-in-button"
+                data-testid="map-zoom-in-button"
                 title={_t("Zoom in")}
                 className="mx_ZoomButtons_button"
             >
                 <PlusIcon className="mx_ZoomButtons_icon" />
             </AccessibleButton>
             <AccessibleButton
                 onClick={onZoomOut}
-                data-test-id="map-zoom-out-button"
+                data-testid="map-zoom-out-button"
                 title={_t("Zoom out")}
                 className="mx_ZoomButtons_button"
             >

diff --git a/test/components/views/location/ZoomButtons-test.tsx b/test/components/views/location/ZoomButtons-test.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,48 +15,39 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
 import * as maplibregl from "maplibre-gl";
-import { act } from "react-dom/test-utils";
+import { render, screen } from "@testing-library/react";
 
 import ZoomButtons from "../../../../src/components/views/location/ZoomButtons";
-import { findByTestId } from "../../../test-utils";
 
 describe("<ZoomButtons />", () => {
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     const mockMap = new maplibregl.Map(mapOptions);
     const defaultProps = {
         map: mockMap,
     };
-    const getComponent = (props = {}) => mount(<ZoomButtons {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<ZoomButtons {...defaultProps} {...props} />);
 
     beforeEach(() => {
         jest.clearAllMocks();
     });
 
     it("renders buttons", () => {
         const component = getComponent();
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("calls map zoom in on zoom in click", () => {
         const component = getComponent();
-
-        act(() => {
-            findByTestId(component, "map-zoom-in-button").at(0).simulate("click");
-        });
+        screen.getByTestId("map-zoom-in-button").click();
 
         expect(mockMap.zoomIn).toHaveBeenCalled();
         expect(component).toBeTruthy();
     });
 
     it("calls map zoom out on zoom out click", () => {
         const component = getComponent();
-
-        act(() => {
-            findByTestId(component, "map-zoom-out-button").at(0).simulate("click");
-        });
+        screen.getByTestId("map-zoom-out-button").click();
 
         expect(mockMap.zoomOut).toHaveBeenCalled();
         expect(component).toBeTruthy();

diff --git a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
@@ -135,7 +135,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
       >
         <AccessibleButton
           className="mx_ZoomButtons_button"
-          data-test-id="map-zoom-in-button"
+          data-testid="map-zoom-in-button"
           element="div"
           onClick={[Function]}
           role="button"
@@ -144,7 +144,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         >
           <div
             className="mx_AccessibleButton mx_ZoomButtons_button"
-            data-test-id="map-zoom-in-button"
+            data-testid="map-zoom-in-button"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
@@ -159,7 +159,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         </AccessibleButton>
         <AccessibleButton
           className="mx_ZoomButtons_button"
-          data-test-id="map-zoom-out-button"
+          data-testid="map-zoom-out-button"
           element="div"
           onClick={[Function]}
           role="button"
@@ -168,7 +168,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         >
           <div
             className="mx_AccessibleButton mx_ZoomButtons_button"
-            data-test-id="map-zoom-out-button"
+            data-testid="map-zoom-out-button"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}

diff --git a/test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap b/test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap
@@ -1,74 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ZoomButtons /> renders buttons 1`] = `
-<ZoomButtons
-  map={
-    MockMap {
-      "_events": {},
-      "_eventsCount": 0,
-      "_maxListeners": undefined,
-      "addControl": [MockFunction],
-      "fitBounds": [MockFunction],
-      "removeControl": [MockFunction],
-      "setCenter": [MockFunction],
-      "setStyle": [MockFunction],
-      "zoomIn": [MockFunction],
-      "zoomOut": [MockFunction],
-      Symbol(kCapture): false,
-    }
-  }
->
+<DocumentFragment>
   <div
-    className="mx_ZoomButtons"
+    class="mx_ZoomButtons"
   >
-    <AccessibleButton
-      className="mx_ZoomButtons_button"
-      data-test-id="map-zoom-in-button"
-      element="div"
-      onClick={[Function]}
+    <div
+      class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-testid="map-zoom-in-button"
       role="button"
-      tabIndex={0}
+      tabindex="0"
       title="Zoom in"
     >
       <div
-        className="mx_AccessibleButton mx_ZoomButtons_button"
-        data-test-id="map-zoom-in-button"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        role="button"
-        tabIndex={0}
-        title="Zoom in"
-      >
-        <div
-          className="mx_ZoomButtons_icon"
-        />
-      </div>
-    </AccessibleButton>
-    <AccessibleButton
-      className="mx_ZoomButtons_button"
-      data-test-id="map-zoom-out-button"
-      element="div"
-      onClick={[Function]}
+        class="mx_ZoomButtons_icon"
+      />
+    </div>
+    <div
+      class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-testid="map-zoom-out-button"
       role="button"
-      tabIndex={0}
+      tabindex="0"
       title="Zoom out"
     >
       <div
-        className="mx_AccessibleButton mx_ZoomButtons_button"
-        data-test-id="map-zoom-out-button"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        role="button"
-        tabIndex={0}
-        title="Zoom out"
-      >
-        <div
-          className="mx_ZoomButtons_icon"
-        />
-      </div>
-    </AccessibleButton>
+        class="mx_ZoomButtons_icon"
+      />
+    </div>
   </div>
-</ZoomButtons>
+</DocumentFragment>
 `;