Refactor server code in Carousel component to server/index.ts file, add unit test, add Astro Image component to default imports in markdown layout

Author: webstackdev

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

@@ -0,0 +1,24 @@
+import type { CollectionEntry } from 'astro:content'
+export type CarouselVariant = 'featured' | 'suggested' | 'random'
+
+export const collectionMap = {
+  'case-studies': 'caseStudies',
+  articles: 'articles',
+  services: 'services',
+} as const
+
+export type CollectionMap = typeof collectionMap
+export type CollectionSlug = keyof CollectionMap
+type CollectionEntryMap = {
+  [Slug in CollectionSlug]: CollectionEntry<CollectionMap[Slug]>
+}
+
+export interface CarouselProps<T extends CollectionSlug = CollectionSlug> {
+  title?: string
+  limit?: number
+  variant?: CarouselVariant
+  currentSlug: string
+  type: T
+}
+
+export type ItemType<T extends CollectionSlug = CollectionSlug> = CollectionEntryMap[T]

src/components/Carousel/client/__tests__/index.spec.ts

@@ -2,7 +2,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import CarouselComponent from '@components/Carousel/index.astro'
-import type { CarouselProps } from '@components/Carousel/props'
+import type { CarouselProps } from '@components/Carousel/@types'
 import type { CarouselElement } from '@components/Carousel/client'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { executeRender } from '@test/unit/helpers/litRuntime'

src/components/Carousel/index.astro

@@ -1,70 +1,32 @@
 ---
 // Generic Carousel component for displaying content - both featured and suggested
 import { getCollection } from 'astro:content'
-import type { CollectionEntry } from 'astro:content'
-import type { CarouselProps, CollectionKeyMap } from './props'
+import {
+  type CollectionSlug,
+  type CarouselVariant,
+  type ItemType,
+  collectionMap,
+} from './@types'
+import {  prepareItems } from './server'
 
-export type { CarouselProps as Props } from './props'
+export interface Props {
+  title?: string
+  limit?: number
+  variant?: CarouselVariant
+  currentSlug: string
+  type: CollectionSlug
+}
 
 const {
   title = 'Featured Content',
   limit = 3,
   variant = 'featured',
   currentSlug,
   type,
-} = Astro.props as CarouselProps
-
-// Map the prop type to the actual collection key with proper typing
-const collectionKey = {
-  services: 'services',
-  'case-studies': 'caseStudies',
-  articles: 'articles',
-}[type] as CollectionKeyMap[typeof type]
-
-// Get all content from the specified collection with proper typing
-const allItems = await getCollection(collectionKey)
-type ItemType = CollectionEntry<CollectionKeyMap[typeof type]>
-
-// Filter and sort items based on variant
-let items: ItemType[] = allItems
-
-switch (variant) {
-  case 'featured':
-    // Show only featured items, excluding current item
-    items = allItems
-      .filter((item: ItemType) => {
-        if (item.id === currentSlug) return false
-        // All collection types now use the consistent "featured" field
-        return item.data.featured === true
-      })
-      .sort(
-        (a: ItemType, b: ItemType) =>
-          new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
-      )
-    break
+} = Astro.props
 
