pleno-vue/tests/unit/navigation-menu-department.spec.js

// @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),
      normalizeCoordinatePair: (coordinates) => {
        const latitude = Number(coordinates?.latitude);
        const longitude = Number(coordinates?.longitude);
        return Number.isFinite(latitude) && Number.isFinite(longitude) ? { latitude, longitude } : 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='mobile-header-department-toggle']").text()).toContain("Select department");
    expect(__getDepartmentsMock).toHaveBeenCalledTimes(1);

    __setDepartmentId("12");
    await nextTick();

    expect(wrapper.get("[data-testid='mobile-header-department-toggle']").text()).toContain("Taastrup");
  });

  it("hides placeholder departments from the mobile selector", async () => {
    __departmentsRef.value = [
      { id: 1, name: "Taastrup", visible: true, order_priority: 1 },
      { id: 2, name: "Ingen data", visible: true, order_priority: 2 },
      { id: 3, name: "   ", visible: true, order_priority: 3 },
      { id: 4, name: "Odense", visible: true, order_priority: 4 },
    ];

    const wrapper = mount(NavigationMenuDepartment);

    await wrapper.get("[data-testid='mobile-header-department-toggle']").trigger("click");

    const menu = wrapper.get("[data-testid='mobile-header-department-menu']");
    expect(menu.text()).toContain("Taastrup");
    expect(menu.text()).toContain("Odense");
    expect(menu.text()).not.toContain("Ingen data");
    expect(wrapper.find("[data-testid='mobile-header-department-option-2']").exists()).toBe(false);
    expect(wrapper.find("[data-testid='mobile-header-department-option-3']").exists()).toBe(false);
  });
});