tests(e2e): provide tests for controls (#314)

* test(e2e): await map.goto

* refactor(demos): remove rotation where not needed

* tests(e2e): provide tests for controls

* test(e2e): update screenshot for controlbar

Author: d-koppenhagen

.gitignore

@@ -33,3 +33,4 @@ components/*.d.ts
 /test-results/
 /playwright-report/
 /playwright/.cache/
+tests/downloads

src/demos/AttributionControlDemo.vue

@@ -3,7 +3,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />

src/demos/BingMapsDemo.vue

@@ -12,7 +12,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -32,6 +31,5 @@ import { ref } from "vue";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
-const rotation = ref(0);
 const selected = ref("AerialWithLabels");
 </script>

src/demos/CircleDemo.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -36,5 +35,4 @@ import { ref } from "vue";
 const center = ref([30, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(10);
-const rotation = ref(0);
 </script>

src/demos/ClusterDemo.vue

@@ -8,7 +8,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -51,7 +50,6 @@ import { arrayWith500Points } from "./points";
 const center = ref([34, 39.13]);
 const projection = ref("EPSG:4326");
 const zoom = ref(6.8);
-const rotation = ref(0);
 
 const overrideStyleFunction = (feature, style, resolution) => {
   console.log({ feature, style, resolution });

src/demos/ContextMenuDemo.vue

@@ -8,7 +8,6 @@
   >
     <ol-view
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
       ref="view"
@@ -37,7 +36,6 @@ import marker from "@/assets/marker.png";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
-const rotation = ref(0);
 
 const contextMenuItems = ref([]);
 

src/demos/ControlBarDemo.vue

@@ -9,7 +9,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -61,7 +60,6 @@ import { ref } from "vue";
 const center = ref([34, 39.13]);
 const projection = ref("EPSG:4326");
 const zoom = ref(6);
-const rotation = ref(0);
 const view = ref(null);
 
 const drawEnable = ref(false);

src/demos/DrawDemo.vue

@@ -23,7 +23,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -64,7 +63,6 @@ import { ref } from "vue";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
-const rotation = ref(0);
 
 const drawEnable = ref(true);
 const drawType = ref("Polygon");

src/demos/DropAnimation.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -45,5 +44,4 @@ import { arrayWith500Points } from "./points";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(6);
-const rotation = ref(0);
 </script>

src/demos/FadeAnimation.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -45,5 +44,4 @@ import { arrayWith500Points } from "./points";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(6);
-const rotation = ref(0);
 </script>

src/demos/FeatureSelectDemo.vue

@@ -12,7 +12,7 @@
     @click="selectFeature"
     ref="mapRef"
   >
-    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
+    <ol-view ref="view" :center="center" :zoom="zoom" />
 
     <ol-vector-tile-layer class-name="feature-layer">
       <ol-source-vector-tile :url="url" :format="mvtFormat" />
@@ -69,7 +69,6 @@ const mvtFormat = new format.MVT({ featureClass: Feature });
 const mapRef = ref<{ map: MapRef } | null>(null);
 const center = ref([943955.9456952971, 6356667.343082143]);
 const zoom = ref(18);
-const rotation = ref(0);
 const url = ref(
   "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf",
 );

src/demos/FullscreenControlDemo.vue

@@ -3,7 +3,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />

src/demos/GeoLocationDemo.vue

@@ -8,7 +8,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -43,7 +42,6 @@ import type { ObjectEvent } from "ol/Object";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(12);
-const rotation = ref(0);
 const view = ref<View>();
 const map = ref(null);
 const position = ref([]);

src/demos/GeomPoint.vue

@@ -10,7 +10,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -44,7 +43,6 @@ import { ref } from "vue";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
-const rotation = ref(0);
 const radius = ref(40);
 const strokeWidth = ref(10);
 const strokeColor = ref("red");

src/demos/HeatmapLayerDemo.vue

@@ -8,7 +8,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -40,7 +39,6 @@ import { ref, inject } from "vue";
 const center = ref([101.97, 4.21]);
 const projection = ref("EPSG:4326");
 const zoom = ref(5);
-const rotation = ref(0);
 const format = inject("ol-format");
 const kml = new format.KML({ extractStyles: false });
 const heatmapWeight = function (feature) {

src/demos/IconDemo.vue

@@ -8,7 +8,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -41,7 +40,6 @@ import markerIcon from "@/assets/marker.png";
 const center = ref([34, 39.13]);
 const projection = ref("EPSG:4326");
 const zoom = ref(6.8);
-const rotation = ref(0);
 const format = inject("ol-format");
 const geoJson = new format.GeoJSON();
 </script>

src/demos/ImageLayerDemo.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -29,7 +28,6 @@
 import { ref, reactive } from "vue";
 
 const zoom = ref(2);
-const rotation = ref(0);
 const size = ref([1024, 968]);
 const center = ref([size.value[0] / 2, size.value[1] / 2]);
 const extent = ref([0, 0, ...size.value]);

src/demos/ImageWMSDemo.vue

@@ -4,7 +4,7 @@
     :loadTilesWhileInteracting="true"
     style="height: 400px"
   >
-    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
+    <ol-view ref="view" :center="center" :zoom="zoom" />
     <ol-zoom-control />
 
     <ol-tile-layer :zIndex="1000">
@@ -26,6 +26,5 @@
 import { ref } from "vue";
 
 const zoom = ref(4);
-const rotation = ref(0);
 const center = ref([-10997148, 4569099]);
 </script>

src/demos/LayerswitcherControlDemo.vue

@@ -3,7 +3,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -18,7 +17,7 @@
     <ol-tile-layer ref="bingLayer" title="Bing Maps">
       <ol-source-bingmaps
         apiKey="AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI"
-        :imagerySet="'CanvasDark'"
+        imagerySet="CanvasDark"
       />
     </ol-tile-layer>
 

src/demos/LayerswitcherimageControlDemo.vue

@@ -3,7 +3,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -18,7 +17,7 @@
     <ol-tile-layer ref="bingLayer" title="Bing Maps">
       <ol-source-bingmaps
         apiKey="AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI"
-        :imagerySet="'CanvasDark'"
+        imagerySet="RoadOnDemand"
       />
     </ol-tile-layer>
 

src/demos/LineString.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -57,7 +56,6 @@ import { ref } from "vue";
 const center = ref([116.54875, 40.45064]);
 const projection = ref("EPSG:4326");
 const zoom = ref(17);
-const rotation = ref(0);
 const strokeWidth = ref(10);
 const strokeColor = ref("red");
 </script>

src/demos/MapDemo.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -24,5 +23,4 @@ import { ref } from "vue";
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
-const rotation = ref(0);
 </script>

src/demos/MousepositionControlDemo.vue

@@ -3,7 +3,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />

src/demos/MultiLineString.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -60,7 +59,6 @@ import { ref } from "vue";
 const center = ref([116.54875, 40.45064]);
 const projection = ref("EPSG:4326");
 const zoom = ref(17);
-const rotation = ref(0);
 const strokeWidth = ref(10);
 const strokeColor = ref("red");
 </script>

src/demos/MultiPoint.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -60,7 +59,6 @@ import { ref } from "vue";
 const center = ref([116.54875, 40.45064]);
 const projection = ref("EPSG:4326");
 const zoom = ref(17);
-const rotation = ref(0);
 const radius = ref(10);
 const strokeWidth = ref(4);
 const strokeColor = ref("red");

src/demos/MultiPolygon.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -59,7 +58,6 @@ import { ref } from "vue";
 const center = ref([-98.8449, 19.6869]);
 const projection = ref("EPSG:4326");
 const zoom = ref(15);
-const rotation = ref(0);
 const strokeWidth = ref(10);
 const strokeColor = ref("red");
 </script>

src/demos/PolygonDemo.vue

@@ -7,7 +7,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />
@@ -53,5 +52,4 @@ import { ref } from "vue";
 const center = ref([-98.8449, 19.6869]);
 const projection = ref("EPSG:4326");
 const zoom = ref(15);
-const rotation = ref(0);
 </script>

src/demos/PrintdialogControlDemo.vue

@@ -3,7 +3,6 @@
     <ol-view
       ref="view"
       :center="center"
-      :rotation="rotation"
       :zoom="zoom"
       :projection="projection"
     />