-  case 'suggested':
-    // Filter out current item and get latest items (suggested mode)
-    items = allItems
-      .filter((item: ItemType) => item.id !== currentSlug)
-      .sort(
-        (a: ItemType, b: ItemType) =>
-          new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
-      )
-    break
-
-  case 'random':
-    // Show all items excluding current one in random order
-    items = allItems
-      .filter((item: ItemType) => item.id !== currentSlug)
-      .sort(() => Math.random() - 0.5)
-    break
-}
-
-// Apply limit
-if (limit) {
-  items = items.slice(0, limit)
-}
+const allItems = await getCollection(collectionMap[type])
+const items = prepareItems(allItems, variant, currentSlug, limit)
 ---
 
 {

src/components/Carousel/props.ts

@@ -0,0 +1,75 @@
+import type { ItemType } from '@components/Carousel/@types'
+
+type MinimalCarouselEntry = {
+  id: string
+  slug: string
+  collection: 'articles'
+  data: {
+    title: string
+    description: string
+    publishDate: Date
+    featured: boolean
+    icon?: string
+  }
+}
+
+const entries: MinimalCarouselEntry[] = [
+  {
+    id: 'article-delta',
+    slug: 'article-delta',
+    collection: 'articles',
+    data: {
+      title: 'Article Delta',
+      description: 'Latest launch deep-dive',
+      publishDate: new Date('2024-04-15T00:00:00.000Z'),
+      featured: true,
+      icon: '/icons/delta.svg',
+    },
+  },
+  {
+    id: 'article-charlie',
+    slug: 'article-charlie',
+    collection: 'articles',
+    data: {
+      title: 'Article Charlie',
+      description: 'Scaling case study',
+      publishDate: new Date('2024-03-10T00:00:00.000Z'),
+      featured: false,
+    },
+  },
+  {
+    id: 'article-bravo',
+    slug: 'article-bravo',
+    collection: 'articles',
+    data: {
+      title: 'Article Bravo',
+      description: 'Platform roadmap',
+      publishDate: new Date('2024-02-20T00:00:00.000Z'),
+      featured: true,
+    },
+  },
+  {
+    id: 'article-alpha',
+    slug: 'article-alpha',
+    collection: 'articles',
+    data: {
+      title: 'Article Alpha',
+      description: 'Foundational principles',
+      publishDate: new Date('2024-01-05T00:00:00.000Z'),
+      featured: true,
+    },
+  },
+]
+
+export const articleCollectionFixture = entries as unknown as ItemType<'articles'>[]
+
+export const cloneArticleCollection = () =>
+  articleCollectionFixture.map(item => ({
+    ...item,
+    data: {
+      ...item.data,
+      publishDate: new Date(item.data.publishDate),
+    },
+  })) as ItemType<'articles'>[]
+
+export default articleCollectionFixture

src/components/Carousel/server/__fixtures__/collection.fixture.ts

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { prepareItems } from '@components/Carousel/server'
+import { cloneArticleCollection } from '@components/Carousel/server/__fixtures__/collection.fixture'
+
+const createItems = () => cloneArticleCollection()
+
+describe('prepareItems', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('filters featured items and sorts by newest publish date', () => {
+    const result = prepareItems(createItems(), 'featured', 'article-bravo')
+
+    expect(result.map(item => item.id)).toEqual(['article-delta', 'article-alpha'])
+    expect(result.every(item => item.data.featured)).toBe(true)
+    expect(result).toHaveLength(2)
+  })
+
+  it('returns suggested items ordered by publish date without the current slug', () => {
+    const result = prepareItems(createItems(), 'suggested', 'article-alpha')
+
+    expect(result.map(item => item.id)).toEqual([
+      'article-delta',
+      'article-charlie',
+      'article-bravo',
+    ])
+    expect(result).toHaveLength(3)
+    expect(result.find(item => item.id === 'article-alpha')).toBeUndefined()
+  })
+
+  it('applies the requested limit after filtering', () => {
+    const limited = prepareItems(createItems(), 'suggested', 'article-alpha', 1)
+
+    expect(limited).toHaveLength(1)
+    expect(limited[0]?.id).toBe('article-delta')
+  })
+
+  it('invokes Math.random when shuffling for the random variant and excludes the current slug', () => {
+    const mathSpy = vi.spyOn(Math, 'random').mockReturnValue(0.9)
+
+    const randomItems = prepareItems(createItems(), 'random', 'article-charlie', 3)
+
+    expect(mathSpy).toHaveBeenCalled()
+    expect(randomItems).toHaveLength(3)
+    expect(randomItems.find(item => item.id === 'article-charlie')).toBeUndefined()
+  })
+})

src/components/Carousel/server/__tests__/index.spec.ts

@@ -0,0 +1,51 @@
+import type { CarouselVariant, ItemType } from '@components/Carousel/@types'
+
+export const prepareItems = (
+  allItems: ItemType[],
+  variant: CarouselVariant,
+  currentSlug: string,
+  limit?: number
+) => {
+  // Filter and sort items based on variant
+  let items: ItemType[] = allItems
+
+  switch (variant) {
+    case 'featured':
+      // Show only featured items, excluding current item
+      items = allItems
+        .filter((item: ItemType) => {
+          if (item.id === currentSlug) return false
+          // All collection types now use the consistent "featured" field
+          return item.data.featured === true
+        })
+        .sort(
+          (a: ItemType, b: ItemType) =>
+            new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
+        )
+      break
+
+    case 'suggested':
+      // Filter out current item and get latest items (suggested mode)
+      items = allItems
+        .filter((item: ItemType) => item.id !== currentSlug)
+        .sort(
+          (a: ItemType, b: ItemType) =>
+            new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
+        )
+      break
+
+    case 'random':
+      // Show all items excluding current one in random order
+      items = allItems
+        .filter((item: ItemType) => item.id !== currentSlug)
+        .sort(() => Math.random() - 0.5)
+      break
+  }
+
+  // Apply limit
+  if (limit) {
+    items = items.slice(0, limit)
+  }
+
+  return items
+}

src/components/Carousel/server/index.ts

@@ -1,5 +1,6 @@
 ---
 import { type CollectionEntry, render } from 'astro:content'
+import { Image } from 'astro:assets'
 import type { MarkdownHeading } from 'astro'
 
 /**
@@ -26,7 +27,7 @@ import Shares from '@components/Social/Shares/index.astro'
 import Testimonials from '@components/Testimonials/index.astro'
 
 /** Export components for use in MDX */
-const Components = { Avatar, Callout, Carousel, Contact, Embed, Featured, Highlighter, Icon, MastodonModal, Newsletter, Shares, Testimonials }
+const Components = { Avatar, Callout, Carousel, Contact, Embed, Featured, Highlighter, Icon, Image, MastodonModal, Newsletter, Shares, Testimonials }
 
 export interface Props {
   /** Page title shown in <title> and H1 */