[feature] Add Unit Tests for: partials and more

.github/workflows/test.yml

@@ -2,10 +2,11 @@ name: Unit Tests
 
 on:
     pull_request:
-        types: [opened, reopened, ready_for_review, synchronize]
+        types: [opened, reopened, ready_for_review, synchronize, labeled]
 
 jobs:
     vitest:
+        if: ${{ github.event.pull_request.draft == false || contains(github.event.pull_request.labels.*.name, 'testing') }}
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4

package.json

@@ -29,9 +29,12 @@
 		"@types/node": "^22.14.1",
 		"@typescript-eslint/eslint-plugin": "^8.38.0",
 		"@typescript-eslint/parser": "^8.38.0",
-		"@vitejs/plugin-vue": "^5.2.1",
-		"@vitest/coverage-v8": "^3.2.0",
-		"eslint": "^9.31.0",
+        "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^3.2.0",
+    "@faker-js/faker": "^8.4.0",
+    "jsdom": "^24.0.0",
+    "@vue/test-utils": "^2.4.1",
+    "eslint": "^9.31.0",
 		"eslint-config-prettier": "^10.1.2",
 		"eslint-plugin-vue": "^10.3.0",
 		"globals": "^16.3.0",

tests/pages/AboutPage.test.ts

@@ -0,0 +1,69 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { describe, it, expect, vi } from 'vitest';
+import AboutPage from '@pages/AboutPage.vue';
+import type { ProfileResponse, ProfileSkillResponse } from '@api/response/index.ts';
+
+const skills: ProfileSkillResponse[] = [
+    {
+        uuid: faker.string.uuid(),
+        percentage: faker.number.int({ min: 1, max: 100 }),
+        item: faker.lorem.word(),
+        description: faker.lorem.sentence(),
+    },
+];
+
+const profile: ProfileResponse = {
+    nickname: faker.word.words(1).toLowerCase(),
+    handle: faker.internet.userName(),
+    name: faker.person.fullName(),
+    email: faker.internet.email(),
+    profession: faker.person.jobTitle(),
+    skills,
+};
+
+const getProfile = vi.fn<[], Promise<{ data: ProfileResponse }>>(() =>
+    Promise.resolve({ data: profile })
+);
+
+vi.mock('@api/store.ts', () => ({ useApiStore: () => ({ getProfile }) }));
+vi.mock('@api/http-error.ts', () => ({ debugError: vi.fn() }));
+
+describe('AboutPage', () => {
+    it('shows formatted nickname', async () => {
+        const wrapper = mount(AboutPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    WidgetSocialPartial: true,
+                    WidgetSkillsPartial: true,
+                    FooterPartial: true,
+                },
+            },
+        });
+        await flushPromises();
+        const formatted = profile.nickname.charAt(0).toUpperCase() + profile.nickname.slice(1);
+        expect(getProfile).toHaveBeenCalled();
+        expect(wrapper.find('h1').text()).toContain(formatted);
+    });
+
+    it('handles profile errors gracefully', async () => {
+        const error = new Error('fail');
+        getProfile.mockRejectedValueOnce(error);
+        const wrapper = mount(AboutPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    WidgetSocialPartial: true,
+                    WidgetSkillsPartial: true,
+                    FooterPartial: true,
+                },
+            },
+        });
+        await flushPromises();
+        const { debugError } = await import('@api/http-error.ts');
+        expect(debugError).toHaveBeenCalledWith(error);
+    });
+});

tests/pages/HomePage.test.ts

