Port location unit tests from enzyme to react-testing-library (#10181)

* SmartMarker test to rtl

* LocationPicker to rtl

* LocationViewDialog to rtl

* LocationShareMenu to rtl

* use toBeDisabled assertion

Author: Kerry

cypress/e2e/location/location.spec.ts

@@ -27,7 +27,7 @@ describe("Location sharing", () => {
     };
 
     const submitShareLocation = (): void => {
-        cy.get('[data-test-id="location-picker-submit-button"]').click();
+        cy.get('[data-testid="location-picker-submit-button"]').click();
     };
 
     beforeEach(() => {

src/components/views/location/EnableLiveShare.tsx

@@ -29,7 +29,7 @@ interface Props {
 export const EnableLiveShare: React.FC<Props> = ({ onSubmit }) => {
     const [isEnabled, setEnabled] = useState(false);
     return (
-        <div data-test-id="location-picker-enable-live-share" className="mx_EnableLiveShare">
+        <div data-testid="location-picker-enable-live-share" className="mx_EnableLiveShare">
             <StyledLiveBeaconIcon className="mx_EnableLiveShare_icon" />
             <Heading className="mx_EnableLiveShare_heading" size="h3">
                 {_t("Live location sharing")}
@@ -43,13 +43,13 @@ export const EnableLiveShare: React.FC<Props> = ({ onSubmit }) => {
                 )}
             </p>
             <LabelledToggleSwitch
-                data-test-id="enable-live-share-toggle"
+                data-testid="enable-live-share-toggle"
                 value={isEnabled}
                 onChange={setEnabled}
                 label={_t("Enable live location sharing")}
             />
             <AccessibleButton
-                data-test-id="enable-live-share-submit"
+                data-testid="enable-live-share-submit"
                 className="mx_EnableLiveShare_button"
                 element="button"
                 kind="primary"

src/components/views/location/LiveDurationDropdown.tsx

@@ -62,7 +62,7 @@ const LiveDurationDropdown: React.FC<Props> = ({ timeout, onChange }) => {
     return (
         <Dropdown
             id="live-duration"
-            data-test-id="live-duration-dropdown"
+            data-testid="live-duration-dropdown"
             label={getLabel(timeout)}
             value={timeout.toString()}
             onOptionChange={onOptionChange}

src/components/views/location/LocationPicker.tsx

@@ -231,7 +231,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
                             <LiveDurationDropdown onChange={this.onTimeoutChange} timeout={this.state.timeout} />
                         )}
                         <AccessibleButton
-                            data-test-id="location-picker-submit-button"
+                            data-testid="location-picker-submit-button"
                             type="submit"
                             element="button"
                             kind="primary"

src/components/views/location/MapError.tsx

@@ -33,7 +33,7 @@ export interface MapErrorProps {
 
 export const MapError: React.FC<MapErrorProps> = ({ error, isMinimised, className, onFinished, onClick }) => (
     <div
-        data-test-id="map-rendering-error"
+        data-testid="map-rendering-error"
         className={classNames("mx_MapError", className, { mx_MapError_isMinimised: isMinimised })}
         onClick={onClick}
     >

src/components/views/location/ShareDialogButtons.tsx

@@ -19,6 +19,7 @@ import React from "react";
 import AccessibleButton from "../elements/AccessibleButton";
 import { Icon as BackIcon } from "../../../../res/img/element-icons/caret-left.svg";
 import { Icon as CloseIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
+import { _t } from "../../../languageHandler";
 
 interface Props {
     onCancel: () => void;
@@ -32,7 +33,8 @@ const ShareDialogButtons: React.FC<Props> = ({ onBack, onCancel, displayBack })
             {displayBack && (
                 <AccessibleButton
                     className="mx_ShareDialogButtons_button left"
-                    data-test-id="share-dialog-buttons-back"
+                    data-testid="share-dialog-buttons-back"
+                    aria-label={_t("Back")}
                     onClick={onBack}
                     element="button"
                 >
@@ -41,7 +43,8 @@ const ShareDialogButtons: React.FC<Props> = ({ onBack, onCancel, displayBack })
             )}
             <AccessibleButton
                 className="mx_ShareDialogButtons_button right"
-                data-test-id="share-dialog-buttons-cancel"
+                data-testid="share-dialog-buttons-cancel"
+                aria-label={_t("Close")}
                 onClick={onCancel}
                 element="button"
             >

test/components/views/location/LocationPicker-test.tsx

@@ -15,9 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
 import { act } from "react-dom/test-utils";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixClient } from "matrix-js-sdk/src/client";
@@ -28,7 +27,7 @@ import LocationPicker from "../../../../src/components/views/location/LocationPi
 import { LocationShareType } from "../../../../src/components/views/location/shareLocation";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { findById, findByTestId, mockPlatformPeg } from "../../../test-utils";
+import { getMockClientWithEventEmitter, mockPlatformPeg } from "../../../test-utils";
 import { findMapStyleUrl, LocationShareError } from "../../../../src/utils/location";
 
 jest.mock("../../../../src/utils/location/findMapStyleUrl", () => ({
@@ -49,17 +48,15 @@ describe("LocationPicker", () => {
             onChoose: jest.fn(),
             onFinished: jest.fn(),
         };
-        const mockClient = {
-            on: jest.fn(),
-            removeListener: jest.fn(),
-            off: jest.fn(),
+        const mockClient = getMockClientWithEventEmitter({
             isGuest: jest.fn(),
             getClientWellKnown: jest.fn(),
-        };
-        const getComponent = (props = {}) =>
-            mount(<LocationPicker {...defaultProps} {...props} />, {
-                wrappingComponent: MatrixClientContext.Provider,
-                wrappingComponentProps: { value: mockClient },
+        });
+        const getComponent = (props = {}): RenderResult =>
+            render(<LocationPicker {...defaultProps} {...props} />, {
+                wrapper: ({ children }) => (
+                    <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
+                ),
             });
 
         const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
@@ -94,18 +91,20 @@ describe("LocationPicker", () => {
         it("displays error when map emits an error", () => {
             // suppress expected error log
             jest.spyOn(logger, "error").mockImplementation(() => {});
-            const wrapper = getComponent();
+            const { getByTestId, getByText } = getComponent();
 
             act(() => {
                 // @ts-ignore
                 mocked(mockMap).emit("error", { error: "Something went wrong" });
-                wrapper.setProps({});
             });
 
-            expect(findByTestId(wrapper, "map-rendering-error").find("p").text()).toEqual(
-                "This homeserver is not configured correctly to display maps, " +
-                    "or the configured map server may be unreachable.",
-            );
+            expect(getByTestId("map-rendering-error")).toBeInTheDocument();
+            expect(
+                getByText(
+                    "This homeserver is not configured correctly to display maps, " +
+                        "or the configured map server may be unreachable.",
+                ),
+            ).toBeInTheDocument();
         });
 
         it("displays error when map display is not configured properly", () => {
@@ -115,12 +114,9 @@ describe("LocationPicker", () => {
                 throw new Error(LocationShareError.MapStyleUrlNotConfigured);
             });
 
-            const wrapper = getComponent();
-            wrapper.setProps({});
+            const { getByText } = getComponent();
 
-            expect(findByTestId(wrapper, "map-rendering-error").find("p").text()).toEqual(
-                "This homeserver is not configured to display maps.",
-            );
+            expect(getByText("This homeserver is not configured to display maps.")).toBeInTheDocument();
         });
 
         it("displays error when map setup throws", () => {
@@ -132,13 +128,14 @@ describe("LocationPicker", () => {
                 throw new Error("oups");
             });
 
-            const wrapper = getComponent();
-            wrapper.setProps({});
+            const { getByText } = getComponent();
 
-            expect(findByTestId(wrapper, "map-rendering-error").find("p").text()).toEqual(
-                "This homeserver is not configured correctly to display maps, " +
-                    "or the configured map server may be unreachable.",
-            );
+            expect(
+                getByText(
+                    "This homeserver is not configured correctly to display maps, " +
+                        "or the configured map server may be unreachable.",
+                ),
+            ).toBeInTheDocument();
         });
 
         it("initiates map with geolocation", () => {
@@ -174,57 +171,49 @@ describe("LocationPicker", () => {
                 });
 
                 it("sets position on geolocate event", () => {
-                    const wrapper = getComponent({ shareType });
+                    const { container, getByTestId } = getComponent({ shareType });
                     act(() => {
                         // @ts-ignore
                         mocked(mockGeolocate).emit("geolocate", mockGeolocationPosition);
-                        wrapper.setProps({});
                     });
 
                     // marker added
                     expect(maplibregl.Marker).toHaveBeenCalled();
                     expect(mockMarker.setLngLat).toHaveBeenCalledWith(new maplibregl.LngLat(12.4, 43.2));
                     // submit button is enabled when position is truthy
-                    expect(findByTestId(wrapper, "location-picker-submit-button").at(0).props().disabled).toBeFalsy();
-                    expect(wrapper.find("MemberAvatar").length).toBeTruthy();
+                    expect(getByTestId("location-picker-submit-button")).not.toBeDisabled();
+                    expect(container.querySelector(".mx_BaseAvatar")).toBeInTheDocument();
                 });
 
                 it("disables submit button until geolocation completes", () => {
                     const onChoose = jest.fn();
-                    const wrapper = getComponent({ shareType, onChoose });
+                    const { getByTestId } = getComponent({ shareType, onChoose });
 
-                    // submit button is enabled when position is truthy
-                    expect(findByTestId(wrapper, "location-picker-submit-button").at(0).props().disabled).toBeTruthy();
-                    act(() => {
-                        findByTestId(wrapper, "location-picker-submit-button").at(0).simulate("click");
-                    });
+                    // button is disabled
+                    expect(getByTestId("location-picker-submit-button")).toBeDisabled();
+                    fireEvent.click(getByTestId("location-picker-submit-button"));
                     // nothing happens on button click
                     expect(onChoose).not.toHaveBeenCalled();
 
                     act(() => {
                         // @ts-ignore
                         mocked(mockGeolocate).emit("geolocate", mockGeolocationPosition);
-                        wrapper.setProps({});
                     });
 
                     // submit button is enabled when position is truthy
-                    expect(findByTestId(wrapper, "location-picker-submit-button").at(0).props().disabled).toBeFalsy();
+                    expect(getByTestId("location-picker-submit-button")).not.toBeDisabled();
                 });
 
                 it("submits location", () => {
                     const onChoose = jest.fn();
-                    const wrapper = getComponent({ onChoose, shareType });
+                    const { getByTestId } = getComponent({ onChoose, shareType });
                     act(() => {
                         // @ts-ignore
                         mocked(mockGeolocate).emit("geolocate", mockGeolocationPosition);
                         // make sure button is enabled
-                        wrapper.setProps({});
-                    });
-
-                    act(() => {
-                        findByTestId(wrapper, "location-picker-submit-button").at(0).simulate("click");
                     });
 
+                    fireEvent.click(getByTestId("location-picker-submit-button"));
                     // content of this call is tested in LocationShareMenu-test
                     expect(onChoose).toHaveBeenCalled();
                 });
@@ -239,34 +228,21 @@ describe("LocationPicker", () => {
             const shareType = LocationShareType.Live;
             testUserLocationShareTypes(shareType);
 
-            const getOption = (wrapper: ReactWrapper, timeout: number) =>
-                findById(wrapper, `live-duration__${timeout}`).at(0);
-            const getDropdown = (wrapper: ReactWrapper) => findByTestId(wrapper, "live-duration-dropdown");
-            const getSelectedOption = (wrapper: ReactWrapper) => findById(wrapper, "live-duration_value");
-
-            const openDropdown = (wrapper: ReactWrapper) =>
-                act(() => {
-                    const dropdown = getDropdown(wrapper);
-                    dropdown.find('[role="button"]').at(0).simulate("click");
-                    wrapper.setProps({});
-                });
-
             it("renders live duration dropdown with default option", () => {
-                const wrapper = getComponent({ shareType });
-                expect(getSelectedOption(getDropdown(wrapper)).text()).toEqual("Share for 15m");
+                const { getByText } = getComponent({ shareType });
+                expect(getByText("Share for 15m")).toBeInTheDocument();
             });
 
             it("updates selected duration", () => {
-                const wrapper = getComponent({ shareType });
+                const { getByText, getByLabelText } = getComponent({ shareType });
 
-                openDropdown(wrapper);
-                const dropdown = getDropdown(wrapper);
-                act(() => {
-                    getOption(dropdown, 3600000).simulate("click");
-                });
+                // open dropdown
+                fireEvent.click(getByLabelText("Share for 15m"));
+
+                fireEvent.click(getByText("Share for 1h"));
 
                 // value updated
-                expect(getSelectedOption(getDropdown(wrapper)).text()).toEqual("Share for 1h");
+                expect(getByText("Share for 1h")).toMatchSnapshot();
             });
         });
 
@@ -303,44 +279,40 @@ describe("LocationPicker", () => {
 
             it("does not set position on geolocate event", () => {
                 mocked(maplibregl.Marker).mockClear();
-                const wrapper = getComponent({ shareType });
+                const { container } = getComponent({ shareType });
                 act(() => {
                     // @ts-ignore
                     mocked(mockGeolocate).emit("geolocate", mockGeolocationPosition);
                 });
 
                 // marker not added
-                expect(wrapper.find("Marker").length).toBeFalsy();
+                expect(container.querySelector("mx_Marker")).not.toBeInTheDocument();
             });
 
             it("sets position on click event", () => {
-                const wrapper = getComponent({ shareType });
+                const { container } = getComponent({ shareType });
                 act(() => {
                     // @ts-ignore
                     mocked(mockMap).emit("click", mockClickEvent);
-                    wrapper.setProps({});
                 });
 
                 // marker added
                 expect(maplibregl.Marker).toHaveBeenCalled();
                 expect(mockMarker.setLngLat).toHaveBeenCalledWith(new maplibregl.LngLat(12.4, 43.2));
 
                 // marker is set, icon not avatar
-                expect(wrapper.find(".mx_Marker_icon").length).toBeTruthy();
+                expect(container.querySelector(".mx_Marker_icon")).toBeInTheDocument();
             });
 
             it("submits location", () => {
                 const onChoose = jest.fn();
-                const wrapper = getComponent({ onChoose, shareType });
+                const { getByTestId } = getComponent({ onChoose, shareType });
                 act(() => {
                     // @ts-ignore
                     mocked(mockMap).emit("click", mockClickEvent);
-                    wrapper.setProps({});
                 });
 
-                act(() => {
-                    findByTestId(wrapper, "location-picker-submit-button").at(0).simulate("click");
-                });
+                fireEvent.click(getByTestId("location-picker-submit-button"));
 
                 // content of this call is tested in LocationShareMenu-test
                 expect(onChoose).toHaveBeenCalled();