test(v3): fix all e2e tests accordingly with the new api

packages/v3/cypress/e2e/autocomplete-input.cy.ts

@@ -4,9 +4,14 @@ describe('AutocompleteInput component', () => {
 
     cy.visit('/');
     cy.get('button[name=autocomplete]').click();
-    const input = () => cy.get('.pac-target-input');
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    const input = () => cy.get('input');
     input().type(`${search}`);
     cy.get('.pac-item').first().click();
-    cy.get('.gmv-map').find('map').should('have.length', 1);
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(500);
+    cy.get('#use-place-btn').click();
+    cy.get('.gmv-map').find('.GMAMP-maps-pin-view').should('have.length', 1);
   });
 });

packages/v3/cypress/e2e/circle-shape.cy.ts

@@ -2,10 +2,36 @@ describe('CircleShape component', () => {
   it('should contain a circle shape with 5 points', function () {
     cy.visit('/');
     cy.get('button[name=circle]').click();
-    cy.get('[aria-label=Map]').within(() => {
-      cy.get(
-        'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
-      ).should('have.length', 5);
-    });
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get('[style="position: absolute; left: 0px; top: 0px; z-index: 0;"]')
+      .last()
+      .within(() => {
+        cy.get(
+          '[style="display: block; width: 11px; height: 11px; cursor: pointer; touch-action: none; position: absolute; left: -5px; top: -5px;"]',
+        )
+          .should('exist')
+          .should('have.length', 1);
+        cy.get(
+          '[style="display: block; width: 11px; height: 11px; cursor: row-resize; touch-action: none; position: absolute; left: -5px; top: -45px;"]',
+        )
+          .should('exist')
+          .should('have.length', 1);
+        cy.get(
+          '[style="display: block; width: 11px; height: 11px; cursor: row-resize; touch-action: none; position: absolute; left: -5px; top: 33px;"]',
+        )
+          .should('exist')
+          .should('have.length', 1);
+        cy.get(
+          '[style="display: block; width: 11px; height: 11px; cursor: col-resize; touch-action: none; position: absolute; left: 34px; top: -5px;"]',
+        )
+          .should('exist')
+          .should('have.length', 1);
+        cy.get(
+          '[style="display: block; width: 11px; height: 11px; cursor: col-resize; touch-action: none; position: absolute; left: -44px; top: -5px;"]',
+        )
+          .should('exist')
+          .should('have.length', 1);
+      });
   });
 });

packages/v3/cypress/e2e/cluster-icon.cy.ts

