Fix lint and test errors

Author: webstackdev

src/actions/webmentions/__tests__/action.spec.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 type MockedAction<Input, Output> = {
-  handler: (input: Input) => Promise<Output>
+  handler: (_input: Input) => Promise<Output>
 }
 
 const throwActionErrorMock = vi.fn()

src/actions/webmentions/action.ts

@@ -7,7 +7,7 @@ import { fetchWebmentions } from '@components/WebMentions/server'
 import type { WebmentionDisplayItem, WebmentionsListResult } from './@types'
 
 const listInputSchema = z.object({
-  url: z.string().trim().url(),
+  url: z.string().trim().pipe(z.url()),
 })
 
 const displayProperties = new Set(['mention-of', 'in-reply-to'])

src/components/Content/Switcher/client/index.ts

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { queryPrefetchLink } from './selectors'
 
 export type ContentVariant = 'overview' | 'deep-dive'
 
@@ -13,12 +14,23 @@ const queueIdlePrefetch = (work: () => void): void => {
 		return
 	}
 
+	let hasRun = false
+	const runOnce = () => {
+		if (hasRun) {
+			return
+		}
+
+		hasRun = true
+		work()
+	}
+
 	if (typeof window.requestIdleCallback === 'function') {
-		window.requestIdleCallback(() => work())
+		window.requestIdleCallback(() => runOnce())
+		window.setTimeout(runOnce, 150)
 		return
 	}
 
-	window.setTimeout(work, 150)
+	window.setTimeout(runOnce, 150)
 }
 
 const prefetchDocument = (href: string): void => {
@@ -32,7 +44,7 @@ const prefetchDocument = (href: string): void => {
 
 	prefetchedHrefs.add(href)
 
-	const existingLink = document.head.querySelector(`link[rel="prefetch"][href="${href}"]`)
+	const existingLink = queryPrefetchLink(document.head, href)
 	if (!existingLink) {
 		const link = document.createElement('link')
 		link.rel = 'prefetch'

src/components/Content/Switcher/client/selectors.ts

@@ -0,0 +1,16 @@
+import { isType1Element } from '@components/scripts/assertions/elements'
+
+export const SELECTORS = {
+  prefetchLink: 'link[rel="prefetch"]',
+} as const
+
+export const queryPrefetchLink = (root: ParentNode, href: string): HTMLLinkElement | null => {
+  if (!href) {
+    return null
+  }
+
+  const candidate = root.querySelector(`${SELECTORS.prefetchLink}[href="${href}"]`)
+  return isType1Element(candidate) && candidate.tagName === 'LINK'
+    ? (candidate as HTMLLinkElement)
+    : null
+}

src/components/WebMentions/client/index.ts

@@ -5,6 +5,7 @@ import { defineCustomElement } from '@components/scripts/utils'
 import { handleScriptError } from '@components/scripts/errors/handler'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import type { WebmentionDisplayItem, WebmentionsListResult } from '@actions/webmentions/@types'
+import { queryWebMentionsIconMarkup } from './selectors'
 
 type LoadState = 'idle' | 'loading' | 'ready' | 'error'
 
@@ -22,17 +23,6 @@ const formatDate = (dateString: string): string => {
   }).format(date)
 }
 
-const queryIconMarkup = (iconBankId: string, iconName: string): string | null => {
-  if (typeof document === 'undefined') {
-    return null
-  }
-
-  const iconBank = document.getElementById(iconBankId)
-  const iconHost = iconBank?.querySelector(`[data-webmentions-icon="${iconName}"]`)
-  const markup = iconHost?.innerHTML.trim()
-  return markup ? markup : null
-}
-
 export class WebMentionsElement extends LitElement {
   static registeredName = 'web-mentions'
 
@@ -149,8 +139,14 @@ export class WebMentionsElement extends LitElement {
 
     const newestMentions = [...this.mentions].reverse()
     const facepileMentions = newestMentions.slice(0, this.facepileLimit).reverse()
-    const heartIconMarkup = queryIconMarkup(this.iconBankId, 'heart-filled')
-    const repostIconMarkup = queryIconMarkup(this.iconBankId, 'background-broken')
+    const heartIconMarkup = queryWebMentionsIconMarkup({
+      iconBankId: this.iconBankId,
+      iconName: 'heart-filled',
+    })
+    const repostIconMarkup = queryWebMentionsIconMarkup({
+      iconBankId: this.iconBankId,
+      iconName: 'background-broken',
+    })
 
     return html`
       <section class="mt-12 pt-8 border-t border-trim" id="webmentions" aria-labelledby="webmentions-heading">

src/components/WebMentions/client/selectors.ts

@@ -0,0 +1,20 @@
+export const queryWebMentionsIconMarkup = (params: {
+  iconBankId: string
+  iconName: 'background-broken' | 'heart-filled'
+  root?: Document
+}): string | null => {
+  const { iconBankId, iconName, root = document } = params
+
+  if (!iconBankId || !iconName) {
+    return null
+  }
+
+  const iconBank = root.getElementById(iconBankId)
+  if (!(iconBank instanceof HTMLDivElement)) {
+    return null
+  }
+
+  const iconHost = iconBank.querySelector(`[data-webmentions-icon="${iconName}"]`)
+  const markup = iconHost?.innerHTML.trim()
+  return markup ? markup : null
+}