test(ol-feature, ol-map, ol-overlay): provide unit tests

re-use code from #252
big thanks to @chrstnbwnkl

relates to #222

Author: d-koppenhagen

src/components/map/__test__/OlFeature.spec.ts

@@ -0,0 +1,38 @@
+import { VueWrapper, mount } from "@vue/test-utils";
+import OlFeature from "../OlFeature.vue";
+import { beforeAll, describe, expect, it } from "vitest";
+import VectorSource from "ol/source/Vector";
+import { computed, ref } from "vue";
+
+describe("OlMap.vue", () => {
+  let featureComponent: VueWrapper;
+  const props = ref({ attributions: "test" });
+  const vectorSource = computed(() => {
+    return new VectorSource(props.value);
+  });
+
+  beforeAll(() => {
+    featureComponent = mount(OlFeature, {
+      props: {
+        properties: {
+          foo: "bar",
+        },
+      },
+      global: {
+        provide: {
+          "ol-options": { debug: true },
+          vectorSource,
+        },
+      },
+    });
+  });
+  it("passes props to the feature constructor", () => {
+    // @ts-ignore
+    expect(featureComponent.vm.feature.getProperties().foo).toBe("bar");
+  });
+  it("updates feature properties on change", async () => {
+    await featureComponent.setProps({ properties: { foo: "baz" } });
+    // @ts-ignore
+    expect(featureComponent.vm.feature.getProperties().foo).toBe("baz");
+  });
+});

src/components/map/__test__/OlMap.spec.ts

@@ -0,0 +1,27 @@
+import { VueWrapper, mount } from "@vue/test-utils";
+import OlMap from "../OlMap.vue";
+import { beforeAll, describe, expect, it } from "vitest";
+import { FullScreen, Zoom } from "ol/control";
+
+describe("OlMap.vue", () => {
+  let mapComponent: VueWrapper;
+  beforeAll(() => {
+    mapComponent = mount(OlMap, {
+      props: {
+        controls: [new FullScreen({}), new Zoom({})],
+      },
+      global: {
+        provide: {
+          "ol-options": { debug: true },
+        },
+      },
+    });
+  });
+  it("passes props to the map constructor", () => {
+    const olViewportWrapepr = mapComponent.find(".ol-viewport");
+    expect(olViewportWrapepr.exists());
+  });
+  it("renders viewport DOM element", () => {
+    mapComponent.find(".ol-viewport").exists();
+  });
+});

src/components/map/__test__/OlOverlay.spec.ts

@@ -0,0 +1,58 @@
+import { VueWrapper, mount } from "@vue/test-utils";
+import OlOverlay from "../OlOverlay.vue";
+import { beforeAll, describe, expect, it } from "vitest";
+import { Map } from "ol";
+
+const map = new Map({});
+
+describe("OlOverlay.vue", () => {
+  let overlayComponent: VueWrapper;
+  beforeAll(() => {
+    overlayComponent = mount(OlOverlay, {
+      props: {
+        position: [974749, 6749373],
+        positioning: "center-left",
+      },
+      global: {
+        provide: {
+          "ol-options": { debug: true },
+          map,
+        },
+      },
+      slots: {
+        default: "this is not just any overlay",
+      },
+    });
+  });
+  it("sets the position on the overlay instance", () => {
+    // @ts-ignore
+    expect(overlayComponent.vm.overlay.getPosition()).toStrictEqual([
+      974749, 6749373,
+    ]);
+  });
+  it("sets the positioning on the overlay instance", () => {
+    // @ts-ignore
+    expect(overlayComponent.vm.overlay.getPositioning()).toBe("center-left");
+  });
+  it("emits position:changed when position is updated via instance method", () => {
+    // @ts-ignore
+    overlayComponent.vm.setPosition([12, 13]);
+    expect(overlayComponent.emitted()).toHaveProperty("change:position");
+    expect(
+      // @ts-ignore
+      overlayComponent.emitted("change:position")[0][0].target.get("position"),
+    ).toStrictEqual([12, 13]);
+  });
+  it("emits position:changed when position property is updated", async () => {
+    // @ts-ignore
+    await overlayComponent.setProps({
+      position: [12, 13],
+    });
+
+    expect(overlayComponent.emitted()).toHaveProperty("change:position");
+    expect(
+      // @ts-ignore
+      overlayComponent.emitted("change:position")[0][0].target.get("position"),
+    ).toStrictEqual([12, 13]);
+  });
+});