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');
  });
});