Skip to content

Commit f208f2e

Browse files
slaymanceslaymance
authored
feat(e2e): Add end-to-end tests for components from react-map-gl (#1964)
* Add map-with-moving-marker example * Reference map-with-moving-marker example in docs * Add e2e test for moving marker * Add map-with-marker-popup example * Update docs to point to marker-with-popup example * Add test steps for marker-with-popup * Minor update to docs moving-marker example
1 parent fc076a9 commit f208f2e

File tree

12 files changed

+149
-80
lines changed

12 files changed

+149
-80
lines changed

‎docs/src/pages/[platform]/components/geo/fragments/marker-moving.react.mdx‎

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,3 @@
1-
```jsx
2-
import { MapView, Button } from '@aws-amplify/ui-react';
3-
import { Amplify } from 'aws-amplify';
4-
import { Marker } from 'react-map-gl';
1+
```jsx{4,25} file=../../../../../../../examples/next/pages/ui/components/geo/map-with-moving-marker/index.page.tsx
52

6-
import '@aws-amplify/ui-react/styles.css';
7-
8-
import awsExports from './aws-exports';
9-
10-
Amplify.configure(awsExports);
11-
12-
export default function MapWithMovingMarker() {
13-
const [{ latitude, longitude }, setMarkerLocation] = useState({
14-
latitude: 40,
15-
longitude: -100,
16-
});
17-
18-
const updateMarker = () =>
19-
setMarkerLocation({ latitude: latitude + 5, longitude: longitude + 5 });
20-
21-
return (
22-
<>
23-
<Button onClick={updateMarker}>Move Marker</Button>
24-
<MapView>
25-
<Marker latitude={latitude} longitude={longitude} />
26-
</MapView>
27-
</>
28-
);
29-
}
303
```

‎docs/src/pages/[platform]/components/geo/fragments/marker-with-popup.react.mdx‎

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,3 @@
1-
```jsx
2-
import { MapView, Heading, Text } from '@aws-amplify/ui-react';
3-
import { Amplify } from 'aws-amplify';
4-
import React from 'react';
5-
import { Marker, Popup } from 'react-map-gl';
1+
```jsx file=../../../../../../../examples/next/pages/ui/components/geo/map-with-marker-popup/index.page.tsx
62

7-
import '@aws-amplify/ui-react/styles.css';
8-
9-
import awsExports from './aws-exports';
10-
11-
Amplify.configure(awsExports);
12-
13-
function MarkerWithPopup({ latitude, longitude }) {
14-
const [showPopup, setShowPopup] = React.useState(false);
15-
16-
const handleMarkerClick = ({ originalEvent }) => {
17-
originalEvent.stopPropagation();
18-
setShowPopup(true);
19-
};
20-
21-
return (
22-
<>
23-
<Marker
24-
latitude={latitude}
25-
longitude={longitude}
26-
onClick={handleMarkerClick}
27-
/>
28-
{showPopup && (
29-
<Popup
30-
latitude={latitude}
31-
longitude={longitude}
32-
offset={{ bottom: [0, -40] }}
33-
onClose={() => setShowPopup(false)}
34-
>
35-
<Heading level={2}>Marker Information</Heading>
36-
<Text>Some information about a location.</Text>
37-
</Popup>
38-
)}
39-
</>
40-
);
41-
}
42-
43-
export default function MapWithMarker() {
44-
return (
45-
<MapView initialViewState={{ latitude: 40, longitude: -100, zoom: 3.5 }}>
46-
<MarkerWithPopup latitude={40} longitude={-100} />
47-
</MapView>
48-
);
49-
}
503
```

‎examples/next/pages/ui/components/geo/map-with-marker-popup/aws-exports.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/basic-map/src/aws-exports';
2+
export default awsExports;

‎examples/next/pages/ui/components/geo/map-with-marker-popup/index.page.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { MapView, Heading, Text } from '@aws-amplify/ui-react';
2+
import { Amplify } from 'aws-amplify';
3+
import { useState } from 'react';
4+
import { Marker, Popup } from 'react-map-gl';
5+
6+
import '@aws-amplify/ui-react/styles.css';
7+
8+
import awsExports from './aws-exports';
9+
10+
Amplify.configure(awsExports);
11+
12+
function MarkerWithPopup({ latitude, longitude }) {
13+
const [showPopup, setShowPopup] = useState(false);
14+
15+
const handleMarkerClick = ({ originalEvent }) => {
16+
originalEvent.stopPropagation();
17+
setShowPopup(true);
18+
};
19+
20+
return (
21+
<>
22+
<Marker
23+
latitude={latitude}
24+
longitude={longitude}
25+
onClick={handleMarkerClick}
26+
/>
27+
{showPopup && (
28+
<Popup
29+
latitude={latitude}
30+
longitude={longitude}
31+
offset={{ bottom: [0, -40] }}
32+
onClose={() => setShowPopup(false)}
33+
>
34+
<Heading level={2}>Marker Information</Heading>
35+
<Text>Some information about a location.</Text>
36+
</Popup>
37+
)}
38+
</>
39+
);
40+
}
41+
42+
export default function MapWithMarkerPopup() {
43+
return (
44+
<MapView initialViewState={{ latitude: 40, longitude: -100, zoom: 3.5 }}>
45+
<MarkerWithPopup latitude={40} longitude={-100} />
46+
</MapView>
47+
);
48+
}

‎examples/next/pages/ui/components/geo/map-with-moving-marker/aws-exports.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/basic-map/src/aws-exports';
2+
export default awsExports;

‎examples/next/pages/ui/components/geo/map-with-moving-marker/index.page.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { MapView, Button } from '@aws-amplify/ui-react';
2+
import { Amplify } from 'aws-amplify';
3+
import { useState } from 'react';
4+
import { Marker } from 'react-map-gl';
5+
6+
import '@aws-amplify/ui-react/styles.css';
7+
8+
import awsExports from './aws-exports';
9+
10+
Amplify.configure(awsExports);
11+
12+
export default function MapWithMovingMarker() {
13+
const [{ latitude, longitude }, setMarkerLocation] = useState({
14+
latitude: 40,
15+
longitude: -100,
16+
});
17+
18+
const updateMarker = () =>
19+
setMarkerLocation({ latitude: latitude + 5, longitude: longitude + 5 });
20+
21+
return (
22+
<>
23+
<Button onClick={updateMarker}>Move Marker</Button>
24+
<MapView>
25+
<Marker latitude={latitude} longitude={longitude} />
26+
</MapView>
27+
</>
28+
);
29+
}

‎packages/e2e/cypress/integration/common/geo.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ When('I clear the search results', () => {
1919
cy.findByRole('button', { name: 'Clear' }).click();
2020
});
2121

22+
When('I click on a map marker', () => {
23+
cy.get('.maplibregl-marker').first().click({ force: true });
24+
});
25+
2226
Then('I see results for my search term', () => {
2327
cy.get('.suggestions').should('be.visible');
2428
});

‎packages/e2e/cypress/integration/ui/components/geo/map-with-location-search/map-with-location-search.steps.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ When('I press the enter key', () => {
1212
}).type('{enter}');
1313
});
1414

