Add basic tests for LControlAttribution

package.json

@@ -47,12 +47,16 @@
     "@types/leaflet": "^1.5.7",
     "@types/node": "^18.13.0",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/compiler-dom": "^3.2.47",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/server-renderer": "^3.2.47",
+    "@vue/test-utils": "^2.3.1",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^4.3.0",
+    "jsdom": "^21.1.1",
     "leaflet": "^1.6.0",
     "lint-staged": "^10.4.0",
     "npm-run-all": "^4.1.5",

src/types/injectionKeys.ts

@@ -3,35 +3,50 @@ import type { InjectionKey } from "vue";
 
 import type { IControlDefinition, ILayerDefinition } from "./interfaces";
 
-export const UseGlobalLeafletInjection = Symbol() as InjectionKey<boolean>;
-export const AddLayerInjection = Symbol() as InjectionKey<
+export const UseGlobalLeafletInjection = Symbol(
+  "useGlobalLeaflet"
+) as InjectionKey<boolean>;
+
+export const AddLayerInjection = Symbol("addLayer") as InjectionKey<
   (layer: ILayerDefinition) => void
 >;
-export const RemoveLayerInjection = Symbol() as InjectionKey<
+
+export const RemoveLayerInjection = Symbol("removeLayer") as InjectionKey<
   (layer: ILayerDefinition) => void
 >;
-export const RegisterControlInjection = Symbol() as InjectionKey<
-  (control: IControlDefinition) => void
->;
-export const RegisterLayerControlInjection = Symbol() as InjectionKey<
-  (control: IControlDefinition<L.Control.Layers>) => void
->;
 
-export const CanSetParentHtmlInjection = Symbol() as InjectionKey<
-  () => boolean
->;
-export const SetParentHtmlInjection = Symbol() as InjectionKey<
+export const RegisterControlInjection = Symbol(
+  "registerControl"
+) as InjectionKey<(control: IControlDefinition) => void>;
+
+export const RegisterLayerControlInjection = Symbol(
+  "registerLayerControl"
+) as InjectionKey<(control: IControlDefinition<L.Control.Layers>) => void>;
+
+export const CanSetParentHtmlInjection = Symbol(
+  "canSetParentHtml"
+) as InjectionKey<() => boolean>;
+
+export const SetParentHtmlInjection = Symbol("setParentHtml") as InjectionKey<
   (html: string) => void
 >;
-export const SetIconInjection = Symbol() as InjectionKey<
+
+export const SetIconInjection = Symbol("setIcon") as InjectionKey<
   (newIcon: L.DivIcon | L.Icon | undefined) => L.Marker<any> | undefined
 >;
 
-export const BindPopupInjection = Symbol() as InjectionKey<
+export const BindPopupInjection = Symbol("bindPopup") as InjectionKey<
   (leafletObject: L.Layer | undefined) => void
 >;
-export const BindTooltipInjection = Symbol() as InjectionKey<
+
+export const BindTooltipInjection = Symbol("bindTooltip") as InjectionKey<
   (leafletObject: L.Layer | undefined) => void
 >;
-export const UnbindPopupInjection = Symbol() as InjectionKey<() => void>;
-export const UnbindTooltipInjection = Symbol() as InjectionKey<() => void>;
+
+export const UnbindPopupInjection = Symbol("unbindPopup") as InjectionKey<
+  () => void
+>;
+
+export const UnbindTooltipInjection = Symbol("unbindTooltip") as InjectionKey<
+  () => void
+>;

src/utils.ts

@@ -137,10 +137,12 @@ export const WINDOW_OR_GLOBAL =
   (typeof global === "object" && global.global === global && global) ||
   globalThis;
 
-export const assertInject = <T>(key: InjectionKey<T> | string) => {
+export const assertInject = <T>(key: InjectionKey<T>) => {
   const value = inject<T>(key);
-  if (!value) {
-    throw new Error(`Attempt to inject ${key} before it was provided.`);
+  if (value === undefined) {
+    throw new Error(
+      `Attempt to inject ${key.description} before it was provided.`
+    );
   }
 
   return value;

tests/unit/components/LControlAttribution.test.ts

@@ -0,0 +1,86 @@
+import { flushPromises, shallowMount } from "@vue/test-utils";
+import "leaflet";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import LControlAttribution from "@src/components/LControlAttribution.vue";
+import {
+  RegisterControlInjection,
+  UseGlobalLeafletInjection,
+} from "@src/types/injectionKeys";
+
+describe("LControlAttribution", () => {
+  const mockRegisterControl = vi.fn();
+  const getWrapper = async () => {
+    const wrapper = shallowMount(LControlAttribution, {
+      propsData: {
+        position: "topright",
+        prefix: "Hello there",
+      },
+      global: {
+        provide: {
+          [UseGlobalLeafletInjection as symbol]: true,
+          [RegisterControlInjection as symbol]: mockRegisterControl,
+        },
+      },
+    });
+    await flushPromises();
+
+    return wrapper;
+  };
+
+  beforeEach(() => {
+    mockRegisterControl.mockReset();
+  });
+
+  it("emits a ready event", async () => {
+    const wrapper = await getWrapper();
+
+    expect(wrapper.emitted("ready")).to.have.length(1);
+  });
+
+  it("creates a Leaflet object with expected properties", async () => {
+    const wrapper = await getWrapper();
+
+    expect(wrapper.vm.leafletObject).to.exist;
+    const leafletObject = wrapper.vm.leafletObject!;
+    expect(leafletObject!.options.prefix).to.equal("Hello there");
+    expect(leafletObject?.options.position).to.equal("topright");
+  });
+
+  it("registers its Leaflet object", async () => {
+    const wrapper = await getWrapper();
+
+    expect(mockRegisterControl).toHaveBeenCalledTimes(1);
+    expect(mockRegisterControl).toHaveBeenCalledWith({
+      leafletObject: wrapper.vm.leafletObject,
+    });
+  });
+
+  it("sets the prefix value", async () => {
+    const wrapper = await getWrapper();
+    expect(wrapper.vm.leafletObject?.options.prefix);
+
+    wrapper.setProps({ prefix: "new prefix" });
+
+    await flushPromises();
+    expect(wrapper.vm.leafletObject?.options.prefix).to.equal("new prefix");
+  });
+
+  it("sets a new position value", async () => {
+    const wrapper = await getWrapper();
+
+    wrapper.setProps({ position: "bottomleft" });
+
+    await flushPromises();
+    expect(wrapper.vm.leafletObject?.options.position).to.equal("bottomleft");
+  });
+
+  it("removes itself from the map on unmount", async () => {
+    const wrapper = await getWrapper();
+    const removeSpy = vi.spyOn(wrapper.vm.leafletObject!, "remove");
+
+    wrapper.unmount();
+
+    expect(removeSpy).toBeCalledTimes(1);
+  });
+});

tests/unit/utils/capitalizeFirstLetter.test.ts

@@ -1,4 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
+
 import { capitalizeFirstLetter } from "@src/utils";
 
 describe("capitalizeFirstLetter", () => {

vitest.config.js

@@ -0,0 +1,16 @@
+/// <reference types="vitest" />
+import { mergeConfig } from "vite";
+import { defineConfig } from "vitest/config";
+
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      exclude: ["node_modules"],
+      globals: true,
+      environment: "jsdom",
+    },
+  })
+);