hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

correct and complete unit tests in Front-End

Browse Source
This commit is contained in:
Laurent GAY
2025-06-11 18:49:45 +02:00
parent 2fa54e8282
commit 533ecbdbba
67 changed files with 1900 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tests/unit/specs/components/Post/PostListItem.spec.ts
View File

@@ -4,6 +4,8 @@ import { beforeEach, describe, it, expect } from "vitest";
import { enUS } from "date-fns/locale";
import { routes } from "@/router";
import { createRouter, createWebHistory, Router } from "vue-router";
import { DEFAULT_PICTURE } from "@/graphql/config";
import { getMockClient } from "../../mocks/client";
let router: Router;
@@ -30,17 +32,15 @@ const generateWrapper = (
customPostData: Record<string, unknown> = {},
customProps: Record<string, unknown> = {}
) => {
const global_data = getMockClient([DEFAULT_PICTURE]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(PostListItem, {
props: {
post: { ...postData, ...customPostData },
...customProps,
},
global: {
provide: {
dateFnsLocale: enUS,
},
plugins: [router],
},
global: global_data,
});
};

28
tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
View File

@@ -1,11 +1,11 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`PostListItem > renders post list item with basic informations 1`] = `
"<a data-v-6ca7cc69=\\"\\" 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\\">
"<a data-v-6ca7cc69="" 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">
<!--v-if-->
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
<h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
<p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><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 data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
<div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
<h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold" lang="en">My Blog Post</h3>
<p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><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 data-v-6ca7cc69="" dir="auto" class="">Dec 2, 2020</span></p>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -14,25 +14,25 @@ exports[`PostListItem > renders post list item with basic informations 1`] = `
`;
exports[`PostListItem > renders post list item with publisher name 1`] = `
"<a data-v-6ca7cc69=\\"\\" 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\\">
"<a data-v-6ca7cc69="" 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">
<!--v-if-->
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
<h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
<p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><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 data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
<div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
<h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold" lang="en">My Blog Post</h3>
<p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><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 data-v-6ca7cc69="" dir="auto" class="">Dec 2, 2020</span></p>
<!--v-if-->
<p data-v-6ca7cc69=\\"\\" class=\\"flex gap-1\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon account-edit-icon\\" role=\\"img\\"><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 data-v-6ca7cc69=\\"\\" class=\\"\\">An author</b></p>
<p data-v-6ca7cc69="" class="flex gap-1"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon account-edit-icon" role="img"><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 data-v-6ca7cc69="" class="">An author</b></p>
<!--v-if-->
</div>
</a>"
`;
exports[`PostListItem > renders post list item with tags 1`] = `
"<a data-v-6ca7cc69=\\"\\" 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\\">
"<a data-v-6ca7cc69="" 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">
<!--v-if-->
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
<h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
<p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><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 data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><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 data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-violet-title px-2 py-1 bg-purple-3 dark:text-violet-3\\">A tag</span></div>
<div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
<h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold" lang="en">My Blog Post</h3>
<p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><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 data-v-6ca7cc69="" dir="auto" class="">Dec 2, 2020</span></p>
<div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><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 data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">A tag</span></div>
<!--v-if-->
<!--v-if-->
</div>