@fullstackdatasolutions/articles 0.1.0

package/src/__tests__/CommentForm.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { CommentForm } from '../CommentForm'
+
+const mockFetch = jest.fn()
+globalThis.fetch = mockFetch
+
+describe('CommentForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders a textarea and submit button', () => {
+    render(<CommentForm articleSlug="my-article" onSuccess={jest.fn()} />)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /post comment/i })).toBeInTheDocument()
+  })
+
+  it('uses reply placeholder and label when parentId is provided', () => {
+    render(<CommentForm articleSlug="my-article" parentId="parent-1" onSuccess={jest.fn()} />)
+    expect(screen.getByPlaceholderText('Write a reply…')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^reply$/i })).toBeInTheDocument()
+  })
+
+  it('submit button is disabled when textarea is empty', () => {
+    render(<CommentForm articleSlug="my-article" onSuccess={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /post comment/i })).toBeDisabled()
+  })
+
+  it('submit button is enabled once text is entered', () => {
+    render(<CommentForm articleSlug="my-article" onSuccess={jest.fn()} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Hello world' } })
+    expect(screen.getByRole('button', { name: /post comment/i })).toBeEnabled()
+  })
+
+  it('shows a Cancel button and calls onCancel when clicked', () => {
+    const onCancel = jest.fn()
+    render(<CommentForm articleSlug="my-article" onSuccess={jest.fn()} onCancel={onCancel} />)
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onSuccess and clears the field after a successful POST', async () => {
+    const onSuccess = jest.fn()
+    mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({ comment: {} }) })
+
+    render(<CommentForm articleSlug="my-article" onSuccess={onSuccess} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Great post!' } })
+    fireEvent.click(screen.getByRole('button', { name: /post comment/i }))
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+    expect(screen.getByRole('textbox')).toHaveValue('')
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/api/articles/my-article/comments',
+      expect.objectContaining({ method: 'POST' })
+    )
+  })
+
+  it('shows an error message when the server returns a non-ok response', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ error: 'Server error' }),
+    })
+
+    render(<CommentForm articleSlug="my-article" onSuccess={jest.fn()} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Test' } })
+    fireEvent.click(screen.getByRole('button', { name: /post comment/i }))
+
+    await waitFor(() => expect(screen.getByText('Server error')).toBeInTheDocument())
+  })
+
+  it('shows character count warning when approaching the limit', () => {
+    render(<CommentForm articleSlug="my-article" onSuccess={jest.fn()} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'x'.repeat(1850) } })
+    expect(screen.getByText(/characters remaining/i)).toBeInTheDocument()
+  })
+})

package/src/__tests__/CommentItem.test.tsx

