pleno-vue/tests/unit/department-notifications-phone-table.spec.js

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

const mocks = vi.hoisted(() => ({
  setEnabled: vi.fn(),
  showDeleteObjectForm: vi.fn(),
  showEditObjectFieldForm: vi.fn(),
  hasPermission: vi.fn(),
  canAccessSuperUser: vi.fn(),
}));

vi.mock("vue-i18n", () => ({
  useI18n: () => ({
    t: (key) =>
      ({
        "common.yes": "Yes",
        "common.no": "No",
        "global.delete": "Delete",
        "tables.showing": "Showing",
      }[key] ?? key),
  }),
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    hasPermission: mocks.hasPermission,
    canAccessSuperUser: mocks.canAccessSuperUser,
    objects: {
      global: {
        icons: {
          delete: "fas fa-trash",
        },
      },
      department_notification_sms: {
        meta: {
          labels: {
            multiple: "notification phone numbers",
          },
        },
        columns: {
          id: { label: "ID" },
          label: { label: "Label" },
          phone_country_code: { label: "Country code" },
          phone: { label: "Phone" },
          enabled: { label: "Enabled" },
        },
        set: {
          enabled: mocks.setEnabled,
        },
        showEditObjectFieldForm: mocks.showEditObjectFieldForm,
        functions: {
          showDeleteObjectForm: mocks.showDeleteObjectForm,
        },
      },
    },
  },
}));

vi.mock("@/components/displays/buttons/EditableTableColumn.vue", () => ({
  default: {
    name: "EditableTableColumn",
    props: {
      object: Object,
      column: String,
      loadList: Function,
    },
    template: `<td :data-testid="\`editable-\${column}-\${object.id}\`">{{ object[column] }}</td>`,
  },
}));

vi.mock("@/components/displays/buttons/ActionSettingsWheelButton.vue", () => ({
  default: {
    name: "ActionSettingsWheelButton",
    template: `<div><slot name="actions" /></div>`,
  },
}));

vi.mock("@/components/displays/buttons/ActionSettingsWheelItem.vue", () => ({
  default: {
    name: "ActionSettingsWheelItem",
    props: {
      testId: String,
      label: String,
      disabled: Boolean,
    },
    emits: ["click"],
    template: `<button type="button" :data-testid="testId" :disabled="disabled" @click="$emit('click')">{{ label }}</button>`,
  },
}));

vi.mock("@/components/displays/permissionbased/RequiresPermission.vue", () => ({
  default: {
    name: "RequiresPermission",
    props: {
      permission: String,
    },
    template: `<slot />`,
  },
}));

import DepartmentNotificationsPhoneTable from "@/components/displays/department/notifications/departmentNotificationsPhoneTable.vue";

const mountTable = (props = {}) =>
  mount(DepartmentNotificationsPhoneTable, {
    props: {
      objects: [
        {
          id: 10,
          label: "Dispatch line",
          phone_country_code: 45,
          phone: 12345678,
          enabled: true,
        },
      ],
      loadList: vi.fn().mockResolvedValue({}),
      ...props,
    },
    global: {
      mocks: {
        $t: (key) =>
          ({
            "tables.showing": "Showing",
          }[key] ?? key),
      },
    },
  });

describe("DepartmentNotificationsPhoneTable", () => {
  beforeEach(() => {
    vi.restoreAllMocks();
    mocks.setEnabled.mockReset();
    mocks.showDeleteObjectForm.mockReset();
    mocks.showEditObjectFieldForm.mockReset();
    mocks.hasPermission.mockReset();
    mocks.canAccessSuperUser.mockReset();

    mocks.setEnabled.mockResolvedValue({});
    mocks.hasPermission.mockReturnValue(true);
    mocks.canAccessSuperUser.mockReturnValue(false);
  });

  it("updates enabled state and reloads the provided paginated list", async () => {
    const loadList = vi.fn().mockResolvedValue("reloaded");
    const wrapper = mountTable({ loadList });

    await wrapper.get('[data-testid="department-notification-sms-enabled-toggle-10"]').setValue(false);
    await flushPromises();

    expect(mocks.setEnabled).toHaveBeenCalledWith(10, false);
    expect(loadList).toHaveBeenCalledOnce();
  });

  it("rolls back the switch and skips reload when the enabled update fails", async () => {
    const error = new Error("Not Found");
    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
    mocks.setEnabled.mockRejectedValueOnce(error);
    const loadList = vi.fn().mockResolvedValue("reloaded");
    const wrapper = mountTable({ loadList });
    const toggle = wrapper.get('[data-testid="department-notification-sms-enabled-toggle-10"]');

    await toggle.setValue(false);
    await flushPromises();

    expect(toggle.element.checked).toBe(true);
    expect(loadList).not.toHaveBeenCalled();
    expect(errorSpy).toHaveBeenCalledWith("Unable to update department notification SMS active state", error);
  });

  it("passes the provided paginated list reload callback to delete", async () => {
    const loadList = vi.fn().mockResolvedValue("reloaded");
    const wrapper = mountTable({ loadList });

    await wrapper.get('[data-testid="department-notification-sms-delete-10"]').trigger("click");

    expect(mocks.showDeleteObjectForm).toHaveBeenCalledWith(10, loadList);
  });
});