Migrate Enzyme to RTL (#9842)

This commit is contained in:
Germain 2022-12-29 15:35:19 +00:00 committed by GitHub
parent 6d2d13fdee
commit 1e8b59ea40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 234 additions and 227 deletions

View file

@ -16,16 +16,14 @@ limitations under the License.
import React from "react";
import { act } from "react-dom/test-utils";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { Room, Beacon, BeaconEvent, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
import { Room, Beacon, BeaconEvent, getBeaconInfoIdentifier, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
import RoomLiveShareWarning from "../../../../src/components/views/beacon/RoomLiveShareWarning";
import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../../src/stores/OwnBeaconStore";
import {
advanceDateAndTime,
findByTestId,
flushPromisesWithFakeTimers,
getMockClientWithEventEmitter,
makeBeaconInfoEvent,
@ -70,7 +68,7 @@ describe("<RoomLiveShareWarning />", () => {
// make fresh rooms every time
// as we update room state
const makeRoomsWithStateEvents = (stateEvents = []): [Room, Room] => {
const makeRoomsWithStateEvents = (stateEvents: MatrixEvent[] = []): [Room, Room] => {
const room1 = new Room(room1Id, mockClient, aliceId);
const room2 = new Room(room2Id, mockClient, aliceId);
@ -92,13 +90,7 @@ describe("<RoomLiveShareWarning />", () => {
roomId: room1Id,
};
const getComponent = (props = {}) => {
let component;
// component updates on render
// wrap in act
act(() => {
component = mount(<RoomLiveShareWarning {...defaultProps} {...props} />);
});
return component;
return render(<RoomLiveShareWarning {...defaultProps} {...props} />);
};
const localStorageSpy = jest.spyOn(localStorage.__proto__, "getItem").mockReturnValue(undefined);
@ -125,12 +117,10 @@ describe("<RoomLiveShareWarning />", () => {
jest.spyOn(defaultDispatcher, "dispatch").mockRestore();
});
const getExpiryText = (wrapper) => findByTestId(wrapper, "room-live-share-expiry").text();
it("renders nothing when user has no live beacons at all", async () => {
await makeOwnBeaconStore();
const component = getComponent();
expect(component.html()).toBe(null);
const { asFragment } = getComponent();
expect(asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
});
it("renders nothing when user has no live beacons in room", async () => {
@ -138,8 +128,8 @@ describe("<RoomLiveShareWarning />", () => {
await makeRoomsWithStateEvents([room2Beacon1]);
await makeOwnBeaconStore();
});
const component = getComponent({ roomId: room1Id });
expect(component.html()).toBe(null);
const { asFragment } = getComponent({ roomId: room1Id });
expect(asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
});
it("does not render when geolocation is not working", async () => {
@ -150,13 +140,10 @@ describe("<RoomLiveShareWarning />", () => {
await makeRoomsWithStateEvents([room1Beacon1, room2Beacon1, room2Beacon2]);
await makeOwnBeaconStore();
});
const component = getComponent({ roomId: room1Id });
const { asFragment } = getComponent({ roomId: room1Id });
// beacons have generated ids that break snapshots
// assert on html
expect(component.html()).toBeNull();
expect(asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
});
describe("when user has live beacons and geolocation is available", () => {
beforeEach(async () => {
await act(async () => {
@ -166,25 +153,25 @@ describe("<RoomLiveShareWarning />", () => {
});
it("renders correctly with one live beacon in room", () => {
const component = getComponent({ roomId: room1Id });
const { asFragment } = getComponent({ roomId: room1Id });
// beacons have generated ids that break snapshots
// assert on html
expect(component.html()).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
it("renders correctly with two live beacons in room", () => {
const component = getComponent({ roomId: room2Id });
const { asFragment, container } = getComponent({ roomId: room2Id });
// beacons have generated ids that break snapshots
// assert on html
expect(component.html()).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
// later expiry displayed
expect(getExpiryText(component)).toEqual("12h left");
expect(container).toHaveTextContent("12h left");
});
it("removes itself when user stops having live beacons", async () => {
const component = getComponent({ roomId: room1Id });
const { container } = getComponent({ roomId: room1Id });
// started out rendered
expect(component.html()).toBeTruthy();
expect(container.firstChild).toBeTruthy();
// time travel until room1Beacon1 is expired
act(() => {
@ -192,57 +179,51 @@ describe("<RoomLiveShareWarning />", () => {
});
act(() => {
mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1));
component.setProps({});
});
expect(component.html()).toBe(null);
await waitFor(() => expect(container.firstChild).toBeFalsy());
});
it("removes itself when user stops monitoring live position", async () => {
const component = getComponent({ roomId: room1Id });
const { container } = getComponent({ roomId: room1Id });
// started out rendered
expect(component.html()).toBeTruthy();
expect(container.firstChild).toBeTruthy();
act(() => {
// cheat to clear this
// @ts-ignore
OwnBeaconStore.instance.clearPositionWatch = undefined;
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.MonitoringLivePosition);
component.setProps({});
});
expect(component.html()).toBe(null);
await waitFor(() => expect(container.firstChild).toBeFalsy());
});
it("renders when user adds a live beacon", async () => {
const component = getComponent({ roomId: room3Id });
const { container } = getComponent({ roomId: room3Id });
// started out not rendered
expect(component.html()).toBeFalsy();
expect(container.firstChild).toBeFalsy();
act(() => {
mockClient.emit(BeaconEvent.New, room3Beacon1, new Beacon(room3Beacon1));
component.setProps({});
});
expect(component.html()).toBeTruthy();
await waitFor(() => expect(container.firstChild).toBeTruthy());
});
it("updates beacon time left periodically", () => {
const component = getComponent({ roomId: room1Id });
expect(getExpiryText(component)).toEqual("1h left");
const { container } = getComponent({ roomId: room1Id });
expect(container).toHaveTextContent("1h left");
act(() => {
advanceDateAndTime(MINUTE_MS * 25);
});
expect(getExpiryText(component)).toEqual("35m left");
expect(container).toHaveTextContent("35m left");
});
it("updates beacon time left when beacon updates", () => {
const component = getComponent({ roomId: room1Id });
expect(getExpiryText(component)).toEqual("1h left");
expect(getExpiryText(component)).toEqual("1h left");
const { container } = getComponent({ roomId: room1Id });
expect(container).toHaveTextContent("1h left");
act(() => {
const beacon = OwnBeaconStore.instance.getBeaconById(getBeaconInfoIdentifier(room1Beacon1));
@ -255,31 +236,29 @@ describe("<RoomLiveShareWarning />", () => {
},
"$0",
);
beacon.update(room1Beacon1Update);
beacon?.update(room1Beacon1Update);
});
// update to expiry of new beacon
expect(getExpiryText(component)).toEqual("3h left");
expect(container).toHaveTextContent("3h left");
});
it("clears expiry time interval on unmount", () => {
const clearIntervalSpy = jest.spyOn(global, "clearInterval");
const component = getComponent({ roomId: room1Id });
expect(getExpiryText(component)).toEqual("1h left");
const { container, unmount } = getComponent({ roomId: room1Id });
expect(container).toHaveTextContent("1h left");
act(() => {
component.unmount();
});
unmount();
expect(clearIntervalSpy).toHaveBeenCalled();
});
it("navigates to beacon tile on click", () => {
const dispatcherSpy = jest.spyOn(defaultDispatcher, "dispatch");
const component = getComponent({ roomId: room1Id });
const { container } = getComponent({ roomId: room1Id });
act(() => {
component.simulate("click");
fireEvent.click(container.firstChild! as Node);
});
expect(dispatcherSpy).toHaveBeenCalledWith({
@ -293,21 +272,23 @@ describe("<RoomLiveShareWarning />", () => {
});
describe("stopping beacons", () => {
it("stops beacon on stop sharing click", () => {
const component = getComponent({ roomId: room2Id });
it("stops beacon on stop sharing click", async () => {
const { container } = getComponent({ roomId: room2Id });
act(() => {
findByTestId(component, "room-live-share-primary-button").at(0).simulate("click");
component.setProps({});
});
const btn = getByTestId(container, "room-live-share-primary-button");
fireEvent.click(btn);
expect(mockClient.unstable_setLiveBeacon).toHaveBeenCalled();
expect(component.find("Spinner").length).toBeTruthy();
expect(findByTestId(component, "room-live-share-primary-button").at(0).props().disabled).toBeTruthy();
await waitFor(() => expect(screen.queryByTestId("spinner")).toBeInTheDocument());
expect(btn.hasAttribute("disabled")).toBe(true);
});
it("displays error when stop sharing fails", async () => {
const component = getComponent({ roomId: room1Id });
const { container, asFragment } = getComponent({ roomId: room1Id });
const btn = getByTestId(container, "room-live-share-primary-button");
// fail first time
mockClient.unstable_setLiveBeacon
@ -315,16 +296,14 @@ describe("<RoomLiveShareWarning />", () => {
.mockResolvedValue({ event_id: "1" });
await act(async () => {
findByTestId(component, "room-live-share-primary-button").at(0).simulate("click");
fireEvent.click(btn);
await flushPromisesWithFakeTimers();
});
component.setProps({});
expect(component.html()).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
act(() => {
findByTestId(component, "room-live-share-primary-button").at(0).simulate("click");
component.setProps({});
fireEvent.click(btn);
});
expect(mockClient.unstable_setLiveBeacon).toHaveBeenCalledTimes(2);
@ -332,11 +311,12 @@ describe("<RoomLiveShareWarning />", () => {
it("displays again with correct state after stopping a beacon", () => {
// make sure the loading state is reset correctly after removing a beacon
const component = getComponent({ roomId: room1Id });
const { container } = getComponent({ roomId: room1Id });
const btn = getByTestId(container, "room-live-share-primary-button");
// stop the beacon
act(() => {
findByTestId(component, "room-live-share-primary-button").at(0).simulate("click");
fireEvent.click(btn);
});
// time travel until room1Beacon1 is expired
act(() => {
@ -352,8 +332,7 @@ describe("<RoomLiveShareWarning />", () => {
});
// button not disabled and expiry time shown
expect(findByTestId(component, "room-live-share-primary-button").at(0).props().disabled).toBeFalsy();
expect(findByTestId(component, "room-live-share-expiry").text()).toEqual("1h left");
expect(btn.hasAttribute("disabled")).toBe(true);
});
});
@ -362,9 +341,9 @@ describe("<RoomLiveShareWarning />", () => {
const locationPublishErrorSpy = jest
.spyOn(OwnBeaconStore.instance, "beaconHasLocationPublishError")
.mockReturnValue(true);
const component = getComponent({ roomId: room2Id });
const { asFragment } = getComponent({ roomId: room2Id });
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
expect(locationPublishErrorSpy).toHaveBeenCalledWith(getBeaconInfoIdentifier(room2Beacon1), 0, [
getBeaconInfoIdentifier(room2Beacon1),
]);
@ -377,7 +356,7 @@ describe("<RoomLiveShareWarning />", () => {
const locationPublishErrorSpy = jest
.spyOn(OwnBeaconStore.instance, "beaconHasLocationPublishError")
.mockReturnValue(false);
const component = getComponent({ roomId: room2Id });
const { container } = getComponent({ roomId: room2Id });
// update mock and emit event
act(() => {
@ -387,13 +366,13 @@ describe("<RoomLiveShareWarning />", () => {
getBeaconInfoIdentifier(room2Beacon1),
);
});
component.setProps({});
// renders wire error ui
expect(component.find(".mx_RoomLiveShareWarning_label").text()).toEqual(
expect(container).toHaveTextContent(
"An error occurred whilst sharing your live location, please try again",
);
expect(findByTestId(component, "room-live-share-wire-error-close-button").length).toBeTruthy();
expect(screen.queryByTestId("room-live-share-wire-error-close-button")).toBeInTheDocument();
},
);
@ -401,7 +380,7 @@ describe("<RoomLiveShareWarning />", () => {
const locationPublishErrorSpy = jest
.spyOn(OwnBeaconStore.instance, "beaconHasLocationPublishError")
.mockReturnValue(true);
const component = getComponent({ roomId: room2Id });
const { container } = getComponent({ roomId: room2Id });
// update mock and emit event
act(() => {
@ -411,23 +390,21 @@ describe("<RoomLiveShareWarning />", () => {
getBeaconInfoIdentifier(room2Beacon1),
);
});
component.setProps({});
// renders error-free ui
expect(component.find(".mx_RoomLiveShareWarning_label").text()).toEqual(
"You are sharing your live location",
);
expect(findByTestId(component, "room-live-share-wire-error-close-button").length).toBeFalsy();
expect(container).toHaveTextContent("You are sharing your live location");
expect(screen.queryByTestId("room-live-share-wire-error-close-button")).not.toBeInTheDocument();
});
it("clicking retry button resets location publish errors", async () => {
jest.spyOn(OwnBeaconStore.instance, "beaconHasLocationPublishError").mockReturnValue(true);
const resetErrorSpy = jest.spyOn(OwnBeaconStore.instance, "resetLocationPublishError");
const component = getComponent({ roomId: room2Id });
const { container } = getComponent({ roomId: room2Id });
const btn = getByTestId(container, "room-live-share-primary-button");
act(() => {
findByTestId(component, "room-live-share-primary-button").at(0).simulate("click");
fireEvent.click(btn);
});
expect(resetErrorSpy).toHaveBeenCalledWith(getBeaconInfoIdentifier(room2Beacon1));
@ -437,10 +414,10 @@ describe("<RoomLiveShareWarning />", () => {
jest.spyOn(OwnBeaconStore.instance, "beaconHasLocationPublishError").mockReturnValue(true);
const stopBeaconSpy = jest.spyOn(OwnBeaconStore.instance, "stopBeacon");
const component = getComponent({ roomId: room2Id });
const { container } = getComponent({ roomId: room2Id });
const btn = getByTestId(container, "room-live-share-wire-error-close-button");
act(() => {
findByTestId(component, "room-live-share-wire-error-close-button").at(0).simulate("click");
fireEvent.click(btn);
});
expect(stopBeaconSpy).toHaveBeenCalledWith(getBeaconInfoIdentifier(room2Beacon1));

View file

@ -1,87 +1,124 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class="mx_RoomLiveShareWarning"><div class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"></div><span class="mx_RoomLiveShareWarning_label">You are sharing your live location</span><span data-test-id="room-live-share-expiry" class="mx_LiveTimeRemaining">1h left</span><button data-test-id="room-live-share-primary-button" role="button" tabindex="0" class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger">Stop</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class="mx_RoomLiveShareWarning"><div class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"></div><span class="mx_RoomLiveShareWarning_label">You are sharing your live location</span><span data-test-id="room-live-share-expiry" class="mx_LiveTimeRemaining">12h left</span><button data-test-id="room-live-share-primary-button" role="button" tabindex="0" class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger">Stop</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `"<div class="mx_RoomLiveShareWarning"><div class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error"></div><span class="mx_RoomLiveShareWarning_label">An error occurred while stopping your live location, please try again</span><button data-test-id="room-live-share-primary-button" role="button" tabindex="0" class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger">Retry</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available with location publish errors displays location publish error when mounted with location publish errors 1`] = `
<RoomLiveShareWarning
roomId="$room2:server.org"
>
<RoomLiveShareWarningInner
liveBeaconIds={
[
"$room2:server.org_@alice:server.org",
]
}
roomId="$room2:server.org"
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `
<DocumentFragment>
<div
class="mx_RoomLiveShareWarning"
>
<div
className="mx_RoomLiveShareWarning"
onClick={[Function]}
class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"
/>
<span
class="mx_RoomLiveShareWarning_label"
>
<StyledLiveBeaconIcon
className="mx_RoomLiveShareWarning_icon"
withError={true}
>
<div
className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error"
/>
</StyledLiveBeaconIcon>
<span
className="mx_RoomLiveShareWarning_label"
>
An error occurred whilst sharing your live location, please try again
</span>
<AccessibleButton
className="mx_RoomLiveShareWarning_stopButton"
data-test-id="room-live-share-primary-button"
disabled={false}
element="button"
kind="danger"
onClick={[Function]}
role="button"
tabIndex={0}
>
<button
className="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
data-test-id="room-live-share-primary-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
>
Retry
</button>
</AccessibleButton>
<AccessibleButton
className="mx_RoomLiveShareWarning_closeButton"
data-test-id="room-live-share-wire-error-close-button"
element="button"
onClick={[Function]}
role="button"
tabIndex={0}
title="Stop and close"
>
<button
className="mx_AccessibleButton mx_RoomLiveShareWarning_closeButton"
data-test-id="room-live-share-wire-error-close-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Stop and close"
>
<div
className="mx_RoomLiveShareWarning_closeButtonIcon"
/>
</button>
</AccessibleButton>
</div>
</RoomLiveShareWarningInner>
</RoomLiveShareWarning>
You are sharing your live location
</span>
<span
class="mx_LiveTimeRemaining"
data-test-id="room-live-share-expiry"
>
1h left
</span>
<button
class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
data-testid="room-live-share-primary-button"
role="button"
tabindex="0"
>
Stop
</button>
</div>
</DocumentFragment>
`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `
<DocumentFragment>
<div
class="mx_RoomLiveShareWarning"
>
<div
class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"
/>
<span
class="mx_RoomLiveShareWarning_label"
>
You are sharing your live location
</span>
<span
class="mx_LiveTimeRemaining"
data-test-id="room-live-share-expiry"
>
12h left
</span>
<button
class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
data-testid="room-live-share-primary-button"
role="button"
tabindex="0"
>
Stop
</button>
</div>
</DocumentFragment>
`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `
<DocumentFragment>
<div
class="mx_RoomLiveShareWarning"
>
<div
class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error"
/>
<span
class="mx_RoomLiveShareWarning_label"
>
An error occurred while stopping your live location, please try again
</span>
<button
class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
data-testid="room-live-share-primary-button"
role="button"
tabindex="0"
>
Retry
</button>
</div>
</DocumentFragment>
`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available with location publish errors displays location publish error when mounted with location publish errors 1`] = `
<DocumentFragment>
<div
class="mx_RoomLiveShareWarning"
>
<div
class="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error"
/>
<span
class="mx_RoomLiveShareWarning_label"
>
An error occurred whilst sharing your live location, please try again
</span>
<button
class="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
data-testid="room-live-share-primary-button"
role="button"
tabindex="0"
>
Retry
</button>
<button
class="mx_AccessibleButton mx_RoomLiveShareWarning_closeButton"
data-testid="room-live-share-wire-error-close-button"
role="button"
tabindex="0"
title="Stop and close"
>
<div
class="mx_RoomLiveShareWarning_closeButtonIcon"
/>
</button>
</div>
</DocumentFragment>
`;