@fullstackdatasolutions/articles 0.11.0 → 1.0.0

package/src/__tests__/ArticleSchemas.test.tsx

@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react'
 import { Article } from '../articleTypes'
 import {
-  ArticleSchema,
   ArticleSEO,
   BreadcrumbSchema,
   CollectionPageSchema,
@@ -9,19 +8,6 @@ import {
 } from '../ArticleSchemas'
 import { Breadcrumb } from '../Breadcrumb'
 
-const mockArticle: 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', 'testing'],
-}
-
 function parseSchemaScript(container: HTMLElement) {
   const script = container.querySelector('script[type="application/ld+json"]')
   expect(script).not.toBeNull()
@@ -33,73 +19,6 @@ function parseAllSchemaScripts(container: HTMLElement) {
   return Array.from(scripts).map((s) => JSON.parse(s.innerHTML))
 }
 
-describe('ArticleSchema', () => {
-  it('renders a ld+json script tag', () => {
-    const { container } = render(
-      <ArticleSchema
-        article={mockArticle}
-        articleUrl="https://example.com/articles/test-article"
-        siteName="Example Site"
-      />
-    )
-    expect(container.querySelector('script[type="application/ld+json"]')).not.toBeNull()
-  })
-
-  it('outputs schema.org/Article type with correct fields', () => {
-    const { container } = render(
-      <ArticleSchema
-        article={mockArticle}
-        articleUrl="https://example.com/articles/test-article"
-        siteName="Example Site"
-      />
-    )
-    const schema = parseSchemaScript(container)
-    expect(schema['@type']).toBe('Article')
-    expect(schema.headline).toBe('Test Article')
-    expect(schema.description).toBe('A test excerpt.')
-    expect(schema.author[0].name).toBe('Jane Doe')
-    expect(schema.publisher.name).toBe('Example Site')
-    expect(schema.mainEntityOfPage['@id']).toBe('https://example.com/articles/test-article')
-  })
-
-  it('omits author when showAuthor is false', () => {
-    const { container } = render(
-      <ArticleSchema
-        article={mockArticle}
-        articleUrl="https://example.com/articles/test-article"
-        siteName="Example Site"
-        showAuthor={false}
-      />
-    )
-    const schema = parseSchemaScript(container)
-    expect(schema.author).toBeUndefined()
-  })
-
-  it('includes ISO datePublished when article has a date', () => {
-    const { container } = render(
-      <ArticleSchema
-        article={mockArticle}
-        articleUrl="https://example.com/articles/test-article"
-        siteName="Example Site"
-      />
-    )
-    const schema = parseSchemaScript(container)
-    expect(schema.datePublished).toBe(new Date('2025-03-01').toISOString())
-  })
-
-  it('omits datePublished when article has no date', () => {
-    const { container } = render(
-      <ArticleSchema
-        article={{ ...mockArticle, date: undefined }}
-        articleUrl="https://example.com/articles/test-article"
-        siteName="Example Site"
-      />
-    )
-    const schema = parseSchemaScript(container)
-    expect(schema.datePublished).toBeUndefined()
-  })
-})
-
 describe('BreadcrumbSchema', () => {
   const items = [
     { name: 'Home', url: 'https://example.com' },
@@ -169,6 +88,54 @@ describe('CollectionPageSchema', () => {
     expect(schema.numberOfItems).toBe(42)
     expect(schema.url).toBe('https://example.com/articles')
   })
+
+  it('omits mainEntity when items is not provided', () => {
+    const { container } = render(
+      <CollectionPageSchema
+        title="Articles | Example"
+        description="All articles."
+        url="https://example.com/articles"
+        articleCount={42}
+      />
+    )
+    const schema = parseSchemaScript(container)
+    expect(schema.mainEntity).toBeUndefined()
+  })
+
+  it('omits mainEntity when items is an empty array', () => {
+    const { container } = render(
+      <CollectionPageSchema
+        title="Articles | Example"
+        description="All articles."
+        url="https://example.com/articles"
+        articleCount={0}
+        items={[]}
+      />
+    )
+    const schema = parseSchemaScript(container)
+    expect(schema.mainEntity).toBeUndefined()
+  })
+
+  it('includes an ItemList mainEntity when items is provided', () => {
+    const { container } = render(
+      <CollectionPageSchema
+        title="Articles | Example"
+        description="All articles."
+        url="https://example.com/articles"
+        articleCount={2}
+        items={[
+          { position: 1, url: 'https://example.com/articles/one', name: 'One' },
+          { position: 2, url: 'https://example.com/articles/two', name: 'Two' },
+        ]}
+      />
+    )
+    const schema = parseSchemaScript(container)
+    expect(schema.mainEntity['@type']).toBe('ItemList')
+    expect(schema.mainEntity.itemListElement).toEqual([
+      { '@type': 'ListItem', position: 1, url: 'https://example.com/articles/one', name: 'One' },
+      { '@type': 'ListItem', position: 2, url: 'https://example.com/articles/two', name: 'Two' },
+    ])
+  })
 })
 
 describe('FAQPageSchema', () => {
@@ -269,6 +236,37 @@ describe('ArticleSEO', () => {
     })
   })
 
+  it('excludes rich AuthorProfile fields (promise, servesWho, principles, credentials, proof) from Person JSON-LD (Phase 27E)', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, author: 'andrew-blase' }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+        authors={[
+          {
+            name: 'Andrew Blase',
+            slug: 'andrew-blase',
+            bio: 'Writer.',
+            url: 'https://example.com/articles/authors/andrew-blase',
+            promise: 'Helping new GMs run confident first sessions.',
+            servesWho: ['New game masters'],
+            principles: ['Fun first'],
+            credentials: ['10+ years running published campaigns'],
+            proof: [{ claim: '500+ sessions run' }],
+            primaryCta: { label: 'Book a session', href: '/book' },
+          },
+        ]}
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas.find((s) => s['@type'] === 'Article')
+    expect(article.author[0]).toEqual({
+      '@type': 'Person',
+      name: 'Andrew Blase',
+      url: 'https://example.com/articles/authors/andrew-blase',
+    })
+  })
+
   it('uses articleType when provided', () => {
     const { container } = render(
       <ArticleSEO
@@ -411,4 +409,80 @@ describe('ArticleSEO', () => {
     const schema = schemas[0]
     expect(schema.image).toBeUndefined()
   })
+
+  it('includes articleSection from article.category', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas[0].articleSection).toBe('Campaigns')
+  })
+
+  it('includes keywords joined from article.tags', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, tags: ['campaigns', 'worldbuilding'] }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas[0].keywords).toBe('campaigns, worldbuilding')
+  })
+
+  it('omits keywords when article has no tags', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, tags: undefined }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas[0].keywords).toBeUndefined()
+  })
+
+  it('includes wordCount when set on the article', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, wordCount: 1234 }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas[0].wordCount).toBe(1234)
+  })
+
+  it('omits wordCount when unset on the article', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas[0].wordCount).toBeUndefined()
+  })
+
+  it('includes the author image in Person schema when config resolves an avatar', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={baseArticle}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+        authors={[{ name: 'Jane Doe', slug: 'jane-doe', bio: '', avatar: 'avatar.jpg' }]}
+        config={{ siteUrl: 'https://example.com', siteName: 'Example Site' }}
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    expect(schemas[0].author[0].image).toBe(
+      'https://example.com/articles/authors/jane-doe/avatar.jpg'
+    )
+  })
 })