@@ -0,0 +1,76 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { describe, it, expect, vi } from 'vitest';
+import HomePage from '@pages/HomePage.vue';
+import type { ProfileResponse, ProfileSkillResponse } from '@api/response/index.ts';
+
+const skills: ProfileSkillResponse[] = [
+    {
+        uuid: faker.string.uuid(),
+        percentage: faker.number.int({ min: 1, max: 100 }),
+        item: faker.lorem.word(),
+        description: faker.lorem.sentence(),
+    },
+];
+
+const profile: ProfileResponse = {
+    nickname: faker.person.firstName(),
+    handle: faker.internet.userName(),
+    name: faker.person.fullName(),
+    email: faker.internet.email(),
+    profession: faker.person.jobTitle(),
+    skills,
+};
+
+const getProfile = vi.fn<[], Promise<{ data: ProfileResponse }>>(() =>
+    Promise.resolve({ data: profile })
+);
+
+vi.mock('@api/store.ts', () => ({ useApiStore: () => ({ getProfile }) }));
+vi.mock('@api/http-error.ts', () => ({ debugError: vi.fn() }));
+
+describe('HomePage', () => {
+    it('loads profile on mount', async () => {
+        const wrapper = mount(HomePage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    HeroPartial: true,
+                    FooterPartial: true,
+                    ArticlesListPartial: true,
+                    FeaturedProjectsPartial: true,
+                    TalksPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: { template: '<div class="skills" />', props: ['skills'] },
+                },
+            },
+        });
+        await flushPromises();
+        expect(getProfile).toHaveBeenCalledTimes(1);
+        expect(wrapper.find('.skills').exists()).toBe(true);
+    });
+
+    it('handles profile load errors', async () => {
+        const error = new Error('oops');
+        getProfile.mockRejectedValueOnce(error);
+        const wrapper = mount(HomePage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    HeroPartial: true,
+                    FooterPartial: true,
+                    ArticlesListPartial: true,
+                    FeaturedProjectsPartial: true,
+                    TalksPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: true,
+                },
+            },
+        });
+        await flushPromises();
+        const { debugError } = await import('@api/http-error.ts');
+        expect(debugError).toHaveBeenCalledWith(error);
+    });
+});

tests/pages/PostPage.test.ts

@@ -0,0 +1,101 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { describe, it, expect, vi } from 'vitest';
+import { ref } from 'vue';
+import PostPage from '@pages/PostPage.vue';
+import type { PostResponse } from '@api/response/index.ts';
+
+const post: PostResponse = {
+    uuid: faker.string.uuid(),
+    slug: faker.lorem.slug(),
+    title: faker.lorem.words(2),
+    excerpt: faker.lorem.sentence(),
+    content: faker.lorem.paragraph(),
+    cover_image_url: faker.image.url(),
+    published_at: faker.date.past().toISOString(),
+    created_at: faker.date.past().toISOString(),
+    updated_at: faker.date.recent().toISOString(),
+    author: {
+        uuid: faker.string.uuid(),
+        first_name: faker.person.firstName(),
+        last_name: faker.person.lastName(),
+        username: faker.internet.userName(),
+        display_name: faker.person.fullName(),
+        bio: faker.lorem.sentence(),
+        picture_file_name: faker.system.fileName(),
+        profile_picture_url: faker.image.avatar(),
+    },
+    categories: [],
+    tags: [],
+};
+
+const getPost = vi.fn<[], Promise<PostResponse>>(() => Promise.resolve(post));
+
+vi.mock('@api/store.ts', () => ({ useApiStore: () => ({ getPost }) }));
+vi.mock('vue-router', () => ({ useRoute: () => ({ params: { slug: post.slug } }) }));
+vi.mock('marked', () => ({ marked: { use: vi.fn(), parse: vi.fn(() => '<p></p>') } }));
+vi.mock('dompurify', () => ({ default: { sanitize: vi.fn((html: string) => html) } }));
+vi.mock('highlight.js', () => ({ default: { highlightElement: vi.fn() } }));
+vi.mock('@/dark-mode.ts', () => ({ useDarkMode: () => ({ isDark: ref(false) }) }));
+vi.mock('@api/http-error.ts', () => ({ debugError: vi.fn() }));
+
+describe('PostPage', () => {
+    it('fetches post on mount', async () => {
+        const wrapper = mount(PostPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    FooterPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: true,
+                    RouterLink: { template: '<a><slot /></a>' },
+                },
+            },
+        });
+        await flushPromises();
+        expect(getPost).toHaveBeenCalledWith(post.slug);
+        expect(wrapper.text()).toContain(post.title);
+    });
+
+    it('processes markdown content', async () => {
+        const { marked } = await import('marked');
+        const DOMPurify = await import('dompurify');
+        const wrapper = mount(PostPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    FooterPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: true,
+                    RouterLink: { template: '<a><slot /></a>' },
+                },
+            },
+        });
+        await flushPromises();
+        expect(marked.parse).toHaveBeenCalledWith(post.content);
+        expect(DOMPurify.default.sanitize).toHaveBeenCalled();
+        expect(wrapper.html()).toContain('<p></p>');
+    });
+
+    it('handles post errors gracefully', async () => {
+        const error = new Error('fail');
+        getPost.mockRejectedValueOnce(error);
+        const wrapper = mount(PostPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    FooterPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: true,
+                    RouterLink: { template: '<a><slot /></a>' },
+                },
+            },
+        });
+        await flushPromises();
+        const { debugError } = await import('@api/http-error.ts');
+        expect(debugError).toHaveBeenCalledWith(error);
+    });
+});