@@ -0,0 +1,149 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { CommentItem } from '../CommentItem'
+import type { ArticleCommentWithReplies } from '../commentTypes'
+
+const mockFetch = jest.fn()
+globalThis.fetch = mockFetch
+
+const baseComment: ArticleCommentWithReplies = {
+  id: 'c1',
+  articleSlug: 'my-article',
+  body: 'Hello world',
+  isDeleted: false,
+  createdAt: new Date(Date.now() - 60_000).toISOString(),
+  authorId: 'user@example.com',
+  authorName: 'Alice',
+  parentId: null,
+  replies: [],
+}
+
+describe('CommentItem', () => {
+  beforeEach(() => jest.clearAllMocks())
+
+  it('renders the comment body and author name', () => {
+    render(<CommentItem comment={baseComment} articleSlug="my-article" onRefresh={jest.fn()} />)
+    expect(screen.getByText('Hello world')).toBeInTheDocument()
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+  })
+
+  it('renders "Comment removed" and hides body when isDeleted is true', () => {
+    render(
+      <CommentItem
+        comment={{ ...baseComment, isDeleted: true, body: '' }}
+        articleSlug="my-article"
+        onRefresh={jest.fn()}
+      />
+    )
+    expect(screen.getByText('Comment removed')).toBeInTheDocument()
+    expect(screen.queryByText('Hello world')).not.toBeInTheDocument()
+  })
+
+  it('shows Reply button when currentUserId is set and comment is top-level', () => {
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        onRefresh={jest.fn()}
+      />
+    )
+    expect(screen.getByRole('button', { name: /reply/i })).toBeInTheDocument()
+  })
+
+  it('does not show Reply button on replies (isReply=true)', () => {
+    render(
+      <CommentItem
+        comment={{ ...baseComment, parentId: 'parent-1' }}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        isReply
+        onRefresh={jest.fn()}
+      />
+    )
+    expect(screen.queryByRole('button', { name: /reply/i })).not.toBeInTheDocument()
+  })
+
+  it('shows Delete button only to the comment author', () => {
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="user@example.com"
+        onRefresh={jest.fn()}
+      />
+    )
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument()
+  })
+
+  it('does not show Delete button to a different user', () => {
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        onRefresh={jest.fn()}
+      />
+    )
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument()
+  })
+
+  it('calls DELETE and onRefresh when Delete is clicked', async () => {
+    const onRefresh = jest.fn()
+    mockFetch.mockResolvedValueOnce({ ok: true })
+
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="user@example.com"
+        onRefresh={onRefresh}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /delete/i }))
+
+    await waitFor(() => expect(onRefresh).toHaveBeenCalledTimes(1))
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/api/articles/my-article/comments/c1',
+      expect.objectContaining({ method: 'DELETE' })
+    )
+  })
+
+  it('renders nested replies', () => {
+    const reply = {
+      ...baseComment,
+      id: 'r1',
+      body: 'A reply',
+      authorName: 'Bob',
+      parentId: 'c1',
+    }
+    render(
+      <CommentItem
+        comment={{ ...baseComment, replies: [reply] }}
+        articleSlug="my-article"
+        onRefresh={jest.fn()}
+      />
+    )
+    expect(screen.getByText('A reply')).toBeInTheDocument()
+    expect(screen.getByText('Bob')).toBeInTheDocument()
+  })
+
+  it('toggles the reply form on Reply click', () => {
+    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()
+    // Two Cancel buttons exist once the reply form is open (toggle + form); click either
+    fireEvent.click(screen.getAllByRole('button', { name: /cancel/i })[0])
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+  })
+})

package/src/__tests__/CommentsSection.test.tsx

@@ -0,0 +1,118 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { CommentsSection } from '../CommentsSection'
+import type { CommentsConfig } from '../articlesConfig'
+import type { ArticleCommentWithReplies } from '../commentTypes'
+
+const mockFetch = jest.fn()
+globalThis.fetch = mockFetch
+
+const mockUseSession = jest.fn()
+jest.mock('next-auth/react', () => ({
+  useSession: () => mockUseSession(),
+  signIn: jest.fn(),
+}))
+
+const enabledConfig: CommentsConfig = { enabled: true }
+
+const mockComments: ArticleCommentWithReplies[] = [
+  {
+    id: 'c1',
+    articleSlug: 'my-article',
+    body: 'First comment',
+    isDeleted: false,
+    createdAt: new Date().toISOString(),
+    authorId: 'alice@example.com',
+    authorName: 'Alice',
+    parentId: null,
+    replies: [],
+  },
+]
+
+describe('CommentsSection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseSession.mockReturnValue({ data: null, status: 'unauthenticated' })
+  })
+
+  it('renders nothing when comments are disabled globally', () => {
+    const { container } = render(
+      <CommentsSection articleSlug="my-article" config={{ enabled: false }} />
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders nothing when the article is disabled via perArticleOverride', () => {
+    const { container } = render(
+      <CommentsSection
+        articleSlug="my-article"
+        config={{ enabled: true, perArticleOverride: { 'my-article': false } }}
+      />
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('shows "Sign in" prompt for unauthenticated users', async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({ comments: [] }) })
+
+    render(<CommentsSection articleSlug="my-article" config={enabledConfig} />)
+
+    await waitFor(() => expect(screen.queryByText(/loading comments/i)).not.toBeInTheDocument())
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument()
+  })
+
+  it('shows the comment form for authenticated users', async () => {
+    mockUseSession.mockReturnValue({
+      data: { user: { email: 'alice@example.com', name: 'Alice' } },
+      status: 'authenticated',
+    })
+    mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({ comments: [] }) })
+
+    render(<CommentsSection articleSlug="my-article" config={enabledConfig} />)
+
+    await waitFor(() => expect(screen.queryByText(/loading comments/i)).not.toBeInTheDocument())
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+
+  it('renders fetched comments', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ comments: mockComments }),
+    })
+
+    render(<CommentsSection articleSlug="my-article" config={enabledConfig} />)
+
+    await waitFor(() => expect(screen.getByText('First comment')).toBeInTheDocument())
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+  })
+
+  it('shows the correct comment count', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ comments: mockComments }),
+    })
+
+    render(<CommentsSection articleSlug="my-article" config={enabledConfig} />)
+
+    await waitFor(() => expect(screen.getByText('1 comment')).toBeInTheDocument())
+  })
+
+  it('shows an error message when the fetch fails', async () => {
+    mockFetch.mockRejectedValueOnce(new Error('network error'))
+
+    render(<CommentsSection articleSlug="my-article" config={enabledConfig} />)
+
+    await waitFor(() => expect(screen.getByText(/could not load comments/i)).toBeInTheDocument())
+  })
+
+  it('shows empty state when no comments exist', async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({ comments: [] }) })
+
+    render(<CommentsSection articleSlug="my-article" config={enabledConfig} />)
+
+    await waitFor(() => expect(screen.getByText(/no comments yet/i)).toBeInTheDocument())
+  })
+})

