test(ui): add Invitations components tests

Author: luizhf42

ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap

@@ -44,8 +44,8 @@ exports[`AppBar Component > Renders the component 1`] = `
       <!--teleport start-->
       <!--teleport end-->
       <!--v-if-->
-      <div class="v-badge" size="x-small" data-test="invitations-dropdown-badge">
-        <div class="v-badge__wrapper"><i class="mdi-email mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open pending invites menu" data-test="invites-icon"></i>
+      <div class="v-badge" size="x-small" data-test="invitations-menu-badge">
+        <div class="v-badge__wrapper"><i class="mdi-email mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open pending invitations menu" data-test="invitations-menu-icon"></i>
           <transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light bg-success" style="bottom: calc(100% - 8px); left: calc(100% - 8px); display: none;" aria-atomic="true" aria-label="Badge" aria-live="polite" role="status">0</span></transition-stub>
         </div>
       </div>

ui/tests/components/Invitations/InvitationsMenu.spec.ts

@@ -0,0 +1,86 @@
+import { setActivePinia, createPinia } from "pinia";
+import { createVuetify } from "vuetify";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { VLayout } from "vuetify/components";
+import InvitationsMenu from "@/components/Invitations/InvitationsMenu.vue";
+import { SnackbarInjectionKey } from "@/plugins/snackbar";
+import useInvitationsStore from "@/store/modules/invitations";
+import { IInvitation } from "@/interfaces/IInvitation";
+
+const Component = {
+  template: "<v-layout><InvitationsMenu v-model=\"show\" /></v-layout>",
+  props: ["modelValue"],
+  data: () => ({
+    show: true,
+  }),
+};
+
+const mockSnackbar = {
+  showSuccess: vi.fn(),
+  showError: vi.fn(),
+};
+
+const mockInvitations: IInvitation[] = [
+  {
+    status: "pending",
+    role: "operator",
+    invited_by: "admin",
+    expires_at: "2025-12-31T23:59:59Z",
+    created_at: "2025-12-01T00:00:00Z",
+    updated_at: "2025-12-01T00:00:00Z",
+    status_updated_at: "2025-12-01T00:00:00Z",
+    namespace: {
+      tenant_id: "tenant1",
+      name: "Namespace 1",
+    },
+    user: {
+      id: "user1",
+      email: "user@example.com",
+    },
+  },
+];
+
+const vuetify = createVuetify();
+
+const mountWrapper = () => mount(Component, {
+  global: {
+    plugins: [vuetify],
+    provide: { [SnackbarInjectionKey]: mockSnackbar },
+    components: { "v-layout": VLayout, InvitationsMenu },
+    stubs: { teleport: true },
+  },
+  props: { modelValue: true },
+  attachTo: document.body,
+});
+
+describe("InvitationsMenu", () => {
+  let wrapper: VueWrapper<unknown>;
+  let menu: VueWrapper<InstanceType<typeof InvitationsMenu>>;
+
+  setActivePinia(createPinia());
+  const invitationsStore = useInvitationsStore();
+  invitationsStore.fetchUserPendingInvitationList = vi.fn().mockResolvedValue(Promise.resolve(mockInvitations));
+
+  it("Opens drawer when icon is clicked", async () => {
+    wrapper = mountWrapper();
+    await wrapper.find('[data-test="invitations-menu-icon"]').trigger("click");
+    menu = wrapper.findComponent(InvitationsMenu);
+    menu.vm.isDrawerOpen = false;
+    const icon = wrapper.find('[data-test="invitations-menu-icon"]');
+    await icon.trigger("click");
+    await flushPromises();
+
+    expect(menu.vm.isDrawerOpen).toBe(true);
+    const drawerComponent = wrapper.find('[data-test="invitations-drawer"]');
+    expect(drawerComponent.exists()).toBe(true);
+  });
+
+  it("Fetches invitations on mount", async () => {
+    const storeSpy = vi.spyOn(invitationsStore, "fetchUserPendingInvitationList");
+    wrapper.unmount();
+    wrapper = mountWrapper();
+    await flushPromises();
+    expect(storeSpy).toHaveBeenCalled();
+  });
+});

ui/tests/components/Invitations/InvitationsMenuItem.spec.ts

@@ -0,0 +1,63 @@
+import { setActivePinia, createPinia } from "pinia";
+import { createVuetify } from "vuetify";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { beforeEach, describe, expect, it } from "vitest";
+import InvitationsMenuItem from "@/components/Invitations/InvitationsMenuItem.vue";
+import { IInvitation } from "@/interfaces/IInvitation";
+import { formatFullDateTime } from "@/utils/date";
+import { SnackbarPlugin } from "@/plugins/snackbar";
+
+type InvitationsMenuItemWrapper = VueWrapper<InstanceType<typeof InvitationsMenuItem>>;
+
+const mockInvitation: IInvitation = {
+  status: "pending",
+  role: "operator",
+  invited_by: "638af3e2c3a5f90008c8b456",
+  expires_at: "2025-12-31T23:59:59Z",
+  created_at: "2025-12-01T00:00:00Z",
+  updated_at: "2025-12-01T00:00:00Z",
+  status_updated_at: "2025-12-01T00:00:00Z",
+  namespace: {
+    tenant_id: "tenant1",
+    name: "Test Namespace",
+  },
+  user: {
+    id: "user1",
+    email: "user@example.com",
+  },
+};
+
+describe("InvitationsMenuItem", () => {
+  let wrapper: InvitationsMenuItemWrapper;
+  setActivePinia(createPinia());
+  const vuetify = createVuetify();
+
+  beforeEach(() => {
+    wrapper = mount(InvitationsMenuItem, {
+      global: {
+        plugins: [vuetify, SnackbarPlugin],
+      },
+      props: {
+        invitation: mockInvitation,
+      },
+    });
+  });
+
+  it("Displays namespace name", () => {
+    expect(wrapper.text()).toContain("Test Namespace");
+  });
+
+  it("Displays role", () => {
+    expect(wrapper.text()).toContain(mockInvitation.role);
+  });
+
+  it("Displays invitation description", () => {
+    const formattedCreatedAt = formatFullDateTime(mockInvitation.created_at);
+    expect(wrapper.text()).toContain(`Invited by ${mockInvitation.invited_by} at ${formattedCreatedAt}`);
+  });
+
+  it("Emits update event when invitation is accepted/declined successfully", () => {
+    wrapper.vm.handleSuccess();
+    expect(wrapper.emitted("update")).toBeTruthy();
+  });
+});

ui/tests/components/Team/Invitation/InvitationCancel.spec.ts

@@ -0,0 +1,90 @@
+import { setActivePinia, createPinia } from "pinia";
+import { createVuetify } from "vuetify";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import MockAdapter from "axios-mock-adapter";
+import InvitationCancel from "@/components/Team/Invitation/InvitationCancel.vue";
+import { namespacesApi } from "@/api/http";
+import { SnackbarInjectionKey } from "@/plugins/snackbar";
+import useInvitationsStore from "@/store/modules/invitations";
+import { IInvitation } from "@/interfaces/IInvitation";
+
+type InvitationCancelWrapper = VueWrapper<InstanceType<typeof InvitationCancel>>;
+
+const mockSnackbar = {
+  showSuccess: vi.fn(),
+  showError: vi.fn(),
+};
+
+const invitation: IInvitation = {
+  status: "pending",
+  role: "operator",
+  invited_by: "user1",
+  expires_at: "2025-12-31T23:59:59Z",
+  created_at: "2025-12-01T00:00:00Z",
+  updated_at: "2025-12-01T00:00:00Z",
+  status_updated_at: "2025-12-01T00:00:00Z",
+  namespace: {
+    tenant_id: "fake-tenant",
+    name: "Test Namespace",
+  },
+  user: {
+    id: "user123",
+    email: "test@example.com",
+  },
+};
+
+describe("InvitationCancel", () => {
+  let wrapper: InvitationCancelWrapper;
+  setActivePinia(createPinia());
+  const invitationsStore = useInvitationsStore();
+  const vuetify = createVuetify();
+  const mockNamespacesApi = new MockAdapter(namespacesApi.getAxios());
+
+  beforeEach(() => {
+    wrapper = mount(InvitationCancel, {
+      global: {
+        plugins: [vuetify],
+        provide: { [SnackbarInjectionKey]: mockSnackbar },
+      },
+      props: {
+        invitation,
+        hasAuthorization: true,
+      },
+    });
+  });
+
+  it("Cancel invitation success", async () => {
+    mockNamespacesApi.onDelete("http://localhost:3000/api/namespaces/fake-tenant/invitations/user123").reply(200);
+
+    const storeSpy = vi.spyOn(invitationsStore, "cancelInvitation");
+
+    await wrapper.findComponent('[data-test="invitation-cancel-btn"]').trigger("click");
+    await wrapper.findComponent('[data-test="cancel-invitation-btn"]').trigger("click");
+    await flushPromises();
+
+    expect(storeSpy).toBeCalledWith({
+      tenant: "fake-tenant",
+      user_id: "user123",
+    });
+
+    expect(mockSnackbar.showSuccess).toBeCalledWith("Successfully cancelled invitation.");
+  });
+
+  it("Cancel invitation error", async () => {
+    mockNamespacesApi.onDelete("http://localhost:3000/api/namespaces/fake-tenant/invitations/user123").reply(404);
+
+    const storeSpy = vi.spyOn(invitationsStore, "cancelInvitation");
+
+    await wrapper.findComponent('[data-test="invitation-cancel-btn"]').trigger("click");
+    await wrapper.findComponent('[data-test="cancel-invitation-btn"]').trigger("click");
+    await flushPromises();
+
+    expect(storeSpy).toBeCalledWith({
+      tenant: "fake-tenant",
+      user_id: "user123",
+    });
+
+    expect(mockSnackbar.showError).toBeCalledWith("Invitation not found.");
+  });
+});

ui/tests/components/Team/Invitation/InvitationEdit.spec.ts

@@ -0,0 +1,92 @@
+import { setActivePinia, createPinia } from "pinia";
+import { createVuetify } from "vuetify";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import MockAdapter from "axios-mock-adapter";
+import InvitationEdit from "@/components/Team/Invitation/InvitationEdit.vue";
+import { namespacesApi } from "@/api/http";
+import { SnackbarInjectionKey } from "@/plugins/snackbar";
+import useInvitationsStore from "@/store/modules/invitations";
+import { IInvitation } from "@/interfaces/IInvitation";
+
+type InvitationEditWrapper = VueWrapper<InstanceType<typeof InvitationEdit>>;
+
+const mockSnackbar = {
+  showSuccess: vi.fn(),
+  showError: vi.fn(),
+};
+
+const invitation: IInvitation = {
+  status: "pending",
+  role: "operator",
+  invited_by: "user1",
+  expires_at: "2025-12-31T23:59:59Z",
+  created_at: "2025-12-01T00:00:00Z",
+  updated_at: "2025-12-01T00:00:00Z",
+  status_updated_at: "2025-12-01T00:00:00Z",
+  namespace: {
+    tenant_id: "fake-tenant",
+    name: "Test Namespace",
+  },
+  user: {
+    id: "user123",
+    email: "test@example.com",
+  },
+};
+
+describe("InvitationEdit", () => {
+  let wrapper: InvitationEditWrapper;
+  setActivePinia(createPinia());
+  const invitationsStore = useInvitationsStore();
+  const vuetify = createVuetify();
+  const mockNamespacesApi = new MockAdapter(namespacesApi.getAxios());
+
+  beforeEach(() => {
+    wrapper = mount(InvitationEdit, {
+      global: {
+        plugins: [vuetify],
+        provide: { [SnackbarInjectionKey]: mockSnackbar },
+      },
+      props: {
+        invitation,
+        hasAuthorization: true,
+      },
+    });
+  });
+
+  it("Successfully edits invitation", async () => {
+    mockNamespacesApi.onPatch("http://localhost:3000/api/namespaces/fake-tenant/invitations/user123").reply(200);
+
+    const storeSpy = vi.spyOn(invitationsStore, "editInvitation");
+
+    await wrapper.findComponent('[data-test="invitation-edit-btn"]').trigger("click");
+    await wrapper.findComponent('[data-test="update-btn"]').trigger("click");
+    await flushPromises();
+
+    expect(storeSpy).toBeCalledWith({
+      tenant: "fake-tenant",
+      user_id: "user123",
+      role: "operator",
+    });
+
+    expect(mockSnackbar.showSuccess).toBeCalledWith("Successfully updated invitation role.");
+  });
+
+  it("Fails to edit invitation due to permission error", async () => {
+    mockNamespacesApi.onPatch("http://localhost:3000/api/namespaces/fake-tenant/invitations/user123").reply(403);
+
+    const storeSpy = vi.spyOn(invitationsStore, "editInvitation");
+
+    await wrapper.findComponent('[data-test="invitation-edit-btn"]').trigger("click");
+    await wrapper.findComponent('[data-test="update-btn"]').trigger("click");
+    await flushPromises();
+
+    expect(storeSpy).toBeCalledWith({
+      tenant: "fake-tenant",
+      user_id: "user123",
+      role: "operator",
+    });
+
+    expect(mockSnackbar.showError).toBeCalledWith("You don't have permission to edit invitations.");
+  });
+});