cypress update

cypress.json

@@ -1 +1,3 @@
-{}
+{
+  "baseUrl": "http://localhost:8080"
+}

cypress/integration/tests.js

@@ -0,0 +1,42 @@
+describe('Check functionality', () => {
+  it('maps should load', () => {
+    cy.visit('/');
+
+    cy.get('.passedMap1 input[value="loaded"]')
+      .should('be.checked');
+
+    cy.get('.passedMap2 input[value="loaded"]')
+      .should('be.checked');
+
+    cy.get('.passedMap3 input[value="loaded"]')
+      .should('be.checked');
+  });
+
+  it('markers should be edit', () => {
+    cy.get('#changeButton')
+      .click();
+
+    cy.get('.passedMap1 input[value="edited"]')
+      .should('be.checked');
+
+    cy.get('.passedMap2 input[value="edited"]')
+      .should('be.checked');
+
+    cy.get('.passedMap3 input[value="edited"]')
+      .should('be.checked');
+  });
+
+  it('markers should be delete', () => {
+    cy.get('#filterButton')
+      .click();
+
+    cy.get('.passedMap1 input[value="filtered"]')
+      .should('be.checked');
+
+    cy.get('.passedMap2 input[value="filtered"]')
+      .should('be.checked');
+
+    cy.get('.passedMap3 input[value="filtered"]')
+      .should('be.checked');
+  });
+});

examples/Cypress/src/App.vue

@@ -1,7 +1,15 @@
 <template>
   <div id="app">
     <div v-if="showMaps">
-      <yandex-map :coords="coords" show-all-markers class="map basic">
+      <yandex-map
+        ref="map1"
+        :coords="coords"
+        show-all-markers
+        class="map basic"
+        @map-was-initialized="onLoading($event, 1)"
+        @markers-was-delete="checkDeleteMarkers('1', $event)"
+        @markers-was-change="checkChangeMarkers('1', $event)"
+      >
         <ymap-marker
           v-for="marker in markers"
           :key="marker.id"
@@ -10,15 +18,42 @@
           :cluster-name="marker.clusterName"
         />
       </yandex-map>
-      <yandex-map :coords="coords" show-all-markers class="map cluster">
+      <div class="passed passedMap1">
+        <label><input v-model="passedMap1" type="checkbox" value="loaded">loaded</label>
+        <label><input v-model="passedMap1" type="checkbox" value="filtered">filtered</label>
+        <label><input v-model="passedMap1" type="checkbox" value="edited">edited</label>
+      </div>
+      <yandex-map
+        ref="map2"
+        :coords="coords"
+        show-all-markers
+        class="map cluster"
+        @map-was-initialized="onLoading($event, 2)"
+        @markers-was-delete="checkDeleteMarkers('2', $event)"
+        @markers-was-change="checkChangeMarkers('2', $event)"
+      >
         <ymap-marker
           v-for="marker in markers"
           :key="marker.id"
           :marker-id="marker.id"
           :coords="marker.coords"
         />
       </yandex-map>
-      <yandex-map :coords="coords" show-all-markers use-object-manager class="map object">
+      <div class="passed passedMap2">
+        <label><input v-model="passedMap2" type="checkbox" value="loaded">loaded</label>
+        <label><input v-model="passedMap2" type="checkbox" value="filtered">filtered</label>
+        <label><input v-model="passedMap2" type="checkbox" value="edited">edited</label>
+      </div>
+      <yandex-map
+        ref="map3"
+        :coords="coords"
+        show-all-markers
+        use-object-manager
+        class="map object"
+        @map-was-initialized="onLoading($event, 3)"
+        @markers-was-delete="checkDeleteMarkers('3', $event)"
+        @markers-was-change="checkChangeMarkers('3', $event)"
+      >
         <ymap-marker
           v-for="marker in markers"
           :key="marker.id"
@@ -27,10 +62,18 @@
           :cluster-name="marker.clusterName"
         />
       </yandex-map>
+      <div class="passed passedMap3">
+        <label><input v-model="passedMap3" type="checkbox" value="loaded">loaded</label>
+        <label><input v-model="passedMap3" type="checkbox" value="filtered">filtered</label>
+        <label><input v-model="passedMap3" type="checkbox" value="edited">edited</label>
+      </div>
     </div>
-    <button @click="filterMarkers">
+    <button id="filterButton" @click="filterMarkers">
       Filter markers
     </button>
+    <button id="changeButton" @click="changeMarkers">
+      Change markers
+    </button>
   </div>
 </template>
 
@@ -49,15 +92,48 @@ export default {
     coords: [34, 34],
     showMaps: false,
     markers,
+    passedMap1: [],
+    passedMap2: [],
+    passedMap3: [],
+    myMap1: {},
+    myMap2: {},
+    myMap3: {},
   }),
   async created() {
     await loadYmap();
     if (window.ymaps) this.showMaps = true;
   },
   methods: {
+    onLoading(map, mapNumber) {
+      this[`myMap${mapNumber}`] = map;
+      this[`passedMap${mapNumber}`].push('loaded');
+    },
     filterMarkers() {
       this.markers = this.markers.filter(_ => _.clusterName > 1);
     },
+    changeMarkers() {
+      this.markers.splice(0, 1, { ...this.markers[0], coords: [34, 55] });
+    },
+    checkLength(mapNumber) {
+      let length = 0;
+      this.$refs[`map${mapNumber}`].myMap.geoObjects.each((_) => {
+        length
+          += (_.getLength && _.getLength())
+          || (_.getGeoObjects && _.getGeoObjects().length)
+          || (_.objects && _.objects.getLength());
+      });
+      return length;
+    },
+    checkDeleteMarkers(mapNumber) {
+      const length = this.checkLength(mapNumber);
+      if (length === this.markers.length) this[`passedMap${mapNumber}`].push('filtered');
+    },
+    checkChangeMarkers(mapNumber) {
+      const map = this[`myMap${mapNumber}`];
+      map.setBounds(map.geoObjects.getBounds());
+      const length = this.checkLength(mapNumber);
+      if (length === this.markers.length) this[`passedMap${mapNumber}`].push('edited');
+    },
   },
 };
 </script>
@@ -75,6 +151,14 @@ export default {
 
 .ymap-container {
   height: 600px;
-  margin-bottom: 50px;
+  margin-bottom: 10px;
+}
+
+.passed {
+  margin-bottom: 60px;
+}
+
+.passed label {
+  margin-right: 20px;
 }
 </style>

makefile

@@ -1,5 +1,5 @@
 cypress:
-	gnome-terminal --tab -- sh -c "npm run serve --prefix examples/Vue; bash"
+	gnome-terminal --tab -- sh -c "npm run serve --prefix examples/Cypress; bash"
 	npx cypress open
 
 .PHONY: cypress