update library + group test (frontend) - #1815 #1879

2025-11-21 17:29:16 +01:00
parent 40f40936ec
commit 21e9213c8a
13 changed files with 500 additions and 140 deletions
--- a/tests/unit/specs/views/Group/GroupInvitationJoin.spec.ts
+++ b/tests/unit/specs/views/Group/GroupInvitationJoin.spec.ts
@@ -0,0 +1,125 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+import { enUS } from "date-fns/locale";
+import { routes } from "@/router";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import { config, mount } from "@vue/test-utils";
+import { Oruga } from "@oruga-ui/oruga-next";
+import flushPromises from "flush-promises";
+import { getMockClient, requestHandlers } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import GroupInvitationJoin from "@/views/Group/GroupInvitationJoin.vue";
+import { GROUP_INVITATIONS_ACCEPT } from "@/graphql/invitations";
+import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
+import { computed } from "vue";
+
+vi.mock("@/composition/apollo/actor", () => {
+  return {
+    useCurrentActorClient: () => {
+      const error = null;
+      const loading = null;
+      const currentActor = computed(() => {
+        return {
+          id: 123,
+          name: "test",
+          domain: null,
+          preferredUsername: "test",
+        };
+      });
+      return { currentActor, error, loading };
+    },
+  };
+});
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const mock_group = {
+  data: {
+    group: {
+      __typename: "Group",
+      avatar: null,
+      banner: null,
+      domain: null,
+      id: "123",
+      manuallyApprovesFollowers: true,
+      allowSeeParticipants: false,
+      members: {
+        __typename: "PaginatedMemberList",
+        total: 1,
+      },
+      name: "ssss",
+      openness: "MODERATED",
+      organizedEvents: {
+        __typename: "PaginatedEventList",
+        elements: [],
+        total: 0,
+      },
+      physicalAddress: null,
+      posts: {
+        __typename: "PaginatedPostList",
+        elements: [],
+        total: 0,
+      },
+      preferredUsername: "example",
+      summary: null,
+      suspended: false,
+      type: "GROUP",
+      url: "https://mobilizon.test/@example",
+      visibility: "PUBLIC",
+    },
+  },
+};
+
+const generateWrapper = () => {
+  const global_data = getMockClient([
+    [FETCH_GROUP_PUBLIC, mock_group],
+    GROUP_INVITATIONS_ACCEPT,
+  ]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(GroupInvitationJoin, {
+    props: {
+      preferredUsername: "mygroup",
+      token: "dhfqjkhesfkhqdkjsqfkjds",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("GroupInvitationJoin", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    wrapper.find("button").trigger("click");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      name: "mygroup",
+    });
+    expect(requestHandlers.handle_1).toHaveBeenCalledWith({
+      actorId: 123,
+      groupId: "123",
+      token: "dhfqjkhesfkhqdkjsqfkjds",
+    });
+  });
+});
--- a/tests/unit/specs/views/Group/GroupInvitations.spec.ts
+++ b/tests/unit/specs/views/Group/GroupInvitations.spec.ts
@@ -0,0 +1,135 @@
+import { beforeEach, describe, it, expect } from "vitest";
+import { enUS } from "date-fns/locale";
+import { routes } from "@/router";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import { config, mount } from "@vue/test-utils";
+import { Oruga } from "@oruga-ui/oruga-next";
+import flushPromises from "flush-promises";
+import { getMockClient, requestHandlers } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import GroupInvitations from "@/views/Group/GroupInvitations.vue";
+import {
+  GROUP_INVITATIONS_LIST,
+  GROUP_INVITATIONS_DELETE,
+  GROUP_INVITATIONS_CREATE,
+  GROUP_INVITATIONS_UPDATE,
+} from "@/graphql/invitations";
+import { INVITE_MEMBER } from "@/graphql/member";
+import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const mock_group = {
+  data: {
+    group: {
+      __typename: "Group",
+      avatar: null,
+      banner: null,
+      domain: null,
+      id: "123",
+      manuallyApprovesFollowers: true,
+      allowSeeParticipants: false,
+      members: {
+        __typename: "PaginatedMemberList",
+        total: 1,
+      },
+      name: "ssss",
+      openness: "MODERATED",
+      organizedEvents: {
+        __typename: "PaginatedEventList",
+        elements: [],
+        total: 0,
+      },
+      physicalAddress: null,
+      posts: {
+        __typename: "PaginatedPostList",
+        elements: [],
+        total: 0,
+      },
+      preferredUsername: "example",
+      summary: null,
+      suspended: false,
+      type: "GROUP",
+      url: "https://mobilizon.test/@example",
+      visibility: "PUBLIC",
+    },
+  },
+};
+
+const generateWrapper = () => {
+  const global_data = getMockClient([
+    [FETCH_GROUP_PUBLIC, mock_group],
+    GROUP_INVITATIONS_LIST,
+    GROUP_INVITATIONS_DELETE,
+    GROUP_INVITATIONS_CREATE,
+    GROUP_INVITATIONS_UPDATE,
+    INVITE_MEMBER,
+  ]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(GroupInvitations, {
+    props: {
+      preferredUsername: "mygroup",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("GroupInvitations", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_5).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      name: "mygroup",
+    });
+    expect(requestHandlers.handle_1).toHaveBeenCalledWith({
+      groupId: "123",
+    });
+  });
+
+  it("Invite", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    wrapper
+      .find('input[id="new-member-field"]')
+      .setValue("invite@mobilizon.test");
+    wrapper.find("form").trigger("submit");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_5).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_5).toHaveBeenCalledWith({
+      groupId: "123",
+      targetActorUsername: "invite@mobilizon.test",
+    });
+  });
+});
--- a/tests/unit/specs/views/Group/GroupMembers.spec.ts
+++ b/tests/unit/specs/views/Group/GroupMembers.spec.ts
@@ -186,7 +186,7 @@ describe("GroupMembers", () => {
    const wrapper = generateWrapper();
    await wrapper.vm.$nextTick();
    await flushPromises();
-    wrapper.findAll("button")[1].trigger("click");
+    wrapper.findAll("button")[0].trigger("click");
    await wrapper.vm.$nextTick();
    await flushPromises();
    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
@@ -205,7 +205,7 @@ describe("GroupMembers", () => {
    const wrapper = generateWrapper();
    await wrapper.vm.$nextTick();
    await flushPromises();
-    wrapper.findAll("button")[3].trigger("click");
+    wrapper.findAll("button")[2].trigger("click");
    await wrapper.vm.$nextTick();
    await flushPromises();
    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
@@ -220,7 +220,7 @@ describe("GroupMembers", () => {
    });
  });

-  it("Invite", async () => {
+  /*  it("Invite", async () => {
    const wrapper = generateWrapper();
    await wrapper.vm.$nextTick();
    await flushPromises();
@@ -239,5 +239,5 @@ describe("GroupMembers", () => {
      groupId: "6",
      targetActorUsername: "invite@mobilizon.test",
    });
-  });
+  });*/
 });
--- a/tests/unit/specs/views/Group/snapshots/GroupInvitationJoin.spec.ts.snap
+++ b/tests/unit/specs/views/Group/snapshots/GroupInvitationJoin.spec.ts.snap
@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GroupInvitationJoin > Show simple 1`] = `
+"<div class="container mx-auto px-1 mb-6">
+  <div>
+    <h1>Join a group</h1>
+    <div>
+      <p class="my-1">Do you want to join the group <span>"<b>mygroup</b>"</span> with the profile <span>"<b>test</b>"</span> ?</p>
+      <p class="my-1">You can create a new profile or change the actual profile with the top menu.</p><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Join group</span>
+        <!----></span>
+      </button>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`GroupInvitationJoin > Show simple 2`] = `
+"<div class="container mx-auto px-1 mb-6">
+  <div>
+    <h1>Join a group</h1>
+    <div>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
+        <article data-oruga="notification" class="o-notification o-notification--success o-notification--top">
+          <!---->
+          <div class="o-notification__wrapper"><span data-oruga="icon" class="o-icon o-icon--large o-notification__icon" aria-hidden="true"><i class="mdi mdi-check-circle mdi-48px"></i></span>
+            <div class="o-notification__content">You successfully joined the group <span>"<b>mygroup</b>"</span> with your profile <span>"<b>test</b>"</span>.</div>
+          </div>
+        </article>
+      </transition-stub><a href="/@mygroup" class="o-button o-button--primary" data-oruga="button" role="button" tabindex="0"><span class="o-button__wrapper"><!----><span class="o-button__label">Go to the group page</span>
+        <!----></span>
+      </a>
+    </div>
+  </div>
+</div>"
+`;
--- a/tests/unit/specs/views/Group/snapshots/GroupInvitations.spec.ts.snap
+++ b/tests/unit/specs/views/Group/snapshots/GroupInvitations.spec.ts.snap
@@ -0,0 +1,50 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GroupInvitations > Show simple 1`] = `
+"<div>
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <section class="container mx-auto section">
+    <h1>Invitations to join the group</h1>
+    <h2>Member invitation</h2>
+    <form>
+      <div data-oruga="field" class="o-field o-field--horizontal">
+        <div class="o-field__horizontal-label"><label id="v-0-0" for="new-member-field" class="o-field__label">Invite a new member</label></div>
+        <div class="o-field__horizontal-body">
+          <div data-oruga="field" class="o-field">
+            <!---->
+            <div class="o-field__body">
+              <div class="o-field">
+                <div data-oruga="field" class="o-field" expanded="" size="large">
+                  <!---->
+                  <div class="o-field__body">
+                    <div class="o-field o-field--grouped">
+                      <div data-oruga="input" class="o-input o-input--expanded">
+                        <!----><input aria-labelledby="v-0-6" id="new-member-field" type="text" data-oruga-input="text" class="o-input__input o-input__input--placeholder" autocomplete="off" placeholder="Ex: someone@mobilizon.org">
+                        <!---->
+                        <!---->
+                      </div><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Invite member</span>
+                        <!----></span>
+                      </button>
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+    </form>
+    <h2>Group invitation links</h2>
+    <div data-oruga="field" class="o-field">
+      <!----><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">New invitation</span>
+        <!----></span>
+      </button>
+      <!---->
+    </div>
+    <!--v-if-->
+  </section>
+</div>"
+`;
--- a/tests/unit/specs/views/Group/snapshots/GroupMembers.spec.ts.snap
+++ b/tests/unit/specs/views/Group/snapshots/GroupMembers.spec.ts.snap
@@ -8,47 +8,13 @@ exports[`GroupMembers > Show simple 1`] = `
  </transition-stub>
  <section class="container mx-auto section">
    <h1>Group Members (2)</h1>
-    <form>
-      <div data-oruga="field" class="o-field o-field--horizontal" custom-class="add-relay">
-        <div class="o-field__horizontal-label"><label id="v-0-0" for="new-member-field" class="o-field__label">Invite a new member</label></div>
-        <div class="o-field__horizontal-body">
-          <div data-oruga="field" class="o-field">
-            <!---->
-            <div class="o-field__body">
-              <div class="o-field">
-                <div data-oruga="field" class="o-field" expanded="" size="large">
-                  <!---->
-                  <div class="o-field__body">
-                    <div class="o-field o-field--grouped">
-                      <p class="control">
-                      <div data-oruga="input" class="o-input">
-                        <!----><input aria-labelledby="v-0-6" id="new-member-field" type="text" data-oruga-input="text" class="o-input__input o-input__input--placeholder" autocomplete="off" placeholder="Ex: someone@mobilizon.org">
-                        <!---->
-                        <!---->
-                      </div>
-                      </p>
-                      <p class="control"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Invite member</span>
-                          <!----></span>
-                        </button></p>
-                    </div>
-                  </div>
-                  <!---->
-                </div>
-              </div>
-            </div>
-            <!---->
-          </div>
-        </div>
-        <!---->
-      </div>
-    </form>
    <div data-oruga="field" class="o-field o-field--horizontal my-2">
-      <div class="o-field__horizontal-label"><label id="v-0-4" for="group-members-status-filter" class="o-field__label">Status</label></div>
+      <div class="o-field__horizontal-label"><label id="v-0-0" for="group-members-status-filter" class="o-field__label">Status</label></div>
      <div class="o-field__horizontal-body">
        <div data-oruga="field" class="o-field">
          <!---->
          <div data-oruga="select" class="o-select">
-            <!----><select aria-labelledby="v-0-4" id="group-members-status-filter" data-oruga-input="select" class="o-select__input o-select__input--placeholder o-select__input--arrowed" autocomplete="off">
+            <!----><select aria-labelledby="v-0-0" id="group-members-status-filter" data-oruga-input="select" class="o-select__input o-select__input--placeholder o-select__input--arrowed" autocomplete="off">
              <!---->
              <option>Everything</option>
              <option value="ADMINISTRATOR">Administrator</option>