Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/tests/unit/specs/components/Comment/CommentTree.spec.ts

@@ -1,12 +1,10 @@
-import { config, createLocalVue, shallowMount, Wrapper } from "@vue/test-utils";
+import { config, shallowMount, VueWrapper } from "@vue/test-utils";
 import CommentTree from "@/components/Comment/CommentTree.vue";
-import Buefy from "buefy";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
 import {
   COMMENTS_THREADS_WITH_REPLIES,
   CREATE_COMMENT_FROM_EVENT,
@@ -21,10 +19,20 @@ import {
 } from "../../mocks/event";
 import flushPromises from "flush-promises";
 import { defaultResolvers } from "../../common";
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueApollo);
-config.mocks.$t = (key: string): string => key;
+import { afterEach, describe, vi, it, expect, beforeEach } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import Oruga from "@oruga-ui/oruga-next";
+import { notifierPlugin } from "@/plugins/notifier";
+import { InMemoryCache } from "@apollo/client/cache";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import { routes } from "@/router";
+import { dialogPlugin } from "@/plugins/dialog";
+
+config.global.plugins.push(Oruga);
+config.global.plugins.push(notifierPlugin);
+config.global.plugins.push(dialogPlugin);
+
+let router: Router;
 
 const eventData = {
   id: "1",
@@ -34,21 +42,23 @@ const eventData = {
   },
 };
 describe("CommentTree", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper;
   let mockClient: MockApolloClient | null;
-  let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
 
-  const generateWrapper = (handlers = {}, baseData = {}) => {
+  const generateWrapper = (handlers = {}, extraProps = {}) => {
+    const cache = new InMemoryCache({ addTypename: true });
+
     mockClient = createMockClient({
+      cache,
       resolvers: defaultResolvers,
     });
 
     requestHandlers = {
-      eventCommentThreadsQueryHandler: jest
+      eventCommentThreadsQueryHandler: vi
         .fn()
         .mockResolvedValue(eventCommentThreadsMock),
-      createCommentForEventMutationHandler: jest
+      createCommentForEventMutationHandler: vi
         .fn()
         .mockResolvedValue(newCommentForEventResponse),
       ...handlers,
@@ -62,36 +72,39 @@ describe("CommentTree", () => {
       CREATE_COMMENT_FROM_EVENT,
       requestHandlers.createCommentForEventMutationHandler
     );
-    apolloProvider = new VueApollo({
-      defaultClient: mockClient,
-    });
-
     wrapper = shallowMount(CommentTree, {
-      localVue,
-      apolloProvider,
-      propsData: {
+      props: {
         event: { ...eventData },
+        ...extraProps,
       },
-      stubs: ["editor"],
-      data() {
-        return {
-          ...baseData,
-        };
+      global: {
+        provide: {
+          [DefaultApolloClient]: mockClient,
+        },
+        plugins: [router],
       },
     });
   };
 
+  beforeEach(async () => {
+    router = createRouter({
+      history: createWebHistory(),
+      routes: routes,
+    });
+
+    // await router.isReady();
+  });
+
   afterEach(() => {
     mockClient = null;
     requestHandlers = {};
-    apolloProvider = null;
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it("renders a loading comment tree", async () => {
     generateWrapper();
 
-    expect(wrapper.find(".loading").text()).toBe("Loading comments…");
+    expect(wrapper.find("p.text-center").text()).toBe("Loading comments…");
 
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -99,15 +112,14 @@ describe("CommentTree", () => {
   it("renders a comment tree with comments", async () => {
     generateWrapper();
 
-    await flushPromises();
-
     expect(wrapper.exists()).toBe(true);
     expect(
       requestHandlers.eventCommentThreadsQueryHandler
     ).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
-    expect(wrapper.vm.$apollo.queries.comments).toBeTruthy();
-    expect(wrapper.find(".loading").exists()).toBe(false);
-    expect(wrapper.findAll(".comment-list .root-comment").length).toBe(2);
+    await flushPromises();
+    expect(wrapper.find("p.text-center").exists()).toBe(false);
+
+    expect(wrapper.findAllComponents("comment-stub").length).toBe(2);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -117,18 +129,20 @@ describe("CommentTree", () => {
       {
         newComment: {
           text: newCommentForEventMock.text,
+          isAnnouncement: false,
         },
       }
     );
 
     await flushPromises();
 
-    expect(wrapper.find("form.new-comment").isVisible()).toBe(true);
-    expect(wrapper.findAll(".comment-list .root-comment").length).toBe(2);
+    expect(wrapper.find("form").isVisible()).toBe(true);
+    expect(wrapper.findAllComponents("comment-stub").length).toBe(2);
+    wrapper.getComponent({ ref: "commenteditor" });
 
-    wrapper.find("form.new-comment").trigger("submit");
+    wrapper.find("form").trigger("submit");
 
-    await wrapper.vm.$nextTick();
+    await flushPromises();
     expect(
       requestHandlers.createCommentForEventMutationHandler
     ).toHaveBeenCalledWith({
@@ -152,7 +166,7 @@ describe("CommentTree", () => {
 
   it("renders an empty comment tree", async () => {
     generateWrapper({
-      eventCommentThreadsQueryHandler: jest
+      eventCommentThreadsQueryHandler: vi
         .fn()
         .mockResolvedValue(eventNoCommentThreadsMock),
     });
@@ -162,9 +176,7 @@ describe("CommentTree", () => {
       requestHandlers.eventCommentThreadsQueryHandler
     ).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
 
-    expect(wrapper.findComponent({ name: "EmptyContent" }).text()).toBe(
-      "No comments yet"
-    );
+    expect(wrapper.findComponent({ name: "EmptyContent" }).exists());
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap

@@ -1,73 +1,67 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`CommentTree renders a comment tree with comments 1`] = `
-<div>
-  <form class="new-comment">
-    <!---->
-    <article class="media">
-      <figure class="media-left">
-        <identity-picker-wrapper-stub value="[object Object]"></identity-picker-wrapper-stub>
+exports[`CommentTree > renders a comment tree with comments 1`] = `
+"<div data-v-1d76124d=\\"\\">
+  <form class=\\"\\" data-v-1d76124d=\\"\\">
+    <!--v-if-->
+    <article class=\\"flex flex-wrap items-start gap-2\\" data-v-1d76124d=\\"\\">
+      <figure class=\\"\\" data-v-1d76124d=\\"\\">
+        <identity-picker-wrapper-stub modelvalue=\\"[object Object]\\" inline=\\"false\\" masked=\\"false\\" data-v-1d76124d=\\"\\"></identity-picker-wrapper-stub>
       </figure>
-      <div class="media-content">
-        <div class="field">
-          <div class="field">
-            <p class="control">
-              <editor-stub mode="comment" aria-label="Comment body" value=""></editor-stub>
-            </p>
-            <!---->
+      <div class=\\"flex-1\\" data-v-1d76124d=\\"\\">
+        <div class=\\"flex flex-col gap-2\\" data-v-1d76124d=\\"\\">
+          <div class=\\"editor-wrapper\\" data-v-1d76124d=\\"\\">
+            <editor-stub currentactor=\\"[object Object]\\" mode=\\"comment\\" modelvalue=\\"\\" aria-label=\\"Comment body\\" data-v-1d76124d=\\"\\"></editor-stub>
+            <!--v-if-->
           </div>
-          <!---->
+          <!--v-if-->
         </div>
       </div>
-      <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
+      <div class=\\"\\" data-v-1d76124d=\\"\\">
+        <o-button-stub variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\" data-v-1d76124d=\\"\\"></o-button-stub>
       </div>
     </article>
   </form>
-  <transition-group-stub tag="div" name="comment-empty-list">
-    <transition-group-stub tag="ul" name="comment-list" class="comment-list">
-      <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
-      <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
+  <transition-group-stub data-v-1d76124d=\\"\\">
+    <transition-group-stub data-v-1d76124d=\\"\\">
+      <comment-stub comment=\\"[object Object]\\" event=\\"[object Object]\\" currentactor=\\"[object Object]\\" rootcomment=\\"true\\" class=\\"root-comment\\" data-v-1d76124d=\\"\\"></comment-stub>
+      <comment-stub comment=\\"[object Object]\\" event=\\"[object Object]\\" currentactor=\\"[object Object]\\" rootcomment=\\"true\\" class=\\"root-comment\\" data-v-1d76124d=\\"\\"></comment-stub>
     </transition-group-stub>
   </transition-group-stub>
-</div>
+</div>"
 `;
 
-exports[`CommentTree renders a loading comment tree 1`] = `
-<div>
-  <!---->
-  <p class="loading has-text-centered">
-    Loading comments…
-  </p>
-</div>
+exports[`CommentTree > renders a loading comment tree 1`] = `
+"<div data-v-1d76124d=\\"\\">
+  <!--v-if-->
+  <p class=\\"text-center\\" data-v-1d76124d=\\"\\">Loading comments…</p>
+</div>"
 `;
 
-exports[`CommentTree renders an empty comment tree 1`] = `
-<div>
-  <form class="new-comment">
-    <!---->
-    <article class="media">
-      <figure class="media-left">
-        <identity-picker-wrapper-stub value="[object Object]"></identity-picker-wrapper-stub>
+exports[`CommentTree > renders an empty comment tree 1`] = `
+"<div data-v-1d76124d=\\"\\">
+  <form class=\\"\\" data-v-1d76124d=\\"\\">
+    <!--v-if-->
+    <article class=\\"flex flex-wrap items-start gap-2\\" data-v-1d76124d=\\"\\">
+      <figure class=\\"\\" data-v-1d76124d=\\"\\">
+        <identity-picker-wrapper-stub modelvalue=\\"[object Object]\\" inline=\\"false\\" masked=\\"false\\" data-v-1d76124d=\\"\\"></identity-picker-wrapper-stub>
       </figure>
-      <div class="media-content">
-        <div class="field">
-          <div class="field">
-            <p class="control">
-              <editor-stub mode="comment" aria-label="Comment body" value=""></editor-stub>
-            </p>
-            <!---->
+      <div class=\\"flex-1\\" data-v-1d76124d=\\"\\">
+        <div class=\\"flex flex-col gap-2\\" data-v-1d76124d=\\"\\">
+          <div class=\\"editor-wrapper\\" data-v-1d76124d=\\"\\">
+            <editor-stub currentactor=\\"[object Object]\\" mode=\\"comment\\" modelvalue=\\"\\" aria-label=\\"Comment body\\" data-v-1d76124d=\\"\\"></editor-stub>
+            <!--v-if-->
           </div>
-          <!---->
+          <!--v-if-->
         </div>
       </div>
-      <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
+      <div class=\\"\\" data-v-1d76124d=\\"\\">
+        <o-button-stub variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\" data-v-1d76124d=\\"\\"></o-button-stub>
       </div>
     </article>
   </form>
-  <transition-group-stub tag="div" name="comment-empty-list">
-    <empty-content-stub icon="comment" descriptionclasses="" inline="true"><span>No comments yet</span></empty-content-stub>
+  <transition-group-stub data-v-1d76124d=\\"\\">
+    <empty-content-stub icon=\\"comment\\" descriptionclasses=\\"\\" inline=\\"true\\" center=\\"false\\" data-v-1d76124d=\\"\\"></empty-content-stub>
   </transition-group-stub>
-</div>
+</div>"
 `;