diff --git a/src/pages/TagPostsPage.vue b/src/pages/TagPostsPage.vue
index fde3940a..8fe36548 100644
--- a/src/pages/TagPostsPage.vue
+++ b/src/pages/TagPostsPage.vue
@@ -15,51 +15,51 @@
- Topics & Tags Explorer
+
+
Topics & Tags Explorer
+
+ ←
+ Go back
+
+
-
-
-
-
- Post tags help you quickly find the themes, tools or ideas you care about most across the blog. Browse through the tags below to group related posts
- together and dive deeper into specific topics, from high-level concepts to hands-on guides.
-
-
- {{ summaryMessage }}
-
-
+
+
+ Post tags help you quickly find the themes, tools or ideas you care about most across the blog. Browse through the tags below to group related posts
+ together and dive deeper into specific topics, from high-level concepts to hands-on guides.
+
+
+
+ {{ summaryContent.text
+ }}
+ {{ summaryContent.label }}
+
+ {{ summaryContent.suffix }}
+
+
+ {{ summaryContent.text }}
+
+
-
Articles
-
-
-
- {{ summaryMessage }}
-
-
- {{ summaryMessage }}
-
-
-
+
+
@@ -89,7 +89,7 @@
diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index d1c7f4af..088825d1 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -39,12 +39,12 @@
- {{ item.title }}
+
- {{ item.excerpt }}
+
diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 19f51ff8..82921203 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -66,25 +66,6 @@
-
-
@@ -101,7 +82,6 @@ const currentRoute: RouteLocationNormalizedLoaded = useRoute();
const socialService = new Social();
const socialNavLinks = ref
([]);
const isLoadingSocialLinks = ref(true);
-const socialSkeletonCount = 2;
const isHome = computed(() => {
// `path` excludes query strings, ensuring the avatar is hidden on the homepage
@@ -109,10 +89,6 @@ const isHome = computed(() => {
return currentRoute.path === '/';
});
-const shouldDisplaySocialSection = computed(() => {
- return isLoadingSocialLinks.value || socialNavLinks.value.length > 0;
-});
-
function bindIconClassFor(isActive: boolean): string {
return isActive ? 'blog-side-nav-router-link-a-active' : 'blog-side-nav-router-link-a-resting';
}
diff --git a/src/partials/TalksPartial.vue b/src/partials/TalksPartial.vue
index 09e16f8c..c1029b04 100644
--- a/src/partials/TalksPartial.vue
+++ b/src/partials/TalksPartial.vue
@@ -4,41 +4,39 @@
-
-
-
-
diff --git a/src/public.ts b/src/public.ts
index f530900a..55071a30 100644
--- a/src/public.ts
+++ b/src/public.ts
@@ -1,3 +1,5 @@
+import type { Router as VueRouter } from 'vue-router';
+
const IMAGES_DIR = 'images';
export function image(filename: string): string {
@@ -50,3 +52,17 @@ export function getRandomInt(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
+
+export function goBack(router: VueRouter): void {
+ if (typeof window === 'undefined') {
+ router.push({ name: 'Home' });
+ return;
+ }
+
+ if (window.history.length > 1) {
+ router.back();
+ return;
+ }
+
+ router.push({ name: 'Home' });
+}
diff --git a/src/support/tags.ts b/src/support/tags.ts
index 694b66fa..1c3229da 100644
--- a/src/support/tags.ts
+++ b/src/support/tags.ts
@@ -6,6 +6,13 @@ export type TagSummaryState = {
postCount: number;
};
+export type TagSummaryDescription = {
+ text: string;
+ label?: string;
+ suffix?: string;
+ onLabelClick?: () => void;
+};
+
export class Tags {
private static readonly DEFAULT_LABEL = '#TAG';
@@ -44,26 +51,27 @@ export class Tags {
};
}
- static summaryFor(tag: string, state: TagSummaryState): string {
+ static summaryFor(tag: string, state: TagSummaryState, onLabelClick?: (label: string) => void): TagSummaryDescription {
if (!tag) {
- return 'Select a tag to explore related posts.';
+ return { text: 'Select a tag to explore related posts.' };
}
const label = this.formatLabel(tag);
+ const handleLabelClick = onLabelClick ? () => onLabelClick(label) : undefined;
if (state.isLoading) {
- return `Loading posts for ${label}…`;
+ return { text: 'Loading posts for', label, suffix: '…', onLabelClick: handleLabelClick };
}
if (state.hasError) {
- return `We couldn't load posts for ${label}.`;
+ return { text: "We couldn't load posts for", label, suffix: '.', onLabelClick: handleLabelClick };
}
if (state.postCount === 0) {
- return `No posts found for ${label}.`;
+ return { text: 'No posts found for', label, suffix: '.', onLabelClick: handleLabelClick };
}
const noun = state.postCount === 1 ? 'post' : 'posts';
- return `${state.postCount} ${noun} found for ${label}.`;
+ return { text: `${state.postCount} ${noun} found for `, label, suffix: '', onLabelClick: handleLabelClick };
}
}
diff --git a/src/support/useTextHighlight.ts b/src/support/useTextHighlight.ts
new file mode 100644
index 00000000..8ad36a72
--- /dev/null
+++ b/src/support/useTextHighlight.ts
@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import DOMPurify from 'dompurify';
+import { useApiStore } from '@api/store.ts';
+
+export function useTextHighlight() {
+ const apiStore = useApiStore();
+ const searchTerm = computed(() => apiStore.searchTerm.trim());
+
+ const highlight = (text: string | null | undefined): string => {
+ if (!text) {
+ return '';
+ }
+
+ const term = searchTerm.value;
+
+ if (!term) {
+ return DOMPurify.sanitize(text);
+ }
+
+ // Escape special regex characters in the search term
+ const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const regex = new RegExp(`(${escapedTerm})`, 'gi');
+
+ const highlighted = text.replace(regex, '$1 ');
+
+ return DOMPurify.sanitize(highlighted);
+ };
+
+ return { highlight };
+}
diff --git a/tests/pages/AboutPage.test.ts b/tests/pages/AboutPage.test.ts
index 072542a6..4abd66f2 100644
--- a/tests/pages/AboutPage.test.ts
+++ b/tests/pages/AboutPage.test.ts
@@ -3,6 +3,8 @@ import { faker } from '@faker-js/faker';
import { describe, it, expect, vi, afterEach } from 'vitest';
import AboutPage from '@pages/AboutPage.vue';
import type { ProfileResponse, ProfileSkillResponse } from '@api/response/index.ts';
+import { createRouter, createMemoryHistory, RouterView, type Router } from 'vue-router';
+import { defineComponent } from 'vue';
const skills: ProfileSkillResponse[] = [
{
@@ -27,43 +29,52 @@ const getProfile = vi.fn<[], Promise<{ data: ProfileResponse }>>(() => Promise.r
vi.mock('@api/store.ts', () => ({ useApiStore: () => ({ getProfile }) }));
vi.mock('@api/http-error.ts', () => ({ debugError: vi.fn() }));
+const App = defineComponent({
+ template: '>(() => Promise.resolve(post));
const setSearchTerm = vi.fn();
vi.mock('@api/store.ts', () => ({ useApiStore: () => ({ getPost, setSearchTerm }) }));
-vi.mock('vue-router', () => ({
- useRoute: () => ({ params: { slug: post.slug } }),
- RouterLink: {
- name: 'RouterLink',
- template: '
'));
const initializeHighlighter = vi.hoisted(() => vi.fn(() => Promise.resolve()));
@@ -83,9 +77,24 @@ const RouterLinkStub = defineComponent({
template: "('vue-router');
-
- return {
- ...actual,
- useRoute: () => reactive({ params: routeParams }),
- };
-});
-
-import TagPostsPage from '@pages/TagPostsPage.vue';
-
const ArticleItemPartialStub = defineComponent({
name: 'ArticleItemPartialStub',
props: {
@@ -79,11 +76,25 @@ const ArticleItemSkeletonPartialStub = defineComponent({
template: '
',
});
+const App = defineComponent({
+ template: '
' } },
+ { path: '/tags/:tag', name: 'TagPosts', component: { template: '
' } },
+];
+
+const mountWithRouter = async () => {
+ const router = createRouter({ history: createMemoryHistory(), routes });
+ router.push('/');
+ await router.isReady();
+
+ return mount(HeaderPartial, { global: { plugins: [router] } });
+};
+
describe('HeaderPartial', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
it('validates search length', async () => {
- const wrapper = mount(HeaderPartial);
+ const wrapper = await mountWithRouter();
const input = wrapper.find('#search');
await input.setValue('abc');
await wrapper.find('form').trigger('submit');
- expect(wrapper.vm.validationError).toBeDefined();
+ expect(wrapper.vm.validationError).toBeTruthy();
expect(setSearchTerm).not.toHaveBeenCalled();
});
it('submits valid search', async () => {
- const wrapper = mount(HeaderPartial);
- const query: string = faker.lorem.words(2);
+ const wrapper = await mountWithRouter();
+ const query = 'valid search';
const input = wrapper.find('#search');
await input.setValue(query);
await wrapper.find('form').trigger('submit');
expect(setSearchTerm).toHaveBeenCalledWith(query);
});
- it('toggles dark mode', () => {
- const wrapper = mount(HeaderPartial);
- wrapper.find('label[for="light-switch"]').trigger('click');
+ it('toggles dark mode', async () => {
+ const wrapper = await mountWithRouter();
+ await wrapper.find('label[for="light-switch"]').trigger('click');
expect(toggleDarkMode).toHaveBeenCalled();
});
});
diff --git a/tests/partials/SideNavPartial.test.ts b/tests/partials/SideNavPartial.test.ts
index df5c169f..b495e8d0 100644
--- a/tests/partials/SideNavPartial.test.ts
+++ b/tests/partials/SideNavPartial.test.ts
@@ -55,7 +55,14 @@ function createTestRouter(initialPath: string): Router {
async function mountSideNavAt(initialPath: string): Promise {
const router = createTestRouter(initialPath);
const pinia = createPinia();
- const wrapper = mount(SideNavPartial, { global: { plugins: [router, pinia] } });
+ const wrapper = mount(SideNavPartial, {
+ global: {
+ plugins: [router, pinia],
+ stubs: {
+ RouterView: true,
+ },
+ },
+ });
await router.isReady();
await flushPromises();
@@ -83,18 +90,11 @@ describe('SideNavPartial', () => {
wrapper.unmount();
});
- it('renders social links beneath the menu separated by a hyphen', async () => {
+ it('does not render social links section', async () => {
const wrapper = await mountSideNavAt('/');
const socialSection = wrapper.find('[data-testid="side-nav-social-links"]');
- expect(socialSection.exists()).toBe(true);
-
- const separator = wrapper.find('[data-testid="side-nav-social-separator"]');
- expect(separator.exists()).toBe(true);
- expect(separator.text().trim()).toBe('-');
-
- const socialLinks = socialSection.findAll('a[aria-label]');
- expect(socialLinks).toHaveLength(2); // Component filters for github and linkedin only
+ expect(socialSection.exists()).toBe(false);
wrapper.unmount();
});
diff --git a/tests/setup.ts b/tests/setup.ts
index ec82c327..f8270755 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1,8 +1,16 @@
+import { config } from '@vue/test-utils';
import { faker } from '@faker-js/faker';
import { webcrypto } from 'node:crypto';
faker.seed(123);
+// Mock the v-lazy-link directive
+config.global.directives['lazy-link'] = {
+ mounted: () => {},
+ updated: () => {},
+ unmounted: () => {},
+};
+
// Ensure Web Crypto API is available in the test environment (jsdom)
if (!globalThis.crypto || !('subtle' in globalThis.crypto)) {
// Vitest in jsdom may not expose crypto.subtle by default
@@ -12,6 +20,9 @@ if (!globalThis.crypto || !('subtle' in globalThis.crypto)) {
class LocalStorageMock {
private store: Record = {};
+ get length() {
+ return Object.keys(this.store).length;
+ }
clear() {
this.store = {};
}
@@ -24,6 +35,10 @@ class LocalStorageMock {
removeItem(key: string) {
delete this.store[key];
}
+ key(index: number) {
+ const keys = Object.keys(this.store);
+ return keys[index] ?? null;
+ }
}
declare global {
diff --git a/tests/support/router.ts b/tests/support/router.ts
new file mode 100644
index 00000000..f16fa1ed
--- /dev/null
+++ b/tests/support/router.ts
@@ -0,0 +1,9 @@
+import { createRouter, createMemoryHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+
+export const createTestRouter = (routes: RouteRecordRaw[] = []) => {
+ return createRouter({
+ history: createMemoryHistory(),
+ routes: [{ path: '/', name: 'Home', component: { template: 'Home
' } }, ...routes],
+ });
+};
diff --git a/tests/support/tags.test.ts b/tests/support/tags.test.ts
index 17394f2c..61f53b9c 100644
--- a/tests/support/tags.test.ts
+++ b/tests/support/tags.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
import { Tags, type TagSummaryState } from '@/support/tags.ts';
const baseSummaryState: TagSummaryState = {
@@ -52,7 +52,7 @@ describe('Tags.routeFor', () => {
describe('Tags.summaryFor', () => {
it('prompts the user to select a tag when one is missing', () => {
- expect(Tags.summaryFor('', baseSummaryState)).toBe('Select a tag to explore related posts.');
+ expect(Tags.summaryFor('', baseSummaryState)).toEqual({ text: 'Select a tag to explore related posts.' });
});
it('describes loading state when awaiting posts', () => {
@@ -61,7 +61,7 @@ describe('Tags.summaryFor', () => {
...baseSummaryState,
isLoading: true,
}),
- ).toBe('Loading posts for #VUE…');
+ ).toEqual({ text: 'Loading posts for', label: '#VUE', suffix: '…', onLabelClick: undefined });
});
it('reports failures when the API request fails', () => {
@@ -70,7 +70,7 @@ describe('Tags.summaryFor', () => {
...baseSummaryState,
hasError: true,
}),
- ).toBe("We couldn't load posts for #VUE.");
+ ).toEqual({ text: "We couldn't load posts for", label: '#VUE', suffix: '.', onLabelClick: undefined });
});
it('mentions when no posts were found', () => {
@@ -78,7 +78,7 @@ describe('Tags.summaryFor', () => {
Tags.summaryFor('vue', {
...baseSummaryState,
}),
- ).toBe('No posts found for #VUE.');
+ ).toEqual({ text: 'No posts found for', label: '#VUE', suffix: '.', onLabelClick: undefined });
});
it('handles singular and plural post counts', () => {
@@ -87,13 +87,29 @@ describe('Tags.summaryFor', () => {
...baseSummaryState,
postCount: 1,
}),
- ).toBe('1 post found for #VUE.');
+ ).toEqual({ text: '1 post found for ', label: '#VUE', suffix: '', onLabelClick: undefined });
expect(
Tags.summaryFor('vue', {
...baseSummaryState,
postCount: 3,
}),
- ).toBe('3 posts found for #VUE.');
+ ).toEqual({ text: '3 posts found for ', label: '#VUE', suffix: '', onLabelClick: undefined });
+ });
+
+ it('uses the callback for label clicks', () => {
+ const handler = vi.fn();
+ const summary = Tags.summaryFor(
+ 'vue',
+ {
+ ...baseSummaryState,
+ postCount: 2,
+ },
+ handler,
+ );
+
+ expect(summary.label).toBe('#VUE');
+ summary.onLabelClick?.();
+ expect(handler).toHaveBeenCalledWith('#VUE');
});
});