OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert enzyme to rtl: BeaconStatus (#9836) 

* rewrite in rtl
* update snapshots
pull/28788/head^2
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
test/components/views/beacon/BeaconStatus-test.tsx
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();
});
});
});

171
test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
View File

@ -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>
`;