Skip to content

Commit

Permalink
Convert enzyme to rtl: BeaconStatus (#9836)
Browse files Browse the repository at this point in the history 
* rewrite in rtl
* update snapshots
  • Loading branch information
@alunturner
alunturner committed Dec 28, 2022
1 parent 100b1d5 commit 2e097a0
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 155 deletions.
38 changes: 19 additions & 19 deletions test/components/views/beacon/BeaconStatus-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,74 +15,74 @@ 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 = {
displayStatus: BeaconDisplayStatus.Loading,
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", () => {
it("renders without children", () => {
// 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();
});
});
});
171 changes: 35 additions & 136 deletions test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<BeaconStatus /> active state renders with children 1`] = `null`;
exports[`<BeaconStatus /> active state renders with children 1`] = `
<span
data-testid="test-child"
>
test
</span>
`;

exports[`<BeaconStatus /> active state renders without children 1`] = `
<BeaconStatus
beacon={
Beacon {
"_beaconInfo": {
"assetType": "m.self",
"description": undefined,
"live": false,
"timeout": 3600000,
"timestamp": 123456789,
},
"_events": {},
"_eventsCount": 0,
"_isLive": false,
"_latestLocationEvent": undefined,
"_maxListeners": undefined,
"clearLatestLocation": [Function],
"livenessWatchTimeout": undefined,
"roomId": "!room:server",
"rootEvent": {
"content": {
"description": undefined,
"live": false,
"org.matrix.msc3488.asset": {
"type": "m.self",
},
"org.matrix.msc3488.ts": 123456789,
"timeout": 3600000,
},
"event_id": "$1",
"origin_server_ts": 123456789,
"room_id": "!room:server",
"sender": "@user:server",
"state_key": "@user:server",
"type": "org.matrix.msc3672.beacon_info",
},
Symbol(kCapture): false,
}
}
displayStatus="Active"
label="test label"
withIcon={true}
>
<DocumentFragment>
<div
className="mx_BeaconStatus mx_BeaconStatus_Active"
class="mx_BeaconStatus mx_BeaconStatus_Active"
>
<StyledLiveBeaconIcon
className="mx_BeaconStatus_icon"
isIdle={false}
withError={false}
>
<div
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
/>
</StyledLiveBeaconIcon>
<div
className="mx_BeaconStatus_description"
class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
/>
<div
class="mx_BeaconStatus_description"
>
<span
className="mx_BeaconStatus_label"
class="mx_BeaconStatus_label"
>
test label
</span>
<BeaconExpiryTime
beacon={
Beacon {
"_beaconInfo": {
"assetType": "m.self",
"description": undefined,
"live": false,
"timeout": 3600000,
"timestamp": 123456789,
},
"_events": {},
"_eventsCount": 0,
"_isLive": false,
"_latestLocationEvent": undefined,
"_maxListeners": undefined,
"clearLatestLocation": [Function],
"livenessWatchTimeout": undefined,
"roomId": "!room:server",
"rootEvent": {
"content": {
"description": undefined,
"live": false,
"org.matrix.msc3488.asset": {
"type": "m.self",
},
"org.matrix.msc3488.ts": 123456789,
"timeout": 3600000,
},
"event_id": "$1",
"origin_server_ts": 123456789,
"room_id": "!room:server",
"sender": "@user:server",
"state_key": "@user:server",
"type": "org.matrix.msc3672.beacon_info",
},
Symbol(kCapture): false,
}
}
<span
class="mx_BeaconStatus_expiryTime"
>
<span
className="mx_BeaconStatus_expiryTime"
>
Live until 11:17
</span>
</BeaconExpiryTime>
Live until 11:17
</span>
</div>
</div>
</BeaconStatus>
</DocumentFragment>
`;

exports[`<BeaconStatus /> renders loading state 1`] = `
<BeaconStatus
displayStatus="Loading"
label="test label"
withIcon={true}
>
<DocumentFragment>
<div
className="mx_BeaconStatus mx_BeaconStatus_Loading"
class="mx_BeaconStatus mx_BeaconStatus_Loading"
>
<StyledLiveBeaconIcon
className="mx_BeaconStatus_icon"
isIdle={true}
withError={false}
>
<div
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
/>
</StyledLiveBeaconIcon>
<div
className="mx_BeaconStatus_description"
class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
/>
<div
class="mx_BeaconStatus_description"
>
<span
className="mx_BeaconStatus_description_status"
class="mx_BeaconStatus_description_status"
>
Loading live location...
</span>
</div>
</div>
</BeaconStatus>
</DocumentFragment>
`;

exports[`<BeaconStatus /> renders stopped state 1`] = `
<BeaconStatus
displayStatus="Stopped"
label="test label"
withIcon={true}
>
<DocumentFragment>
<div
className="mx_BeaconStatus mx_BeaconStatus_Stopped"
class="mx_BeaconStatus mx_BeaconStatus_Stopped"
>
<StyledLiveBeaconIcon
className="mx_BeaconStatus_icon"
isIdle={true}
withError={false}
>
<div
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
/>
</StyledLiveBeaconIcon>
<div
className="mx_BeaconStatus_description"
class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
/>
<div
class="mx_BeaconStatus_description"
>
<span
className="mx_BeaconStatus_description_status"
class="mx_BeaconStatus_description_status"
>
Live location ended
</span>
</div>
</div>
</BeaconStatus>
</DocumentFragment>
`;

0 comments on commit 2e097a0

Please sign in to comment.