Migrate to Vue 3 and Vite

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

js/tests/unit/specs/components/Group/GroupSection.spec.ts

@@ -1,15 +1,23 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import GroupSection from "@/components/Group/GroupSection.vue";
-import Buefy from "buefy";
-import VueRouter, { Location } from "vue-router";
 import RouteName from "@/router/name";
 import { routes } from "@/router";
+import { describe, it, expect, beforeEach } from "vitest";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import Oruga from "@oruga-ui/oruga-next";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
 
 const groupPreferredUsername = "my_group";
 const groupDomain = "remotedomain.net";
@@ -22,7 +30,7 @@ type Props = {
   title?: string;
   icon?: string;
   privateSection?: boolean;
-  route?: Location;
+  route?: { name: string; params: { preferredUsername: string } };
 };
 
 const baseProps: Props = {
@@ -38,47 +46,42 @@ const baseProps: Props = {
 
 const generateWrapper = (customProps: Props = {}) => {
   return mount(GroupSection, {
-    localVue,
-    router,
-    propsData: { ...baseProps, ...customProps },
+    props: { ...baseProps, ...customProps },
     slots: {
       default: `<div>${defaultSlotText}</div>`,
-      create: `<router-link :to="{
-                name: 'POST_CREATE',
-                params: { preferredUsername: '${groupUsername}' },
-              }"
-              class="button is-primary"
-              >{{ $t("${createSlotButtonText}") }}</router-link
-            >`,
+      create: `<router-link :to="{ 
+        name: 'POST_CREATE',
+        params: {
+          preferredUsername: '${groupUsername}'
+        }
+      }"
+      class="btn-primary">${createSlotButtonText}</router-link>`,
+    },
+    global: {
+      plugins: [router],
     },
   });
 };
 
 describe("GroupSection", () => {
   it("renders group section with basic informations", () => {
-    const wrapper = generateWrapper({});
+    const wrapper = generateWrapper();
 
-    expect(
-      wrapper
-        .find(".group-section-title h2 span.icon i")
-        .classes(`mdi-${baseProps.icon}`)
-    ).toBe(true);
+    expect(wrapper.find("i.mdi").classes(`mdi-${baseProps.icon}`)).toBe(true);
 
-    expect(wrapper.find(".group-section-title h2 span:last-child").text()).toBe(
-      baseProps.title
+    expect(wrapper.find("h2").text()).toBe(baseProps.title);
+
+    expect(wrapper.find("a").attributes("href")).toBe(`/@${groupUsername}/p`);
+
+    // expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+    //   true
+    // );
+
+    expect(wrapper.find("section > div.flex-1").text()).toBe(defaultSlotText);
+    expect(wrapper.find(".flex.justify-end.p-2 a").text()).toBe(
+      createSlotButtonText
     );
-
-    expect(wrapper.find(".group-section-title a").attributes("href")).toBe(
-      `/@${groupUsername}/p`
-    );
-
-    expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
-      true
-    );
-
-    expect(wrapper.find(".main-slot div").text()).toBe(defaultSlotText);
-    expect(wrapper.find(".create-slot a").text()).toBe(createSlotButtonText);
-    expect(wrapper.find(".create-slot a").attributes("href")).toBe(
+    expect(wrapper.find(".flex.justify-end.p-2 a").attributes("href")).toBe(
       `/@${groupUsername}/p/new`
     );
     expect(wrapper.html()).toMatchSnapshot();
@@ -87,9 +90,9 @@ describe("GroupSection", () => {
   it("renders public group section", () => {
     const wrapper = generateWrapper({ privateSection: false });
 
-    expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
-      false
-    );
+    // expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+    //   false
+    // );
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap

@@ -1,25 +1,29 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`GroupSection renders group section with basic informations 1`] = `
-<section>
-  <div class="group-section-title privateSection">
-    <h2><span class="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> <span>My group section</span></h2> <a href="/@my_group@remotedomain.net/p" class="">View all</a>
+exports[`GroupSection > renders group section with basic informations 1`] = `
+"<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+    <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
+      <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
+    </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
   </div>
-  <div class="main-slot">
+  <div class=\\"flex-1\\">
     <div>A list of elements</div>
   </div>
-  <div class="create-slot"><a href="/@my_group@remotedomain.net/p/new" class="button is-primary">+ Create a post</a></div>
-</section>
+  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+</section>"
 `;
 
-exports[`GroupSection renders public group section 1`] = `
-<section>
-  <div class="group-section-title">
-    <h2><span class="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> <span>My group section</span></h2> <a href="/@my_group@remotedomain.net/p" class="">View all</a>
+exports[`GroupSection > renders public group section 1`] = `
+"<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+    <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
+      <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
+    </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
   </div>
-  <div class="main-slot">
+  <div class=\\"flex-1\\">
     <div>A list of elements</div>
   </div>
-  <div class="create-slot"><a href="/@my_group@remotedomain.net/p/new" class="button is-primary">+ Create a post</a></div>
-</section>
+  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+</section>"
 `;