@fullstackdatasolutions/articles 0.4.3 → 0.5.0

package/src/__tests__/ArticleSchemas.test.tsx

@@ -1,6 +1,12 @@
 import { render } from '@testing-library/react'
 import { Article } from '../articleTypes'
-import { ArticleSchema, BreadcrumbSchema, CollectionPageSchema } from '../ArticleSchemas'
+import {
+  ArticleSchema,
+  ArticleSEO,
+  BreadcrumbSchema,
+  CollectionPageSchema,
+  FAQPageSchema,
+} from '../ArticleSchemas'
 
 const mockArticle: Article = {
   slug: 'test-article',
@@ -21,6 +27,11 @@ function parseSchemaScript(container: HTMLElement) {
   return JSON.parse(script!.innerHTML)
 }
 
+function parseAllSchemaScripts(container: HTMLElement) {
+  const scripts = container.querySelectorAll('script[type="application/ld+json"]')
+  return Array.from(scripts).map((s) => JSON.parse(s.innerHTML))
+}
+
 describe('ArticleSchema', () => {
   it('renders a ld+json script tag', () => {
     const { container } = render(
@@ -128,3 +139,203 @@ describe('CollectionPageSchema', () => {
     expect(schema.url).toBe('https://example.com/articles')
   })
 })
+
+describe('FAQPageSchema', () => {
+  const faqItems = [
+    { question: 'What is this?', answer: 'A test.' },
+    { question: 'Why?', answer: 'Because.' },
+  ]
+
+  it('renders a ld+json script tag', () => {
+    const { container } = render(<FAQPageSchema items={faqItems} />)
+    expect(container.querySelector('script[type="application/ld+json"]')).not.toBeNull()
+  })
+
+  it('outputs schema.org/FAQPage with mainEntity items', () => {
+    const { container } = render(<FAQPageSchema items={faqItems} />)
+    const schema = parseSchemaScript(container)
+    expect(schema['@type']).toBe('FAQPage')
+    expect(schema.mainEntity).toHaveLength(2)
+    expect(schema.mainEntity[0]['@type']).toBe('Question')
+    expect(schema.mainEntity[0].name).toBe('What is this?')
+    expect(schema.mainEntity[0].acceptedAnswer['@type']).toBe('Answer')
+    expect(schema.mainEntity[0].acceptedAnswer.text).toBe('A test.')
+  })
+})
+
+describe('ArticleSEO', () => {
+  const baseArticle: Article = {
+    slug: 'test-article',
+    title: 'Test Article',
+    excerpt: 'A test excerpt.',
+    date: '2025-03-01',
+    author: 'Jane Doe',
+    category: 'Campaigns',
+    categories: ['Campaigns'],
+    readTime: '3 min read',
+    featuredImage: '/articles/test/image.jpg',
+    tags: ['campaigns'],
+  }
+
+  it('renders Article JSON-LD with correct fields', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas.find((s) => s['@type'] === 'Article')
+    expect(article).toBeDefined()
+    expect(article.headline).toBe('Test Article')
+    expect(article.description).toBe('A test excerpt.')
+    expect(article.author.name).toBe('Jane Doe')
+    expect(article.publisher.name).toBe('Example Site')
+    expect(article.mainEntityOfPage['@id']).toBe('https://example.com/articles/test-article')
+    expect(article.datePublished).toBe(new Date('2025-03-01').toISOString())
+  })
+
+  it('uses articleType when provided', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, articleType: 'TechArticle' }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas.find((s) => s['@type'] === 'TechArticle')
+    expect(article).toBeDefined()
+  })
+
+  it('includes dateModified when lastmod is set', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, lastmod: '2025-06-01' }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas[0]
+    expect(article.dateModified).toBe(new Date('2025-06-01').toISOString())
+  })
+
+  it('includes isPartOf when series is set', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, series: 'Campaign Guides' }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas[0]
+    expect(article.isPartOf).toEqual({ '@type': 'Blog', name: 'Campaign Guides' })
+  })
+
+  it('includes logo in publisher when siteLogo is provided', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+        siteLogo="https://example.com/logo.png"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas[0]
+    expect(article.publisher.logo).toEqual({
+      '@type': 'ImageObject',
+      url: 'https://example.com/logo.png',
+    })
+  })
+
+  it('renders FAQPage JSON-LD when faq items are present', () => {
+    const faq = [{ question: 'What?', answer: 'This.' }]
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, faq }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const faqSchema = schemas.find((s) => s['@type'] === 'FAQPage')
+    expect(faqSchema).toBeDefined()
+    expect(faqSchema.mainEntity[0].name).toBe('What?')
+    expect(faqSchema.mainEntity[0].acceptedAnswer.text).toBe('This.')
+  })
+
+  it('does not render FAQPage JSON-LD when faq is absent', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas.find((s) => s['@type'] === 'FAQPage')).toBeUndefined()
+  })
+
+  it('renders HowTo JSON-LD when howTo steps are present', () => {
+    const howTo = [
+      { name: 'Step 1', text: 'Do this.' },
+      { name: 'Step 2', text: 'Then that.' },
+    ]
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, howTo }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const howToSchema = schemas.find((s) => s['@type'] === 'HowTo')
+    expect(howToSchema).toBeDefined()
+    expect(howToSchema.name).toBe('Test Article')
+    expect(howToSchema.step).toHaveLength(2)
+    expect(howToSchema.step[0].name).toBe('Step 1')
+  })
+
+  it('does not render HowTo JSON-LD when howTo is absent', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas.find((s) => s['@type'] === 'HowTo')).toBeUndefined()
+  })
+
+  it('omits datePublished and dateModified when article has no date', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, date: undefined }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const schema = schemas[0]
+    expect(schema.datePublished).toBeUndefined()
+    expect(schema.dateModified).toBeUndefined()
+  })
+
+  it('omits image when featuredImage is empty', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, featuredImage: '' }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const schema = schemas[0]
+    expect(schema.image).toBeUndefined()
+  })
+})

