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/Group/GroupSection.spec.ts

@@ -0,0 +1,98 @@
+import { config, mount } from "@vue/test-utils";
+import GroupSection from "@/components/Group/GroupSection.vue";
+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";
+
+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";
+const groupUsername = `${groupPreferredUsername}@${groupDomain}`;
+
+const defaultSlotText = "A list of elements";
+const createSlotButtonText = "+ Create a post";
+
+type Props = {
+  title?: string;
+  icon?: string;
+  privateSection?: boolean;
+  route?: { name: string; params: { preferredUsername: string } };
+};
+
+const baseProps: Props = {
+  title: "My group section",
+  icon: "bullhorn",
+  route: {
+    name: RouteName.POSTS,
+    params: {
+      preferredUsername: groupUsername,
+    },
+  },
+};
+
+const generateWrapper = (customProps: Props = {}) => {
+  return mount(GroupSection, {
+    props: { ...baseProps, ...customProps },
+    slots: {
+      default: `<div>${defaultSlotText}</div>`,
+      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();
+
+    expect(wrapper.find("i.mdi").classes(`mdi-${baseProps.icon}`)).toBe(true);
+
+    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(".flex.justify-end.p-2 a").attributes("href")).toBe(
+      `/@${groupUsername}/p/new`
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders public group section", () => {
+    const wrapper = generateWrapper({ privateSection: false });
+
+    // expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+    //   false
+    // );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1
+
+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=\\"flex-1\\">
+    <div>A list of elements</div>
+  </div>
+  <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 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=\\"flex-1\\">
+    <div>A list of elements</div>
+  </div>
+  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+</section>"
+`;