Skip to content

Commit be85df1

Browse files
samuelreichertsamuelreichert
committed
test(maps-web): update tests from ts to tsx and remove enzyme
1 parent 4643be3 commit be85df1

7 files changed

Lines changed: 1190 additions & 793 deletions

File tree

‎packages/pluggableWidgets/maps-web/jest.config.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
const base = require("@mendix/pluggable-widgets-tools/test-config/jest.config");
2-
31
module.exports = {
4-
...base,
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
53
transformIgnorePatterns: ["node_modules/(?!(.*leaflet.*))"]
64
};

packages/pluggableWidgets/maps-web/src/components/__tests__/GoogleMap.spec.ts renamed to packages/pluggableWidgets/maps-web/src/components/__tests__/GoogleMap.spec.tsx

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { shallow, ShallowWrapper } from "enzyme";
1+
import "@testing-library/jest-dom";
2+
import { render, RenderResult } from "@testing-library/react";
23
import { createElement } from "react";
34
import { GoogleMapContainer, GoogleMapsProps } from "../GoogleMap";
45
import { initialize } from "@googlemaps/jest-mocks";
@@ -35,52 +36,32 @@ describe("Google maps", () => {
3536
jest.clearAllMocks();
3637
});
3738

38-
const renderGoogleMap = (props: GoogleMapsProps): ShallowWrapper<GoogleMapsProps, any> =>
39-
shallow(createElement(GoogleMapContainer, props));
39+
function renderGoogleMap(props: Partial<GoogleMapsProps> = {}): RenderResult {
40+
return render(<GoogleMapContainer {...defaultProps} {...props} />);
41+
}
4042

4143
it("renders a map with right structure", () => {
42-
const googleMaps = renderGoogleMap(defaultProps);
43-
googleMaps.setProps({
44-
heightUnit: "percentageOfWidth",
45-
widthUnit: "pixels"
46-
});
47-
48-
expect(googleMaps).toMatchSnapshot();
44+
const { asFragment } = renderGoogleMap({ heightUnit: "percentageOfWidth", widthUnit: "pixels" });
45+
expect(asFragment()).toMatchSnapshot();
4946
});
5047

5148
it("renders a map with pixels renders structure correctly", () => {
52-
const googleMaps = renderGoogleMap(defaultProps);
53-
googleMaps.setProps({
54-
heightUnit: "pixels",
55-
widthUnit: "pixels"
56-
});
57-
58-
expect(googleMaps).toMatchSnapshot();
49+
const { asFragment } = renderGoogleMap({ heightUnit: "pixels", widthUnit: "pixels" });
50+
expect(asFragment()).toMatchSnapshot();
5951
});
6052

6153
it("renders a map with percentage of width and height units renders the structure correctly", () => {
62-
const googleMaps = renderGoogleMap(defaultProps);
63-
googleMaps.setProps({
64-
heightUnit: "percentageOfWidth",
65-
widthUnit: "percentage"
66-
});
67-
68-
expect(googleMaps).toMatchSnapshot();
54+
const { asFragment } = renderGoogleMap({ heightUnit: "percentageOfWidth", widthUnit: "percentage" });
55+
expect(asFragment()).toMatchSnapshot();
6956
});
7057

7158
it("renders a map with percentage of parent units renders the structure correctly", () => {
72-
const googleMaps = renderGoogleMap(defaultProps);
73-
googleMaps.setProps({
74-
heightUnit: "percentageOfParent",
75-
widthUnit: "percentage"
76-
});
77-
78-
expect(googleMaps).toMatchSnapshot();
59+
const { asFragment } = renderGoogleMap({ heightUnit: "percentageOfParent", widthUnit: "percentage" });
60+
expect(asFragment()).toMatchSnapshot();
7961
});
8062