package/src/__tests__/ArticleSocialShare.test.tsx

@@ -10,7 +10,7 @@ const mockWriteText = jest.fn()
 
 beforeEach(() => {
   jest.clearAllMocks()
-  window.open = mockOpen
+  globalThis.open = mockOpen
   Object.defineProperty(navigator, 'clipboard', {
     value: { writeText: mockWriteText },
     writable: true,
@@ -46,7 +46,7 @@ describe('ArticleSocialShare', () => {
   })
 
   describe('share window buttons', () => {
-    it('clicking LinkedIn calls window.open with the correct LinkedIn URL', () => {
+    it('clicking LinkedIn calls globalThis.open with the correct LinkedIn URL', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       fireEvent.click(screen.getByRole('button', { name: /linkedin/i }))
       const encodedUrl = encodeURIComponent(defaultProps.url)
@@ -57,7 +57,7 @@ describe('ArticleSocialShare', () => {
       )
     })
 
-    it('clicking Facebook calls window.open with the correct Facebook URL', () => {
+    it('clicking Facebook calls globalThis.open with the correct Facebook URL', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       fireEvent.click(screen.getByRole('button', { name: /facebook/i }))
       const encodedUrl = encodeURIComponent(defaultProps.url)
@@ -68,7 +68,7 @@ describe('ArticleSocialShare', () => {
       )
     })
 
-    it('clicking Twitter calls window.open with correct URL and encoded title', () => {
+    it('clicking Twitter calls globalThis.open with correct URL and encoded title', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       fireEvent.click(screen.getByRole('button', { name: /twitter/i }))
       const encodedTitle = encodeURIComponent(defaultProps.title)
@@ -80,7 +80,7 @@ describe('ArticleSocialShare', () => {
       )
     })
 
-    it('clicking Reddit calls window.open with correct URL and encoded title', () => {
+    it('clicking Reddit calls globalThis.open with correct URL and encoded title', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       fireEvent.click(screen.getByRole('button', { name: /reddit/i }))
       const encodedTitle = encodeURIComponent(defaultProps.title)
@@ -92,7 +92,7 @@ describe('ArticleSocialShare', () => {
       )
     })
 
-    it('clicking WhatsApp calls window.open with the correct WhatsApp URL', () => {
+    it('clicking WhatsApp calls globalThis.open with the correct WhatsApp URL', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       fireEvent.click(screen.getByRole('button', { name: /whatsapp/i }))
       const encodedTitle = encodeURIComponent(defaultProps.title)
@@ -104,7 +104,7 @@ describe('ArticleSocialShare', () => {
       )
     })
 
-    it('clicking Telegram calls window.open with the correct Telegram URL', () => {
+    it('clicking Telegram calls globalThis.open with the correct Telegram URL', () => {
       render(<ArticleSocialShare {...defaultProps} />)
       fireEvent.click(screen.getByRole('button', { name: /telegram/i }))
       const encodedTitle = encodeURIComponent(defaultProps.title)

package/src/__tests__/ArticleTOC.test.tsx

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ArticleTOC } from '../ArticleTOC'
+import type { TocItem } from '../articleTypes'
+
+const twoItems: TocItem[] = [
+  { id: 'intro', depth: 2, text: 'Introduction' },
+  { id: 'details', depth: 3, text: 'Details' },
+]
+
+describe('ArticleTOC', () => {
+  describe('empty toc', () => {
+    it('returns null when toc is an empty array', () => {
+      const { container } = render(<ArticleTOC toc={[]} />)
+      expect(container.firstChild).toBeNull()
+    })
+  })
+
+  describe('nav element', () => {
+    it('renders nav with aria-label "Table of contents" when toc has items', () => {
+      render(<ArticleTOC toc={twoItems} />)
+      expect(screen.getByRole('navigation', { name: 'Table of contents' })).toBeInTheDocument()
+    })
+
+    it('renders "On this page" header', () => {
+      render(<ArticleTOC toc={twoItems} />)
+      expect(screen.getByText('On this page')).toBeInTheDocument()
+    })
+
+    it('applies custom className to the nav element', () => {
+      render(<ArticleTOC toc={twoItems} className="custom-class" />)
+      const nav = screen.getByRole('navigation', { name: 'Table of contents' })
+      expect(nav.className).toContain('custom-class')
+    })
+  })
+
+  describe('list items', () => {
+    it('renders the correct number of list items', () => {
+      render(<ArticleTOC toc={twoItems} />)
+      expect(screen.getAllByRole('listitem')).toHaveLength(2)
+    })
+
+    it('each anchor href is #item.id', () => {
+      render(<ArticleTOC toc={twoItems} />)
+      const links = screen.getAllByRole('link')
+      expect(links[0]).toHaveAttribute('href', '#intro')
+      expect(links[1]).toHaveAttribute('href', '#details')
+    })
+
+    it('each anchor text matches item.text', () => {
+      render(<ArticleTOC toc={twoItems} />)
+      expect(screen.getByText('Introduction')).toBeInTheDocument()
+      expect(screen.getByText('Details')).toBeInTheDocument()
+    })
+  })
+
+  describe('indentation', () => {
+    it('h2 items (depth 2) have 0rem padding', () => {
+      const items: TocItem[] = [{ id: 'h2-item', depth: 2, text: 'H2 Heading' }]
+      render(<ArticleTOC toc={items} />)
+      const li = screen.getByRole('listitem')
+      expect(li).toHaveStyle({ paddingLeft: '0rem' })
+    })
+
+    it('h3 items (depth 3) have 1rem padding', () => {
+      const items: TocItem[] = [{ id: 'h3-item', depth: 3, text: 'H3 Heading' }]
+      render(<ArticleTOC toc={items} />)
+      const li = screen.getByRole('listitem')
+      expect(li).toHaveStyle({ paddingLeft: '1rem' })
+    })
+  })
+})

package/src/__tests__/ScrollToTop.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { ScrollToTop } from '../ScrollToTop'
+
+beforeEach(() => {
+  Object.defineProperty(globalThis, 'scrollY', { value: 0, writable: true, configurable: true })
+})
+
+describe('ScrollToTop', () => {
+  it('does not render the button initially when scrollY is 0', () => {
+    render(<ScrollToTop />)
+    expect(screen.queryByRole('button', { name: 'Scroll to top' })).toBeNull()
+  })
+
+  it('renders the button with aria-label "Scroll to top" after scroll event with scrollY > 300', () => {
+    render(<ScrollToTop />)
+    act(() => {
+      Object.defineProperty(globalThis, 'scrollY', {
+        value: 350,
+        writable: true,
+        configurable: true,
+      })
+      globalThis.dispatchEvent(new Event('scroll'))
+    })
+    expect(screen.getByRole('button', { name: 'Scroll to top' })).toBeInTheDocument()
+  })
+
+  it('hides the button after scroll event brings scrollY back to <= 300', () => {
+    render(<ScrollToTop />)
+    act(() => {
+      Object.defineProperty(globalThis, 'scrollY', {
+        value: 350,
+        writable: true,
+        configurable: true,
+      })
+      globalThis.dispatchEvent(new Event('scroll'))
+    })
+    expect(screen.getByRole('button', { name: 'Scroll to top' })).toBeInTheDocument()
+    act(() => {
+      Object.defineProperty(globalThis, 'scrollY', {
+        value: 100,
+        writable: true,
+        configurable: true,
+      })
+      globalThis.dispatchEvent(new Event('scroll'))
+    })
+    expect(screen.queryByRole('button', { name: 'Scroll to top' })).toBeNull()
+  })
+
+  it('clicking the button calls globalThis.scrollTo with { top: 0, behavior: "smooth" }', () => {
+    const mockScrollTo = jest.fn()
+    globalThis.scrollTo = mockScrollTo
+
+    render(<ScrollToTop />)
+    act(() => {
+      Object.defineProperty(globalThis, 'scrollY', {
+        value: 350,
+        writable: true,
+        configurable: true,
+      })
+      globalThis.dispatchEvent(new Event('scroll'))
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Scroll to top' }))
+    expect(mockScrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' })
+  })
+
+  it('removes the scroll event listener on unmount', () => {
+    const addSpy = jest.spyOn(globalThis, 'addEventListener')
+    const removeSpy = jest.spyOn(globalThis, 'removeEventListener')
+
+    const { unmount } = render(<ScrollToTop />)
+    unmount()
+
+    const addCall = addSpy.mock.calls.find((c) => c[0] === 'scroll')
+    const removeCall = removeSpy.mock.calls.find((c) => c[0] === 'scroll')
+
+    expect(addCall).toBeDefined()
+    expect(removeCall).toBeDefined()
+    expect(addCall![1]).toBe(removeCall![1])
+
+    addSpy.mockRestore()
+    removeSpy.mockRestore()
+  })
+})