Refactor WebMention component to server folder pattern, add unit test

Author: webstackdev

src/components/WebMentions/@types/index.ts

@@ -0,0 +1,28 @@
+export interface WebmentionAuthor {
+  url?: string
+  name?: string
+  photo?: string
+}
+
+export interface WebmentionContent {
+  html?: string
+  text?: string
+  value?: string
+}
+
+export interface Webmention {
+  'wm-id': string
+  'wm-target': string
+  'wm-property': string
+  'wm-source'?: string
+  published: string
+  author?: WebmentionAuthor
+  content?: WebmentionContent
+  url?: string
+}
+
+export interface WebmentionResponse {
+  type: string
+  name: string
+  children: Webmention[]
+}

…components/WebMentions/WebMentions.astro src/components/WebMentions/index.astrosrc/components/WebMentions/WebMentions.astro renamed to src/components/WebMentions/index.astro src/components/WebMentions/WebMentions.astro renamed to src/components/WebMentions/index.astro

@@ -7,7 +7,7 @@
  * @see https://brid.gy/ for social media integration
  */
 import { fetchWebmentions } from '@components/WebMentions/server'
-import WebMentionItem from '@components/WebMentions/WebMentionItem.astro'
+import WebMentionItem from './item.astro'
 
 interface Props {
   /** The absolute URL of the page to fetch webmentions for */
@@ -38,19 +38,19 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
 
 {
   (hasMentions || hasInteractions) && (
-    <section class="mt-12 pt-8 border-t border-[var(--color-border)]" id="webmentions">
+    <section class="mt-12 pt-8 border-t border-border" id="webmentions">
       <header class="flex items-start justify-between mb-6 flex-wrap gap-4 flex-col sm:flex-row sm:items-center">
-        <h3 class="text-2xl font-bold text-[var(--color-text)] m-0">Webmentions</h3>
+        <h3 class="text-2xl font-bold text-text m-0">Webmentions</h3>
 
         {hasInteractions && (
           <div class="flex gap-6 items-center w-full sm:w-auto justify-start">
             {likes.length > 0 && (
               <span
-                class="inline-flex items-center gap-1.5 text-[var(--color-text-offset)] text-sm font-medium"
+                class="inline-flex items-center gap-1.5 text-text-offset text-sm font-medium"
                 title={`${likes.length} like${likes.length !== 1 ? 's' : ''}`}
               >
                 <svg
-                  class="w-5 h-5 text-[var(--color-text-lighter)]"
+                  class="w-5 h-5 text-text-lighter"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   fill="currentColor"
@@ -63,11 +63,11 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
             )}
             {reposts.length > 0 && (
               <span
-                class="inline-flex items-center gap-1.5 text-[var(--color-text-offset)] text-sm font-medium"
+                class="inline-flex items-center gap-1.5 text-text-offset text-sm font-medium"
                 title={`${reposts.length} repost${reposts.length !== 1 ? 's' : ''}`}
               >
                 <svg
-                  class="w-5 h-5 text-[var(--color-text-lighter)]"
+                  class="w-5 h-5 text-text-lighter"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   fill="currentColor"
@@ -85,7 +85,7 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
       {hasMentions ? (
         <>
           {showFacepile && displayMentions.length > 0 && (
-            <div class="flex items-center gap-2 mb-6 p-4 bg-[var(--color-bg-offset)] rounded-lg">
+            <div class="flex items-center gap-2 mb-6 p-4 bg-bg-offset rounded-lg">
               {displayMentions
                 .slice(0, facepileLimit)
                 .reverse()
@@ -94,12 +94,12 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
                     src={mention.author?.photo || '/assets/images/webmention-avatar-default.svg'}
                     alt={mention.author?.name || 'Anonymous'}
                     title={mention.author?.name || 'Anonymous'}
-                    class="w-10 h-10 rounded-full border-2 border-[var(--color-bg)] object-cover transition-transform hover:scale-110 hover:z-10"
+                    class="w-10 h-10 rounded-full border-2 border-bg object-cover transition-transform hover:scale-110 hover:z-10"
                     loading="lazy"
                   />
                 ))}
               {displayMentions.length > facepileLimit && (
-                <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[var(--color-text-lighter)] text-[var(--color-bg)] text-xs font-semibold">
+                <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-text-lighter text-bg text-xs font-semibold">
                   +{displayMentions.length - facepileLimit}
                 </span>
               )}
@@ -115,7 +115,7 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
           </ol>
         </>
       ) : (
-        <p class="text-[var(--color-text-offset)] italic my-8">No mentions yet.</p>
+        <p class="text-text-offset italic my-8">No mentions yet.</p>
       )}
     </section>
   )

src/components/WebMentions/index.ts

@@ -2,7 +2,7 @@
 /**
  * Individual WebMention item display
  */
-import type { Webmention } from '@components/WebMentions/server'
+import type { Webmention } from '@components/WebMentions/@types'
 
 interface Props {
   mention: Webmention
@@ -24,7 +24,7 @@ const formatDate = (dateString: string) => {
 ---
 
 <article
-  class="p-4 bg-[var(--color-bg-offset)] rounded-lg border border-[var(--color-border)] h-cite"
+  class="p-4 bg-bg-offset rounded-lg border border-border h-cite"
   id={`webmention-${mention['wm-id']}`}
 >
   <div
@@ -33,13 +33,13 @@ const formatDate = (dateString: string) => {
     {
       mention.author ? (
         <a
-          class="inline-flex items-center gap-3 no-underline text-[var(--color-text)] transition-colors hover:text-[var(--color-primary-hover)] p-author h-card u-url"
+          class="inline-flex items-center gap-3 no-underline text-text transition-colors hover:text-primary-hover p-author h-card u-url"
           href={mention.author.url || mention['wm-source']}
           target="_blank"
           rel="noopener noreferrer"
         >
           <img
-            class="w-10 h-10 rounded-full object-cover border-2 border-[var(--color-border)] u-photo"
+            class="w-10 h-10 rounded-full object-cover border-2 border-border u-photo"
             src={mention.author.photo || '/assets/images/webmention-avatar-default.svg'}
             alt={mention.author.name || 'Anonymous'}
             loading="lazy"
@@ -49,7 +49,7 @@ const formatDate = (dateString: string) => {
       ) : (
         <span class="inline-flex items-center gap-3">
           <img
-            class="w-10 h-10 rounded-full object-cover border-2 border-[var(--color-border)]"
+            class="w-10 h-10 rounded-full object-cover border-2 border-border"
             src="/assets/images/webmention-avatar-default.svg"
             alt="Anonymous"
             loading="lazy"
@@ -62,7 +62,7 @@ const formatDate = (dateString: string) => {
     {
       mention.published && (
         <time
-          class="text-[var(--color-text-offset)] text-sm whitespace-nowrap dt-published"
+          class="text-text-offset text-sm whitespace-nowrap dt-published"
           datetime={mention.published}
         >
           {formatDate(mention.published)}
@@ -74,7 +74,7 @@ const formatDate = (dateString: string) => {
   {
     mention.content?.value && (
       <div
-        class="text-[var(--color-text)] leading-relaxed break-words [&_p]:my-2 [&_a]:text-[var(--color-primary)] [&_a]:underline [&_a:hover]:text-[var(--color-primary-hover)] p-content"
+        class="text-text leading-relaxed wrap-break-word [&_p]:my-2 [&_a]:text-primary [&_a]:underline [&_a:hover]:text-primary-hover p-content"
         set:html={mention.content.value}
       />
     )

…ponents/WebMentions/WebMentionItem.astro src/components/WebMentions/item.astrosrc/components/WebMentions/WebMentionItem.astro renamed to src/components/WebMentions/item.astro src/components/WebMentions/WebMentionItem.astro renamed to src/components/WebMentions/item.astro

@@ -0,0 +1,73 @@
+{
+  "type": "feed",
+  "name": "webmention.io",
+  "children": [
+    {
+      "wm-id": "1004",
+      "wm-target": "https://example.com/blog/post",
+      "wm-property": "mention-of",
+      "wm-source": "https://blog.example.com/posts/alpha",
+      "published": "2024-06-30T12:00:00.000Z",
+      "author": {
+        "name": "Carol Indie",
+        "url": "https://carol.example.com",
+        "photo": "https://carol.example.com/avatar.jpg"
+      },
+      "content": {
+        "text": "Earlier mention text"
+      }
+    },
+    {
+      "wm-id": "1001",
+      "wm-target": "https://example.com/blog/post",
+      "wm-property": "mention-of",
+      "wm-source": "https://social.example.com/@alice/123",
+      "published": "2024-07-01T15:00:00.000Z",
+      "author": {
+        "name": "Alice Web",
+        "url": "https://alice.example.com",
+        "photo": "https://alice.example.com/avatar.jpg"
+      },
+      "content": {
+        "html": "<p>Love this post<script>alert('xss')</script></p>"
+      }
+    },
+    {
+      "wm-id": "1002",
+      "wm-target": "https://example.com/blog/post",
+      "wm-property": "like-of",
+      "wm-source": "https://social.example.com/@bob/456",
+      "published": "2024-07-02T18:30:00.000Z",
+      "author": {
+        "name": "Bob Reader",
+        "url": "https://bob.example.com",
+        "photo": "https://bob.example.com/avatar.jpg"
+      }
+    },
+    {
+      "wm-id": "1003",
+      "wm-target": "https://example.com/blog/post",
+      "wm-property": "rsvp",
+      "wm-source": "https://events.example.com/rsvp",
+      "published": "2024-07-03T18:30:00.000Z",
+      "author": {
+        "name": "Dana RSVP",
+        "url": "https://dana.example.com"
+      },
+      "content": {
+        "text": "See you there"
+      }
+    },
+    {
+      "wm-id": "1005",
+      "wm-target": "https://example.com/blog/post",
+      "wm-property": "mention-of",
+      "wm-source": "https://missing-content.example.com/post",
+      "published": "2024-07-04T08:45:00.000Z",
+      "author": {
+        "name": "Evan NoContent",
+        "url": "https://evan.example.com"
+      }
+    }
+  ]
+}

src/components/WebMentions/server/__fixtures__/index.fixture.json

@@ -0,0 +1,133 @@
+// @vitest-environment node
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Webmention, WebmentionResponse } from '@components/WebMentions/@types'
+import fixture from '../__fixtures__/index.fixture.json'
+import {
+  fetchWebmentions,
+  isOwnWebmention,
+  webmentionsByUrl,
+  webmentionCountByType,
+} from '../index'
+
+vi.mock('astro:env/client', () => ({
+  WEBMENTION_IO_TOKEN: 'test-token',
+}))
+
+const fixtureResponse = fixture as WebmentionResponse
+
+const createMockResponse = (
+  overrides: Partial<Response> = {},
+  payload: WebmentionResponse = fixtureResponse,
+): Response => ({
+  ok: true,
+  status: 200,
+  statusText: 'OK',
+  json: async () => payload,
+  ...overrides,
+} as Response)
+
+describe('fetchWebmentions', () => {
+  const targetUrl = 'https://example.com/blog/post'
+  let fetchMock: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    fetchMock = vi.fn()
+    vi.stubGlobal('fetch', fetchMock)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('fetches, filters, and sanitizes webmentions from the API', async () => {
+    fetchMock.mockResolvedValue(createMockResponse())
+
+    const results = await fetchWebmentions(targetUrl)
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [requestedUrl, init] = fetchMock.mock.calls[0]
+    const parsedUrl = new URL(requestedUrl as string)
+
+    expect(parsedUrl.origin + parsedUrl.pathname).toBe('https://webmention.io/api/mentions.jf2')
+    expect(parsedUrl.searchParams.get('target')).toBe(targetUrl)
+    expect(parsedUrl.searchParams.get('token')).toBe('test-token')
+    expect(parsedUrl.searchParams.get('per-page')).toBe('1000')
+    expect(init).toEqual({ headers: { 'Cache-Control': 'max-age=300' } })
+
+    expect(results).toHaveLength(3)
+    expect(results[0]['wm-property']).toBe('mention-of')
+    expect(new Date(results[0].published).getTime()).toBeLessThan(new Date(results[2].published).getTime())
+
+    const sanitizedHtml = results[1].content?.value ?? ''
+    expect(sanitizedHtml).toBe('<p>Love this post</p>')
+  })
+
+  it('returns an empty array when the API responds with an error status', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    fetchMock.mockResolvedValue(
+      createMockResponse({ ok: false, status: 500, statusText: 'Server Error', json: async () => ({}) }),
+    )
+
+    const results = await fetchWebmentions(targetUrl)
+
+    expect(results).toEqual([])
+    expect(errorSpy).toHaveBeenCalled()
+    errorSpy.mockRestore()
+  })
+
+  it('returns an empty array when the fetch call fails', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    fetchMock.mockRejectedValue(new Error('network down'))
+
+    const results = await fetchWebmentions(targetUrl)
+
+    expect(results).toEqual([])
+    expect(errorSpy).toHaveBeenCalled()
+    errorSpy.mockRestore()
+  })
+})
+
+describe('Webmention helpers', () => {
+  const helperWebmentions: Webmention[] = [
+    {
+      'wm-id': 'helper-1',
+      'wm-target': 'https://example.com/a',
+      'wm-property': 'mention-of',
+      published: '2024-01-01T00:00:00.000Z',
+      author: { name: 'Site Author', url: 'https://webstackbuilders.com/articles/launch' },
+    },
+    {
+      'wm-id': 'helper-2',
+      'wm-target': 'https://example.com/a',
+      'wm-property': 'like-of',
+      published: '2024-01-02T00:00:00.000Z',
+      author: { name: 'Another User', url: 'https://social.example.com/users/2' },
+    },
+    {
+      'wm-id': 'helper-3',
+      'wm-target': 'https://example.com/b',
+      'wm-property': 'mention-of',
+      published: '2024-01-03T00:00:00.000Z',
+      author: { name: 'Third User', url: 'https://elsewhere.example.com' },
+    },
+  ]
+
+  it('detects when a webmention originates from the configured domain', () => {
+    expect(isOwnWebmention(helperWebmentions[0])).toBe(true)
+    expect(isOwnWebmention(helperWebmentions[1])).toBe(false)
+    expect(isOwnWebmention(helperWebmentions[2], ['https://elsewhere.example.com'])).toBe(true)
+  })
+
+  it('filters webmentions by target URL', () => {
+    const filtered = webmentionsByUrl(helperWebmentions, 'https://example.com/a')
+
+    expect(filtered).toHaveLength(2)
+    expect(filtered.every((entry) => entry['wm-target'] === 'https://example.com/a')).toBe(true)
+  })
+
+  it('counts webmentions that match specific interaction types', () => {
+    const count = webmentionCountByType(helperWebmentions, 'https://example.com/a', 'mention-of', 'like-of')
+
+    expect(count).toBe(2)
+  })
+})