pleno-vue/tests/unit/department-gates-config-modal.spec.js

// @vitest-environment jsdom
import { beforeEach, describe, expect, it, vi } from "vitest";

const mocks = vi.hoisted(() => ({
  setColumn: vi.fn(),
  showEditObjectFieldForm: vi.fn(),
  swalFire: vi.fn(),
  swalShowValidationMessage: vi.fn(),
}));

vi.mock("sweetalert2", () => ({
  default: {
    fire: mocks.swalFire,
    showValidationMessage: mocks.swalShowValidationMessage,
  },
}));

vi.mock("@/i18n", () => ({
  default: {
    global: {
      t: (key) => key,
    },
  },
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    objects: {
      global: {
        parse: {
          boolean: (value) => value === true || value === "true",
        },
      },
      departments: {
        get: {
          all: vi.fn().mockResolvedValue([]),
        },
      },
    },
  },
}));

vi.mock("@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue", () => ({
  ObjectsGlobal: {
    set: {
      column: mocks.setColumn,
    },
    showEditObjectFieldForm: mocks.showEditObjectFieldForm,
    showCreateObjectForm: vi.fn(),
    showDeleteObjectForm: vi.fn(),
    add: { object: vi.fn() },
    get: { objects: vi.fn(), object: vi.fn() },
    delete: { object: vi.fn() },
    language: {
      save: "Save",
      cancel: "Cancel",
      field: () => "Edit config",
    },
  },
}));

import { DepartmentGates } from "@/components/session/token/SessionUser/Objects/DepartmentGates.vue";

describe("DepartmentGates config edit modal", () => {
  beforeEach(() => {
    document.body.innerHTML = "";
    Object.defineProperty(window, "innerWidth", {
      value: 1440,
      writable: true,
      configurable: true,
    });
    mocks.setColumn.mockReset();
    mocks.showEditObjectFieldForm.mockReset();
    mocks.swalFire.mockReset();
    mocks.swalShowValidationMessage.mockReset();
  });

  it("uses dedicated config modal and saves typed config values", async () => {
    const onAfterSubmit = vi.fn();
    mocks.setColumn.mockResolvedValue({});
    mocks.swalFire.mockResolvedValue({});

    await DepartmentGates.showEditObjectFieldForm(
      7,
      "config",
      {
        phone_number: "+4530878410",
        call_duration_threshold: 30,
      },
      onAfterSubmit
    );

    expect(mocks.showEditObjectFieldForm).not.toHaveBeenCalled();
    expect(mocks.swalFire).toHaveBeenCalledTimes(1);

    const modalOptions = mocks.swalFire.mock.calls[0][0];
    expect(modalOptions.width).toBe("1100px");
    expect(modalOptions.html).toContain("data-config-header-key");
    expect(modalOptions.html).toContain("data-config-header-type");
    expect(modalOptions.html).toContain("data-config-header-value");
    document.body.innerHTML = modalOptions.html;
    modalOptions.didOpen();

    const rows = Array.from(document.querySelectorAll("[data-config-row]"));
    const thresholdRow = rows.find(
      (row) => row.querySelector("[data-config-key]")?.value === "call_duration_threshold"
    );
    expect(thresholdRow).toBeTruthy();
    thresholdRow.querySelector("[data-config-value]").value = "45";

    const addRowButton = document.querySelector("[data-config-add-row]");
    addRowButton.click();

    const updatedRows = Array.from(document.querySelectorAll("[data-config-row]"));
    const newRow = updatedRows[updatedRows.length - 1];
    newRow.querySelector("[data-config-key]").value = "enabled";
    newRow.querySelector("[data-config-type]").value = "boolean";
    newRow.querySelector("[data-config-type]").dispatchEvent(new Event("change", { bubbles: true }));
    newRow.querySelector("[data-config-value]").value = "true";

    await modalOptions.preConfirm();

    expect(mocks.setColumn).toHaveBeenCalledWith("/department/gates", 7, "config", {
      phone_number: "+4530878410",
      call_duration_threshold: 45,
      enabled: true,
    });
    expect(onAfterSubmit).toHaveBeenCalledTimes(1);
  });

  it("falls back to generic editor for non-config columns", async () => {
    const onAfterSubmit = vi.fn();

    await DepartmentGates.showEditObjectFieldForm(3, "name", "Gate 1", onAfterSubmit);

    expect(mocks.showEditObjectFieldForm).toHaveBeenCalledTimes(1);
    expect(mocks.showEditObjectFieldForm).toHaveBeenCalledWith(DepartmentGates, 3, "name", "Gate 1", onAfterSubmit);
    expect(mocks.swalFire).not.toHaveBeenCalled();
  });

  it("uses a compact width on small screens", async () => {
    window.innerWidth = 640;
    mocks.swalFire.mockResolvedValue({});

    await DepartmentGates.showEditObjectFieldForm(10, "config", { value: "x" }, vi.fn());

    const modalOptions = mocks.swalFire.mock.calls[0][0];
    expect(modalOptions.width).toBe("94vw");
  });
});