update frontend lib : remove histoire (obselete) + update vitest - #1815

2025-10-24 13:00:15 +02:00
parent ffa3e0ebd7
commit d971fd77af
192 changed files with 4767 additions and 5300 deletions
--- a/tests/unit/specs/components/Account/ActorCard.spec.ts
+++ b/tests/unit/specs/components/Account/ActorCard.spec.ts
@@ -0,0 +1,87 @@
+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 } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import ActorCard from "@/components/Account/ActorCard.vue";
+import { reactive, ref } from "vue";
+import { IActor } from "@/types/actor";
+import { ActorType } from "@/types/enums";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const avatarUrl = ref<string>(
+  "https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg"
+);
+
+const stateLocal = reactive<IActor>({
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: null,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+
+const stateRemote = reactive<IActor>({
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  avatar: { url: avatarUrl.value, id: "", name: "", alt: "", metadata: {} },
+  domain: "framapiaf.org",
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+
+const generateWrapper = (props: any) => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(ActorCard, {
+    props: props,
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("ActorCard", () => {
+  it("Show local", async () => {
+    const wrapper = generateWrapper({
+      actor: stateLocal,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+
+  it("Show simple", async () => {
+    const wrapper = generateWrapper({
+      actor: stateRemote,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});
--- a/tests/unit/specs/components/Account/ActorInline.spec.ts
+++ b/tests/unit/specs/components/Account/ActorInline.spec.ts
@@ -0,0 +1,87 @@
+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 } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import ActorInline from "@/components/Account/ActorInline.vue";
+import { reactive, ref } from "vue";
+import { IActor } from "@/types/actor";
+import { ActorType } from "@/types/enums";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const generateWrapper = (props: any) => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(ActorInline, {
+    props: props,
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+const avatarUrl = ref<string>(
+  "https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg"
+);
+
+const stateLocal = reactive<IActor>({
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: null,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+
+const stateRemote = reactive<IActor>({
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  avatar: { url: avatarUrl.value, id: "", name: "", alt: "", metadata: {} },
+  domain: "framapiaf.org",
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+
+describe("ActorInline", () => {
+  it("Show local", async () => {
+    const wrapper = generateWrapper({
+      actor: stateLocal,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+
+  it("Show remote", async () => {
+    const wrapper = generateWrapper({
+      actor: stateRemote,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});
--- a/tests/unit/specs/components/Account/PopoverActorCard.spec.ts
+++ b/tests/unit/specs/components/Account/PopoverActorCard.spec.ts
@@ -0,0 +1,90 @@
+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 PopoverActorCard from "@/components/Account/PopoverActorCard.vue";
+import { ActorType } from "@/types/enums";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const group = {
+  ...baseActor,
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  domain: "mobilizon.fr",
+  avatar: {
+    ...baseActorAvatar,
+    url: "https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg",
+  },
+};
+
+const generateWrapper = (actor: any) => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(PopoverActorCard, {
+    props: {
+      actor: actor,
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+    slots: {
+      default: "<div><b> Popover me !</b></div>",
+    },
+  });
+};
+
+describe("PopoverActorCard", () => {
+  it("Show Person", async () => {
+    const wrapper = generateWrapper(baseActor);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+
+  it("Show Group", async () => {
+    const wrapper = generateWrapper(group);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});
--- a/tests/unit/specs/components/Account/ProfileOnboarding.spec.ts
+++ b/tests/unit/specs/components/Account/ProfileOnboarding.spec.ts
@@ -0,0 +1,63 @@
+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 } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import ProfileOnboarding from "@/components/Account/ProfileOnboarding.vue";
+import { ActorType } from "@/types/enums";
+import { IPerson } from "@/types/actor";
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const baseActor: IPerson = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: null,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const generateWrapper = (props: any) => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(ProfileOnboarding, {
+    props: props,
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("ProfileOnboarding", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper({
+      currentActor: baseActor,
+      instanceName: "Instance name",
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});
--- a/tests/unit/specs/components/Account/snapshots/ActorCard.spec.ts.snap
+++ b/tests/unit/specs/components/Account/snapshots/ActorCard.spec.ts.snap
@@ -0,0 +1,103 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ActorCard > Show local 1`] = `
+"<div data-v-b0ff4ece="" class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center flex-col p-4 shadow-md sm:p-8 pb-10 w-80">
+  <div data-v-b0ff4ece="" class="flex pl-2"><span data-v-b0ff4ece="" class="ltr:-mr-0.5 rtl:-ml-0.5 material-design-icon account-circle-icon ltr:-mr-0.5 rtl:-ml-0.5" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
+  <div data-v-b0ff4ece="" class="text-center overflow-hidden w-full">
+    <h5 data-v-b0ff4ece="" class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2">Thomas Citharel</h5>
+    <p data-v-b0ff4ece="" class="text-gray-500 dark:text-gray-200 truncate"><span data-v-b0ff4ece="" dir="ltr">@tcit</span></p>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div data-v-b0ff4ece="" class="flex pr-2"><a data-v-b0ff4ece="" href="/conversations?newMessage=true&amp;personMentions=tcit" class=""><span data-v-b0ff4ece="" aria-hidden="true" class="material-design-icon email-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+</div>
+<!-- <div
+    class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
+    dir="auto"
+  >
+    <div class="flex-shrink-0">
+      <figure class="w-12 h-12" v-if="actor.avatar">
+        <img
+          class="rounded-lg"
+          :src="actor.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
+      </figure>
+      <o-icon
+        v-else
+        size="large"
+        icon="account-circle"
+        class="ltr:-mr-0.5 rtl:-ml-0.5"
+      />
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
+        {{ displayName(actor) }}
+      </h5>
+      <p class="text-gray-500 truncate" v-if="actor.name">
+        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
+      </p>
+      <div
+        v-if="full"
+        class="line-clamp-3"
+        :class="{ limit: limit }"
+        v-html="actor.summary"
+      />
+    </div>
+  </div> -->"
+`;
+
+exports[`ActorCard > Show simple 1`] = `
+"<div data-v-b0ff4ece="" class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center flex-col p-4 shadow-md sm:p-8 pb-10 w-80">
+  <div data-v-b0ff4ece="" class="flex pl-2">
+    <figure data-v-b0ff4ece="" class="w-12 h-12"><img data-v-b0ff4ece="" class="rounded-full object-cover h-full" src="https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg" alt="" width="48" height="48" loading="lazy"></figure>
+  </div>
+  <div data-v-b0ff4ece="" class="text-center overflow-hidden w-full">
+    <h5 data-v-b0ff4ece="" class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2">Framasoft</h5>
+    <p data-v-b0ff4ece="" class="text-gray-500 dark:text-gray-200 truncate"><span data-v-b0ff4ece="" dir="ltr">@framasoft@framapiaf.org</span></p>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div data-v-b0ff4ece="" class="flex pr-2"><a data-v-b0ff4ece="" href="/conversations?newMessage=true&amp;personMentions=framasoft@framapiaf.org" class=""><span data-v-b0ff4ece="" aria-hidden="true" class="material-design-icon email-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+</div>
+<!-- <div
+    class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
+    dir="auto"
+  >
+    <div class="flex-shrink-0">
+      <figure class="w-12 h-12" v-if="actor.avatar">
+        <img
+          class="rounded-lg"
+          :src="actor.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
+      </figure>
+      <o-icon
+        v-else
+        size="large"
+        icon="account-circle"
+        class="ltr:-mr-0.5 rtl:-ml-0.5"
+      />
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
+        {{ displayName(actor) }}
+      </h5>
+      <p class="text-gray-500 truncate" v-if="actor.name">
+        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
+      </p>
+      <div
+        v-if="full"
+        class="line-clamp-3"
+        :class="{ limit: limit }"
+        v-html="actor.summary"
+      />
+    </div>
+  </div> -->"
+`;
--- a/tests/unit/specs/components/Account/snapshots/ActorInline.spec.ts.snap
+++ b/tests/unit/specs/components/Account/snapshots/ActorInline.spec.ts.snap
@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ActorInline > Show local 1`] = `
+"<div data-v-397a2c1c="" class="inline-flex items-start gap-2 bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md">
+  <div data-v-397a2c1c="" class="flex-none"><span data-v-397a2c1c="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="36" height="36" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
+  <div data-v-397a2c1c="" class="flex-auto">
+    <p data-v-397a2c1c="" class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">Thomas Citharel</p>
+    <p data-v-397a2c1c="" class="text-sm text-gray-500 dark:text-gray-300 truncate"> @tcit</p>
+  </div>
+</div>"
+`;
+
+exports[`ActorInline > Show remote 1`] = `
+"<div data-v-397a2c1c="" class="inline-flex items-start gap-2 bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md">
+  <div data-v-397a2c1c="" class="flex-none">
+    <figure data-v-397a2c1c=""><img data-v-397a2c1c="" class="rounded-xl" src="https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg" alt="" width="36" height="36" loading="lazy"></figure>
+  </div>
+  <div data-v-397a2c1c="" class="flex-auto">
+    <p data-v-397a2c1c="" class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">Framasoft</p>
+    <p data-v-397a2c1c="" class="text-sm text-gray-500 dark:text-gray-300 truncate"> @framasoft@framapiaf.org</p>
+  </div>
+</div>"
+`;
--- a/tests/unit/specs/components/Account/snapshots/PopoverActorCard.spec.ts.snap
+++ b/tests/unit/specs/components/Account/snapshots/PopoverActorCard.spec.ts.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PopoverActorCard > Show Group 1`] = `
+"<vmenu distance="16" triggers="hover" class="popover">
+  <div><b> Popover me !</b></div>
+</vmenu>"
+`;
+
+exports[`PopoverActorCard > Show Person 1`] = `
+"<vmenu distance="16" triggers="hover" class="popover">
+  <div><b> Popover me !</b></div>
+</vmenu>"
+`;
--- a/tests/unit/specs/components/Account/snapshots/ProfileOnboarding.spec.ts.snap
+++ b/tests/unit/specs/components/Account/snapshots/ProfileOnboarding.spec.ts.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProfileOnboarding > Show simple 1`] = `
+"<div class="">
+  <h2 class="text-2xl">Profiles and federation</h2>
+</div>
+<p class="my-2">Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want.</p>
+<hr role="presentation">
+<p class="my-2"><span>Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere.</span>This instance, <b>Instance name (localhost)</b>, hosts your profile, so remember its name.</p>
+<hr role="presentation">
+<p class="my-2">If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:</p>
+<div class="text-center"><code>tcit@localhost</code></div>"
+`;