Add unit tests for authenticatedRequest error handling and NavigationMenuDepartment functionality:

- `authenticatedRequest`: Test suppression of specific errors, rejection of non-suppressed errors, and general error handling. - `NavigationMenuDepartment`: Test dynamic department label updates based on route changes. - Add contract tests for `NavigationMenuItemsAdmin` reactive route context usage.
2026-03-19 13:22:55 +01:00
parent 9745b106e6
commit cef187956e
3 changed files with 263 additions and 0 deletions
@@ -0,0 +1,161 @@
+// @vitest-environment jsdom
+import { defineComponent, h, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("vue-router", async () => {
+  const { reactive } = await import("vue");
+  const route = reactive({ params: { departmentId: undefined } });
+  return {
+    useRoute: () => route,
+    __setDepartmentId: (departmentId) => {
+      route.params.departmentId = departmentId;
+    },
+  };
+});
+
+vi.mock("@/components/pagination/departmentTabs.vue", async () => {
+  const { ref } = await import("vue");
+  const departments = ref([]);
+  const getDepartments = vi.fn();
+  return {
+    departments,
+    getDepartments,
+    __departmentsRef: departments,
+    __getDepartmentsMock: getDepartments,
+  };
+});
+
+vi.mock("@/components/displays/pagination/PaginationDisplayIsSmall.vue", async () => {
+  const { ref } = await import("vue");
+  return {
+    isSmall: ref(true),
+  };
+});
+
+vi.mock("@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue", async () => {
+  const { ref } = await import("vue");
+  return {
+    locations: {
+      location: ref(null),
+      getDistance: () => 0,
+    },
+  };
+});
+
+vi.mock("@/components/viewport/page/headers/ViewportHeaderSettings.vue", async () => {
+  const { ref } = await import("vue");
+  return {
+    toggleExpanded: vi.fn(),
+    isOpen: ref(false),
+    getDepartmentSelectionVisibility: vi.fn(() => true),
+  };
+});
+
+vi.mock("@/components/session/token/SessionUser.vue", () => {
+  const selectDepartment = vi.fn();
+  const canAccessDepartment = vi.fn(() => true);
+  const getDepartmentIdFromUrl = vi.fn(() => undefined);
+
+  return {
+    SessionUser: {
+      canAccessDepartment: (...args) => canAccessDepartment(...args),
+      functions: {
+        selectDepartment: (...args) => selectDepartment(...args),
+        getDepartmentIdFromUrl: (...args) => getDepartmentIdFromUrl(...args),
+      },
+      objects: {
+        global: {
+          language: {
+            select: "Select",
+          },
+        },
+        departments: {
+          meta: {
+            labels: {
+              single: "department",
+            },
+          },
+        },
+      },
+    },
+    __sessionMocks: {
+      selectDepartment,
+      canAccessDepartment,
+      getDepartmentIdFromUrl,
+    },
+  };
+});
+
+vi.mock("buefy", () => {
+  const Tooltip = defineComponent({
+    name: "MockTooltip",
+    setup(_props, { slots }) {
+      return () => h("div", { "data-testid": "mock-tooltip" }, slots.default ? slots.default() : []);
+    },
+  });
+
+  const Button = defineComponent({
+    name: "MockButton",
+    props: {
+      label: {
+        type: String,
+        default: "",
+      },
+    },
+    setup(props) {
+      return () => h("button", { "data-testid": "mock-button-label" }, props.label);
+    },
+  });
+
+  const passthrough = defineComponent({
+    name: "MockPassthrough",
+    setup(_props, { slots }) {
+      return () => h("div", slots.default ? slots.default() : []);
+    },
+  });
+
+  return {
+    BTooltip: Tooltip,
+    BButton: Button,
+    BDropdownItem: passthrough,
+    BField: passthrough,
+    BIcon: passthrough,
+    BSelect: passthrough,
+  };
+});
+
+import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/NavigationMenuDepartment.vue";
+import { __setDepartmentId } from "vue-router";
+import { __departmentsRef, __getDepartmentsMock } from "@/components/pagination/departmentTabs.vue";
+import { __sessionMocks } from "@/components/session/token/SessionUser.vue";
+
+describe("NavigationMenuDepartment", () => {
+  beforeEach(() => {
+    __getDepartmentsMock.mockReset();
+    __sessionMocks.selectDepartment.mockReset();
+    __sessionMocks.canAccessDepartment.mockReset();
+    __sessionMocks.getDepartmentIdFromUrl.mockReset();
+
+    __sessionMocks.canAccessDepartment.mockReturnValue(true);
+    __sessionMocks.getDepartmentIdFromUrl.mockReturnValue(undefined);
+    __departmentsRef.value = [
+      { id: 9, name: "Nord", description: "", latitude: 55.6, longitude: 12.5, branding: 0 },
+      { id: 12, name: "Taastrup", description: "", latitude: 55.7, longitude: 12.4, branding: 0 },
+    ];
+    __setDepartmentId(undefined);
+  });
+
+  it("updates the selected department label when route department changes", async () => {
+    const wrapper = mount(NavigationMenuDepartment);
+
+    expect(wrapper.get("[data-testid='mock-button-label']").text()).toBe("Select department");
+    expect(__getDepartmentsMock).toHaveBeenCalledTimes(1);
+
+    __setDepartmentId("12");
+    await nextTick();
+
+    expect(wrapper.get("[data-testid='mock-button-label']").text()).toBe("Taastrup");
+  });
+});
+