feat(e2e): Add custom Cypress command to wait for idle map (#1940)

* Add waitForMapIdle custom command

* Update react-map-gl to latest

* Wrap cypress property setters in useEffect

Author: slaymance

examples/next/pages/_app.page.tsx

@@ -4,13 +4,56 @@
 import App from 'next/app';
 import { Amplify, Hub } from 'aws-amplify';
 import { Authenticator, AmplifyProvider } from '@aws-amplify/ui-react';
+import { useEffect } from 'react';
+import { MapProvider, useMap } from 'react-map-gl';
 
 if (typeof window !== 'undefined') {
   window['Amplify'] = Amplify;
   window['Hub'] = Hub;
 }
 
+const SetCypressProperties = () => {
+  const { default: map } = useMap();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window['Cypress']) {
+      map?.once('load', () => {
+        window['map'] = map;
+      });
+
+      map?.on('idle', () => {
+        window['idleMap'] = true;
+      });
+
+      map?.on('render', () => {
+        window['idleMap'] = false;
+      });
+
+      return () => {
+        map?.off('idle', () => {
+          delete window['idleMap'];
+        });
+
+        map?.off('render', () => {
+          delete window['idleMap'];
+        });
+      };
+    }
+  }, [map]);
+
+  return null;
+};
+
 export default function MyApp(props) {
+  if (/\/geo\//g.test(props.router.route)) {
+    return (
+      <MapProvider>
+        <App {...props} />
+        <SetCypressProperties />
+      </MapProvider>
+    );
+  }
+
   return (
     <AmplifyProvider>
       <Authenticator.Provider>

packages/e2e/cypress/support/commands.d.ts

@@ -66,3 +66,7 @@ Cypress.Commands.add('findInputField', (field: string) => {
     return cy.findByRole('textbox', { name: regex });
   }
 });
+
+Cypress.Commands.add('waitForIdleMap', () => {
+  cy.window().its('idleMap').should('be.true');
+});

packages/e2e/cypress/support/commands.ts

@@ -73,7 +73,7 @@
     "maplibre-gl-js-amplify": "1.5.0",
     "qrcode": "1.5.0",
     "react-generate-context": "1.0.1",
-    "react-map-gl": "7.0.10"
+    "react-map-gl": "7.0.13"
   },
   "peerDependencies": {
     "aws-amplify": "3.x.x || 4.x.x",