imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate Enzyme to RTL (#9842)

Browse source
This commit is contained in:
Germain 2022-12-29 15:35:19 +00:00 • committed by GitHub
parent 6d2d13fdee
commit 1e8b59ea40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 234 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

54
test/components/views/location/Map-test.tsx
View file

@ -15,15 +15,14 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { act } from "react-dom/test-utils";
import * as maplibregl from "maplibre-gl";
import { ClientEvent } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { fireEvent, getByTestId, render } from "@testing-library/react";
import Map from "../../../../src/components/views/location/Map";
import { findByTestId, getMockClientWithEventEmitter } from "../../../test-utils";
import { getMockClientWithEventEmitter } from "../../../test-utils";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
@ -39,11 +38,12 @@ describe("<Map />", () => {
[TILE_SERVER_WK_KEY.name]: { map_style_url: "maps.com" },
}),
});
const getComponent = (props = {}) =>
mount(<Map {...defaultProps} {...props} />, {
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: matrixClient },
});
const getComponent = (props = {}, renderingFn?: any) =>
(renderingFn ?? render)(
<MatrixClientContext.Provider value={matrixClient}>
<Map {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
);
beforeEach(() => {
jest.clearAllMocks();
@ -58,8 +58,8 @@ describe("<Map />", () => {
const mockMap = new maplibregl.Map(mapOptions);
it("renders", () => {
const component = getComponent();
expect(component).toBeTruthy();
const { container } = getComponent();
expect(container.firstChild).not.toBeNull();
});
describe("onClientWellKnown emits", () => {
@ -107,10 +107,10 @@ describe("<Map />", () => {
});
it("updates map center when centerGeoUri prop changes", () => {
const component = getComponent({ centerGeoUri: "geo:51,42" });
const { rerender } = getComponent({ centerGeoUri: "geo:51,42" });
component.setProps({ centerGeoUri: "geo:53,45" });
component.setProps({ centerGeoUri: "geo:56,47" });
getComponent({ centerGeoUri: "geo:53,45" }, rerender);
getComponent({ centerGeoUri: "geo:56,47" }, rerender);
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 42 });
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 53, lon: 45 });
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 56, lon: 47 });
@ -141,12 +141,13 @@ describe("<Map />", () => {
});
it("updates map bounds when bounds prop changes", () => {
const component = getComponent({ centerGeoUri: "geo:51,42" });
const { rerender } = getComponent({ centerGeoUri: "geo:51,42" });
const bounds = { north: 51, south: 50, east: 42, west: 41 };
const bounds2 = { north: 53, south: 51, east: 45, west: 44 };
component.setProps({ bounds });
component.setProps({ bounds: bounds2 });
getComponent({ bounds }, rerender);
getComponent({ bounds: bounds2 }, rerender);
expect(mockMap.fitBounds).toHaveBeenCalledTimes(2);
});
});
@ -154,31 +155,28 @@ describe("<Map />", () => {
describe("children", () => {
it("renders without children", () => {
const component = getComponent({ children: null });
component.setProps({});
// no error
expect(component).toBeTruthy();
});
it("renders children with map renderProp", () => {
const children = ({ map }) => (
<div data-test-id="test-child" data-map={map}>
const children = ({ map }: { map: maplibregl.Map }) => (
<div data-testid="test-child" data-map={map}>
Hello, world
</div>
);
const component = getComponent({ children });
const { container } = getComponent({ children });
// renders child with map instance
expect(findByTestId(component, "test-child").props()["data-map"]).toEqual(mockMap);
// passes the map instance to the react children
expect(getByTestId(container, "test-child").dataset.map).toBeTruthy();
});
});
describe("onClick", () => {
it("eats clicks to maplibre attribution button", () => {
const onClick = jest.fn();
const component = getComponent({ onClick });
getComponent({ onClick });
act(() => {
// this is added to the dom by maplibregl
@ -186,7 +184,7 @@ describe("<Map />", () => {
// just fake the target
const fakeEl = document.createElement("div");
fakeEl.className = "maplibregl-ctrl-attrib-button";
component.simulate("click", { target: fakeEl });
fireEvent.click(fakeEl);
});
expect(onClick).not.toHaveBeenCalled();
@ -194,10 +192,10 @@ describe("<Map />", () => {
it("calls onClick", () => {
const onClick = jest.fn();
const component = getComponent({ onClick });
const { container } = getComponent({ onClick });
act(() => {
component.simulate("click");
fireEvent.click(container.firstChild);
});
expect(onClick).toHaveBeenCalled();

21
test/components/views/location/Marker-test.tsx
View file

@ -15,9 +15,8 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { getByTestId, render } from "@testing-library/react";
import Marker from "../../../../src/components/views/location/Marker";
@ -25,27 +24,27 @@ describe("<Marker />", () => {
const defaultProps = {
id: "abc123",
};
const getComponent = (props = {}) => mount(<Marker {...defaultProps} {...props} />);
const getComponent = (props = {}) => render(<Marker {...defaultProps} {...props} />);
it("renders with location icon when no room member", () => {
const component = getComponent();
expect(component).toMatchSnapshot();
const { asFragment } = getComponent();
expect(asFragment()).toMatchSnapshot();
});
it("does not try to use member color without room member", () => {
const component = getComponent({ useMemberColor: true });
expect(component.find("div").at(0).props().className).toEqual("mx_Marker mx_Marker_defaultColor");
const { container } = getComponent({ useMemberColor: true });
expect(container.querySelector(".mx_Marker.mx_Marker_defaultColor")).toBeInTheDocument();
});
it("uses member color class", () => {
const member = new RoomMember("!room:server", "@user:server");
const component = getComponent({ useMemberColor: true, roomMember: member });
expect(component.find("div").at(0).props().className).toEqual("mx_Marker mx_Username_color3");
const { container } = getComponent({ useMemberColor: true, roomMember: member });
expect(container.querySelector(".mx_Marker.mx_Username_color3")).toBeInTheDocument();
});
it("renders member avatar when roomMember is truthy", () => {
const member = new RoomMember("!room:server", "@user:server");
const component = getComponent({ roomMember: member });
expect(component.find("MemberAvatar").length).toBeTruthy();
const { container } = getComponent({ roomMember: member });
expect(getByTestId(container, "avatar-img")).toBeInTheDocument();
});
});

22
test/components/views/location/__snapshots__/Marker-test.tsx.snap
View file

@ -1,22 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Marker /> renders with location icon when no room member 1`] = `
<ForwardRef
id="abc123"
>
<DocumentFragment>
<div
className="mx_Marker mx_Marker_defaultColor"
class="mx_Marker mx_Marker_defaultColor"
id="abc123"
>
<OptionalTooltip>
<div
class="mx_Marker_border"
>
<div
className="mx_Marker_border"
>
<div
className="mx_Marker_icon"
/>
</div>
</OptionalTooltip>
class="mx_Marker_icon"
/>
</div>
</div>
</ForwardRef>
</DocumentFragment>
`;