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

tests/unit/specs/components/Discussion/DiscussionComment.spec.ts

@@ -0,0 +1,96 @@
+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 DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
+import { IPerson } from "@/types/actor";
+import { IComment } from "@/types/comment.model";
+import { ActorType } from "@/types/enums";
+import { reactive } from "vue";
+
+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: IPerson = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+  id: "598",
+};
+
+const comment = reactive<IComment>({
+  text: "Hello there",
+  publishedAt: new Date().toString(),
+  actor: baseActor,
+});
+
+const deletedComment = reactive<IComment>({
+  ...comment,
+  actor: null,
+  deletedAt: new Date().toString(),
+});
+
+const generateWrapper = (props: any) => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(DiscussionComment, {
+    props: props,
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("DiscussionComment", () => {
+  it("Show Basic", async () => {
+    const wrapper = generateWrapper({
+      modelValue: comment,
+      currentActor: baseActor,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+
+  it("Show Deleted comment", async () => {
+    const wrapper = generateWrapper({
+      modelValue: deletedComment,
+      currentActor: baseActor,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});

tests/unit/specs/components/Discussion/DiscussionListItem.spec.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from "vitest";
+import { enUS } from "date-fns/locale";
+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 DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
+import { IDiscussion } from "@/types/discussions";
+import { reactive } from "vue";
+
+config.global.plugins.push(Oruga);
+
+const generateWrapper = (props: any) => {
+  const global_data = getMockClient([]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [];
+  return mount(DiscussionListItem, {
+    props: props,
+    global: {
+      ...global_data,
+    },
+  });
+};
+
+const mockdiscussion = reactive<IDiscussion>({
+  title: "A discussion",
+  comments: { total: 5, elements: [] },
+  insertedAt: "2022-02-02T02:04:00.000Z",
+  updatedAt: "2022-02-04T02:04:00.000Z",
+  deletedAt: null,
+  lastComment: { text: "Hello there", publishedAt: new Date().toString() },
+});
+
+const mockdiscussionWithDeletedComment = reactive<IDiscussion>({
+  ...mockdiscussion,
+  lastComment: {
+    ...mockdiscussion.lastComment,
+    deletedAt: "2022-02-06T02:04:00.000Z",
+  },
+});
+
+describe("DiscussionListItem", () => {
+  it("Show Basic", async () => {
+    const wrapper = generateWrapper({
+      discussion: mockdiscussion,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+  it("Show Deleted comment", async () => {
+    const wrapper = generateWrapper({
+      discussion: mockdiscussion,
+    });
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+  });
+});

tests/unit/specs/components/Discussion/__snapshots__/DiscussionComment.spec.ts.snap

@@ -0,0 +1,130 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DiscussionComment > Show Basic 1`] = `
+"<article data-v-49696bef="" class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2">
+  <div data-v-49696bef="" class="">
+    <figure data-v-49696bef="" class=""><img data-v-49696bef="" class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="48" height="48"></figure>
+  </div>
+  <div data-v-49696bef="" class="mb-2 pt-1 flex-1">
+    <div data-v-49696bef="" class="flex items-center gap-1" dir="auto">
+      <div data-v-49696bef="" class="flex flex-1 flex-col"><strong data-v-49696bef="">Thomas Citharel</strong><small data-v-49696bef="">@tcit</small></div><span data-v-49696bef="" class="icons"><div data-v-49696bef="" data-oruga="dropdown" class="o-drop o-drop--position-bottom-left"><div tabindex="0" class="o-drop__trigger" aria-haspopup="true"><span data-v-49696bef="" class="cursor-pointer material-design-icon dots-horizontal-icon cursor-pointer" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"><!--v-if--></path></svg></span>
+    </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 class="o-drop__menu o-drop__menu--bottom-left" role="list" aria-hidden="true" aria-modal="true" style="display: none;">
+        <div data-v-49696bef="" class="o-drop__item o-drop__item--clickable" role="menuitem" tabindex="0" data-oruga="dropdown-item"><span data-v-49696bef="" class="o-icon" data-oruga="icon"><i class="mdi mdi-pencil mdi-24px"></i></span> Edit</div>
+        <div data-v-49696bef="" class="o-drop__item o-drop__item--clickable" role="menuitem" tabindex="0" data-oruga="dropdown-item"><span data-v-49696bef="" class="o-icon" data-oruga="icon"><i class="mdi mdi-delete mdi-24px"></i></span> Delete</div>
+        <!--v-if-->
+      </div>
+    </transition-stub>
+    <!--teleport end-->
+  </div></span>
+  <div data-v-49696bef="" class="self-center">
+    <!--v-if-->
+  </div>
+  </div>
+  <div data-v-49696bef="" class="text-wrapper" dir="auto">
+    <div data-v-49696bef="" class="prose md:prose-lg lg:prose-xl dark:prose-invert">Hello there</div>
+    <!--v-if-->
+  </div>
+  </div>
+</article>
+<!--teleport start-->
+<transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+  <div has-modal-card="" close-button-aria-label="Close" data-oruga="modal" class="o-modal" tabindex="-1" aria-modal="false" style="display: none;">
+    <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+    <div class="o-modal__content" style="max-width: 960px;">
+      <div data-v-e0cceef3="" data-v-49696bef="" class="p-2">
+        <header data-v-e0cceef3="" class="mb-3">
+          <h2 data-v-e0cceef3="" class="text-2xl">Report this comment</h2>
+        </header>
+        <section data-v-e0cceef3="">
+          <div data-v-e0cceef3="" class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center"><span data-v-e0cceef3="" class="o-icon o-icon--warning hidden md:block flex-1" data-oruga="icon"><i class="mdi mdi-alert 48"></i></span>
+            <p data-v-e0cceef3="">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
+          </div>
+          <div data-v-e0cceef3="">
+            <!--v-if-->
+            <div data-v-e0cceef3="" data-oruga="field" class="o-field"><label for="additional-comments" class="o-field__label">Additional comments</label>
+              <div class="o-field__body">
+                <div class="o-field o-field--addons">
+                  <div data-v-e0cceef3="" data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><textarea autofocus="" id="additional-comments" data-oruga-input="textarea" class="o-input o-input__textarea"></textarea>
+                    <!---->
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+              </div>
+              <!---->
+            </div>
+            <!--v-if-->
+          </div>
+        </section>
+        <footer data-v-e0cceef3="" class="flex gap-2 py-3"><button data-v-e0cceef3="" type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Cancel</span>
+            <!----></span>
+          </button><button data-v-e0cceef3="" type="button" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Send the report</span>
+            <!----></span>
+          </button></footer>
+      </div><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+    </div>
+  </div>
+</transition-stub>
+<!--teleport end-->"
+`;
+
+exports[`DiscussionComment > Show Deleted comment 1`] = `
+"<article data-v-49696bef="" class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2">
+  <div data-v-49696bef="" class=""><span data-v-49696bef="" aria-hidden="true" class="material-design-icon account-circle-icon" 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-49696bef="" class="mb-2 pt-1 flex-1">
+    <div data-v-49696bef="" class="flex items-center gap-1" dir="auto"><span data-v-49696bef="" class="name comment-link has-text-grey">[deleted]</span>
+      <!--v-if-->
+      <div data-v-49696bef="" class="self-center">
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-v-49696bef="" class="comment-deleted">[This comment has been deleted by it's author]</div>
+  </div>
+</article>
+<!--teleport start-->
+<transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+  <div has-modal-card="" close-button-aria-label="Close" data-oruga="modal" class="o-modal" tabindex="-1" aria-modal="false" style="display: none;">
+    <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+    <div class="o-modal__content" style="max-width: 960px;">
+      <div data-v-e0cceef3="" data-v-49696bef="" class="p-2">
+        <header data-v-e0cceef3="" class="mb-3">
+          <h2 data-v-e0cceef3="" class="text-2xl">Report this comment</h2>
+        </header>
+        <section data-v-e0cceef3="">
+          <div data-v-e0cceef3="" class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center"><span data-v-e0cceef3="" class="o-icon o-icon--warning hidden md:block flex-1" data-oruga="icon"><i class="mdi mdi-alert 48"></i></span>
+            <p data-v-e0cceef3="">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
+          </div>
+          <div data-v-e0cceef3="">
+            <!--v-if-->
+            <div data-v-e0cceef3="" data-oruga="field" class="o-field"><label for="additional-comments" class="o-field__label">Additional comments</label>
+              <div class="o-field__body">
+                <div class="o-field o-field--addons">
+                  <div data-v-e0cceef3="" data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><textarea autofocus="" id="additional-comments" data-oruga-input="textarea" class="o-input o-input__textarea"></textarea>
+                    <!---->
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+              </div>
+              <!---->
+            </div>
+            <!--v-if-->
+          </div>
+        </section>
+        <footer data-v-e0cceef3="" class="flex gap-2 py-3"><button data-v-e0cceef3="" type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Cancel</span>
+            <!----></span>
+          </button><button data-v-e0cceef3="" type="button" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Send the report</span>
+            <!----></span>
+          </button></footer>
+      </div><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+    </div>
+  </div>
+</transition-stub>
+<!--teleport end-->"
+`;

tests/unit/specs/components/Discussion/__snapshots__/DiscussionListItem.spec.ts.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DiscussionListItem > Show Basic 1`] = `
+"<router-link class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent" dir="auto" to="[object Object]">
+  <div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="32" height="32" 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 class="flex-1">
+    <div class="flex items-center">
+      <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">A discussion</p><span class="" title="Friday, February 4, 2022 at 3:04 AM">2 days</span>
+    </div>
+    <div class="line-clamp-2" dir="auto"></div>
+  </div>
+</router-link>"
+`;
+
+exports[`DiscussionListItem > Show Deleted comment 1`] = `
+"<router-link class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent" dir="auto" to="[object Object]">
+  <div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="32" height="32" 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 class="flex-1">
+    <div class="flex items-center">
+      <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">A discussion</p><span class="" title="Friday, February 4, 2022 at 3:04 AM">2 days</span>
+    </div>
+    <div class="line-clamp-2" dir="auto"></div>
+  </div>
+</router-link>"
+`;