package/src/__tests__/ArticleSocialShare.test.tsx

@@ -4,6 +4,7 @@
 import React from 'react'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { ArticleSocialShare } from '../ArticleSocialShare'
+import type { ArticlesConfig } from '../articlesConfig'
 
 const mockOpen = jest.fn()
 const mockWriteText = jest.fn()
@@ -179,4 +180,57 @@ describe('ArticleSocialShare', () => {
       expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument()
     })
   })
+
+  describe('shared event (Phase 27F)', () => {
+    const config = (onEvent: jest.Mock): ArticlesConfig => ({
+      siteUrl: 'https://example.com',
+      siteName: 'Test',
+      onEvent,
+    })
+
+    it('fires shared with channel "linkedin" when the LinkedIn button is clicked', () => {
+      const onEvent = jest.fn()
+      render(
+        <ArticleSocialShare {...defaultProps} config={config(onEvent)} articleSlug="my-article" />
+      )
+      fireEvent.click(screen.getByRole('button', { name: /linkedin/i }))
+      expect(onEvent).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'shared', articleSlug: 'my-article', channel: 'linkedin' })
+      )
+    })
+
+    it('fires shared with channel "copy-link" when Copy Link succeeds', async () => {
+      const onEvent = jest.fn()
+      render(
+        <ArticleSocialShare {...defaultProps} config={config(onEvent)} articleSlug="my-article" />
+      )
+      fireEvent.click(screen.getByRole('button', { name: /copy link/i }))
+      await waitFor(() =>
+        expect(onEvent).toHaveBeenCalledWith(
+          expect.objectContaining({ name: 'shared', channel: 'copy-link' })
+        )
+      )
+    })
+
+    it('fires shared with channel "email" when the Email link is clicked', () => {
+      const onEvent = jest.fn()
+      render(
+        <ArticleSocialShare {...defaultProps} config={config(onEvent)} articleSlug="my-article" />
+      )
+      fireEvent.click(screen.getByRole('link', { name: /email/i }))
+      expect(onEvent).toHaveBeenCalledWith(expect.objectContaining({ channel: 'email' }))
+    })
+
+    it('does not fire an event when articleSlug is omitted', () => {
+      const onEvent = jest.fn()
+      render(<ArticleSocialShare {...defaultProps} config={config(onEvent)} />)
+      fireEvent.click(screen.getByRole('button', { name: /linkedin/i }))
+      expect(onEvent).not.toHaveBeenCalled()
+    })
+
+    it('does not throw when config is omitted', () => {
+      render(<ArticleSocialShare {...defaultProps} articleSlug="my-article" />)
+      expect(() => fireEvent.click(screen.getByRole('button', { name: /twitter/i }))).not.toThrow()
+    })
+  })
 })

