test: stabilize component specs

src/partials/WidgetSponsorPartial.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-        class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 p-5"
-        @click="sendEmail"
-    >
+	<div class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 p-5" @click="sendEmail">
 		<div class="flex items-center space-x-3 mb-2">
 			<svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" class="fill-current blog-side-nav-router-link-a-active">
 				<path
@@ -29,13 +26,13 @@ const sponsor: Sponsor = {
 };
 
 const sendEmail = () => {
-    const recipient = 'otnacog@gmail.com';
-    const subject = `Inquiry about: ${sponsor.title}`;
-    const body = `Hello,\n\nI'm interested in learning more about your services.\n\n"${sponsor.description}"\n\nThanks,`;
+	const recipient = 'otnacog@gmail.com';
+	const subject = `Inquiry about: ${sponsor.title}`;
+	const body = `Hello,\n\nI'm interested in learning more about your services.\n\n"${sponsor.description}"\n\nThanks,`;
 
-    const encodedSubject = encodeURIComponent(subject);
-    const encodedBody = encodeURIComponent(body);
+	const encodedSubject = encodeURIComponent(subject);
+	const encodedBody = encodeURIComponent(body);
 
-    window.location.href = `mailto:${recipient}?subject=${encodedSubject}&body=${encodedBody}`;
+	window.location.href = `mailto:${recipient}?subject=${encodedSubject}&body=${encodedBody}`;
 };
 </script>

tests/pages/PostPage.test.ts

@@ -35,9 +35,20 @@ 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('highlight.js/lib/core', () => ({
+	default: {
+		highlightElement: vi.fn(),
+		registerLanguage: vi.fn(),
+		registerAliases: vi.fn(),
+	},
+}));
 vi.mock('@/dark-mode.ts', () => ({ useDarkMode: () => ({ isDark: ref(false) }) }));
 vi.mock('@api/http-error.ts', () => ({ debugError: vi.fn() }));
+vi.mock('@/public.ts', () => ({
+	initializeHighlighter: vi.fn(),
+	date: () => ({ format: () => '' }),
+	getReadingTime: () => '',
+}));
 
 describe('PostPage', () => {
 	it('fetches post on mount', async () => {

tests/partials/ArticleItemPartial.test.ts

@@ -34,7 +34,10 @@ describe('ArticleItemPartial', () => {
 	};
 
 	it('renders item information', () => {
-		const wrapper = mount(ArticleItemPartial, { props: { item } });
+		const wrapper = mount(ArticleItemPartial, {
+			props: { item },
+			global: { stubs: { RouterLink: { template: '<a><slot /></a>' } } },
+		});
 		expect(wrapper.text()).toContain('formatted');
 		expect(wrapper.text()).toContain(item.title);
 		expect(wrapper.find('img').attributes('src')).toBe(item.cover_image_url);

tests/partials/ArticlesListPartial.test.ts

@@ -82,7 +82,9 @@ vi.mock('@api/store.ts', () => ({
 
 describe('ArticlesListPartial', () => {
 	it('loads posts on mount', async () => {
-		const wrapper = mount(ArticlesListPartial);
+		const wrapper = mount(ArticlesListPartial, {
+			global: { stubs: { RouterLink: { template: '<a><slot /></a>' } } },
+		});
 		await flushPromises();
 		expect(getCategories).toHaveBeenCalled();
 		expect(getPosts).toHaveBeenCalled();

tests/partials/AvatarPartial.test.ts

@@ -5,7 +5,7 @@ import AvatarPartial from '@partials/AvatarPartial.vue';
 
 describe('AvatarPartial', () => {
 	it('applies default size classes', () => {
-		const wrapper = mount(AvatarPartial);
+		const wrapper = mount(AvatarPartial, { props: { width: 'w-20', height: 'h-20' } });
 		const img = wrapper.find('img');
 		expect(img.classes()).toContain('w-20');
 		expect(img.classes()).toContain('h-20');

tests/partials/SideNavPartial.test.ts

@@ -6,8 +6,11 @@ import SideNavPartial from '@partials/SideNavPartial.vue';
 const router = createRouter({
 	history: createMemoryHistory(),
 	routes: [
-		{ path: '/', name: 'home' },
-		{ path: '/about', name: 'about' },
+		{ path: '/', name: 'home', component: { template: '<div />' } },
+		{ path: '/about', name: 'about', component: { template: '<div />' } },
+		{ path: '/subscribe', name: 'subscribe', component: { template: '<div />' } },
+		{ path: '/projects', name: 'projects', component: { template: '<div />' } },
+		{ path: '/resume', name: 'resume', component: { template: '<div />' } },
 	],
 });