@fullstackdatasolutions/articles 0.6.0 → 0.7.1

package/src/__tests__/ArticleContent.test.tsx

@@ -6,8 +6,12 @@ import { render, screen } from '@testing-library/react'
 import { ArticleContent } from '../ArticleContent'
 import type { Article } from '../articleTypes'
 
-jest.mock('next-mdx-remote/rsc', () => ({
-  MDXRemote: ({ source }: { source: string }) => <div data-testid="mdx-remote">{source}</div>,
+const mockRenderMdxSource = jest
+  .fn()
+  .mockResolvedValue(React.createElement('div', { 'data-testid': 'mdx-content' }, 'MDX rendered'))
+
+jest.mock('../renderMdx', () => ({
+  renderMdxSource: (...args: unknown[]) => mockRenderMdxSource(...args),
 }))
 
 const baseArticle: Article = {
@@ -22,70 +26,110 @@ const baseArticle: Article = {
 }
 
 describe('ArticleContent', () => {
+  beforeEach(() => {
+    mockRenderMdxSource.mockResolvedValue(
+      React.createElement('div', { 'data-testid': 'mdx-content' }, 'MDX rendered')
+    )
+  })
+
   describe('HTML path', () => {
-    it('renders a div with dangerouslySetInnerHTML when contentType is not mdx', () => {
+    it('renders a div with dangerouslySetInnerHTML when contentType is not mdx', async () => {
       const article: Article = { ...baseArticle, contentType: 'md', htmlContent: '<p>Hello</p>' }
-      const { container } = render(<ArticleContent article={article} />)
+      const el = await ArticleContent({ article })
+      const { container } = render(el as React.ReactElement)
       expect(container.firstChild).toBeInTheDocument()
-      expect(container.querySelector('[data-testid="mdx-remote"]')).toBeNull()
+      expect(container.querySelector('[data-testid="mdx-content"]')).toBeNull()
       expect(container.firstElementChild?.innerHTML).toBe('<p>Hello</p>')
     })
 
-    it('renders HTML path when contentType is mdx but mdxSource is undefined', () => {
+    it('renders HTML path when contentType is mdx but mdxSource is undefined', async () => {
       const article: Article = {
         ...baseArticle,
         contentType: 'mdx',
         htmlContent: '<p>Fallback</p>',
       }
-      const { container } = render(<ArticleContent article={article} />)
-      expect(container.querySelector('[data-testid="mdx-remote"]')).toBeNull()
+      const el = await ArticleContent({ article })
+      const { container } = render(el as React.ReactElement)
+      expect(container.querySelector('[data-testid="mdx-content"]')).toBeNull()
       expect(container.firstElementChild?.innerHTML).toBe('<p>Fallback</p>')
     })
 
-    it('renders an empty div without crashing when htmlContent is undefined', () => {
+    it('renders an empty div without crashing when htmlContent is undefined', async () => {
       const article: Article = { ...baseArticle, contentType: 'md' }
-      const { container } = render(<ArticleContent article={article} />)
+      const el = await ArticleContent({ article })
+      const { container } = render(el as React.ReactElement)
       expect(container.firstElementChild?.innerHTML).toBe('')
     })
 
-    it('renders an empty div without crashing when htmlContent is empty string', () => {
+    it('renders an empty div without crashing when htmlContent is empty string', async () => {
       const article: Article = { ...baseArticle, contentType: 'md', htmlContent: '' }
-      const { container } = render(<ArticleContent article={article} />)
+      const el = await ArticleContent({ article })
+      const { container } = render(el as React.ReactElement)
       expect(container.firstElementChild?.innerHTML).toBe('')
     })
 
-    it('applies className to the outer div on the HTML path', () => {
+    it('applies className to the outer div on the HTML path', async () => {
       const article: Article = { ...baseArticle, contentType: 'md', htmlContent: '<p>Hi</p>' }
-      const { container } = render(<ArticleContent article={article} className="custom-class" />)
+      const el = await ArticleContent({ article, className: 'custom-class' })
+      const { container } = render(el as React.ReactElement)
       expect(container.firstElementChild).toHaveClass('custom-class')
     })
   })
 
   describe('MDX path', () => {
-    it('renders MDXRemote when contentType is mdx and mdxSource is set', () => {
-      const article: Article = { ...baseArticle, contentType: 'mdx', mdxSource: '# Hello MDX' }
-      render(<ArticleContent article={article} />)
-      expect(screen.getByTestId('mdx-remote')).toBeInTheDocument()
-    })
-
-    it('passes mdxSource as source prop to MDXRemote', () => {
+    it('renders MDX content when contentType is mdx and mdxSource is set', async () => {
       const article: Article = { ...baseArticle, contentType: 'mdx', mdxSource: '# Hello MDX' }
-      render(<ArticleContent article={article} />)
-      expect(screen.getByTestId('mdx-remote')).toHaveTextContent('# Hello MDX')
+      const el = await ArticleContent({ article })
+      render(el as React.ReactElement)
+      expect(screen.getByTestId('mdx-content')).toBeInTheDocument()
     })
 
-    it('wraps MDXRemote in a div on the MDX path', () => {
+    it('wraps MDX content in a div on the MDX path', async () => {
       const article: Article = { ...baseArticle, contentType: 'mdx', mdxSource: '# Hello MDX' }
-      const { container } = render(<ArticleContent article={article} />)
+      const el = await ArticleContent({ article })
+      const { container } = render(el as React.ReactElement)
       const wrapper = container.firstElementChild
       expect(wrapper?.tagName).toBe('DIV')
-      expect(wrapper?.querySelector('[data-testid="mdx-remote"]')).toBeInTheDocument()
+      expect(wrapper?.querySelector('[data-testid="mdx-content"]')).toBeInTheDocument()
     })
 
-    it('applies className to the outer div on the MDX path', () => {
+    it('applies className to the outer div on the MDX path', async () => {
       const article: Article = { ...baseArticle, contentType: 'mdx', mdxSource: '# Hello MDX' }
-      const { container } = render(<ArticleContent article={article} className="mdx-wrapper" />)
+      const el = await ArticleContent({ article, className: 'mdx-wrapper' })
+      const { container } = render(el as React.ReactElement)
       expect(container.firstElementChild).toHaveClass('mdx-wrapper')
     })
+
+    it('renders MDX for a nested article slug', async () => {
+      const article: Article = {
+        ...baseArticle,
+        slug: 'tales-of-the-valiant/tov-barbarian-guide',
+        contentType: 'mdx',
+        mdxSource: '# Barbarian Guide',
+      }
+      const el = await ArticleContent({ article })
+      render(el as React.ReactElement)
+      expect(screen.getByTestId('mdx-content')).toBeInTheDocument()
+    })
+
+    it('passes basePath derived from article slug to renderMdxSource', async () => {
+      const article: Article = { ...baseArticle, contentType: 'mdx', mdxSource: '# Hello MDX' }
+      await ArticleContent({ article })
+      expect(mockRenderMdxSource).toHaveBeenCalledWith('# Hello MDX', '/articles/test-slug')
+    })
+
+    it('passes basePath with nested slug to renderMdxSource', async () => {
+      const article: Article = {
+        ...baseArticle,
+        slug: 'tales-of-the-valiant/tov-barbarian-guide',
+        contentType: 'mdx',
+        mdxSource: '# Barbarian Guide',
+      }
+      await ArticleContent({ article })
+      expect(mockRenderMdxSource).toHaveBeenCalledWith(
+        '# Barbarian Guide',
+        '/articles/tales-of-the-valiant/tov-barbarian-guide'
+      )
+    })
   })
 })

package/src/__tests__/ArticleSocialShare.test.tsx

@@ -32,7 +32,7 @@ describe('ArticleSocialShare', () => {
       expect(screen.getByText('Share this article')).toBeInTheDocument()
     })
 
-    it('renders all 8 share buttons', () => {
+    it('renders all share controls', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       expect(screen.getByRole('button', { name: /linkedin/i })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /facebook/i })).toBeInTheDocument()
@@ -40,7 +40,7 @@ describe('ArticleSocialShare', () => {
       expect(screen.getByRole('button', { name: /reddit/i })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /whatsapp/i })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /telegram/i })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /email/i })).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: /email/i })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument()
     })
   })
@@ -149,19 +149,14 @@ describe('ArticleSocialShare', () => {
   })
 
   describe('Email button', () => {
-    it('clicking Email sets location.href to a mailto link', () => {
-      const originalLocation = globalThis.location
-      delete (globalThis as Record<string, unknown>).location
-      ;(globalThis as Record<string, unknown>).location = { href: '' }
-
+    it('renders Email as a mailto link', () => {
       render(<ArticleSocialShare {...defaultProps} />)
-      fireEvent.click(screen.getByRole('button', { name: /email/i }))
 
-      expect((globalThis.location as { href: string }).href).toContain('mailto:')
-      expect((globalThis.location as { href: string }).href).toContain(
-        encodeURIComponent(defaultProps.title)
+      const emailLink = screen.getByRole('link', { name: /email/i })
+      expect(emailLink).toHaveAttribute(
+        'href',
+        expect.stringContaining(`mailto:?subject=${encodeURIComponent(defaultProps.title)}`)
       )
-      ;(globalThis as Record<string, unknown>).location = originalLocation
     })
   })
 

package/src/__tests__/articlesConfig.test.ts

@@ -0,0 +1,57 @@
+import { DEFAULT_PAGE_SIZE, DEFAULT_CATEGORIES_PAGE_SIZE, DEFAULT_LAYOUT } from '../articlesConfig'
+
+describe('articlesConfig constants', () => {
+  describe('DEFAULT_PAGE_SIZE', () => {
+    it('exports DEFAULT_PAGE_SIZE as 6', () => {
+      expect(DEFAULT_PAGE_SIZE).toBe(6)
+    })
+
+    it('is a number', () => {
+      expect(typeof DEFAULT_PAGE_SIZE).toBe('number')
+    })
+  })
+
+  describe('DEFAULT_CATEGORIES_PAGE_SIZE', () => {
+    it('exports DEFAULT_CATEGORIES_PAGE_SIZE as 8', () => {
+      expect(DEFAULT_CATEGORIES_PAGE_SIZE).toBe(8)
+    })
+
+    it('is a number', () => {
+      expect(typeof DEFAULT_CATEGORIES_PAGE_SIZE).toBe('number')
+    })
+  })
+
+  describe('DEFAULT_LAYOUT', () => {
+    it('is an array', () => {
+      expect(Array.isArray(DEFAULT_LAYOUT)).toBe(true)
+    })
+
+    it('contains hero, search, featured, latest, categories in order', () => {
+      expect(DEFAULT_LAYOUT).toEqual(['hero', 'search', 'featured', 'latest', 'categories'])
+    })
+
+    it('has 5 entries', () => {
+      expect(DEFAULT_LAYOUT).toHaveLength(5)
+    })
+
+    it('includes hero', () => {
+      expect(DEFAULT_LAYOUT).toContain('hero')
+    })
+
+    it('includes search', () => {
+      expect(DEFAULT_LAYOUT).toContain('search')
+    })
+
+    it('includes featured', () => {
+      expect(DEFAULT_LAYOUT).toContain('featured')
+    })
+
+    it('includes latest', () => {
+      expect(DEFAULT_LAYOUT).toContain('latest')
+    })
+
+    it('includes categories', () => {
+      expect(DEFAULT_LAYOUT).toContain('categories')
+    })
+  })
+})

package/src/__tests__/markdown.test.ts

@@ -0,0 +1,278 @@
+// All unified-ecosystem packages are ESM-only and cannot be loaded by ts-jest's
+// CommonJS transform. Mock them before importing markdown.ts.
+jest.mock('rehype-prism-plus', () => () => () => {})
+jest.mock('rehype-sanitize', () => () => () => {})
+jest.mock('rehype-slug', () => () => () => {})
+jest.mock('rehype-stringify', () => () => () => {})
+jest.mock('remark-gfm', () => () => () => {})
+jest.mock('remark-github-blockquote-alert', () => () => () => {})
+jest.mock('remark-parse', () => () => () => {})
+jest.mock('remark-rehype', () => () => () => {})
+
+// Mock remark() to return a chainable processor whose .process() resolves to ''
+jest.mock('remark', () => {
+  const makeChain = (): Record<string, unknown> => {
+    const chain: Record<string, unknown> = {
+      use: () => chain,
+      process: async () => ({ toString: () => '' }),
+    }
+    return chain
+  }
+  return { remark: makeChain }
+})
+
+// Provide a real depth-first visit implementation so customRenderer works.
+jest.mock('unist-util-visit', () => ({
+  visit(
+    tree: { children?: unknown[] },
+    type: string,
+    visitor: (node: {
+      type: string
+      tagName?: string
+      properties?: Record<string, unknown>
+      children?: unknown[]
+    }) => void
+  ) {
+    function walk(node: {
+      type: string
+      tagName?: string
+      properties?: Record<string, unknown>
+      children?: unknown[]
+    }) {
+      if (node.type === type) visitor(node)
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+          walk(child as typeof node)
+        }
+      }
+    }
+    walk(tree as { type: string; children: unknown[] })
+  },
+}))
+
+import { customRenderer, markdownToHtml, extractToc } from '../markdown'
+
+// ---------------------------------------------------------------------------
+// customRenderer
+// ---------------------------------------------------------------------------
+
+type HastElement = {
+  type: 'element'
+  tagName: string
+  properties: Record<string, unknown>
+  children: HastElement[]
+}
+
+type HastRoot = {
+  type: 'root'
+  children: HastElement[]
+}
+
+function el(
+  tagName: string,
+  properties: Record<string, unknown> = {},
+  children: HastElement[] = []
+): HastElement {
+  return { type: 'element', tagName, properties, children }
+}
+
+function root(...nodes: HastElement[]): HastRoot {
+  return { type: 'root', children: nodes }
+}
+
+function runRenderer(tree: HastRoot) {
+  const transform = (customRenderer as unknown as () => (tree: HastRoot) => void)()
+  transform(tree)
+}
+
+describe('customRenderer', () => {
+  describe('heading styles', () => {
+    it('applies h1 className', () => {
+      const node = el('h1')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-20'
+      )
+    })
+
+    it('applies h2 className', () => {
+      const node = el('h2')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-20'
+      )
+    })
+
+    it('applies h3 className', () => {
+      const node = el('h3')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-xl font-semibold text-foreground mt-4 mb-2 scroll-mt-20'
+      )
+    })
+
+    it('applies h4 className', () => {
+      const node = el('h4')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-lg font-semibold text-foreground mt-3 mb-2 scroll-mt-20'
+      )
+    })
+  })
+
+  it('applies p className', () => {
+    const node = el('p')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('text-muted-foreground leading-relaxed mb-4')
+  })
+
+  it('applies ul className', () => {
+    const node = el('ul')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('list-disc list-inside mb-4 space-y-2 ml-4')
+  })
+
+  it('applies ol className', () => {
+    const node = el('ol')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('list-decimal list-inside mb-4 space-y-2 ml-4')
+  })
+
+  it('applies li className', () => {
+    const node = el('li')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('mb-1')
+  })
+
+  it('applies blockquote className', () => {
+    const node = el('blockquote')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe(
+      'border-l-4 border-primary pl-4 italic my-4 text-muted-foreground'
+    )
+  })
+
+  it('applies pre className', () => {
+    const node = el('pre')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('bg-muted rounded-lg p-4 overflow-x-auto my-4')
+  })
+
+  it('applies img className', () => {
+    const node = el('img')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('rounded-lg my-6 w-full max-w-2xl mx-auto')
+  })
+
+  it('applies table className', () => {
+    const node = el('table')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('border-collapse border border-border my-4 w-full')
+  })
+
+  it('applies th className', () => {
+    const node = el('th')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('border border-border px-2 py-1 bg-muted font-semibold')
+  })
+
+  it('applies td className', () => {
+    const node = el('td')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('border border-border px-2 py-1')
+  })
+
+  it('applies hr className', () => {
+    const node = el('hr')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('my-8 border-border')
+  })
+
+  describe('code element', () => {
+    it('appends to existing className', () => {
+      const node = el('code', { className: 'language-js' })
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'language-js bg-muted px-1 py-0.5 rounded text-sm font-mono'
+      )
+    })
+
+    it('sets className when none exists', () => {
+      const node = el('code')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe('bg-muted px-1 py-0.5 rounded text-sm font-mono')
+    })
+  })
+
+  describe('anchor links', () => {
+    it('adds target="_blank" and rel to external https links', () => {
+      const node = el('a', { href: 'https://example.com' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBe('_blank')
+      expect(node.properties.rel).toBe('noopener noreferrer')
+    })
+
+    it('does NOT add target="_blank" to internal anchor links (#)', () => {
+      const node = el('a', { href: '#section-id' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBeUndefined()
+      expect(node.properties.rel).toBeUndefined()
+    })
+
+    it('does NOT add target="_blank" to any href starting with #', () => {
+      const node = el('a', { href: '#my-heading' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBeUndefined()
+    })
+
+    it('applies link className to external anchors', () => {
+      const node = el('a', { href: 'https://external.com' })
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-primary hover:underline transition-colors duration-200'
+      )
+    })
+
+    it('applies link className to internal anchors', () => {
+      const node = el('a', { href: '#internal' })
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-primary hover:underline transition-colors duration-200'
+      )
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// markdownToHtml - pipeline is mocked so we only verify the function resolves
+// ---------------------------------------------------------------------------
+
+describe('markdownToHtml', () => {
+  it('returns a string', async () => {
+    const result = await markdownToHtml('# Hello')
+    expect(typeof result).toBe('string')
+  })
+
+  it('resolves without throwing for empty input', async () => {
+    await expect(markdownToHtml('')).resolves.toBeDefined()
+  })
+
+  it('resolves without throwing when articleSlug is provided', async () => {
+    await expect(markdownToHtml('![alt](photo.png)', 'my-article')).resolves.toBeDefined()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// extractToc - pipeline is mocked so we verify it returns an array
+// ---------------------------------------------------------------------------
+
+describe('extractToc', () => {
+  it('returns an array', async () => {
+    const result = await extractToc('## Hello')
+    expect(Array.isArray(result)).toBe(true)
+  })
+
+  it('resolves without throwing for empty input', async () => {
+    await expect(extractToc('')).resolves.toBeDefined()
+  })
+})