Migrate to Vue 3 and Vite

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

js/tests/unit/specs/components/Post/PostListItem.spec.ts

@@ -1,20 +1,20 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import PostListItem from "@/components/Post/PostListItem.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
-import { routes } from "@/router";
+import { vi, beforeEach, describe, it, expect } from "vitest";
 import { enUS } from "date-fns/locale";
-import { formatDateTimeString } from "@/filters/datetime";
-import { i18n } from "@/utils/i18n";
+import { routes } from "@/router";
+import { createRouter, createWebHistory, Router } from "vue-router";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-localVue.use((vue) => {
-  vue.prototype.$dateFnsLocale = enUS;
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
 });
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
 
 const postData = {
   id: "1",
@@ -31,15 +31,15 @@ const generateWrapper = (
   customProps: Record<string, unknown> = {}
 ) => {
   return mount(PostListItem, {
-    localVue,
-    router,
-    i18n,
-    propsData: {
+    props: {
       post: { ...postData, ...customPostData },
       ...customProps,
     },
-    filters: {
-      formatDateTimeString,
+    global: {
+      provide: {
+        dateFnsLocale: enUS,
+      },
+      plugins: [router],
     },
   });
 };
@@ -50,15 +50,15 @@ describe("PostListItem", () => {
 
     expect(wrapper.html()).toMatchSnapshot();
 
-    expect(
-      wrapper.find("a.post-minimalist-card-wrapper").attributes("href")
-    ).toBe(`/p/${postData.slug}`);
+    expect(wrapper.find("a.block.bg-white").attributes("href")).toBe(
+      `/p/${postData.slug}`
+    );
 
-    expect(wrapper.find(".post-minimalist-title").text()).toBe(postData.title);
+    expect(wrapper.find("h3").text()).toBe(postData.title);
 
-    expect(wrapper.find(".post-publication-date").text()).toBe("Dec 2, 2020");
+    expect(wrapper.find("p.flex.gap-2").text()).toBe("Dec 2, 2020");
 
-    expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
+    expect(wrapper.find("p.flex.gap-1").exists()).toBeFalsy();
   });
 
   it("renders post list item with tags", () => {
@@ -68,9 +68,11 @@ describe("PostListItem", () => {
 
     expect(wrapper.html()).toMatchSnapshot();
 
-    expect(wrapper.find(".tags").text()).toContain("A tag");
+    expect(wrapper.find("div.flex.flex-wrap.gap-y-0.gap-x-2").text()).toContain(
+      "A tag"
+    );
 
-    expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
+    expect(wrapper.find("p.flex.gap-1").exists()).toBeFalsy();
   });
 
   it("renders post list item with publisher name", () => {
@@ -81,7 +83,7 @@ describe("PostListItem", () => {
 
     expect(wrapper.html()).toMatchSnapshot();
 
-    expect(wrapper.find(".post-publisher").exists()).toBeTruthy();
-    expect(wrapper.find(".post-publisher").text()).toContain("An author");
+    expect(wrapper.find("p.flex.gap-1").exists()).toBeTruthy();
+    expect(wrapper.find("p.flex.gap-1").text()).toContain("An author");
   });
 });

js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap

@@ -1,45 +1,37 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`PostListItem renders post list item with basic informations 1`] = `
-<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
-  <!---->
-  <div class="title-info-wrapper has-text-grey-dark px-1">
-    <h3 lang="en" class="post-minimalist-title">
-      My Blog Post
-    </h3>
-    <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
-    <!---->
-    <!---->
+exports[`PostListItem > renders post list item with basic informations 1`] = `
+"<a href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\" data-v-3b2c1ec0=\\"\\">
+  <!--v-if-->
+  <div class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\" data-v-3b2c1ec0=\\"\\">
+    <h3 class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\" data-v-3b2c1ec0=\\"\\">My Blog Post</h3>
+    <p class=\\"flex gap-2\\" data-v-3b2c1ec0=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\" data-v-3b2c1ec0=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span dir=\\"auto\\" class=\\"\\" data-v-3b2c1ec0=\\"\\">Dec 2, 2020</span></p>
+    <!--v-if-->
+    <!--v-if-->
   </div>
-</a>
+</a>"
 `;
 
-exports[`PostListItem renders post list item with publisher name 1`] = `
-<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
-  <!---->
-  <div class="title-info-wrapper has-text-grey-dark px-1">
-    <h3 lang="en" class="post-minimalist-title">
-      My Blog Post
-    </h3>
-    <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
-    <!---->
-    <p class="post-publisher has-text-grey-dark"><span class="icon"><i class="mdi mdi-account-edit mdi-24px"></i></span> <span>Published by <b class="has-text-weight-medium">An author</b></span></p>
+exports[`PostListItem > renders post list item with publisher name 1`] = `
+"<a href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\" data-v-3b2c1ec0=\\"\\">
+  <!--v-if-->
+  <div class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\" data-v-3b2c1ec0=\\"\\">
+    <h3 class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\" data-v-3b2c1ec0=\\"\\">My Blog Post</h3>
+    <p class=\\"flex gap-2\\" data-v-3b2c1ec0=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\" data-v-3b2c1ec0=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span dir=\\"auto\\" class=\\"\\" data-v-3b2c1ec0=\\"\\">Dec 2, 2020</span></p>
+    <!--v-if-->
+    <p class=\\"flex gap-1\\" data-v-3b2c1ec0=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon account-edit-icon\\" role=\\"img\\" data-v-3b2c1ec0=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z\\"><!--v-if--></path></svg></span>Published by <b class=\\"\\" data-v-3b2c1ec0=\\"\\">An author</b></p>
   </div>
-</a>
+</a>"
 `;
 
-exports[`PostListItem renders post list item with tags 1`] = `
-<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
-  <!---->
-  <div class="title-info-wrapper has-text-grey-dark px-1">
-    <h3 lang="en" class="post-minimalist-title">
-      My Blog Post
-    </h3>
-    <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
-    <div class="tags" style="display: inline;"><span class="icon"><i class="mdi mdi-tag mdi-24px"></i></span> <span class="tag"><!----><span class="">A tag</span>
-      <!----></span>
-    </div>
-    <!---->
+exports[`PostListItem > renders post list item with tags 1`] = `
+"<a href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\" data-v-3b2c1ec0=\\"\\">
+  <!--v-if-->
+  <div class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\" data-v-3b2c1ec0=\\"\\">
+    <h3 class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\" data-v-3b2c1ec0=\\"\\">My Blog Post</h3>
+    <p class=\\"flex gap-2\\" data-v-3b2c1ec0=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\" data-v-3b2c1ec0=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span dir=\\"auto\\" class=\\"\\" data-v-3b2c1ec0=\\"\\">Dec 2, 2020</span></p>
+    <div class=\\"flex flex-wrap gap-y-0 gap-x-2\\" data-v-3b2c1ec0=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\" data-v-3b2c1ec0=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span class=\\"rounded-md my-1 truncate text-sm text-violet-title capitalize px-2 py-1 bg-purple-3 dark:text-violet-3\\" data-v-bb7ceecc=\\"\\" data-v-3b2c1ec0=\\"\\">A tag</span></div>
+    <!--v-if-->
   </div>
-</a>
+</a>"
 `;