package/src/__tests__/FeaturedArticle.test.tsx

@@ -0,0 +1,85 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import type { Article } from '../articleTypes'
+import { FeaturedArticle } from '../FeaturedArticle'
+
+jest.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}))
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: React.ComponentProps<'img'>) => <img {...props} alt={props.alt || ''} />,
+}))
+
+const baseArticle: Article = {
+  slug: 'featured-slug',
+  title: 'Featured Article Title',
+  excerpt: 'Featured excerpt text.',
+  author: 'John Smith',
+  category: 'Technology',
+  categories: ['Technology'],
+  readTime: '8 min read',
+  featuredImage: '/articles/featured-slug/hero.jpg',
+  tags: ['tech'],
+}
+
+describe('FeaturedArticle', () => {
+  it('renders the FEATURED ARTICLE label', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.getByText('FEATURED ARTICLE')).toBeInTheDocument()
+  })
+
+  it('renders the article title', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.getByText('Featured Article Title')).toBeInTheDocument()
+  })
+
+  it('renders the excerpt', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.getByText('Featured excerpt text.')).toBeInTheDocument()
+  })
+
+  it('renders the author', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.getByText('John Smith')).toBeInTheDocument()
+  })
+
+  it('renders the read time', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.getByText('8 min read')).toBeInTheDocument()
+  })
+
+  it('renders the category badge', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.getByText('Technology')).toBeInTheDocument()
+  })
+
+  it('links to the correct article page', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    const link = screen.getByRole('link', { name: /Read Full Article/i })
+    expect(link).toHaveAttribute('href', '/articles/featured-slug')
+  })
+
+  it('renders the featured image with correct alt text', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    const img = screen.getByAltText('Featured Article Title')
+    expect(img).toBeInTheDocument()
+  })
+
+  it('renders the date when article.date is set', () => {
+    render(<FeaturedArticle article={{ ...baseArticle, date: '2025-11-01' }} />)
+    expect(screen.getByText('2025-11-01')).toBeInTheDocument()
+  })
+
+  it('does not render a date element when article.date is absent', () => {
+    render(<FeaturedArticle article={baseArticle} />)
+    expect(screen.queryByText(/2025/)).not.toBeInTheDocument()
+  })
+})

package/src/__tests__/LatestArticles.test.tsx

