Convert enzyme to rtl: BeaconStatus (#9836)

* rewrite in rtl
* update snapshots
This commit is contained in:
alunturner 2022-12-28 16:24:46 +00:00 committed by GitHub
parent 100b1d5aa1
commit 2e097a00c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 155 deletions

View file

@ -15,13 +15,12 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { render, screen } from "@testing-library/react";
import { Beacon } from "matrix-js-sdk/src/matrix";
import BeaconStatus from "../../../../src/components/views/beacon/BeaconStatus";
import { BeaconDisplayStatus } from "../../../../src/components/views/beacon/displayStatus";
import { findByTestId, makeBeaconInfoEvent } from "../../../test-utils";
import { makeBeaconInfoEvent } from "../../../test-utils";
describe("<BeaconStatus />", () => {
const defaultProps = {
@ -29,21 +28,22 @@ describe("<BeaconStatus />", () => {
label: "test label",
withIcon: true,
};
const getComponent = (props = {}) => mount(<BeaconStatus {...defaultProps} {...props} />);
const renderComponent = (props = {}) => render(<BeaconStatus {...defaultProps} {...props} />);
it("renders loading state", () => {
const component = getComponent({ displayStatus: BeaconDisplayStatus.Loading });
expect(component).toMatchSnapshot();
const { asFragment } = renderComponent({ displayStatus: BeaconDisplayStatus.Loading });
expect(asFragment()).toMatchSnapshot();
});
it("renders stopped state", () => {
const component = getComponent({ displayStatus: BeaconDisplayStatus.Stopped });
expect(component).toMatchSnapshot();
const { asFragment } = renderComponent({ displayStatus: BeaconDisplayStatus.Stopped });
expect(asFragment()).toMatchSnapshot();
});
it("renders without icon", () => {
const component = getComponent({ withIcon: false, displayStatus: BeaconDisplayStatus.Stopped });
expect(component.find("StyledLiveBeaconIcon").length).toBeFalsy();
const iconClassName = "mx_StyledLiveBeaconIcon";
const { container } = renderComponent({ withIcon: false, displayStatus: BeaconDisplayStatus.Stopped });
expect(container.getElementsByClassName(iconClassName)).toHaveLength(0);
});
describe("active state", () => {
@ -51,38 +51,38 @@ describe("<BeaconStatus />", () => {
// mock for stable snapshot
jest.spyOn(Date, "now").mockReturnValue(123456789);
const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:server", { isLive: false }, "$1"));
const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
expect(component).toMatchSnapshot();
const { asFragment } = renderComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
expect(asFragment()).toMatchSnapshot();
});
it("renders with children", () => {
const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:sever", { isLive: false }));
const component = getComponent({
renderComponent({
beacon,
children: <span data-test-id="test">test</span>,
children: <span data-testid="test-child">test</span>,
displayStatus: BeaconDisplayStatus.Active,
});
expect(findByTestId(component, "test-child")).toMatchSnapshot();
expect(screen.getByTestId("test-child")).toMatchSnapshot();
});
it("renders static remaining time when displayLiveTimeRemaining is falsy", () => {
// mock for stable snapshot
jest.spyOn(Date, "now").mockReturnValue(123456789);
const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:server", { isLive: false }, "$1"));
const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
expect(component.text().includes("Live until 11:17")).toBeTruthy();
renderComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
expect(screen.getByText("Live until 11:17")).toBeInTheDocument();
});
it("renders live time remaining when displayLiveTimeRemaining is truthy", () => {
// mock for stable snapshot
jest.spyOn(Date, "now").mockReturnValue(123456789);
const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:server", { isLive: false }, "$1"));
const component = getComponent({
renderComponent({
beacon,
displayStatus: BeaconDisplayStatus.Active,
displayLiveTimeRemaining: true,
});
expect(component.text().includes("1h left")).toBeTruthy();
expect(screen.getByText("1h left")).toBeInTheDocument();
});
});
});