PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Migrate OwnBeaconStatus-test.tsx to react-testing-library (#10133)

Browse source
This commit is contained in:
Michael Weimann 2023-02-10 15:16:08 +01:00 committed by GitHub
parent bb4b07fdc9
commit f14414eacd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
test/components/views/beacon/OwnBeaconStatus-test.tsx
View file

@ -15,16 +15,15 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { act } from "react-dom/test-utils";
import { mocked } from "jest-mock"; import { mocked } from "jest-mock";
import { Beacon } from "matrix-js-sdk/src/matrix"; import { Beacon } from "matrix-js-sdk/src/matrix";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import OwnBeaconStatus from "../../../../src/components/views/beacon/OwnBeaconStatus"; import OwnBeaconStatus from "../../../../src/components/views/beacon/OwnBeaconStatus";
import { BeaconDisplayStatus } from "../../../../src/components/views/beacon/displayStatus"; import { BeaconDisplayStatus } from "../../../../src/components/views/beacon/displayStatus";
import { useOwnLiveBeacons } from "../../../../src/utils/beacon"; import { useOwnLiveBeacons } from "../../../../src/utils/beacon";
import { findByTestId, makeBeaconInfoEvent } from "../../../test-utils"; import { makeBeaconInfoEvent } from "../../../test-utils";
jest.mock("../../../../src/utils/beacon/useOwnLiveBeacons", () => ({ jest.mock("../../../../src/utils/beacon/useOwnLiveBeacons", () => ({
useOwnLiveBeacons: jest.fn(), useOwnLiveBeacons: jest.fn(),
@ -36,8 +35,11 @@ describe("<OwnBeaconStatus />", () => {
}; };
const userId = "@user:server"; const userId = "@user:server";
const roomId = "!room:server"; const roomId = "!room:server";
let defaultBeacon; let defaultBeacon: Beacon;
const getComponent = (props = {}) => mount(<OwnBeaconStatus {...defaultProps} {...props} />); const renderComponent = (props: Partial<React.ComponentProps<typeof OwnBeaconStatus>> = {}) =>
render(<OwnBeaconStatus {...defaultProps} {...props} />);
const getRetryButton = () => screen.getByRole("button", { name: "Retry" });
const getStopButton = () => screen.getByRole("button", { name: "Stop" });
beforeEach(() => { beforeEach(() => {
jest.spyOn(global.Date, "now").mockReturnValue(123456789); jest.spyOn(global.Date, "now").mockReturnValue(123456789);
@ -47,13 +49,8 @@ describe("<OwnBeaconStatus />", () => {
}); });
it("renders without a beacon instance", () => { it("renders without a beacon instance", () => {
const component = getComponent(); const { asFragment } = renderComponent();
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
});
it("renders loading state correctly", () => {
const component = getComponent();
expect(component.find("BeaconStatus").props()).toBeTruthy();
}); });
describe("Active state", () => { describe("Active state", () => {
@ -62,24 +59,19 @@ describe("<OwnBeaconStatus />", () => {
mocked(useOwnLiveBeacons).mockReturnValue({ mocked(useOwnLiveBeacons).mockReturnValue({
onStopSharing: jest.fn(), onStopSharing: jest.fn(),
}); });
const component = getComponent({ displayStatus, beacon: defaultBeacon }); renderComponent({ displayStatus, beacon: defaultBeacon });
expect(component.text()).toContain("Live location enabled"); expect(screen.getByText("Live location enabled")).toBeInTheDocument();
expect(getStopButton()).toBeInTheDocument();
expect(findByTestId(component, "beacon-status-stop-beacon").length).toBeTruthy();
}); });
it("stops sharing on stop button click", () => { it("stops sharing on stop button click", async () => {
const displayStatus = BeaconDisplayStatus.Active; const displayStatus = BeaconDisplayStatus.Active;
const onStopSharing = jest.fn(); const onStopSharing = jest.fn();
mocked(useOwnLiveBeacons).mockReturnValue({ mocked(useOwnLiveBeacons).mockReturnValue({
onStopSharing, onStopSharing,
}); });
const component = getComponent({ displayStatus, beacon: defaultBeacon }); renderComponent({ displayStatus, beacon: defaultBeacon });
await userEvent.click(getStopButton());
act(() => {
findByTestId(component, "beacon-status-stop-beacon").at(0).simulate("click");
});
expect(onStopSharing).toHaveBeenCalled(); expect(onStopSharing).toHaveBeenCalled();
}); });
}); });
@ -87,11 +79,11 @@ describe("<OwnBeaconStatus />", () => {
describe("errors", () => { describe("errors", () => {
it("renders in error mode when displayStatus is error", () => { it("renders in error mode when displayStatus is error", () => {
const displayStatus = BeaconDisplayStatus.Error; const displayStatus = BeaconDisplayStatus.Error;
const component = getComponent({ displayStatus }); renderComponent({ displayStatus });
expect(component.text()).toEqual("Live location error"); expect(screen.getByText("Live location error")).toBeInTheDocument();
// no actions for plain error // no actions for plain error
expect(component.find("AccessibleButton").length).toBeFalsy(); expect(screen.queryByRole("button")).not.toBeInTheDocument();
}); });
describe("with location publish error", () => { describe("with location publish error", () => {
@ -101,23 +93,21 @@ describe("<OwnBeaconStatus />", () => {
hasLocationPublishError: true, hasLocationPublishError: true,
onResetLocationPublishError: jest.fn(), onResetLocationPublishError: jest.fn(),
}); });
const component = getComponent({ displayStatus, beacon: defaultBeacon }); renderComponent({ displayStatus, beacon: defaultBeacon });
expect(component.text()).toContain("Live location error"); expect(screen.getByText("Live location error")).toBeInTheDocument();
// retry button // retry button
expect(findByTestId(component, "beacon-status-reset-wire-error").length).toBeTruthy(); expect(getRetryButton()).toBeInTheDocument();
}); });
it("retry button resets location publish error", () => { it("retry button resets location publish error", async () => {
const displayStatus = BeaconDisplayStatus.Active; const displayStatus = BeaconDisplayStatus.Active;
const onResetLocationPublishError = jest.fn(); const onResetLocationPublishError = jest.fn();
mocked(useOwnLiveBeacons).mockReturnValue({ mocked(useOwnLiveBeacons).mockReturnValue({
hasLocationPublishError: true, hasLocationPublishError: true,
onResetLocationPublishError, onResetLocationPublishError,
}); });
const component = getComponent({ displayStatus, beacon: defaultBeacon }); renderComponent({ displayStatus, beacon: defaultBeacon });
act(() => { await userEvent.click(getRetryButton());
findByTestId(component, "beacon-status-reset-wire-error").at(0).simulate("click");
});
expect(onResetLocationPublishError).toHaveBeenCalled(); expect(onResetLocationPublishError).toHaveBeenCalled();
}); });
@ -131,23 +121,21 @@ describe("<OwnBeaconStatus />", () => {
hasStopSharingError: true, hasStopSharingError: true,
onStopSharing: jest.fn(), onStopSharing: jest.fn(),
}); });
const component = getComponent({ displayStatus, beacon: defaultBeacon }); renderComponent({ displayStatus, beacon: defaultBeacon });
expect(component.text()).toContain("Live location error"); expect(screen.getByText("Live location error")).toBeInTheDocument();
// retry button // retry button
expect(findByTestId(component, "beacon-status-stop-beacon-retry").length).toBeTruthy(); expect(getRetryButton()).toBeInTheDocument();
}); });
it("retry button retries stop sharing", () => { it("retry button retries stop sharing", async () => {
const displayStatus = BeaconDisplayStatus.Active; const displayStatus = BeaconDisplayStatus.Active;
const onStopSharing = jest.fn(); const onStopSharing = jest.fn();
mocked(useOwnLiveBeacons).mockReturnValue({ mocked(useOwnLiveBeacons).mockReturnValue({
hasStopSharingError: true, hasStopSharingError: true,
onStopSharing, onStopSharing,
}); });
const component = getComponent({ displayStatus, beacon: defaultBeacon }); renderComponent({ displayStatus, beacon: defaultBeacon });
act(() => { await userEvent.click(getRetryButton());
findByTestId(component, "beacon-status-stop-beacon-retry").at(0).simulate("click");
});
expect(onStopSharing).toHaveBeenCalled(); expect(onStopSharing).toHaveBeenCalled();
}); });
@ -155,7 +143,7 @@ describe("<OwnBeaconStatus />", () => {
}); });
it("renders loading state correctly", () => { it("renders loading state correctly", () => {
const component = getComponent(); const component = renderComponent();
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
}); });

20
test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap
View file

@ -1,27 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = ` exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
<OwnBeaconStatus <DocumentFragment>
displayStatus="Loading" <div
> class="mx_BeaconStatus mx_BeaconStatus_Loading"
<BeaconStatus
displayLiveTimeRemaining={true}
displayStatus="Loading"
label="Live location enabled"
> >
<div <div
className="mx_BeaconStatus mx_BeaconStatus_Loading" class="mx_BeaconStatus_description"
>
<div
className="mx_BeaconStatus_description"
> >
<span <span
className="mx_BeaconStatus_description_status" class="mx_BeaconStatus_description_status"
> >
Loading live location... Loading live location...
</span> </span>
</div> </div>
</div> </div>
</BeaconStatus> </DocumentFragment>
</OwnBeaconStatus>
`; `;