fix(v3): fix visibility issue excluding only null and undefined values 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

Author: diegoazh

.lintstagedrc.yml

@@ -1,2 +1,2 @@
-"*.{vue,js,vue,html,js}":
+"*.{vue,js,ts,jsx,tsx}":
   - "pnpm run lint"

packages/v3/.gitignore

@@ -7,6 +7,7 @@ node_modules
 /cypress/runner/dist
 
 # local env files
+.env
 .env.local
 .env.*.local
 

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);
+  });
 });

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>

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(