tests/pages/ProjectsPage.test.ts

@@ -0,0 +1,90 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { describe, it, expect, vi } from 'vitest';
+import ProjectsPage from '@pages/ProjectsPage.vue';
+import type { ProfileResponse, ProfileSkillResponse, ProjectsResponse } from '@api/response/index.ts';
+
+const skills: ProfileSkillResponse[] = [
+    {
+        uuid: faker.string.uuid(),
+        percentage: faker.number.int({ min: 1, max: 100 }),
+        item: faker.lorem.word(),
+        description: faker.lorem.sentence(),
+    },
+];
+
+const profile: ProfileResponse = {
+    nickname: faker.person.firstName(),
+    handle: faker.internet.userName(),
+    name: faker.person.fullName(),
+    email: faker.internet.email(),
+    profession: faker.person.jobTitle(),
+    skills,
+};
+
+const projects: ProjectsResponse[] = [
+    {
+        uuid: faker.string.uuid(),
+        title: faker.lorem.words(2),
+        excerpt: faker.lorem.sentence(),
+        url: faker.internet.url(),
+        language: faker.lorem.word(),
+        icon: faker.image.avatarGitHub(),
+        is_open_source: true,
+        created_at: faker.date.past().toISOString(),
+        updated_at: faker.date.recent().toISOString(),
+    },
+];
+
+const getProfile = vi.fn<[], Promise<{ data: ProfileResponse }>>(() =>
+    Promise.resolve({ data: profile })
+);
+const getProjects = vi.fn<[], Promise<{ version: string; data: ProjectsResponse[] }>>(() =>
+    Promise.resolve({ version: '1.0.0', data: projects })
+);
+
+vi.mock('@api/store.ts', () => ({ useApiStore: () => ({ getProfile, getProjects }) }));
+vi.mock('@api/http-error.ts', () => ({ debugError: vi.fn() }));
+
+describe('ProjectsPage', () => {
+    it('loads profile and projects', async () => {
+        const wrapper = mount(ProjectsPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: true,
+                    FooterPartial: true,
+                    ProjectCardPartial: { template: '<div class="project">{{ item.title }}</div>', props: ['item'] },
+                },
+            },
+        });
+        await flushPromises();
+        expect(getProfile).toHaveBeenCalled();
+        expect(getProjects).toHaveBeenCalled();
+        const items = wrapper.findAll('.project');
+        expect(items).toHaveLength(projects.length);
+        expect(wrapper.text()).toContain(projects[0].title);
+    });
+
+    it('handles API errors', async () => {
+        const error = new Error('oops');
+        getProfile.mockRejectedValueOnce(error);
+        const wrapper = mount(ProjectsPage, {
+            global: {
+                stubs: {
+                    SideNavPartial: true,
+                    HeaderPartial: true,
+                    WidgetSponsorPartial: true,
+                    WidgetSkillsPartial: true,
+                    FooterPartial: true,
+                    ProjectCardPartial: true,
+                },
+            },
+        });
+        await flushPromises();
+        const { debugError } = await import('@api/http-error.ts');
+        expect(debugError).toHaveBeenCalledWith(error);
+    });
+});