fix(v3): fix visibility issue excluding only null and undefined value…

…s from props * fix(v3): exclude only null and undefined values from props * fix(v3): fix e2e polyline test adding lodash.throttle * test(v3): improve e2e marker test adding visibility test * test(v3): improve dev server in order to debug it and some scripts * chore(root): fix lint-staged configuration * test(v3): test markers visibility * test(v3): update all test videos
diegoazh · Jul 22, 2023 · 159b048 · 159b048
1 parent f68602d
commit 159b048
Show file tree

Hide file tree

Showing 19 changed files with 127 additions and 44 deletions.
diff --git a/.lintstagedrc.yml b/.lintstagedrc.yml
@@ -1,2 +1,2 @@
-"*.{vue,js,vue,html,js}":
+"*.{vue,js,ts,jsx,tsx}":
   - "pnpm run lint"
diff --git a/packages/v3/.gitignore b/packages/v3/.gitignore
@@ -7,6 +7,7 @@ node_modules
 /cypress/runner/dist
 
 # local env files
+.env
 .env.local
 .env.*.local
 

diff --git a/packages/v3/cypress/e2e/marker-icon.cy.ts b/packages/v3/cypress/e2e/marker-icon.cy.ts
@@ -4,4 +4,19 @@ describe('MarkerIcon component', () => {
     cy.get('button[name=marker]').click();
     cy.get('.gmv-map').find('map').should('have.length', 2);
   });
+
+  it('should remove all 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', 0);
+  });
+
+  it('should re-add all 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', 2);
+  });
 });
diff --git a/packages/v3/cypress/runner/components/MarkerTest.vue b/packages/v3/cypress/runner/components/MarkerTest.vue
@@ -1,4 +1,8 @@
 <template>
+  <button id="visibility" type="button" @click="visible = !visible">
+    {{ btnTxt }}
+  </button>
+  <br /><br />
   <gmv-map :center="center" :zoom="7" style="width: 100%; height: 500px">
     <gmv-marker
       v-for="(m, i) in markers"
@@ -7,6 +11,7 @@
       :draggable="true"
       :position="m.position"
       @click="center = m.position"
+      :visible="visible"
     ></gmv-marker>
   </gmv-map>
 </template>
@@ -15,6 +20,7 @@
 export default {
   data() {
     return {
+      visible: true,
       center: {
         lat: 10.0,
         lng: 10.0,
@@ -35,5 +41,10 @@ export default {
       ],
     };
   },
+  computed: {
+    btnTxt() {
+      return this.visible ? 'Hide markers' : 'Show markers';
+    },
+  },
 };
 </script>
diff --git a/packages/v3/cypress/runner/components/PolylineTest.vue b/packages/v3/cypress/runner/components/PolylineTest.vue
@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import throttle from 'lodash.throttle';
+
 export default {
   data() {
     return {
@@ -50,7 +52,7 @@ export default {
     };
   },
   watch: {
-    polylinePath: window?._.throttle(function (path) {
+    polylinePath: throttle(function (path) {
       if (path) {
         this.path = path;
         this.polylineGeojson = JSON.stringify(

diff --git a/packages/v3/cypress/videos/autocomplete-input.cy.ts.mp4 b/packages/v3/cypress/videos/autocomplete-input.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/circle-shape.cy.ts.mp4 b/packages/v3/cypress/videos/circle-shape.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/cluster-icon.cy.ts.mp4 b/packages/v3/cypress/videos/cluster-icon.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/info-window.cy.ts.mp4 b/packages/v3/cypress/videos/info-window.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/kml-layer.cy.ts.mp4 b/packages/v3/cypress/videos/kml-layer.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/map-layer.cy.ts.mp4 b/packages/v3/cypress/videos/map-layer.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/marker-icon.cy.ts.mp4 b/packages/v3/cypress/videos/marker-icon.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/polygon-shape.cy.ts.mp4 b/packages/v3/cypress/videos/polygon-shape.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/polyline-shape.cy.ts.mp4 b/packages/v3/cypress/videos/polyline-shape.cy.ts.mp4
diff --git a/packages/v3/cypress/videos/rectangle-shape.cy.ts.mp4 b/packages/v3/cypress/videos/rectangle-shape.cy.ts.mp4
diff --git a/packages/v3/index.html b/packages/v3/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module">
+      import { createApp } from 'vue';
+      import { GmapVuePlugin } from './src/main.ts';
+      import App from './cypress/runner/components/App.vue';
+
+      window.app = createApp(App)
+        .use(GmapVuePlugin, {
+          excludeEventsOnAllComponents() {
+            return [
+              'mousedown',
+              'mousemove',
+              'mouseout',
+              'mouseover',
+              'mouseup',
+            ];
+          },
+          load: {
+            key: import.meta.env.VITE_GOOGLE_API_KEY,
+            libraries: 'places,visualization,drawing',
+          },
+        })
+        .mount('#app');
+    </script>
+  </body>
+</html>
diff --git a/packages/v3/package.json b/packages/v3/package.json
@@ -19,7 +19,7 @@
   },
   "scripts": {
     "clean:build": "rimraf ./dist && rimraf ./build && rimraf ./types",
-    "dev": "vite",
+    "dev": "cpx ./cypress/runner/.env ./ --verbose && vite",
     "dev:e2e": "pnpm run build && vite --config cypress/runner/vite.config.js",
     "preview": "vite preview --port 4173",
     "build": "vite build && pnpm run copy:components",
@@ -29,7 +29,7 @@
     "test": "vitest",
     "test:unit": "vitest --environment jsdom",
     "coverage": "vitest run --coverage",
-    "test:e2e": "start-server-and-test test:e2e:vite:server http://localhost:4173/ 'pnpm exec cypress open --e2e'",
+    "test:e2e": "cypress install && start-server-and-test test:e2e:vite:server http://localhost:4173/ 'pnpm exec cypress open --e2e'",
     "test:e2e:ci": "start-server-and-test test:e2e:vite:server http://localhost:4173/ 'pnpm exec cypress run --e2e'",
     "test:e2e:build": "pnpm run build && vite build --config cypress/runner/vite.config.js",
     "test:e2e:preview": "vite preview --config cypress/runner/vite.config.js",
@@ -71,6 +71,7 @@
     "@types/google.maps": "^3.53.2",
     "@types/jsdom": "^21.1.1",
     "@types/lodash.isequal": "^4.5.6",
+    "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^20.2.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-c8": "^0.31.1",
@@ -89,6 +90,7 @@
     "happy-dom": "^9.20.3",
     "jsdom": "^22.0.0",
     "lint-staged": "^13.2.2",
+    "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",

diff --git a/packages/v3/src/composables/helpers.ts b/packages/v3/src/composables/helpers.ts
@@ -553,7 +553,7 @@ function bindVuePropsWithGoogleMapsPropsSetters(
       watch(
         () => props[propKey],
         (value, oldValue) => {
-          if (value && !isEqual(value, oldValue))
+          if (value != null && !isEqual(value, oldValue))
             AnyGoogleMapsClassInstance[setMethodName](value);
         },
         {