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

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

@ -1,178 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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`] = ` exports[`<BeaconStatus /> active state renders without children 1`] = `
<BeaconStatus <DocumentFragment>
beacon={ <div
Beacon { class="mx_BeaconStatus mx_BeaconStatus_Active"
"_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}
> >
<div <div
className="mx_BeaconStatus mx_BeaconStatus_Active" class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
>
<StyledLiveBeaconIcon
className="mx_BeaconStatus_icon"
isIdle={false}
withError={false}
>
<div
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
/> />
</StyledLiveBeaconIcon>
<div <div
className="mx_BeaconStatus_description" class="mx_BeaconStatus_description"
> >
<span <span
className="mx_BeaconStatus_label" class="mx_BeaconStatus_label"
> >
test label test label
</span> </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 <span
className="mx_BeaconStatus_expiryTime" class="mx_BeaconStatus_expiryTime"
> >
Live until 11:17 Live until 11:17
</span> </span>
</BeaconExpiryTime>
</div> </div>
</div> </div>
</BeaconStatus> </DocumentFragment>
`; `;
exports[`<BeaconStatus /> renders loading state 1`] = ` exports[`<BeaconStatus /> renders loading state 1`] = `
<BeaconStatus <DocumentFragment>
displayStatus="Loading" <div
label="test label" class="mx_BeaconStatus mx_BeaconStatus_Loading"
withIcon={true}
> >
<div <div
className="mx_BeaconStatus mx_BeaconStatus_Loading" class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
>
<StyledLiveBeaconIcon
className="mx_BeaconStatus_icon"
isIdle={true}
withError={false}
>
<div
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
/> />
</StyledLiveBeaconIcon>
<div <div
className="mx_BeaconStatus_description" class="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>
`; `;
exports[`<BeaconStatus /> renders stopped state 1`] = ` exports[`<BeaconStatus /> renders stopped state 1`] = `
<BeaconStatus <DocumentFragment>
displayStatus="Stopped" <div
label="test label" class="mx_BeaconStatus mx_BeaconStatus_Stopped"
withIcon={true}
> >
<div <div
className="mx_BeaconStatus mx_BeaconStatus_Stopped" class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
>
<StyledLiveBeaconIcon
className="mx_BeaconStatus_icon"
isIdle={true}
withError={false}
>
<div
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
/> />
</StyledLiveBeaconIcon>
<div <div
className="mx_BeaconStatus_description" class="mx_BeaconStatus_description"
> >
<span <span
className="mx_BeaconStatus_description_status" class="mx_BeaconStatus_description_status"
> >
Live location ended Live location ended
</span> </span>
</div> </div>
</div> </div>
</BeaconStatus> </DocumentFragment>
`; `;