@fullstackdatasolutions/articles 0.3.0 → 0.4.2

package/src/__tests__/ArticlesPage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ArticlesPage } from '../ArticlesPage'
 import type { ArticlesConfig } from '../articlesConfig'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
 
 jest.mock('next/link', () => ({
   __esModule: true,
@@ -127,6 +127,152 @@ describe('ArticlesPage', () => {
     expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument()
   })
 
+  it('clicking Try again in the error state resets the search', async () => {
+    // First call fails, second call succeeds (after Try again click)
+    ;(globalThis.fetch as jest.Mock).mockResolvedValueOnce({ ok: false }).mockResolvedValue({
+      ok: true,
+      json: async () => ({ articles: mockArticles }),
+    })
+    render(<ArticlesPage config={{ ...baseConfig, layout: ['latest'] }} />)
+
+    await waitFor(() => expect(screen.getByText('Error Loading Articles')).toBeInTheDocument())
+
+    // Click "Try again" - invokes the onClick={() => handleSearch('')} on line 116
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+  })
+
+  it('clicking Clear search in LatestArticlesSection invokes onClearSearch', async () => {
+    jest.useFakeTimers({ legacyFakeTimers: false })
+
+    // Initial load returns articles; search returns empty
+    ;(globalThis.fetch as jest.Mock)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ articles: mockArticles }),
+      })
+      .mockResolvedValue({
+        ok: true,
+        json: async () => ({ articles: [] }),
+      })
+    render(<ArticlesPage config={{ ...baseConfig, layout: ['search', 'latest'] }} />)
+
+    // Let the initial fetch resolve - use runAllTimersAsync to flush timers + microtasks
+    await (jest as unknown as { runAllTimersAsync(): Promise<void> }).runAllTimersAsync()
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+
+    // Type a search query (3+ chars triggers debounce)
+    const searchInput = screen.getByPlaceholderText('Search articles (3+ characters required)...')
+    fireEvent.change(searchInput, { target: { value: 'xyz' } })
+
+    // Advance timers past the 1000ms debounce and flush microtasks
+    await (jest as unknown as { runAllTimersAsync(): Promise<void> }).runAllTimersAsync()
+
+    // Now articles=[] and searchQuery='xyz' so "Clear search" button appears
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /clear search/i })).toBeInTheDocument()
+    )
+
+    // Click "Clear search" - triggers onClearSearch={() => handleSearch('')} on line 131
+    fireEvent.click(screen.getByRole('button', { name: /clear search/i }))
+
+    await (jest as unknown as { runAllTimersAsync(): Promise<void> }).runAllTimersAsync()
+
+    jest.useRealTimers()
+
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+  })
+
+  it('renders null for an unknown/unhandled layout section', async () => {
+    mockFetchSuccess()
+    // 'newsletter' is a valid ArticlesSection type but has no case in the switch -> default: return null
+    const { container } = render(
+      <ArticlesPage config={{ ...baseConfig, layout: ['newsletter'] }} />
+    )
+    await waitFor(() => {})
+    // The wrapper div exists but has no section content
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.querySelector('section')).not.toBeInTheDocument()
+  })
+
+  it('applies all theme properties as CSS custom properties', async () => {
+    mockFetchSuccess()
+    const config: ArticlesConfig = {
+      ...baseConfig,
+      layout: ['latest'],
+      theme: {
+        fontFamily: "'Inter', sans-serif",
+        headerColor: '#111827',
+        textColor: '#6b7280',
+        backgroundColor: '#ffffff',
+        linkColor: '#4f46e5',
+        linkHoverColor: '#4338ca',
+        linkTextDecoration: 'underline',
+        headerFontWeight: 700,
+        headerFontSize: '1.25rem',
+        bodyFontSize: '1rem',
+        lineHeight: '1.75',
+        borderRadius: '0.5rem',
+      },
+    }
+    const { container } = render(<ArticlesPage config={config} />)
+
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+
+    const wrapper = container.firstChild as HTMLElement
+    expect(wrapper.style.getPropertyValue('--articles-font-family')).toBe("'Inter', sans-serif")
+    expect(wrapper.style.getPropertyValue('--articles-text-color')).toBe('#6b7280')
+    expect(wrapper.style.getPropertyValue('--articles-bg-color')).toBe('#ffffff')
+    expect(wrapper.style.getPropertyValue('--articles-link-hover-color')).toBe('#4338ca')
+    expect(wrapper.style.getPropertyValue('--articles-link-decoration')).toBe('underline')
+    expect(wrapper.style.getPropertyValue('--articles-header-font-weight')).toBe('700')
+    expect(wrapper.style.getPropertyValue('--articles-header-font-size')).toBe('1.25rem')
+    expect(wrapper.style.getPropertyValue('--articles-body-font-size')).toBe('1rem')
+    expect(wrapper.style.getPropertyValue('--articles-line-height')).toBe('1.75')
+    expect(wrapper.style.getPropertyValue('--articles-border-radius')).toBe('0.5rem')
+  })
+
+  it('hides categories section when search query is active', async () => {
+    ;(globalThis.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: async () => ({ articles: mockArticles }),
+    })
+    render(<ArticlesPage config={{ ...baseConfig, layout: ['search', 'categories'] }} />)
+
+    await waitFor(() => expect(screen.getByText('Browse by Category')).toBeInTheDocument())
+
+    const searchInput = screen.getByPlaceholderText('Search articles (3+ characters required)...')
+    fireEvent.change(searchInput, { target: { value: 'vol' } })
+
+    // searchQuery set synchronously -> categories returns null
+    await waitFor(() => expect(screen.queryByText('Browse by Category')).not.toBeInTheDocument())
+  })
+
+  it('uses DEFAULT_PAGE_SIZE when pageSize is not in config', async () => {
+    mockFetchSuccess()
+    // Omit pageSize to hit the ?? DEFAULT_PAGE_SIZE branch
+    const config: ArticlesConfig = {
+      siteUrl: 'https://example.com',
+      siteName: 'Test Site',
+      layout: ['latest'],
+    }
+    render(<ArticlesPage config={config} />)
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+  })
+
+  it('uses provided categoriesPageSize when set', async () => {
+    mockFetchSuccess()
+    // Set categoriesPageSize to hit the left branch of ?? DEFAULT_CATEGORIES_PAGE_SIZE
+    const config: ArticlesConfig = {
+      ...baseConfig,
+      layout: ['categories'],
+      categoriesPageSize: 4,
+    }
+    render(<ArticlesPage config={config} />)
+    await waitFor(() => expect(screen.getByText('Browse by Category')).toBeInTheDocument())
+  })
+
   it('uses pageSize from config', async () => {
     const manyArticles = Array.from({ length: 10 }, (_, i) => ({
       ...mockArticles[0],

package/src/__tests__/CommentItem.test.tsx

@@ -21,6 +21,13 @@ const baseComment: ArticleCommentWithReplies = {
   replies: [],
 }
 
+function makeComment(msAgo: number): ArticleCommentWithReplies {
+  return {
+    ...baseComment,
+    createdAt: new Date(Date.now() - msAgo).toISOString(),
+  }
+}
+
 describe('CommentItem', () => {
   beforeEach(() => jest.clearAllMocks())
 
@@ -146,4 +153,107 @@ describe('CommentItem', () => {
     fireEvent.click(screen.getAllByRole('button', { name: /cancel/i })[0])
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
   })
+
+  it('clicking the form Cancel button hides the reply form via onCancel', () => {
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        onRefresh={jest.fn()}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /reply/i }))
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+
+    // The CommentForm renders its own Cancel button (the second Cancel button)
+    const cancelButtons = screen.getAllByRole('button', { name: /cancel/i })
+    // Click the last one - that is the CommentForm's Cancel, which calls onCancel
+    fireEvent.click(cancelButtons[cancelButtons.length - 1])
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+  })
+
+  it('calls onRefresh and hides the form after reply is submitted', async () => {
+    const onRefresh = jest.fn()
+    mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({}) })
+
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        onRefresh={onRefresh}
+      />
+    )
+    // Open reply form
+    fireEvent.click(screen.getByRole('button', { name: /reply/i }))
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+
+    // Fill the textarea
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'My reply text' } })
+
+    // The CommentForm submit button is labeled "Reply" when parentId is set
+    // There are now two "Reply" buttons: the toggle and the form submit
+    // The form submit is a type="submit" button; click the second one
+    const replyButtons = screen.getAllByRole('button', { name: /reply/i })
+    fireEvent.click(replyButtons[replyButtons.length - 1])
+
+    // After successful submit: form hides and onRefresh called
+    await waitFor(() => expect(screen.queryByRole('textbox')).not.toBeInTheDocument())
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+  })
+
+  describe('relativeTime display', () => {
+    it('shows "just now" for timestamps less than 1 minute ago', () => {
+      render(<CommentItem comment={makeComment(30_000)} articleSlug="a" onRefresh={jest.fn()} />)
+      expect(screen.getByText('just now')).toBeInTheDocument()
+    })
+
+    it('shows "Xm ago" for timestamps 1-59 minutes ago', () => {
+      render(
+        <CommentItem comment={makeComment(5 * 60_000)} articleSlug="a" onRefresh={jest.fn()} />
+      )
+      expect(screen.getByText('5m ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xh ago" for timestamps 1-23 hours ago', () => {
+      render(
+        <CommentItem comment={makeComment(3 * 60 * 60_000)} articleSlug="a" onRefresh={jest.fn()} />
+      )
+      expect(screen.getByText('3h ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xd ago" for timestamps 1-29 days ago', () => {
+      render(
+        <CommentItem
+          comment={makeComment(10 * 24 * 60 * 60_000)}
+          articleSlug="a"
+          onRefresh={jest.fn()}
+        />
+      )
+      expect(screen.getByText('10d ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xmo ago" for timestamps 1-11 months ago', () => {
+      render(
+        <CommentItem
+          comment={makeComment(60 * 24 * 60 * 60_000)}
+          articleSlug="a"
+          onRefresh={jest.fn()}
+        />
+      )
+      expect(screen.getByText('2mo ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xy ago" for timestamps 12+ months ago', () => {
+      render(
+        <CommentItem
+          comment={makeComment(400 * 24 * 60 * 60_000)}
+          articleSlug="a"
+          onRefresh={jest.fn()}
+        />
+      )
+      expect(screen.getByText('1y ago')).toBeInTheDocument()
+    })
+  })
 })

package/src/__tests__/seoUtils.test.ts

@@ -214,4 +214,39 @@ describe('getArticleSitemapEntries', () => {
     const entries = await getArticleSitemapEntries('https://example.com')
     expect(entries).toEqual([])
   })
+
+  it('accepts ArticlesConfig and uses siteUrl from config', async () => {
+    const entries = await getArticleSitemapEntries(config)
+    expect(entries).toHaveLength(4)
+
+    const articleUrls = entries.filter((e) => !e.url.includes('/category/')).map((e) => e.url)
+    expect(articleUrls).toEqual([
+      'https://example.com/articles/article-one',
+      'https://example.com/articles/article-two',
+    ])
+
+    const categoryUrls = entries.filter((e) => e.url.includes('/category/')).map((e) => e.url)
+    expect(categoryUrls).toEqual([
+      'https://example.com/articles/category/campaigns',
+      'https://example.com/articles/category/volunteers',
+    ])
+  })
+
+  it('accepts ArticlesConfig with trailing slash and strips it', async () => {
+    const entries = await getArticleSitemapEntries({
+      siteUrl: 'https://example.com/',
+      siteName: 'Example Site',
+    })
+    expect(entries).toHaveLength(4)
+    entries.forEach((e) => {
+      // protocol (https://) is fine; double slash in the path is not
+      expect(e.url.replace(/^https?:\/\//, '')).not.toContain('//')
+    })
+  })
+
+  it('returns same results whether called with string or ArticlesConfig', async () => {
+    const stringResult = await getArticleSitemapEntries('https://example.com')
+    const configResult = await getArticleSitemapEntries(config)
+    expect(JSON.stringify(stringResult)).toBe(JSON.stringify(configResult))
+  })
 })

package/src/index.ts

@@ -13,6 +13,9 @@ export { LatestArticlesSection } from './LatestArticlesSection'
 export { CategoryArticlesPage } from './CategoryArticlesPage'
 export { ArticleSchema, BreadcrumbSchema, CollectionPageSchema } from './ArticleSchemas'
 
+export { ArticleSocialShare } from './ArticleSocialShare'
+export { ArticleNavigation } from './ArticleNavigation'
+
 // Comments
 export { CommentsSection } from './CommentsSection'
 export { CommentThread } from './CommentThread'

package/src/seoUtils.ts

@@ -130,7 +130,13 @@ export async function generateCategoryMetadata(
   }
 }
 
-export async function getArticleSitemapEntries(baseUrl: string): Promise<MetadataRoute.Sitemap> {
+export async function getArticleSitemapEntries(
+  baseUrlOrConfig: string | ArticlesConfig
+): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = (
+    typeof baseUrlOrConfig === 'string' ? baseUrlOrConfig : baseUrlOrConfig.siteUrl
+  ).replace(/\/$/, '')
+
   try {
     const [articles, categories] = await Promise.all([getAllArticles(), getAllCategories()])