chore: Improve map dimensions in test app

Author: OS-pedrogustavobilro

plugin/e2e-tests/src/pages/Drawing/Circles.tsx

@@ -180,7 +180,7 @@ const CircleMapPage: React.FC = () => {
           bottom: 0,
           left: 0,
           width: window.outerWidth,
-          height: 500,
+          height: window.outerWidth * 2 / 3,
         }}
       ></capacitor-google-map>
     </BaseTestingPage>

plugin/e2e-tests/src/pages/Drawing/Polygons.tsx

@@ -205,7 +205,7 @@ const PolygonMapPage: React.FC = () => {
           bottom: 0,
           left: 0,
           width: window.outerWidth,
-          height: 500,
+          height: window.outerWidth * 2 / 3,
         }}
       ></capacitor-google-map>
     </BaseTestingPage>

plugin/e2e-tests/src/pages/Drawing/Polylines.tsx

@@ -22,7 +22,7 @@ const PolylineMapPage: React.FC = () => {
     setCommandOutput('');
     setMap(null);
     try {
-      const mapRef = document.getElementById('map')!;
+      const mapRef = document.getElementById('map_polylines')!;
 
       const newMap = await GoogleMap.create({
         element: mapRef,
@@ -162,7 +162,7 @@ const PolylineMapPage: React.FC = () => {
           bottom: 0,
           left: 0,
           width: window.outerWidth,
-          height: 500,
+          height: window.outerWidth * 2 / 3,
         }}
       ></capacitor-google-map>
     </BaseTestingPage>

plugin/e2e-tests/src/pages/Map/Bounds.tsx

@@ -122,16 +122,16 @@ const BoundsMapPage: React.FC = () => {
   return (
     <BaseTestingPage pageTitle="Bounds">
       <div>
-        <IonButton expand="block" id="createMapButton" onClick={createMap}>
+        <IonButton id="createMapButton" onClick={createMap}>
           Create Map
         </IonButton>
-        <IonButton expand="block" id="destroyMapButton" onClick={destroyMap}>
+        <IonButton id="destroyMapButton" onClick={destroyMap}>
           Destroy Map
         </IonButton>
-        <IonButton expand="block" id="getBoundsButton" onClick={getBounds}>
+        <IonButton id="getBoundsButton" onClick={getBounds}>
           Get Bounds
         </IonButton>
-        <IonButton expand="block" id="fitBoundsButton" onClick={fitBounds}>
+        <IonButton id="fitBoundsButton" onClick={fitBounds}>
           Fit Bounds
         </IonButton>
         <IonRow>
@@ -185,7 +185,7 @@ const BoundsMapPage: React.FC = () => {
           top: window.innerHeight - window.outerWidth / 2,
           left: 0,
           width: window.outerWidth,
-          height: window.outerWidth,
+          height: window.outerWidth / 2,
         }}
       ></capacitor-google-map>
     </BaseTestingPage>

plugin/e2e-tests/src/pages/Map/ConfigMap.tsx

@@ -227,10 +227,10 @@ const ConfigMapPage: React.FC = () => {
     return (
         <BaseTestingPage pageTitle="Map Configuration">
             <div>
-                <IonButton expand="block" id="createMapButton" onClick={createMaps}>
+                <IonButton id="createMapButton" onClick={createMaps}>
                     Create Maps
                 </IonButton>
-                <IonButton expand="block" id="destroyMapButton" onClick={destroyMaps}>
+                <IonButton id="destroyMapButton" onClick={destroyMaps}>
                     Destroy Maps
                 </IonButton>
                 <IonButton id="moveCameraButton" onClick={moveCameras}>Move Camera</IonButton>

plugin/e2e-tests/src/pages/Map/CreateAndDestroyMap.tsx

@@ -86,20 +86,6 @@ const CreateAndDestroyMapPage: React.FC = () => {
     }
   }
 
-  async function setOnMapBoundsChangedListeners() {
-    setCommandOutput('');
-    try {
-      if (maps) {
-        for (let map of maps) {
-         map.setOnBoundsChangedListener(onMapBoundsChanged);
-        }
-        setCommandOutput('Map Bounds Changed Listeners Set');
-      }
-    } catch (err: any) {
-      setCommandOutput(err.message);
-    }
-  }
-
   async function removeOnMapClickListeners() {
     setCommandOutput('');
     try {
@@ -158,16 +144,6 @@ const CreateAndDestroyMapPage: React.FC = () => {
     }
   }
 
-  async function getBounds() {
-    setCommandOutput('');
-    try {
-      const bounds = await maps[0].getMapBounds();
-      setCommandOutput(JSON.stringify(bounds));
-    } catch (err: any) {
-      setCommandOutput(err.message);
-    }
-  }
-
   return (
     <BaseTestingPage pageTitle="Create and Destroy Map">
       <div>
@@ -181,16 +157,6 @@ const CreateAndDestroyMapPage: React.FC = () => {
         >
           Set On Map Click Listeners
         </IonButton>
-        <IonButton
-          expand="block"
-          id="setOnMapBoundsButton"
-          onClick={setOnMapBoundsChangedListeners}
-        >
-          Set On Map Bounds Changed Listeners
-        </IonButton>
-        <IonButton expand="block" id="getMapBounds" onClick={getBounds}>
-          Get Current Bounds
-        </IonButton>
         <IonButton
           expand="block"
           id="removeOnMapClickButton"

plugin/e2e-tests/src/pages/Markers/AddAndRemoveMarkers.tsx

@@ -152,10 +152,10 @@ const AddAndRemoveMarkers: React.FC = () => {
             </div>
             <capacitor-google-map id="markers_add_remove_map1" style={{
                 position: "absolute",
-                top: window.innerHeight - 300,
+                top: window.innerHeight - 150,
                 left: 0,
                 width: window.innerWidth,
-                height: 300,
+                height: window.outerWidth / 2,
             }}></capacitor-google-map>
         </BaseTestingPage>
     )

plugin/e2e-tests/src/pages/Markers/MarkerCustomizations.tsx

@@ -332,40 +332,37 @@ const MarkerCustomizations: React.FC = () => {
   return (
     <BaseTestingPage pageTitle="Marker Customization">
       <div>
-        <IonButton id="createMapButton" onClick={createMap} expand="block">
+        <IonButton id="createMapButton" onClick={createMap}>
           Create Map
         </IonButton>
-        <IonButton id="addMarkerImageButton" onClick={addMarkerImage} expand="block">
+        <IonButton id="addMarkerImageButton" onClick={addMarkerImage}>
           Add Marker with Image
         </IonButton>
-        <IonButton id="addMarkerSVGButton" onClick={addMarkerSVG} expand="block">
+        <IonButton id="addMarkerSVGButton" onClick={addMarkerSVG}>
           Add Marker with SVG
         </IonButton>
-        <IonButton id="addMarkerColorButton" onClick={addMarkerColor} expand="block">
+        <IonButton id="addMarkerColorButton" onClick={addMarkerColor}>
           Add Marker with Color
         </IonButton>
         <IonButton
           id="addMultipleImageMarkersButton"
           onClick={addMultipleImageMarkers}
-          expand="block"
         >
           Add Multiple Image Markers
         </IonButton>
         <IonButton
           id="addMultipleColorMarkersButton"
           onClick={addMultipleColorMarkers}
-          expand="block"
         >
           Add Multiple Color Markers
         </IonButton>
         <IonButton
           id="removeAllMarkersButton"
-          expand="block"
           onClick={removeAllMarkers}
         >
           Remove All Markers
         </IonButton>
-        <IonButton id="destroyMapButton" expand="block" onClick={destroyMap}>
+        <IonButton id="destroyMapButton" onClick={destroyMap}>
           Destroy Map
         </IonButton>
       </div>
@@ -376,10 +373,10 @@ const MarkerCustomizations: React.FC = () => {
         id="map_marker_custom"
         style={{
           position: 'absolute',
-          top: window.innerHeight - 250,
+          top: window.innerHeight - 150,
           left: 0,
           width: window.innerWidth,
-          height: 250,
+          height: 200,
         }}
       ></capacitor-google-map>
     </BaseTestingPage>