15-
When('I click on a map marker', () => {
16-
cy.get('.maplibregl-marker').first().click({ force: true });
17-
});
18-
1915
Then('I see markers equal to my default search results', () => {
2016
cy.get('.maplibregl-marker').should('have.length', defaultSearchResults);
2117
});

‎packages/e2e/cypress/integration/ui/components/geo/map-with-marker-popup/map-with-marker-popup.steps.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Then, When } from 'cypress-cucumber-preprocessor/steps';
2+
3+
Then('I see a popup about the marker appear', () => {
4+
cy.findByRole('heading', { name: 'Marker Information' }).should('exist');
5+
});
6+
7+
When('I close the popup box', () => {
8+
cy.findByRole('button', { name: 'Close popup' }).click();
9+
});
10+
11+
Then('I no longer see the popup', () => {
12+
cy.findByRole('heading', { name: 'Marker Information' }).should('not.exist');
13+
});

‎packages/e2e/cypress/integration/ui/components/geo/map-with-moving-marker/map-with-moving-marker.steps.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Then, When } from 'cypress-cucumber-preprocessor/steps';
2+
3+
let markerPosition;
4+
5+
When('I see the position of a map marker', () => {
6+
cy.waitForIdleMap();
7+
cy.get('.maplibregl-marker').then(($marker) => {
8+
cy.wrap($marker).should('have.length', 1);
9+
markerPosition = $marker.get(0).getBoundingClientRect().toJSON();
10+
});
11+
});
12+
13+
When('I click a button to move the map marker', () => {
14+
cy.findByRole('button', { name: 'Move Marker' }).click();
15+
});
16+
17+
Then('I see the marker position update', () => {
18+
cy.get('.maplibregl-marker').then(($marker) => {
19+
cy.wrap($marker.get(0).getBoundingClientRect().toJSON()).should(
20+
'not.eq',
21+
markerPosition
22+
);
23+
});
24+
});

0 commit comments

Comments
 (0)