pleno-vue/tests/unit/restricted-page-wrapper.spec.js

// @vitest-environment jsdom

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

const mocks = vi.hoisted(() => {
  const sessionState = {
    initiated: false,
  };

  return {
    sessionState,
    router: {
      currentRoute: {
        value: {
          path: "/superuser",
        },
      },
      go: vi.fn(),
    },
    sessionUser: {
      isInitiated: () => sessionState.initiated,
      hasPermission: vi.fn(() => false),
      auth: {
        forceClearSession: vi.fn(),
      },
      functions: {
        redirectTo: {
          pages: {
            login: vi.fn(),
          },
        },
      },
      initiateOnAppStart: vi.fn(),
    },
    pingApiServer: vi.fn(),
    swalFire: vi.fn(),
  };
});

vi.mock("vue-router", () => ({
  useRouter: () => mocks.router,
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  default: mocks.sessionUser,
  SessionUser: mocks.sessionUser,
}));

vi.mock("@/services/apiHealth.js", () => ({
  pingApiServer: mocks.pingApiServer,
}));

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

import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";

const mountWrapper = (hasPermission) =>
  mount(RestrictedPageWrapper, {
    props: {
      hasPermission,
    },
    slots: {
      default: '<div data-testid="allowed-content">Allowed content</div>',
    },
  });

describe("RestrictedPageWrapper", () => {
  beforeEach(() => {
    mocks.sessionState.initiated = false;
    mocks.router.currentRoute.value.path = "/superuser";
    mocks.sessionUser.hasPermission.mockReturnValue(false);
    mocks.sessionUser.auth.forceClearSession.mockReset();
    mocks.sessionUser.functions.redirectTo.pages.login.mockReset();
    mocks.sessionUser.initiateOnAppStart.mockReset();
    mocks.pingApiServer.mockReset();
    mocks.swalFire.mockReset();
  });

  it("shows only the bootstrap loader before the session is initiated", () => {
    const wrapper = mountWrapper(false);

    expect(wrapper.find(".pageloader").exists()).toBe(true);
    expect(wrapper.text()).toContain("Bekr");
    expect(wrapper.text()).not.toContain("403 Forbidden");
    expect(wrapper.find('[data-testid="allowed-content"]').exists()).toBe(false);
  });

  it("shows the 403 branch after initiation when permission is missing", () => {
    mocks.sessionState.initiated = true;

    const wrapper = mountWrapper(false);

    expect(wrapper.find(".pageloader").exists()).toBe(false);
    expect(wrapper.text()).toContain("403 Forbidden");
    expect(wrapper.find('[data-testid="allowed-content"]').exists()).toBe(false);
  });

  it("shows protected content after initiation when permission is present", () => {
    mocks.sessionState.initiated = true;

    const wrapper = mountWrapper(true);

    expect(wrapper.find(".pageloader").exists()).toBe(false);
    expect(wrapper.text()).not.toContain("403 Forbidden");
    expect(wrapper.find('[data-testid="allowed-content"]').exists()).toBe(true);
  });
});