feat(e2e): Add end-to-end tests for native maplibre-gl methods (#1966)

* Add examples for using native map methods

* Reference examples in geo docs

* Add e2e tests for native map methods

* Type the mapRef in useRef hook

Author: slaymance

docs/src/pages/[platform]/components/geo/fragments/map-ref.react.mdx

@@ -1,26 +1,3 @@
-```jsx{12,15,21}
-import { Button, MapView } from '@aws-amplify/ui-react';
-import { Amplify } from 'aws-amplify';
-import { useCallback, useRef } from 'react';
+```jsx{12,15,21} file=../../../../../../../examples/next/pages/ui/components/geo/map-with-forward-ref/index.page.tsx
 
-import '@aws-amplify/ui-react/styles.css';
-
-import awsExports from './aws-exports';
-
-Amplify.configure(awsExports);
-
-export default function MapWithRef() {
-  const mapRef = useRef();
-
-  const flyToMordor = useCallback(() => {
-    mapRef.current.flyTo({ center: [172.78, -42.28], zoom: 5 });
-  }, []);
-
-  return (
-    <>
-      <Button onClick={flyToMordor}>Fly, you fools!</Button>
-      <MapView ref={mapRef} />
-    </>
-  );
-}
 ```

docs/src/pages/[platform]/components/geo/fragments/use-map.react.mdx

@@ -1,29 +1,3 @@
-```jsx
-import { Button, MapView } from '@aws-amplify/ui-react';
-import { Amplify } from 'aws-amplify';
-import { useMap } from 'react-map-gl';
+```jsx{3,12,15,24} file=../../../../../../../examples/next/pages/ui/components/geo/use-map-hook/index.page.tsx
 
-import '@aws-amplify/ui-react/styles.css';
-
-import awsExports from './aws-exports';
-
-Amplify.configure(awsExports);
-
-function FlyToButton() {
-  const { current: map } = useMap();
-
-  const flyToMordor = () => {
-    map.flyTo({ center: [172.78, -42.28], zoom: 5 });
-  };
-
-  return <Button onClick={flyToMordor}>Fly, you fools!</Button>;
-}
-
-export default function MapWithButton() {
-  return (
-    <MapView>
-      <FlyToButton />
-    </MapView>
-  );
-}
 ```

examples/next/pages/ui/components/geo/map-with-forward-ref/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/basic-map/src/aws-exports';
+export default awsExports;

examples/next/pages/ui/components/geo/map-with-forward-ref/index.page.tsx

@@ -0,0 +1,25 @@
+import { Button, MapView } from '@aws-amplify/ui-react';
+import { Amplify } from 'aws-amplify';
+import { useCallback, useRef } from 'react';
+import type { MapRef } from 'react-map-gl';
+
+import '@aws-amplify/ui-react/styles.css';
+
+import awsExports from './aws-exports';
+
+Amplify.configure(awsExports);
+
+export default function MapWithRef() {
+  const mapRef = useRef<MapRef>();
+
+  const flyToMordor = useCallback(() => {
+    mapRef.current.flyTo({ center: [172.78, -42.28], zoom: 5 });
+  }, []);
+
+  return (
+    <>
+      <Button onClick={flyToMordor}>Fly, you fools!</Button>
+      <MapView ref={mapRef} />
+    </>
+  );
+}

examples/next/pages/ui/components/geo/use-map-hook/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/basic-map/src/aws-exports';
+export default awsExports;

examples/next/pages/ui/components/geo/use-map-hook/index.page.tsx

@@ -0,0 +1,27 @@
+import { Button, MapView } from '@aws-amplify/ui-react';
+import { Amplify } from 'aws-amplify';
+import { useMap } from 'react-map-gl';
+
+import '@aws-amplify/ui-react/styles.css';
+
+import awsExports from './aws-exports';
+
+Amplify.configure(awsExports);
+
+function FlyToButton() {
+  const { current: map } = useMap();
+
+  const flyToMordor = () => {
+    map.flyTo({ center: [172.78, -42.28], zoom: 5 });
+  };
+
+  return <Button onClick={flyToMordor}>Fly, you fools!</Button>;
+}
+
+export default function MapWithButton() {
+  return (
+    <MapView>
+      <FlyToButton />
+    </MapView>
+  );
+}

packages/e2e/cypress/integration/ui/components/geo/native-map-method/native-map-method.steps.ts

@@ -0,0 +1,21 @@
+import { Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+let mapCenter;
+
+When('I see the map load', () => {
+  cy.waitForIdleMap();
+  cy.window()
+    .its('map')
+    .invoke('getCenter')
+    .then((startingCenter) => {
+      mapCenter = startingCenter;
+    });
+});
+
+When('I click the button to transition the map', () => {
+  cy.findByRole('button', { name: /fly/gi }).click({ force: true });
+});
+
+Then('I see the map viewport transition', () => {
+  cy.window().its('map').invoke('getCenter').should('not.eq', mapCenter);
+});

packages/e2e/features/ui/components/geo/native-map-method.feature

@@ -0,0 +1,15 @@
+Feature: Native Map Method
+
+  Using the native maplibre-gl methods.
+
+  @react
+  Scenario Outline: Native "flyTo" method should change map viewport
+    Given I'm running the example "ui/components/geo/<example>"
+    When I see the map load
+    And I click the button to transition the map
+    Then I see the map viewport transition
+
+    Examples:
+    |              example |
+    | map-with-forward-ref |
+    |         use-map-hook |