perform front-end unit test from "view/Group" - #1879

.tool-versions

@@ -1,4 +1,4 @@
 erlang 26.2.2
 elixir 1.16.1-otp-26
-nodejs 18.19.1
+nodejs 24.9.0
 python 3.13.1-v3

tests/unit/specs/common.ts

@@ -71,6 +71,7 @@ export function defaultResolvers(
 export function htmlRemoveId(htmlText: string) {
   return htmlText
     .replaceAll(/ id="[a-z0-9]+" /gi, ' id="" ')
+    .replaceAll(/ aria-controls="[a-z0-9]+" /gi, ' aria-controls="" ')
     .replaceAll(/ for="[a-z0-9]+"/gi, ' for=""');
 }
 

tests/unit/specs/components/Group/CreateView.spec.ts

@@ -0,0 +1,49 @@
+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 CreateView from "@/views/Group/CreateView.vue";
+import { CREATE_GROUP } from "@/graphql/group";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([CREATE_GROUP]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(CreateView, {
+    props: {},
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("CreateView", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+  });
+});

tests/unit/specs/components/Group/GroupFollowers.spec.ts

@@ -0,0 +1,58 @@
+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 GroupFollowers from "@/views/Group/GroupFollowers.vue";
+import { GROUP_FOLLOWERS, UPDATE_FOLLOWER } from "@/graphql/followers";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([GROUP_FOLLOWERS, UPDATE_FOLLOWER]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(GroupFollowers, {
+    props: {
+      preferredUsername: "my-group",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("GroupFollowers", () => {
+  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(0);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      approved: true,
+      followersLimit: 10,
+      followersPage: 1,
+      name: "my-group",
+    });
+  });
+});

tests/unit/specs/components/Group/GroupMembers.spec.ts

@@ -0,0 +1,73 @@
+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 GroupMembers from "@/views/Group/GroupMembers.vue";
+import {
+  INVITE_MEMBER,
+  GROUP_MEMBERS,
+  REMOVE_MEMBER,
+  UPDATE_MEMBER,
+  APPROVE_MEMBER,
+} from "@/graphql/member";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([
+    INVITE_MEMBER,
+    GROUP_MEMBERS,
+    REMOVE_MEMBER,
+    UPDATE_MEMBER,
+    APPROVE_MEMBER,
+  ]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(GroupMembers, {
+    props: {
+      preferredUsername: "my-group",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("GroupMembers", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    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_1).toHaveBeenCalledWith({
+      groupName: "my-group",
+      limit: 10,
+      page: 1,
+      roles: undefined,
+    });
+  });
+});

tests/unit/specs/components/Group/GroupSettings.spec.ts

@@ -0,0 +1,56 @@
+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 GroupSettings from "@/views/Group/GroupSettings.vue";
+import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
+import { DELETE_GROUP } from "@/graphql/group";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([FETCH_GROUP_PUBLIC, DELETE_GROUP]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(GroupSettings, {
+    props: {
+      preferredUsername: "my-group",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("GroupSettings", () => {
+  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(0);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      name: "my-group",
+    });
+  });
+});

tests/unit/specs/components/Group/GroupView.spec.ts

@@ -0,0 +1,79 @@
+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 GroupView from "@/views/Group/GroupView.vue";
+import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
+import { JOIN_GROUP } from "@/graphql/member";
+import {
+  GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+  PERSON_STATUS_GROUP,
+} from "@/graphql/actor";
+import {
+  FOLLOW_GROUP,
+  UNFOLLOW_GROUP,
+  UPDATE_GROUP_FOLLOW,
+} from "@/graphql/followers";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([
+    FETCH_GROUP_PUBLIC,
+    JOIN_GROUP,
+    GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+    PERSON_STATUS_GROUP,
+    FOLLOW_GROUP,
+    UNFOLLOW_GROUP,
+    UPDATE_GROUP_FOLLOW,
+  ]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(GroupView, {
+    props: {
+      preferredUsername: "my-group",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("GroupView", () => {
+  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(0);
+    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_6).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      name: "my-group",
+      afterDateTime: new Date("2022-02-02T02:04:00.000Z"),
+    });
+  });
+});

tests/unit/specs/components/Group/MyGroups.spec.ts

