test(v3): fix e2e error with 0 height

- Add gmap-vue global styles to e2e tests

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

@@ -4,7 +4,7 @@ describe('AutocompleteInput component', () => {
 
     cy.visit('/');
     cy.get('button[name=autocomplete]').click();
-    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     const input = () => cy.get('input');
     input().type(`${search}`);

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

@@ -2,7 +2,7 @@ describe('CircleShape component', () => {
   it('should contain a circle shape with 5 points', function () {
     cy.visit('/');
     cy.get('button[name=circle]').click();
-    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('[style="position: absolute; left: 0px; top: 0px; z-index: 0;"]')
       .last()

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

@@ -2,7 +2,7 @@ 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('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('[aria-label=Map]').within(() => {
       cy.window().then((win) => {

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

@@ -2,7 +2,7 @@ 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();
-    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('[role=button]', { timeout: 8000 }).each((el) => {
       cy.wrap(el).click({ force: true });

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

@@ -4,7 +4,7 @@ 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('.gmv-map').should('exist');
     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,7 +6,7 @@ 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('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('.gmv-map-container > .gmv-map > div');
     cy.get('.gmv-map-container > .gmv-map-hidden');

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

@@ -7,7 +7,7 @@ describe('MarkerIcon component', () => {
   it('should add 4 markers on the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
-    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('.gmv-map')
       .find('[class="GMAMP-maps-pin-view"]')
@@ -17,7 +17,7 @@ describe('MarkerIcon component', () => {
   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('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('#visibility2').click();
     cy.get('.gmv-map')
@@ -28,7 +28,7 @@ describe('MarkerIcon component', () => {
   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('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('#visibility2').click();
     cy.get('.gmv-map')
@@ -43,7 +43,7 @@ describe('MarkerIcon component', () => {
   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('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('#empty').click();
     cy.get('.gmv-map')
@@ -54,7 +54,7 @@ describe('MarkerIcon component', () => {
   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('.gmv-map').should('exist');
     cy.get('.gm-style').should('be.visible');
     cy.get('#empty').click();
     cy.get('#empty').click();

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

@@ -2,7 +2,7 @@ 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('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     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',

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

@@ -2,7 +2,7 @@ describe('PolylineShape component', () => {
   it('should contain a 2 polyline shape with 3 points', function () {
     cy.visit('/');
     cy.get('button[name=polyline]').click();
-    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     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',

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

@@ -2,7 +2,7 @@ describe('RectangleShape component', () => {
   it('should contain a 2 rectangle shape with 8 points', function () {
     cy.visit('/');
     cy.get('button[name=rectangle]').click();
-    cy.get('.gmv-map').should('be.visible');
+    cy.get('.gmv-map').should('exist');
     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',

packages/v3/cypress/runner/main.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { createGmapVuePlugin } from '../../dist/main.es';
 import App from './components/App.vue';
+import '@gmap-vue/v3/dist/style.css';
 
 window.app = createApp(App)
   .use(