Migrate to Vue 3 and Vite

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

js/tests/unit/specs/components/Report/ReportCard.spec.ts

@@ -1,18 +1,16 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import ReportCard from "@/components/Report/ReportCard.vue";
-import Buefy from "buefy";
 import { ActorType } from "@/types/enums";
-
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import { describe, expect, it } from "vitest";
+import { createI18n } from "vue-i18n";
+import en from "@/i18n/en_US.json";
 
 const reportData = {
   id: "1",
   content: "My content",
   insertedAt: "2020-12-02T09:01:20.873Z",
   reporter: {
-    preferredUsername: "author",
+    preferredUsername: "John Snow",
     domain: null,
     name: "Reporter of Things",
     type: ActorType.PERSON,
@@ -26,7 +24,6 @@ const reportData = {
 
 const generateWrapper = (customReportData: Record<string, unknown> = {}) => {
   return mount(ReportCard, {
-    localVue,
     propsData: {
       report: { ...reportData, ...customReportData },
     },
@@ -37,16 +34,16 @@ describe("ReportCard", () => {
   it("renders report card with basic informations", () => {
     const wrapper = generateWrapper();
 
-    expect(wrapper.find(".media-content .title").text()).toBe(
+    expect(wrapper.find(".flex.gap-1 div p:first-child").text()).toBe(
       reportData.reported.name
     );
 
-    expect(wrapper.find(".media-content .subtitle").text()).toBe(
+    expect(wrapper.find(".flex.gap-1 div p:nth-child(2)").text()).toBe(
       `@${reportData.reported.preferredUsername}`
     );
 
-    expect(wrapper.find(".is-one-quarter-desktop span").text()).toBe(
-      `Reported by {reporter}`
+    expect(wrapper.find(".reported_by div:first-child").text()).toBe(
+      `Reported by John Snow`
     );
   });
 
@@ -55,8 +52,8 @@ describe("ReportCard", () => {
       reporter: { domain: "somewhere.else", type: ActorType.APPLICATION },
     });
 
-    expect(wrapper.find(".is-one-quarter-desktop span").text()).toBe(
-      "Reported by someone on {domain}"
+    expect(wrapper.find(".reported_by div:first-child").text()).toBe(
+      "Reported by someone on somewhere.else"
     );
   });
 });

js/tests/unit/specs/components/Report/ReportModal.spec.ts

@@ -1,19 +1,18 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import ReportModal from "@/components/Report/ReportModal.vue";
-import Buefy from "buefy";
+import { vi, beforeEach, describe, it, expect } from "vitest";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import Oruga from "@oruga-ui/oruga-next";
+
+config.global.plugins.push(Oruga);
 
 const propsData = {
-  onConfirm: jest.fn(),
+  onConfirm: vi.fn(),
 };
 
 const generateWrapper = (customPropsData: Record<string, unknown> = {}) => {
   return mount(ReportModal, {
-    localVue,
-    propsData: {
+    props: {
       ...propsData,
       ...customPropsData,
     },
@@ -21,24 +20,22 @@ const generateWrapper = (customPropsData: Record<string, unknown> = {}) => {
 };
 
 beforeEach(() => {
-  jest.resetAllMocks();
+  vi.resetAllMocks();
 });
 
 describe("ReportModal", () => {
   it("renders report modal with basic informations and submits it", async () => {
     const wrapper = generateWrapper();
 
-    expect(wrapper.find(".modal-card-head").exists()).toBe(false);
+    expect(wrapper.find("header").exists()).toBe(false);
 
-    expect(wrapper.find(".media-content").text()).not.toContain(
+    expect(wrapper.find("section").text()).not.toContain(
       "The content came from another server. Transfer an anonymous copy of the report?"
     );
 
-    expect(
-      wrapper.find("footer.modal-card-foot button:first-child").text()
-    ).toBe("Cancel");
+    expect(wrapper.find("footer button:first-child").text()).toBe("Cancel");
 
-    const submit = wrapper.find("footer.modal-card-foot button.is-primary");
+    const submit = wrapper.find("footer button.o-btn--primary");
 
     expect(submit.text()).toBe("Send the report");
 
@@ -47,7 +44,7 @@ describe("ReportModal", () => {
 
     submit.trigger("click");
 
-    await localVue.nextTick();
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted().close).toBeTruthy();
 
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
@@ -55,6 +52,7 @@ describe("ReportModal", () => {
       "some comment with my report",
       false
     );
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders report modal and shows an inline comment if it's provided", async () => {
@@ -78,13 +76,13 @@ describe("ReportModal", () => {
   it("renders report modal with with a remote content", async () => {
     const wrapper = generateWrapper({ outsideDomain: "somewhere.else" });
 
-    expect(wrapper.find(".media-content").text()).toContain(
+    expect(wrapper.find(".control p").text()).toContain(
       "The content came from another server. Transfer an anonymous copy of the report?"
     );
 
-    const submit = wrapper.find("footer.modal-card-foot button.is-primary");
+    const submit = wrapper.find("footer button.o-btn--primary");
     submit.trigger("click");
-    await localVue.nextTick();
+    await wrapper.vm.$nextTick();
 
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", false);
@@ -93,16 +91,16 @@ describe("ReportModal", () => {
   it("renders report modal with with a remote content and accept to forward", async () => {
     const wrapper = generateWrapper({ outsideDomain: "somewhere.else" });
 
-    expect(wrapper.find(".media-content").text()).toContain(
+    expect(wrapper.find(".control p").text()).toContain(
       "The content came from another server. Transfer an anonymous copy of the report?"
     );
 
     const switchButton = wrapper.find('input[type="checkbox"]');
-    switchButton.setChecked();
+    switchButton.setValue(true);
 
-    const submit = wrapper.find("footer.modal-card-foot button.is-primary");
+    const submit = wrapper.find("footer button.o-btn--primary");
     submit.trigger("click");
-    await localVue.nextTick();
+    await wrapper.vm.$nextTick();
 
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", true);
@@ -115,16 +113,10 @@ describe("ReportModal", () => {
       confirmText: "report!",
     });
 
-    expect(wrapper.find(".modal-card-head .modal-card-title").text()).toBe(
-      "want to report something?"
-    );
+    expect(wrapper.find("header h2").text()).toBe("want to report something?");
 
-    expect(
-      wrapper.find("footer.modal-card-foot button:first-child").text()
-    ).toBe("nah");
+    expect(wrapper.find("footer button:first-child").text()).toBe("nah");
 
-    expect(
-      wrapper.find("footer.modal-card-foot button.is-primary").text()
-    ).toBe("report!");
+    expect(wrapper.find("footer button.o-btn--primary").text()).toBe("report!");
   });
 });

js/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1
+
+exports[`ReportModal > renders report modal with basic informations and submits it 1`] = `
+"<div class=\\"p-2\\" data-v-8c6db6e4=\\"\\">
+  <!--v-if-->
+  <section data-v-8c6db6e4=\\"\\">
+    <div class=\\"flex gap-1 flex-row mb-3\\" data-v-8c6db6e4=\\"\\"><span class=\\"o-icon o-icon--warning hidden md:block flex-1\\" data-v-8c6db6e4=\\"\\"><i class=\\"mdi mdi-alert 48\\"></i></span>
+      <p data-v-8c6db6e4=\\"\\">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
+    </div>
+    <div class=\\"\\" data-v-8c6db6e4=\\"\\">
+      <!--v-if-->
+      <div class=\\"o-field o-field--filled\\" data-v-8c6db6e4=\\"\\"><label for=\\"additonal-comments\\" class=\\"o-field__label\\">Additional comments</label>
+        <div class=\\"o-ctrl-input\\" data-v-8c6db6e4=\\"\\"><textarea id=\\"additonal-comments\\" class=\\"o-input o-input__textarea\\"></textarea>
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+  </section>
+  <footer class=\\"flex gap-2 py-3\\" data-v-8c6db6e4=\\"\\"><button type=\\"button\\" class=\\"o-btn\\" data-v-8c6db6e4=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Cancel</span>
+      <!--v-if--></span>
+    </button><button type=\\"button\\" class=\\"o-btn o-btn--primary\\" data-v-8c6db6e4=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send the report</span>
+      <!--v-if--></span>
+    </button></footer>
+</div>"
+`;