@@ -0,0 +1,51 @@
+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 MyGroups from "@/views/Group/MyGroups.vue";
+import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
+import { LEAVE_GROUP } from "@/graphql/group";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([LOGGED_USER_MEMBERSHIPS, LEAVE_GROUP]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(MyGroups, {
+    props: {},
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("MyGroups", () => {
+  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(0);
+  });
+});

tests/unit/specs/components/Group/SettingsView.spec.ts

@@ -0,0 +1,49 @@
+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, shallowMount } from "@vue/test-utils";
+import { Oruga } from "@oruga-ui/oruga-next";
+import flushPromises from "flush-promises";
+import { getMockClient } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import SettingsView from "@/views/Group/SettingsView.vue";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return shallowMount(SettingsView, {
+    props: {
+      preferredUsername: "my-group",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("SettingsView", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});

tests/unit/specs/components/Group/TimelineView.spec.ts

@@ -0,0 +1,49 @@
+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 TimelineView from "@/views/Group/TimelineView.vue";
+import { GROUP_TIMELINE } from "@/graphql/group";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = () => {
+  const global_data = getMockClient([GROUP_TIMELINE]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(TimelineView, {
+    props: {},
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("TimelineView", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
+  });
+});

tests/unit/specs/components/Group/__snapshots__/CreateView.spec.ts.snap

@@ -0,0 +1,138 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CreateView > Show simple 1`] = `
+"<section class="container mx-auto">
+  <h1>Create a new group</h1>
+  <form>
+    <div data-oruga="field" class="o-field"><label for="group-display-name" class="o-field__label">Group display name</label>
+      <div class="o-field__body">
+        <div class="o-field o-field--addons">
+          <div data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><input aria-required="true" required="" id="group-display-name" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+    </div>
+    <div class="field"><label class="label" for="group-preferred-username">Federated Group Name</label>
+      <div class="field-body">
+        <div data-oruga="field" class="o-field">
+          <!---->
+          <div class="o-field__body">
+            <div class="o-field o-field--addons">
+              <div data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><input aria-required="true" required="" pattern="[a-z0-9_]+" id="group-preferred-username" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <p class="control"><span class="button is-static">@localhost</span></p>
+            </div>
+          </div>
+          <p class="o-field__message">Only alphanumeric lowercased characters and underscores are supported.</p>
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+    <div data-oruga="field" class="o-field"><label for="group-summary" class="o-field__label">Description</label>
+      <div class="o-field__body">
+        <div class="o-field o-field--addons"></div>
+      </div>
+      <!---->
+    </div>
+    <div class="address-autocomplete">
+      <div data-oruga="field" class="o-field !-mt-2" id="FullAddressAutoComplete-o-field"><label for="full-address-autocomplete-1" class="o-field__label">Group address</label>
+        <div class="o-field__body">
+          <div class="o-field o-field--addons">
+            <!--v-if-->
+            <div data-oruga="autocomplete" class="o-drop o-drop--expanded o-drop--position-auto o-acp">
+              <div tabindex="-1" class="o-drop__trigger" aria-haspopup="listbox">
+                <div data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><input dir="auto" class="FullAddressAutoComplete-o-autocomplete !mt-0 !h-full o-input o-input--iconspace-left" role="combobox" aria-autocomplete="list" aria-controls="" aria-expanded="false" id="full-address-autocomplete-1" data-oruga-input="text" type="text" autocomplete="off" placeholder="e.g. 10 Rue Jangot"><span class="o-icon o-input__icon-left" data-oruga="icon"><i class="mdi mdi-map-marker mdi-24px"></i></span>
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+              <!--teleport start-->
+              <transition-stub name="fade" appear="false" persisted="false" css="true">
+                <!---->
+              </transition-stub>
+              <transition-stub name="fade" appear="false" persisted="false" css="true">
+                <div id="" tabindex="-1" class="o-drop__menu o-drop__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-hidden="true" aria-modal="false">
+                  <!---->
+                  <!---->
+                  <div class="o-drop__item o-drop__item--clickable o-acp__item o-acp__item--empty" role="listitem" tabindex="0" data-oruga="dropdown-item"></div>
+                  <!---->
+                </div>
+              </transition-stub>
+              <!--teleport end-->
+            </div><button disabled="" type="button" class="o-btn o-btn--disabled reset-area !h-auto" role="button" data-oruga="button" title="Clear address field"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-close mdi-24px"></i></span>
+              <!---->
+              <!----></span>
+            </button>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+    <div class="field"><b class="field-label">Avatar</b>
+      <div><label class="o-upl !flex" data-oruga="upload">
+          <div class="o-upl__draggable" role="button" tabindex="0">
+            <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+          </div><input type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+        </label></div>
+      <!--v-if-->
+    </div>
+    <div class="field"><b class="field-label">Banner</b>
+      <div><label class="o-upl !flex" data-oruga="upload">
+          <div class="o-upl__draggable" role="button" tabindex="0">
+            <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+          </div><input type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+        </label></div>
+      <!--v-if-->
+    </div>
+    <fieldset>
+      <legend class="field-label !mb-0 mt-2">Group visibility</legend><label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" name="groupVisibility" autocomplete="off" value="PUBLIC"><span class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></span></label><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" value="UNLISTED"><span class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></span></label>
+    </fieldset>
+    <fieldset>
+      <legend class="mt-2"><span class="field-label !mb-0">New members</span><span>Members will also access private sections like discussions, resources and restricted posts.</span></legend>
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div class="o-field__body">
+          <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" value="OPEN"><span class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></span></label></div>
+        </div>
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div class="o-field__body">
+          <div class="o-field o-field--addons"><label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" name="groupOpenness" autocomplete="off" value="MODERATED"><span class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></span></label></div>
+        </div>
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div class="o-field__body">
+          <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" value="INVITE_ONLY"><span class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></span></label></div>
+        </div>
+        <!---->
+      </div>
+    </fieldset>
+    <fieldset>
+      <legend class="mt-2"><span class="field-label !mb-0">Followers</span><span>Followers will receive new public events and posts.</span></legend><label class="o-chk" data-oruga="checkbox" role="checkbox" aria-checked="false"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Manually approve new followers</span></label>
+    </fieldset><button type="submit" class="o-btn o-btn--primary mt-3" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Create my group</span>
+      <!----></span>
+    </button>
+  </form>
+</section>"
+`;

tests/unit/specs/components/Group/__snapshots__/GroupFollowers.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GroupFollowers > Show simple 1`] = `
+"<div>
+  <!--v-if-->
+  <transition-stub name="fade" appear="false" persisted="false" css="true">
+    <!---->
+  </transition-stub>
+  <!--v-if-->
+</div>"
+`;

tests/unit/specs/components/Group/__snapshots__/GroupMembers.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GroupMembers > Show simple 1`] = `
+"<div>
+  <!--v-if-->
+  <transition-stub name="fade" appear="false" persisted="false" css="true">
+    <!---->
+  </transition-stub>
+  <!--v-if-->
+</div>"
+`;

tests/unit/specs/components/Group/__snapshots__/GroupSettings.spec.ts.snap

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GroupSettings > Show simple 1`] = `
+"<div>
+  <!--v-if-->
+  <transition-stub name="fade" appear="false" persisted="false" css="true">
+    <!---->
+  </transition-stub>
+  <transition-stub name="fade" appear="false" persisted="false" css="true">
+    <article class="o-notification o-notification--top" data-oruga="notification">
+      <!---->
+      <div class="o-notification__wrapper">
+        <!---->
+        <div class="o-notification__content">You are not an administrator for this group.</div>
+      </div>
+    </article>
+  </transition-stub>
+</div>"
+`;

tests/unit/specs/components/Group/__snapshots__/GroupView.spec.ts.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GroupView > Show simple 1`] = `
+"<div data-v-63850a71="" class="container mx-auto is-widescreen">
+  <!--v-if-->
+  <transition-stub data-v-63850a71="" name="fade" appear="false" persisted="false" css="true">
+    <article class="o-notification o-notification--danger o-notification--top" data-oruga="notification">
+      <!---->
+      <div class="o-notification__wrapper">
+        <!---->
+        <div class="o-notification__content">No group found</div>
+      </div>
+    </article>
+  </transition-stub>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div data-v-63850a71="" class="my-2">
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;

tests/unit/specs/components/Group/__snapshots__/MyGroups.spec.ts.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MyGroups > Show simple 1`] = `
+"<section data-v-59f508e2="" class="container mx-auto px-1 mb-6">
+  <h1 data-v-59f508e2="" class="title">My groups</h1>
+  <p data-v-59f508e2="">Groups are spaces for coordination and preparation to better organize events and manage your community.</p>
+  <div data-v-59f508e2="" class="flex my-3"><a data-v-59f508e2="" href="/groups/create" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Create group</span>
+      <!----></span>
+    </a></div>
+  <transition-stub data-v-59f508e2="" name="fade" appear="false" persisted="false" css="true">
+    <!---->
+  </transition-stub>
+  <!--v-if-->
+  <!--v-if-->
+  <section data-v-59f508e2="" class="text-center not-found">
+    <div data-v-59f508e2="" class="">
+      <div data-v-59f508e2="" class="">
+        <div data-v-59f508e2="" class="text-center prose dark:prose-invert max-w-full">
+          <p data-v-59f508e2="">You are not part of any group. Do you wish to <a data-v-59f508e2="" href="/groups/create" class="">create a group</a> or <a data-v-59f508e2="" href="/search?contentType=GROUPS" class="">explore the groups</a>?</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</section>"
+`;

tests/unit/specs/components/Group/__snapshots__/SettingsView.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SettingsView > Show simple 1`] = `
+"<div class="container mx-auto" preferredusername="my-group">
+  <h1 class="">Settings</h1>
+  <div class="flex flex-wrap gap-2">
+    <aside class="sm:max-w-xs flex-1 min-w-[320px]">
+      <ul>
+        <setting-menu-section-stub title="Settings" to="[object Object]"></setting-menu-section-stub>
+      </ul>
+    </aside>
+    <div class="flex-1">
+      <router-view-stub name="default"></router-view-stub>
+    </div>
+  </div>
+</div>"
+`;