@@ -2,6 +2,8 @@ describe('ClusterIcon component', () => {
   it('should have a cluster of 2 markers', function () {
     cy.visit('/');
     cy.get('button[name=cluster]').click();
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
     cy.get('[aria-label=Map]').within(() => {
       cy.window().then((win) => {
         const { google, GoogleMapsCallback, __gmc__ } =
@@ -18,12 +20,10 @@ describe('ClusterIcon component', () => {
         expect(__gmc__).to.not.be.undefined;
         expect(typeof __gmc__).to.be.eq('object');
         expect(__gmc__.map).to.be.instanceof(google.maps.Map);
-        cy.get('[aria-label="Cluster of 2 markers"]').should(
-          'have.attr',
-          'title',
-          'Cluster of 2 markers',
-        );
       });
     });
+    cy.get('[aria-label="Cluster of 2 markers"]')
+      .should('be.visible')
+      .should('have.attr', 'title', 'Cluster of 2 markers');
   });
 });

packages/v3/cypress/e2e/info-window.cy.ts

@@ -2,18 +2,16 @@ describe('InfoWindow component', () => {
   it('should click on the 3 clickable markers and display a different text on the info-window when each of it is clicked', function () {
     cy.visit('/');
     cy.get('button[name=info-window]').click();
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(8000);
-    cy.get('[aria-label=Map]').within(() => {
-      cy.get('[role=button]', { timeout: 8000 }).each((el) => {
-        cy.wrap(el).click({ force: true });
-        cy.get('strong')
-          .invoke('text')
-          .then((txt) => {
-            const regex = /Marker\s\d/;
-            expect(regex.test(txt)).to.be.true;
-          });
-      });
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get('[role=button]', { timeout: 8000 }).each((el) => {
+      cy.wrap(el).click({ force: true });
+      cy.get('strong')
+        .invoke('text')
+        .then((txt) => {
+          const regex = /Marker\s\d/;
+          expect(regex.test(txt)).to.be.true;
+        });
     });
   });
 });

packages/v3/cypress/e2e/kml-layer.cy.ts

@@ -1,6 +1,12 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable no-useless-escape */
 describe('KmlLayer component', () => {
   it('should have a kml icon in the map', function () {
     cy.visit('/');
     cy.get('button[name=kml-layer]').click();
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get('.gmv-map-container').should('be.visible');
+    cy.get('[src^="https\:\/\/maps\.googleapis\.com\/maps\/vt\?pb\=\!1m5\!1m4\!1i11\!2i329\!3i794\!4i256\!2m15\!1e2\!2skml\%3AcXOw0bjKUSmlnTN2l67v0Sai6WfXhSSWuyNaDD0mAzh6xfi2fYnBo78Y2Eg\!4m2\!1sks\!2sts\%"]').should('exist');
   });
 });

packages/v3/cypress/e2e/map-layer.cy.ts

@@ -6,6 +6,8 @@ describe('MapLayer component', () => {
     cy.visit('/');
     cy.get('button[name=map]').click();
     cy.contains('h2', 'Test E2E: Map layer');
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
     cy.get('.gmv-map-container > .gmv-map > div');
     cy.get('.gmv-map-container > .gmv-map-hidden');
     const inputLat = () => cy.get('input[name=lat]');

packages/v3/cypress/e2e/marker-icon.cy.ts

@@ -1,52 +1,65 @@
 describe('MarkerIcon component', () => {
-  it('should add 4 markers on the map', function () {
-    cy.visit('/');
-    cy.get('button[name=marker]').click();
-    cy.get('.gmv-map').find('map').should('have.length', 4);
-  });
-
-  it('should hide 2 markers from the map', function () {
-    cy.visit('/');
-    cy.get('button[name=marker]').click();
-    cy.get('#visibility').click();
-    cy.get('.gmv-map').find('map').should('have.length', 2);
+  afterEach(() => {
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(500);
   });
 
-  it('should make visible again the 2 hidden markers on the map', function () {
+  it('should add 4 markers on the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
-    cy.get('#visibility').click();
-    cy.get('#visibility').click();
-    cy.get('.gmv-map').find('map').should('have.length', 4);
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get('.gmv-map')
+      .find('[class="GMAMP-maps-pin-view"]')
+      .should('have.length', 4);
   });
 
-  it('should destroy 2 markers from the map', function () {
+  it('should hide 2 markers from the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
     cy.get('#visibility2').click();
-    cy.get('.gmv-map').find('map').should('have.length', 2);
+    cy.get('.gmv-map')
+      .find('[class="GMAMP-maps-pin-view"]')
+      .should('have.length', 2);
   });
 
-  it('should re-build the 2 destroyed markers on the map', function () {
+  it('should make visible again the 2 hidden markers on the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
     cy.get('#visibility2').click();
+    cy.get('.gmv-map')
+      .find('[class="GMAMP-maps-pin-view"]')
+      .should('have.length', 2);
     cy.get('#visibility2').click();
-    cy.get('.gmv-map').find('map').should('have.length', 4);
+    cy.get('.gmv-map')
+      .find('[class="GMAMP-maps-pin-view"]')
+      .should('have.length', 4);
   });
 
   it('should empty the markers array from the map removing 2 of the 4 markers', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
     cy.get('#empty').click();
-    cy.get('.gmv-map').find('map').should('have.length', 2);
+    cy.get('.gmv-map')
+      .find('[class="GMAMP-maps-pin-view"]')
+      .should('have.length', 2);
   });
 
   it('should fill the markers array from the map adding the 2 removed markers', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
     cy.get('#empty').click();
     cy.get('#empty').click();
-    cy.get('.gmv-map').find('map').should('have.length', 4);
+    cy.get('.gmv-map')
+      .find('[class="GMAMP-maps-pin-view"]')
+      .should('have.length', 4);
   });
 });

packages/v3/cypress/e2e/polygon-shape.cy.ts

@@ -2,10 +2,10 @@ describe('PolygonShape component', () => {
   it('should contain a 2 polygon shape with 8 points in each of them', function () {
     cy.visit('/');
     cy.get('button[name=polygon]').click();
-    cy.get('[aria-label=Map]').within(() => {
-      cy.get(
-        'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
-      ).should('have.length', 16);
-    });
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get(
+      'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
+    ).should('have.length', 16);
   });
 });

packages/v3/cypress/e2e/polyline-shape.cy.ts

@@ -2,10 +2,10 @@ describe('PolylineShape component', () => {
   it('should contain a 2 polyline shape with 3 points', function () {
     cy.visit('/');
     cy.get('button[name=polyline]').click();
-    cy.get('[aria-label=Map]').within(() => {
-      cy.get(
-        'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
-      ).should('have.length', 3);
-    });
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get(
+      'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
+    ).should('have.length', 3);
   });
 });

packages/v3/cypress/e2e/rectangle-shape.cy.ts

@@ -2,10 +2,10 @@ describe('RectangleShape component', () => {
   it('should contain a 2 rectangle shape with 8 points', function () {
     cy.visit('/');
     cy.get('button[name=rectangle]').click();
-    cy.get('[aria-label=Map]').within(() => {
-      cy.get(
-        'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
-      ).should('have.length', 8);
-    });
+    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gm-style').should('be.visible');
+    cy.get(
+      'div > div > [style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > div',
+    ).should('have.length', 8);
   });
 });