pleno-vue/tests/unit/self-serve-machine-department-self-serve.spec.js

// @vitest-environment jsdom
import { defineComponent, h } from "vue";
import { mount } from "@vue/test-utils";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

const mocks = vi.hoisted(() => ({
  getDepartmentName: vi.fn(),
  getDepartmentSelfServeEnabled: vi.fn(),
  setDepartmentSelfServeEnabled: vi.fn(),
}));

vi.mock("@/components/pagination/departmentTabs.vue", () => ({
  getDepartmentName: mocks.getDepartmentName,
}));

vi.mock("@/composables/departmentSelfServeEnabled.js", () => ({
  getDepartmentSelfServeEnabled: mocks.getDepartmentSelfServeEnabled,
  setDepartmentSelfServeEnabled: mocks.setDepartmentSelfServeEnabled,
}));

import SelfServeMachine from "@/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachine.vue";

const flushMicrotasks = async () => {
  await Promise.resolve();
  await Promise.resolve();
};

const MockSwitch = defineComponent({
  name: "MockSwitch",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:model-value"],
  setup(props, { emit }) {
    return () =>
      h("button", {
        "data-testid": "department-self-serve-switch",
        "data-state": props.modelValue ? "on" : "off",
        disabled: props.disabled,
        onClick: () => emit("update:model-value", !props.modelValue),
      });
  },
});

const mountMachine = (machineOverrides = {}) =>
  mount(SelfServeMachine, {
    props: {
      machine: {
        id: 1,
        department: 12,
        name: "Lane 1",
        status: "AVAILABLE",
        ...machineOverrides,
      },
    },
    global: {
      stubs: {
        WhiteBoxCard: {
          template: `
          <div>
            <div data-testid="header"><slot name="header" /></div>
            <div data-testid="content"><slot name="content" /></div>
            <div data-testid="footer"><slot name="footer" /></div>
          </div>
        `,
        },
        SelfServeMachineStatus: { template: "<div />" },
        SelfServeMachineRelayControls: { template: "<div />" },
        SelfServeMachineControls: { template: "<div />" },
        BSwitch: MockSwitch,
        "b-switch": MockSwitch,
      },
    },
  });

describe("SelfServeMachine department self-serve management", () => {
  let consoleErrorSpy;

  beforeEach(() => {
    mocks.getDepartmentName.mockReset();
    mocks.getDepartmentSelfServeEnabled.mockReset();
    mocks.setDepartmentSelfServeEnabled.mockReset();
    consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});

    mocks.getDepartmentName.mockReturnValue("Roskilde");
    mocks.getDepartmentSelfServeEnabled.mockResolvedValue(false);
    mocks.setDepartmentSelfServeEnabled.mockImplementation(async (_departmentId, enabled) => enabled);
  });

  afterEach(() => {
    consoleErrorSpy.mockRestore();
  });

  it("loads and displays department self-serve status", async () => {
    mocks.getDepartmentSelfServeEnabled.mockResolvedValue(true);

    const wrapper = mountMachine();
    await flushMicrotasks();

    expect(mocks.getDepartmentSelfServeEnabled).toHaveBeenCalledWith(12);
    expect(wrapper.text()).toContain("Department Self-Serve");
    expect(wrapper.text()).toContain("ENABLED");
    expect(wrapper.get("[data-testid='department-self-serve-switch']").attributes("data-state")).toBe("on");
  });

  it("updates department self-serve status when toggled", async () => {
    const wrapper = mountMachine();
    await flushMicrotasks();

    expect(wrapper.text()).toContain("DISABLED");
    await wrapper.get("[data-testid='department-self-serve-switch']").trigger("click");
    await flushMicrotasks();

    expect(mocks.setDepartmentSelfServeEnabled).toHaveBeenCalledWith(12, true);
    expect(wrapper.text()).toContain("ENABLED");
    expect(wrapper.get("[data-testid='department-self-serve-switch']").attributes("data-state")).toBe("on");
  });

  it("reverts status and shows an error if status update fails", async () => {
    mocks.setDepartmentSelfServeEnabled.mockRejectedValue(new Error("save failed"));

    const wrapper = mountMachine();
    await flushMicrotasks();

    await wrapper.get("[data-testid='department-self-serve-switch']").trigger("click");
    await flushMicrotasks();

    expect(wrapper.text()).toContain("Unable to update department self-serve status.");
    expect(wrapper.text()).toContain("DISABLED");
    expect(wrapper.get("[data-testid='department-self-serve-switch']").attributes("data-state")).toBe("off");
  });
});