tests/unit/specs/components/Group/__snapshots__/TimelineView.spec.ts.snap

@@ -0,0 +1,203 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TimelineView > Show simple 1`] = `
+"<div data-v-4ef926d4="" class="container mx-auto section">
+  <!--v-if-->
+  <section data-v-4ef926d4="" class="timeline">
+    <div data-v-4ef926d4="" data-oruga="field" class="o-field">
+      <!---->
+      <div class="o-field__body">
+        <div class="o-field o-field--addons"><label data-v-4ef926d4="" class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input class="pr-4 o-radio__input o-radio__input--checked" type="radio" data-oruga-input="radio" autocomplete="off"><span class="o-radio__label"><span data-v-4ef926d4="" aria-hidden="true" class="material-design-icon timeline-text-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 2V8H2V2H4M2 22H4V16H2V22M5 12C5 10.9 4.11 10 3 10C1.9 10 1 10.9 1 12C1 13.11 1.9 14 3 14C4.11 14 5 13.11 5 12M24 6V18C24 19.11 23.11 20 22 20H10C8.9 20 8 19.11 8 18V14L6 12L8 10V6C8 4.89 8.9 4 10 4H22C23.11 4 24 4.89 24 6M19 13H11V15H19V13M21 9H11V11H21V9Z"><!--v-if--></path></svg></span> All activities</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="MEMBER"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-account-multiple-plus mdi-24px"></i></span> Members</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="GROUP"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-cog mdi-24px"></i></span> Settings</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="EVENT"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-calendar mdi-24px"></i></span> Events</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="POST"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> Posts</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="DISCUSSION"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-chat mdi-24px"></i></span> Discussions</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="RESOURCE"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-link mdi-24px"></i></span> Resources</span></label></div>
+      </div>
+      <!---->
+    </div>
+    <div data-v-4ef926d4="" data-oruga="field" class="o-field">
+      <!---->
+      <div class="o-field__body">
+        <div class="o-field o-field--addons"><label data-v-4ef926d4="" class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input class="pr-4 o-radio__input o-radio__input--checked" type="radio" data-oruga-input="radio" autocomplete="off"><span class="o-radio__label"><span data-v-4ef926d4="" aria-hidden="true" class="material-design-icon timeline-text-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 2V8H2V2H4M2 22H4V16H2V22M5 12C5 10.9 4.11 10 3 10C1.9 10 1 10.9 1 12C1 13.11 1.9 14 3 14C4.11 14 5 13.11 5 12M24 6V18C24 19.11 23.11 20 22 20H10C8.9 20 8 19.11 8 18V14L6 12L8 10V6C8 4.89 8.9 4 10 4H22C23.11 4 24 4.89 24 6M19 13H11V15H19V13M21 9H11V11H21V9Z"><!--v-if--></path></svg></span> All activities</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="SELF"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-account mdi-24px"></i></span> From yourself</span></label><label data-v-4ef926d4="" class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input class="pr-4 o-radio__input" type="radio" data-oruga-input="radio" autocomplete="off" value="BY"><span class="o-radio__label"><span data-v-4ef926d4="" class="o-icon" data-oruga="icon"><i class="mdi mdi-account-multiple mdi-24px"></i></span> By others</span></label></div>
+      </div>
+      <!---->
+    </div>
+    <transition-group-stub data-v-4ef926d4="" name="timeline-list" tag="div" appear="false" persisted="false" css="true">
+      <div data-v-4ef926d4="" class="day">
+        <div data-v-4ef926d4="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+          <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 48px; width: 300px;"></div>
+        </div>
+        <ul data-v-4ef926d4="" class="before:opacity-10">
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div data-v-4ef926d4="" class="day">
+        <div data-v-4ef926d4="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+          <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 48px; width: 300px;"></div>
+        </div>
+        <ul data-v-4ef926d4="" class="before:opacity-10">
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li data-v-4ef926d4="">
+            <div data-v-56a583cf="" data-v-4ef926d4="" class="activity-item"><span data-v-56a583cf=""><div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left"><div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated" style="height: 32px; width: 32px; border-radius: 50%;"></div></div></span>
+              <div data-v-56a583cf="" class="subject">
+                <div data-v-56a583cf="" class="prose dark:prose-invert">
+                  <p data-v-56a583cf="">
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  <div data-v-56a583cf="" data-oruga="skeleton" class="o-sklt o-sklt--left datetime">
+                    <div class="o-sklt__item o-sklt__item--rounded o-sklt__item--animated"></div>
+                  </div>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </transition-group-stub>
+    <!---->
+    <!---->
+    <div data-v-4ef926d4="" class="observer"></div>
+    <!--v-if-->
+  </section>
+</div>"
+`;