build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

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

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

@@ -0,0 +1,57 @@
+import { mount } from "@vue/test-utils";
+import ReportCard from "@/components/Report/ReportCard.vue";
+import { ActorType } from "@/types/enums";
+import { describe, expect, it } from "vitest";
+
+const reportData = {
+  id: "1",
+  content: "My content",
+  insertedAt: "2020-12-02T09:01:20.873Z",
+  reporter: {
+    preferredUsername: "John Snow",
+    domain: null,
+    name: "Reporter of Things",
+    type: ActorType.PERSON,
+  },
+  reported: {
+    preferredUsername: "my-awesome-group",
+    domain: null,
+    name: "My Awesome Group",
+  },
+};
+
+const generateWrapper = (customReportData: Record<string, unknown> = {}) => {
+  return mount(ReportCard, {
+    propsData: {
+      report: { ...reportData, ...customReportData },
+    },
+  });
+};
+
+describe("ReportCard", () => {
+  it("renders report card with basic informations", () => {
+    const wrapper = generateWrapper();
+
+    expect(wrapper.find(".flex.gap-1 div p:first-child").text()).toBe(
+      reportData.reported.name
+    );
+
+    expect(wrapper.find(".flex.gap-1 div p:nth-child(2)").text()).toBe(
+      `@${reportData.reported.preferredUsername}`
+    );
+
+    expect(wrapper.find(".reported_by div:first-child").text()).toBe(
+      `Reported by John Snow`
+    );
+  });
+
+  it("renders report card with with a remote reporter", () => {
+    const wrapper = generateWrapper({
+      reporter: { domain: "somewhere.else", type: ActorType.APPLICATION },
+    });
+
+    expect(wrapper.find(".reported_by div:first-child").text()).toBe(
+      "Reported by someone on somewhere.else"
+    );
+  });
+});

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

@@ -0,0 +1,122 @@
+import { config, mount } from "@vue/test-utils";
+import ReportModal from "@/components/Report/ReportModal.vue";
+import { vi, beforeEach, describe, it, expect } from "vitest";
+
+import Oruga from "@oruga-ui/oruga-next";
+
+config.global.plugins.push(Oruga);
+
+const propsData = {
+  onConfirm: vi.fn(),
+};
+
+const generateWrapper = (customPropsData: Record<string, unknown> = {}) => {
+  return mount(ReportModal, {
+    props: {
+      ...propsData,
+      ...customPropsData,
+    },
+  });
+};
+
+beforeEach(() => {
+  vi.resetAllMocks();
+});
+
+describe("ReportModal", () => {
+  it("renders report modal with basic informations and submits it", async () => {
+    const wrapper = generateWrapper();
+
+    expect(wrapper.find("header").exists()).toBe(false);
+
+    expect(wrapper.find("section").text()).not.toContain(
+      "The content came from another server. Transfer an anonymous copy of the report?"
+    );
+
+    expect(wrapper.find("footer button:first-child").text()).toBe("Cancel");
+
+    const submit = wrapper.find("footer button.o-btn--primary");
+
+    expect(submit.text()).toBe("Send the report");
+
+    const textarea = wrapper.find("textarea");
+    textarea.setValue("some comment with my report");
+
+    submit.trigger("click");
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().close).toBeTruthy();
+
+    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith(
+      "some comment with my report",
+      false
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders report modal and shows an inline comment if it's provided", async () => {
+    const wrapper = generateWrapper({
+      comment: {
+        actor: { preferredUsername: "author", name: "I am the comment author" },
+        text: "this is my <b>comment</b> that will be reported",
+      },
+    });
+
+    const commentContainer = wrapper.find("article");
+    expect(commentContainer.find("strong").text()).toContain(
+      "I am the comment author"
+    );
+    expect(commentContainer.find("small").text()).toContain("author");
+    expect(commentContainer.find("p").html()).toContain(
+      "this is my <b>comment</b> that will be reported"
+    );
+  });
+
+  it("renders report modal with with a remote content", async () => {
+    const wrapper = generateWrapper({ outsideDomain: "somewhere.else" });
+
+    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 button.o-btn--primary");
+    submit.trigger("click");
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", false);
+  });
+
+  it("renders report modal with with a remote content and accept to forward", async () => {
+    const wrapper = generateWrapper({ outsideDomain: "somewhere.else" });
+
+    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.setValue(true);
+
+    const submit = wrapper.find("footer button.o-btn--primary");
+    submit.trigger("click");
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", true);
+  });
+
+  it("renders report modal custom title and buttons", async () => {
+    const wrapper = generateWrapper({
+      title: "want to report something?",
+      cancelText: "nah",
+      confirmText: "report!",
+    });
+
+    expect(wrapper.find("header h2").text()).toBe("want to report something?");
+
+    expect(wrapper.find("footer button:first-child").text()).toBe("nah");
+
+    expect(wrapper.find("footer button.o-btn--primary").text()).toBe("report!");
+  });
+});

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-e0cceef3=\\"\\">
+  <!--v-if-->
+  <section data-v-e0cceef3=\\"\\">
+    <div class=\\"flex gap-1 flex-row mb-3\\" data-v-e0cceef3=\\"\\"><span class=\\"o-icon o-icon--warning hidden md:block flex-1\\" data-v-e0cceef3=\\"\\"><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 class=\\"\\" data-v-e0cceef3=\\"\\">
+      <!--v-if-->
+      <div class=\\"o-field o-field--filled\\" data-v-e0cceef3=\\"\\"><label for=\\"additional-comments\\" class=\\"o-field__label\\">Additional comments</label>
+        <div class=\\"o-ctrl-input\\" data-v-e0cceef3=\\"\\"><textarea id=\\"additional-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-e0cceef3=\\"\\"><button type=\\"button\\" class=\\"o-btn o-btn--outlined\\" data-v-e0cceef3=\\"\\"><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-e0cceef3=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send the report</span>
+      <!--v-if--></span>
+    </button></footer>
+</div>"
+`;