package/src/__tests__/ArticlesPage.test.tsx

@@ -273,6 +273,57 @@ describe('ArticlesPage', () => {
     await waitFor(() => expect(screen.getByText('Browse by Category')).toBeInTheDocument())
   })
 
+  it('renders real article links synchronously when given server-fetched initialArticles, with no client fetch', () => {
+    // Simulates the SSR path: a server component fetches articles via getAllArticles()
+    // and passes them down, so Googlebot's first request already contains real hrefs.
+    ;(globalThis.fetch as jest.Mock).mockReturnValue(new Promise(() => {}))
+    render(
+      <ArticlesPage config={{ ...baseConfig, layout: ['latest'] }} initialArticles={mockArticles} />
+    )
+
+    expect(screen.getByText('Latest Articles')).toBeInTheDocument()
+    expect(screen.queryByText('Loading articles...')).not.toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Second Article' })).toHaveAttribute(
+      'href',
+      '/articles/article-2'
+    )
+    expect(globalThis.fetch).not.toHaveBeenCalled()
+  })
+
+  it('renders a CollectionPage schema with an ItemList of the initially-visible articles', () => {
+    ;(globalThis.fetch as jest.Mock).mockReturnValue(new Promise(() => {}))
+    const { container } = render(
+      <ArticlesPage config={{ ...baseConfig, layout: ['latest'] }} initialArticles={mockArticles} />
+    )
+
+    const script = container.querySelector('script[type="application/ld+json"]')
+    expect(script).not.toBeNull()
+    const schema = JSON.parse(script!.innerHTML)
+    expect(schema).toEqual(
+      expect.objectContaining({
+        '@type': 'CollectionPage',
+        numberOfItems: 2,
+        mainEntity: {
+          '@type': 'ItemList',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              url: 'https://example.com/articles/article-1',
+              name: 'Featured Article',
+            },
+            {
+              '@type': 'ListItem',
+              position: 2,
+              url: 'https://example.com/articles/article-2',
+              name: 'Second Article',
+            },
+          ],
+        },
+      })
+    )
+  })
+
   it('uses pageSize from config', async () => {
     const manyArticles = Array.from({ length: 10 }, (_, i) => ({
       ...mockArticles[0],
@@ -298,4 +349,101 @@ describe('ArticlesPage', () => {
     expect(screen.queryByText('Article 4')).not.toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
   })
+
+  describe('listingPagination: "pages" mode', () => {
+    it('does nothing when config.listingPagination is not set, even if page/totalPages are passed', () => {
+      const manyArticles = Array.from({ length: 10 }, (_, i) => ({
+        ...mockArticles[0],
+        slug: `article-${i + 1}`,
+        title: `Article ${i + 1}`,
+      }))
+      render(
+        <ArticlesPage
+          config={{ ...baseConfig, pageSize: 3, layout: ['latest'] }}
+          initialArticles={manyArticles}
+          page={2}
+          totalPages={4}
+        />
+      )
+      expect(screen.getByRole('button', { name: 'Load more articles' })).toBeInTheDocument()
+      expect(screen.queryByText(/Page \d+ of \d+/)).not.toBeInTheDocument()
+    })
+
+    it('renders PaginationNav instead of "Load more" when config and page/totalPages are set', () => {
+      render(
+        <ArticlesPage
+          config={{ ...baseConfig, layout: ['latest'], listingPagination: 'pages' }}
+          initialArticles={mockArticles}
+          page={1}
+          totalPages={3}
+        />
+      )
+      expect(screen.queryByRole('button', { name: 'Load more articles' })).not.toBeInTheDocument()
+      expect(screen.getByText('Page 1 of 3')).toBeInTheDocument()
+    })
+
+    it('does not pull out a "featured" article on page > 1', () => {
+      render(
+        <ArticlesPage
+          config={{
+            ...baseConfig,
+            layout: ['featured', 'latest'],
+            listingPagination: 'pages',
+          }}
+          initialArticles={mockArticles}
+          page={2}
+          totalPages={3}
+        />
+      )
+      expect(screen.queryByText('FEATURED ARTICLE')).not.toBeInTheDocument()
+      // Both articles render in the grid instead of the first being pinned as featured.
+      expect(screen.getByText('Featured Article')).toBeInTheDocument()
+      expect(screen.getByText('Second Article')).toBeInTheDocument()
+    })
+
+    it('still pulls out a "featured" article on page 1', () => {
+      render(
+        <ArticlesPage
+          config={{
+            ...baseConfig,
+            layout: ['featured', 'latest'],
+            listingPagination: 'pages',
+          }}
+          initialArticles={mockArticles}
+          page={1}
+          totalPages={3}
+        />
+      )
+      expect(screen.getByText('FEATURED ARTICLE')).toBeInTheDocument()
+    })
+
+    it('uses totalCount for the CollectionPage schema articleCount when provided', () => {
+      const { container } = render(
+        <ArticlesPage
+          config={{ ...baseConfig, layout: ['latest'], listingPagination: 'pages' }}
+          initialArticles={mockArticles}
+          page={1}
+          totalPages={5}
+          totalCount={42}
+        />
+      )
+      const script = container.querySelector('script[type="application/ld+json"]')
+      const schema = JSON.parse(script!.innerHTML)
+      expect(schema.numberOfItems).toBe(42)
+    })
+
+    it('falls back to the visible article count when totalCount is omitted', () => {
+      const { container } = render(
+        <ArticlesPage
+          config={{ ...baseConfig, layout: ['latest'], listingPagination: 'pages' }}
+          initialArticles={mockArticles}
+          page={1}
+          totalPages={5}
+        />
+      )
+      const script = container.querySelector('script[type="application/ld+json"]')
+      const schema = JSON.parse(script!.innerHTML)
+      expect(schema.numberOfItems).toBe(mockArticles.length)
+    })
+  })
 })