@@ -0,0 +1,157 @@
+import React from 'react'
+import { LatestArticles } from '../LatestArticles'
+import type { Article } from '../articleTypes'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+jest.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}))
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: React.ComponentProps<'img'>) => {
+    const { alt = '', ...rest } = props
+    return <img alt={alt} {...rest} />
+  },
+}))
+
+function makeArticle(n: number): Article {
+  return {
+    slug: `article-${n}`,
+    title: `Article ${n}`,
+    excerpt: `Excerpt for article ${n}`,
+    date: '2025-01-01',
+    author: 'Author',
+    category: 'Test',
+    categories: ['Test'],
+    readTime: '3 min read',
+    featuredImage: `/articles/article-${n}/image.jpg`,
+    tags: ['test'],
+  }
+}
+
+function makeArticles(count: number): Article[] {
+  return Array.from({ length: count }, (_, i) => makeArticle(i + 1))
+}
+
+describe('LatestArticles', () => {
+  it('renders the first pageSize articles on mount', () => {
+    render(<LatestArticles articles={makeArticles(10)} pageSize={3} />)
+
+    expect(screen.getByText('Article 1')).toBeInTheDocument()
+    expect(screen.getByText('Article 2')).toBeInTheDocument()
+    expect(screen.getByText('Article 3')).toBeInTheDocument()
+    expect(screen.queryByText('Article 4')).not.toBeInTheDocument()
+  })
+
+  it('does not show Load more button when article count equals pageSize', () => {
+    render(<LatestArticles articles={makeArticles(3)} pageSize={3} />)
+
+    expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+  })
+
+  it('does not show Load more button when article count is less than pageSize', () => {
+    render(<LatestArticles articles={makeArticles(2)} pageSize={6} />)
+
+    expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+  })
+
+  it('does not show Load more button when articles array is empty', () => {
+    render(<LatestArticles articles={[]} pageSize={6} />)
+
+    expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+  })
+
+  it('shows Load more button when there are more articles than pageSize', () => {
+    render(<LatestArticles articles={makeArticles(7)} pageSize={3} />)
+
+    expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
+  })
+
+  it('appends the next pageSize articles on button click', () => {
+    render(<LatestArticles articles={makeArticles(7)} pageSize={3} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more articles' }))
+
+    expect(screen.getByText('Article 4')).toBeInTheDocument()
+    expect(screen.getByText('Article 5')).toBeInTheDocument()
+    expect(screen.getByText('Article 6')).toBeInTheDocument()
+    expect(screen.queryByText('Article 7')).not.toBeInTheDocument()
+  })
+
+  it('hides the button once the last article is loaded', () => {
+    render(<LatestArticles articles={makeArticles(6)} pageSize={3} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more articles' }))
+
+    expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+    for (let i = 1; i <= 6; i++) {
+      expect(screen.getByText(`Article ${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('loads articles across multiple clicks until exhausted', () => {
+    render(<LatestArticles articles={makeArticles(10)} pageSize={3} />)
+
+    // click 1: visible 1-3 -> 1-6
+    expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Load more articles' }))
+    expect(screen.getByText('Article 6')).toBeInTheDocument()
+    expect(screen.queryByText('Article 7')).not.toBeInTheDocument()
+
+    // click 2: visible 1-6 -> 1-9
+    expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Load more articles' }))
+    expect(screen.getByText('Article 9')).toBeInTheDocument()
+    expect(screen.queryByText('Article 10')).not.toBeInTheDocument()
+
+    // click 3: visible 1-9 -> 1-10 (last batch is smaller than pageSize)
+    expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Load more articles' }))
+    expect(screen.getByText('Article 10')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+  })
+
+  it('resets to pageSize when the articles prop changes', () => {
+    const { rerender } = render(<LatestArticles articles={makeArticles(10)} pageSize={3} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more articles' }))
+    expect(screen.getByText('Article 4')).toBeInTheDocument()
+
+    const newArticles = Array.from({ length: 8 }, (_, i) => ({
+      ...makeArticle(i + 1),
+      slug: `new-${i + 1}`,
+      title: `New Article ${i + 1}`,
+    }))
+    rerender(<LatestArticles articles={newArticles} pageSize={3} />)
+
+    expect(screen.getByText('New Article 1')).toBeInTheDocument()
+    expect(screen.queryByText('New Article 4')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
+  })
+
+  it('resets visible count when pageSize prop changes', () => {
+    const articles = makeArticles(10)
+    const { rerender } = render(<LatestArticles articles={articles} pageSize={6} />)
+
+    expect(screen.getByText('Article 6')).toBeInTheDocument()
+    expect(screen.queryByText('Article 7')).not.toBeInTheDocument()
+
+    rerender(<LatestArticles articles={articles} pageSize={3} />)
+
+    expect(screen.getByText('Article 3')).toBeInTheDocument()
+    expect(screen.queryByText('Article 4')).not.toBeInTheDocument()
+  })
+
+  it('shows all articles when pageSize exceeds article count', () => {
+    render(<LatestArticles articles={makeArticles(4)} pageSize={10} />)
+
+    for (let i = 1; i <= 4; i++) {
+      expect(screen.getByText(`Article ${i}`)).toBeInTheDocument()
+    }
+    expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+  })
+})