8163
it("renders a map with markers", () => {
82-
const googleMaps = renderGoogleMap(defaultProps);
83-
googleMaps.setProps({
64+
const { asFragment } = renderGoogleMap({
8465
locations: [
8566
{
8667
title: "Mendix HQ",
@@ -96,21 +77,18 @@ describe("Google maps", () => {
9677
}
9778
]
9879
});
99-
100-
expect(googleMaps).toMatchSnapshot();
80+
expect(asFragment()).toMatchSnapshot();
10181
});
10282

10383
it("renders a map with current location", () => {
104-
const googleMaps = renderGoogleMap(defaultProps);
105-
googleMaps.setProps({
84+
const { asFragment } = renderGoogleMap({
10685
showCurrentLocation: true,
10786
currentLocation: {
10887
latitude: 51.906688,
10988
longitude: 4.48837,
11089
url: "image:url"
11190
}
11291
});
113-
114-
expect(googleMaps).toMatchSnapshot();
92+
expect(asFragment()).toMatchSnapshot();
11593
});
11694
});

packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.ts renamed to packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.tsx

Lines changed: 23 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { shallow, ShallowWrapper } from "enzyme";
1+
import "@testing-library/jest-dom";
2+
import { render, RenderResult } from "@testing-library/react";
23
import { createElement } from "react";
34
import { LeafletMap, LeafletProps } from "../LeafletMap";
45

@@ -23,79 +24,47 @@ describe("Leaflet maps", () => {
2324
zoomLevel: 10
2425
};
2526

26-
const renderLeafletMap = (props: LeafletProps): ShallowWrapper<LeafletProps, any> =>
27-
shallow(createElement(LeafletMap, props));
27+
function renderLeafletMap(props: Partial<LeafletProps> = {}): RenderResult {
28+
return render(<LeafletMap {...defaultProps} {...props} />);
29+
}
2830

2931
it("renders a map with right structure", () => {
30-
const leafletMaps = renderLeafletMap(defaultProps);
31-
leafletMaps.setProps({
32-
heightUnit: "percentageOfWidth",
33-
widthUnit: "pixels"
34-
});
35-
36-
expect(leafletMaps).toMatchSnapshot();
32+
const { asFragment } = renderLeafletMap({ heightUnit: "percentageOfWidth", widthUnit: "pixels" });
33+
expect(asFragment()).toMatchSnapshot();
3734
});
3835

3936
it("renders a map with pixels renders structure correctly", () => {
40-
const leafletMaps = renderLeafletMap(defaultProps);
41-
leafletMaps.setProps({
42-
heightUnit: "pixels",
43-
widthUnit: "pixels"
44-
});
45-
46-
expect(leafletMaps).toMatchSnapshot();
37+
const { asFragment } = renderLeafletMap({ heightUnit: "pixels", widthUnit: "pixels" });
38+
expect(asFragment()).toMatchSnapshot();
4739
});
4840

4941
it("renders a map with percentage of width and height units renders the structure correctly", () => {
50-
const leafletMaps = renderLeafletMap(defaultProps);
51-
leafletMaps.setProps({
52-
heightUnit: "percentageOfWidth",
53-
widthUnit: "percentage"
54-
});
55-
56-
expect(leafletMaps).toMatchSnapshot();
42+
const { asFragment } = renderLeafletMap({ heightUnit: "percentageOfWidth", widthUnit: "percentage" });
43+
expect(asFragment()).toMatchSnapshot();
5744
});
5845

5946
it("renders a map with percentage of parent units renders the structure correctly", () => {
60-
const leafletMaps = renderLeafletMap(defaultProps);
61-
leafletMaps.setProps({
62-
heightUnit: "percentageOfParent",
63-
widthUnit: "percentage"
64-
});
65-
66-
expect(leafletMaps).toMatchSnapshot();
47+
const { asFragment } = renderLeafletMap({ heightUnit: "percentageOfParent", widthUnit: "percentage" });
48+
expect(asFragment()).toMatchSnapshot();
6749
});
6850

6951
it("renders a map with HERE maps as provider", () => {
70-
const leafletMaps = renderLeafletMap(defaultProps);
71-
leafletMaps.setProps({
72-
mapProvider: "hereMaps"
73-
});
74-
75-
expect(leafletMaps).toMatchSnapshot();
52+
const { asFragment } = renderLeafletMap({ mapProvider: "hereMaps" });
53+
expect(asFragment()).toMatchSnapshot();
7654
});
7755

7856
it("renders a map with MapBox maps as provider", () => {
79-
const leafletMaps = renderLeafletMap(defaultProps);
80-
leafletMaps.setProps({
81-
mapProvider: "mapBox"
82-
});
83-
84-
expect(leafletMaps).toMatchSnapshot();
57+
const { asFragment } = renderLeafletMap({ mapProvider: "mapBox" });
58+
expect(asFragment()).toMatchSnapshot();
8559
});
8660

8761
it("renders a map with attribution", () => {
88-
const leafletMaps = renderLeafletMap(defaultProps);
89-
leafletMaps.setProps({
90-
attributionControl: true
91-
});
92-
93-
expect(leafletMaps).toMatchSnapshot();
62+
const { asFragment } = renderLeafletMap({ attributionControl: true });
63+
expect(asFragment()).toMatchSnapshot();
9464
});
9565

9666
it("renders a map with markers", () => {
97-
const leafletMaps = renderLeafletMap(defaultProps);
98-
leafletMaps.setProps({
67+
const { asFragment } = renderLeafletMap({
9968
locations: [
10069
{
10170
title: "Mendix HQ",
@@ -111,21 +80,18 @@ describe("Leaflet maps", () => {
11180
}
11281
]
11382
});
114-
115-
expect(leafletMaps).toMatchSnapshot();
83+
expect(asFragment()).toMatchSnapshot();
11684
});
11785

11886
it("renders a map with current location", () => {
119-
const leafletMaps = renderLeafletMap(defaultProps);
120-
leafletMaps.setProps({
87+
const { asFragment } = renderLeafletMap({
12188
showCurrentLocation: true,
12289
currentLocation: {
12390
latitude: 51.906688,
12491
longitude: 4.48837,
12592
url: "image:url"
12693
}
12794
});
128-
129-
expect(leafletMaps).toMatchSnapshot();
95+
expect(asFragment()).toMatchSnapshot();
13096
});
13197
});

0 commit comments

Comments
 (0)