@teleporthq/teleport-plugin-next-data-source 0.43.74 → 0.44.0

package/__tests__/_helpers/pagination-widget-fixture.ts

@@ -1,6 +1,11 @@
 import * as types from '@babel/types'
 import { ChunkType, FileType, ChunkDefinition } from '@teleporthq/teleport-types'
-import { PAGINATION_CONTROL_ATTR } from '../../src/pagination-controls'
+import {
+  PAGINATION_CONTROL_ATTR,
+  PAGINATION_FOR_ATTR,
+  RANGE_TEMPLATE_ATTR,
+} from '../../src/pagination-controls'
+import { SEARCH_FOR_ATTR } from '../../src/search-input'
 
 /**
  * A component shell carrying a `DataProvider` and the pagination controls a
@@ -20,9 +25,36 @@ interface ControlOptions {
   legacyOnly?: boolean
   /** Number of DataProvider + widget pairs to emit (order-based zip coverage). */
   mappers?: number
+  /** The element the providers render in: a table's body, a list. */
+  rootTag?: string
+  /**
+   * The `data-tq-range-template` of a `range` control in the widget. Defaults
+   * to the "Showing" wording; `null` authors the control with no template.
+   */
+  rangeTemplate?: string | null
+  /**
+   * A `range` text OUTSIDE every widget, placed BEFORE the first provider (a
+   * toolbar above the list), naming its mapper with `data-tq-pagination-for`.
+   */
+  standaloneRange?: { forNodeId: string; template?: string }
+  /**
+   * Search inputs OUTSIDE every widget, placed BEFORE the first provider, in
+   * this order: a page's own box naming its mapper with `data-tq-search-for`,
+   * or the platform's (`search-input` class) paired by order.
+   */
+  standaloneSearch?: Array<{ forNodeId?: string; name: string }>
 }
 
-const control = (marker: string, children: types.JSXElement['children'] = []): types.JSXElement =>
+// ASCII hyphen on purpose: the generator prints string literals through jsesc,
+// which would turn an en dash into `–` and make every assertion unreadable.
+export const RANGE_DRAWN_TEXT = 'Showing 1-8 of 12'
+export const RANGE_TEMPLATE = 'Showing {from}–{to} of {total}'
+
+const control = (
+  marker: string,
+  children: types.JSXElement['children'] = [],
+  extraAttrs: Array<[string, string]> = []
+): types.JSXElement =>
   types.jsxElement(
     types.jsxOpeningElement(
       types.jsxIdentifier('div'),
@@ -35,6 +67,9 @@ const control = (marker: string, children: types.JSXElement['children'] = []): t
           types.jsxIdentifier(PAGINATION_CONTROL_ATTR),
           types.stringLiteral(marker)
         ),
+        ...extraAttrs.map(([name, value]) =>
+          types.jsxAttribute(types.jsxIdentifier(name), types.stringLiteral(value))
+        ),
       ],
       false
     ),
@@ -43,6 +78,40 @@ const control = (marker: string, children: types.JSXElement['children'] = []): t
     false
   )
 
+const rangeControl = (
+  template: string | null | undefined,
+  forNodeId?: string
+): types.JSXElement => {
+  const attrs: Array<[string, string]> = []
+  if (template !== null) {
+    attrs.push([RANGE_TEMPLATE_ATTR, template ?? RANGE_TEMPLATE])
+  }
+  if (forNodeId) {
+    attrs.push([PAGINATION_FOR_ATTR, forNodeId])
+  }
+  return control('range', [types.jsxText(RANGE_DRAWN_TEXT)], attrs)
+}
+
+const searchInput = (name: string, forNodeId?: string): types.JSXElement =>
+  types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('input'),
+      [
+        types.jsxAttribute(types.jsxIdentifier('name'), types.stringLiteral(name)),
+        forNodeId
+          ? types.jsxAttribute(types.jsxIdentifier(SEARCH_FOR_ATTR), types.stringLiteral(forNodeId))
+          : types.jsxAttribute(
+              types.jsxIdentifier('className'),
+              types.stringLiteral('products-list-search-input')
+            ),
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  )
+
 const legacyControl = (direction: 'previous' | 'next'): types.JSXElement =>
   types.jsxElement(
     types.jsxOpeningElement(
@@ -72,6 +141,10 @@ const buildWidget = (options: ControlOptions): types.JSXElement => {
       children.push(legacyControl(marker))
       continue
     }
+    if (marker === 'range') {
+      children.push(rangeControl(options.rangeTemplate))
+      continue
+    }
     children.push(control(marker))
   }
 
@@ -148,6 +221,12 @@ const buildDataProvider = (name: string, rowIdentifier: string): types.JSXElemen
 
 export const makeWidgetComponentChunk = (options: ControlOptions): ChunkDefinition => {
   const sections: types.JSXElement[] = []
+  if (options.standaloneRange) {
+    sections.push(rangeControl(options.standaloneRange.template, options.standaloneRange.forNodeId))
+  }
+  for (const search of options.standaloneSearch ?? []) {
+    sections.push(searchInput(search.name, search.forNodeId))
+  }
   const mappers = options.mappers ?? 1
   for (let i = 0; i < mappers; i += 1) {
     const identifier = `items${i === 0 ? '' : i}`
@@ -155,9 +234,10 @@ export const makeWidgetComponentChunk = (options: ControlOptions): ChunkDefiniti
     sections.push(buildWidget(options))
   }
 
+  const rootTag = options.rootTag ?? 'div'
   const root = types.jsxElement(
-    types.jsxOpeningElement(types.jsxIdentifier('div'), [], false),
-    types.jsxClosingElement(types.jsxIdentifier('div')),
+    types.jsxOpeningElement(types.jsxIdentifier(rootTag), [], false),
+    types.jsxClosingElement(types.jsxIdentifier(rootTag)),
     sections,
     false
   )
@@ -187,6 +267,10 @@ export interface RepeaterOptions {
   infiniteScroll?: boolean
   infiniteScrollLoadMore?: boolean
   perPage?: number
+  /** The list's filters, as the inspector authors them (conditions and groups). */
+  filters?: unknown[]
+  /** The mapper's editor node id, as the UIDL carries it on the repeater. */
+  nodeId?: string
 }
 
 export const makeUidlNode = (options: RepeaterOptions, identifier: string = 'items'): any => ({
@@ -198,7 +282,12 @@ export const makeUidlNode = (options: RepeaterOptions, identifier: string = 'ite
       tableName: 'products',
       dataSourceType: 'postgresql',
     },
-    resource: { params: { queryColumns: { content: ['name'] } } },
+    resource: {
+      params: {
+        queryColumns: { content: ['name'] },
+        ...(options.filters ? { filters: { type: 'static', content: options.filters } } : {}),
+      },
+    },
     nodes: {
       success: {
         type: 'cms-list-repeater',
@@ -211,6 +300,7 @@ export const makeUidlNode = (options: RepeaterOptions, identifier: string = 'ite
           ...(options.paginationMode ? { paginationMode: options.paginationMode } : {}),
           ...(options.infiniteScroll ? { infiniteScroll: true } : {}),
           ...(options.infiniteScrollLoadMore ? { infiniteScrollLoadMore: true } : {}),
+          ...(options.nodeId ? { nodeId: options.nodeId } : {}),
           nodes: { list: { type: 'element', content: { elementType: 'div' } } },
         },
       },

package/__tests__/blog-adjacent-arranged.test.ts

@@ -0,0 +1,176 @@
+import { generateBlogPostTransformationCode } from '../src/transformations/blog-post'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+import { getTransformationCode } from '../src/transformations'
+import { ContentTables } from '@teleporthq/teleport-shared'
+
+/**
+ * Previous / Next in Manual Order: a post walks the published posts of its
+ * primary category the way the author arranged them. These evaluate the
+ * EMITTED code against a fake database client, the way the runtime calls it.
+ *
+ * The fixture and the expectations are the SAME as teleport-gui
+ * `features/blog/utils/__tests__/arranged-order.spec.ts` ("Previous / Next the
+ * published site mirrors"): the canvas and the site must agree.
+ */
+
+interface Row {
+  id: string
+  status: string
+  category_ids: string | null
+  sort_order: number | null
+  created_at: string
+  redirect_url?: string | null
+}
+
+type AdjacentMap = Record<string, { previous: Row | null; next: Row | null }>
+type GetAdjacent = (getClient: () => unknown, records: unknown[]) => Promise<AdjacentMap>
+
+const HELP_TABLE = ContentTables.contentTablesByKey('help').posts
+
+const load = (arranged: boolean): GetAdjacent =>
+  // tslint:disable-next-line:function-constructor
+  new Function(
+    `${generateSharedTransformationCode()}\n${generateBlogPostTransformationCode({
+      tables: ContentTables.contentTablesByKey('help'),
+      arranged,
+    })}\nreturn getAdjacentPostsMap;`
+  )() as GetAdjacent
+
+const row = (
+  id: string,
+  categories: string[] | null,
+  sortOrder: number | null,
+  createdAt: string,
+  overrides: Partial<Row> = {}
+): Row => ({
+  id,
+  status: 'published',
+  category_ids: categories ? JSON.stringify(categories) : null,
+  sort_order: sortOrder,
+  created_at: createdAt,
+  ...overrides,
+})
+
+const TABLE: Row[] = [
+  row('a1', ['guides'], 1, '2026-01-01T00:00:00.000Z'),
+  row('a2', ['guides'], 2, '2026-01-05T00:00:00.000Z'),
+  row('a3', ['guides'], 3, '2026-01-03T00:00:00.000Z', { redirect_url: '/help/a1' }),
+  row('a4', ['guides'], 4, '2026-01-02T00:00:00.000Z'),
+  row('a5', ['guides'], null, '2026-02-01T00:00:00.000Z'),
+  row('a6', ['guides'], null, '2026-01-20T00:00:00.000Z'),
+  row('draft', ['guides'], 2, '2026-03-01T00:00:00.000Z', { status: 'draft' }),
+  // Filed under guides as a second category: not on guides' path.
+  row('b1', ['billing', 'guides'], 1, '2026-01-04T00:00:00.000Z'),
+  // A comma-separated cell, as the generated admin panel's text field writes it.
+  row('c1', null, 1, '2026-01-06T00:00:00.000Z', { category_ids: 'guides, billing' }),
+  row('lone', null, null, '2026-01-07T00:00:00.000Z'),
+]
+
+/** A client over `TABLE` that answers the statements the code sends, and records them. */
+const fakeClient = (options: { failArranged?: boolean } = {}) => {
+  const statements: string[] = []
+  const client = {
+    connect: async (): Promise<void> => undefined,
+    end: async (): Promise<void> => undefined,
+    query: async (sql: string, params: unknown[]) => {
+      statements.push(sql)
+      if (sql.startsWith('SELECT id, category_ids, sort_order, created_at FROM')) {
+        if (options.failArranged) {
+          throw new Error('column "sort_order" does not exist')
+        }
+        return {
+          rows: TABLE.filter((entry) => entry.status === 'published' || entry.id === params[0]),
+        }
+      }
+      if (sql.includes('= ANY($1::text[])')) {
+        const ids = params[0] as string[]
+        return { rows: TABLE.filter((entry) => ids.includes(entry.id)) }
+      }
+      // The newest-first lookups: (created_at, id) before / after the post's.
+      const current = TABLE.find((entry) => entry.id === params[0]) as Row
+      const older = sql.includes(') < (cur.created_at')
+      const rows = TABLE.filter((entry) => entry.status === 'published')
+        .filter((entry) =>
+          older ? entry.created_at < current.created_at : entry.created_at > current.created_at
+        )
+        .sort((a, b) =>
+          older
+            ? b.created_at.localeCompare(a.created_at)
+            : a.created_at.localeCompare(b.created_at)
+        )
+      return { rows }
+    },
+  }
+  return { client, statements }
+}
+
+const neighbours = async (postId: string, arranged = true, failArranged = false) => {
+  const { client, statements } = fakeClient({ failArranged })
+  const map = await load(arranged)(
+    () => client,
+    [TABLE.find((candidate) => candidate.id === postId)]
+  )
+  const found = map[postId]
+  return {
+    previous: found?.previous?.id ?? null,
+    next: found?.next?.id ?? null,
+    statements,
+  }
+}
+
+describe('Previous / Next in Manual Order', () => {
+  it('walks the primary category as arranged: places first, then the rest newest first', async () => {
+    // c1 shares place 1 and is newer, so it comes first.
+    expect(await neighbours('a1')).toMatchObject({ previous: 'c1', next: 'a2' })
+    // a3 redirects elsewhere: stepped over both ways.
+    expect(await neighbours('a2')).toMatchObject({ previous: 'a1', next: 'a4' })
+    expect(await neighbours('a4')).toMatchObject({ previous: 'a2', next: 'a5' })
+    expect(await neighbours('a5')).toMatchObject({ previous: 'a4', next: 'a6' })
+    expect(await neighbours('a6')).toMatchObject({ previous: 'a5', next: null })
+  })
+
+  it('leaves out drafts and posts filed there through a second category, yet places a draft it shows', async () => {
+    const draft = await neighbours('draft')
+    expect(draft).toMatchObject({ previous: 'a1', next: 'a2' })
+    expect(await neighbours('b1')).toMatchObject({ previous: null, next: null })
+  })
+
+  it('reads a comma-separated category cell like a JSON one', async () => {
+    // c1's primary is guides; place 1 ties with a1, the newer first.
+    expect(await neighbours('c1')).toMatchObject({ previous: null, next: 'a1' })
+  })
+
+  it('walks the newest-first order for a post without a category, or a table it cannot read', async () => {
+    const lone = await neighbours('lone')
+    expect(lone.statements.some((sql) => sql.includes('(cur.created_at, cur.id)'))).toBe(true)
+    expect(lone).toMatchObject({ previous: 'c1', next: 'a6' })
+
+    const unreadable = await neighbours('a2', true, true)
+    expect(unreadable).toMatchObject({ previous: 'b1', next: 'c1' })
+  })
+
+  it('never asks for the arranged order when the pages are newest first', async () => {
+    const plain = await neighbours('a2', false)
+    expect(plain.statements.some((sql) => sql.includes('sort_order'))).toBe(false)
+    expect(plain).toMatchObject({ previous: 'b1', next: 'c1' })
+  })
+
+  it('is emitted for a table whose preset is in Manual Order, and only then', () => {
+    const arranged = getTransformationCode(HELP_TABLE, {
+      contentSettings: { help: { order: 'manual' } },
+    })
+    expect(arranged).toContain('var BLOG_ARRANGED_ORDER = true')
+    expect(getTransformationCode(HELP_TABLE, {})).toContain('var BLOG_ARRANGED_ORDER = false')
+  })
+})
+
+describe('the post a page is given', () => {
+  it('carries its place, or null', () => {
+    const build = new Function(
+      `${generateSharedTransformationCode()}\n${generateBlogPostTransformationCode()}\nreturn buildBlogPost;`
+    )() as (record: unknown) => Record<string, unknown>
+    expect(build(row('a', ['guides'], 3, '2026-01-01T00:00:00.000Z')).sortOrder).toBe(3)
+    expect(build(row('a', ['guides'], null, '2026-01-01T00:00:00.000Z')).sortOrder).toBeNull()
+    expect(build({ id: 'old', title: 'Old', slug: 'old' }).sortOrder).toBeNull()
+  })
+})

package/__tests__/blog-post-contents.test.ts

@@ -0,0 +1,212 @@
+import { generateBlogPostTransformationCode } from '../src/transformations/blog-post'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+import {
+  buildProductTransformOptions,
+  getTransformationCode,
+  getTransformWrapperCode,
+} from '../src/transformations'
+
+/**
+ * A post page's Contents list: the post's sections — its headings of the
+ * topmost level it uses — each with the address that jumps to it, drawn for a
+ * post of three sections or more. The headings get their ids for it even with
+ * the heading anchors off, and only a post page's own fetch carries the list.
+ *
+ * `CONTENTS_FIXTURES` is the SAME table as teleport-gui `packages/renderer/src/
+ * utils/__tests__/blog-contents-sections.test.ts`: the canvas and the site must
+ * list the same sections under the same addresses.
+ */
+
+type Build = (record: unknown, options?: Record<string, unknown>) => Record<string, unknown>
+
+const buildWith = (options: { headingAnchors?: boolean; contents?: boolean } = {}): Build =>
+  new Function(
+    generateSharedTransformationCode() +
+      '\n' +
+      generateBlogPostTransformationCode(options) +
+      '\nreturn buildBlogPost;'
+  )() as Build
+
+const POST = { id: 'p1', title: 'Connect a domain', slug: 'connect-a-domain', status: 'published' }
+const DETAILS = { details: true }
+
+const CONTENTS_FIXTURES: Array<{ name: string; html: string; sections: string[][] }> = [
+  {
+    name: 'a help article: its h2 sections, not the h3 under them, never the h1',
+    html:
+      '<h1>Title</h1><p>Intro</p><h2>Before you start</h2><p>x</p><h2>Steps</h2>' +
+      '<h3>Open the panel</h3><h2>Check that it worked</h2><h2>Troubleshooting</h2>',
+    sections: [
+      ['before-you-start', 'Before you start'],
+      ['steps', 'Steps'],
+      ['check-that-it-worked', 'Check that it worked'],
+      ['troubleshooting', 'Troubleshooting'],
+    ],
+  },
+  {
+    name: 'fewer than three sections: no list',
+    html: '<h2>One</h2><p>x</p><h2>Two</h2><h3>Two and a half</h3><h3>Two and three quarters</h3>',
+    sections: [],
+  },
+  {
+    name: 'the topmost level the post uses',
+    html: '<h3>Alpha</h3><h4>Under alpha</h4><h3>Beta</h3><h3>Gamma</h3>',
+    sections: [
+      ['alpha', 'Alpha'],
+      ['beta', 'Beta'],
+      ['gamma', 'Gamma'],
+    ],
+  },
+  {
+    name: 'ids the content has are kept, repeated titles numbered, entities decoded',
+    html:
+      '<h2 id="custom">Café &amp; Crème</h2><h2>Setup</h2><h2>Setup</h2>' +
+      '<h2 id="setup-2">Clash</h2>',
+    sections: [
+      ['custom', 'Café & Crème'],
+      ['setup', 'Setup'],
+      ['setup-3', 'Setup'],
+      ['setup-2', 'Clash'],
+    ],
+  },
+  {
+    name: 'an empty heading is no section',
+    html: '<h2><br></h2><h2>A</h2><h2>B</h2><h2>C</h2>',
+    sections: [
+      ['a', 'A'],
+      ['b', 'B'],
+      ['c', 'C'],
+    ],
+  },
+  {
+    name: 'accented, non-Latin and symbol-only titles',
+    html: '<h2>Crème brûlée</h2><h2>Привет мир</h2><h2>!!!</h2>',
+    sections: [
+      ['creme-brulee', 'Crème brûlée'],
+      ['привет-мир', 'Привет мир'],
+      ['section', '!!!'],
+    ],
+  },
+  {
+    name: 'a title that names a built-in property',
+    html: '<h2>Constructor</h2><h2>Prototype</h2><h2>Has own property</h2>',
+    sections: [
+      ['constructor', 'Constructor'],
+      ['prototype', 'Prototype'],
+      ['has-own-property', 'Has own property'],
+    ],
+  },
+  {
+    name: 'inline markup inside a heading',
+    html: '<h2>Use <code>npm</code> &lt;3</h2><h2><strong>Bold</strong> move</h2><h2>Last</h2>',
+    sections: [
+      ['use-npm-3', 'Use npm <3'],
+      ['bold-move', 'Bold move'],
+      ['last', 'Last'],
+    ],
+  },
+]
+
+const asPairs = (sections: unknown) =>
+  (sections as Array<{ id: string; title: string; href: string }>).map((section) => {
+    expect(section.href).toBe(`#${section.id}`)
+    return [section.id, section.title]
+  })
+
+describe('a post page’s Contents list', () => {
+  it.each(CONTENTS_FIXTURES)('$name', ({ html, sections }) => {
+    const built = buildWith({ contents: true })({ ...POST, content: html }, DETAILS)
+    expect(asPairs(built.sections)).toEqual(sections)
+    // Every section the list links to is a heading of the page, under that id.
+    for (const [id] of sections) {
+      expect(built.content as string).toContain(`id="${id}"`)
+    }
+  })
+
+  it('gives the headings their ids without the # links while the heading anchors are off', () => {
+    const built = buildWith({ contents: true })(
+      { ...POST, content: '<h2>One</h2><h2>Two</h2><h2>Three</h2>' },
+      DETAILS
+    )
+    expect(built.content).toBe(
+      '<h2 id="one">One</h2><h2 id="two">Two</h2><h2 id="three">Three</h2>'
+    )
+  })
+
+  it('links the same ids the heading anchors give, with the anchors on', () => {
+    const built = buildWith({ contents: true, headingAnchors: true })(
+      { ...POST, content: '<h2>One</h2><h2>Two</h2><h2>Three</h2>' },
+      DETAILS
+    )
+    expect(built.content).toContain(
+      '<h2 id="one"><a class="tq-heading-link" href="#one">One</a><a class="tq-heading-anchor" href="#one" aria-hidden="true" tabindex="-1">#</a></h2>'
+    )
+    expect(asPairs(built.sections)).toEqual([
+      ['one', 'One'],
+      ['two', 'Two'],
+      ['three', 'Three'],
+    ])
+  })
+
+  it('reads a heading stored as its own link with the # after it, without the #', () => {
+    const stored =
+      '<h2 id="one"><a class="tq-heading-link" href="#one">One</a><a class="tq-heading-anchor" href="#one" aria-hidden="true" tabindex="-1">#</a></h2>' +
+      '<h2>Two</h2><h2>Three</h2>'
+    const built = buildWith({ contents: true, headingAnchors: true })(
+      { ...POST, content: stored },
+      DETAILS
+    )
+    expect(asPairs(built.sections)).toEqual([
+      ['one', 'One'],
+      ['two', 'Two'],
+      ['three', 'Three'],
+    ])
+  })
+
+  it('reads a heading stored with its # link already, without the #', () => {
+    const stored =
+      '<h2 id="one">One<a class="tq-heading-anchor" href="#one" aria-hidden="true" tabindex="-1">#</a></h2>' +
+      '<h2>Two</h2><h2>Three</h2>'
+    const built = buildWith({ contents: true, headingAnchors: true })(
+      { ...POST, content: stored },
+      DETAILS
+    )
+    expect(asPairs(built.sections)).toEqual([
+      ['one', 'One'],
+      ['two', 'Two'],
+      ['three', 'Three'],
+    ])
+  })
+
+  it('is left off a listing’s cards and off a post without the list', () => {
+    const content = '<h2>One</h2><h2>Two</h2><h2>Three</h2>'
+    const card = buildWith({ contents: true })({ ...POST, content })
+    expect(card.sections).toEqual([])
+    expect(card.content).toContain('id="one"')
+
+    const withoutList = buildWith()({ ...POST, content }, DETAILS)
+    expect(withoutList.sections).toEqual([])
+    expect(withoutList.content).toBe(content)
+  })
+})
+
+describe('the Contents setting, from the project to the fetcher', () => {
+  const HELP_TABLE = 'teleport_help_articles'
+
+  it('reaches the transform of its own preset only', () => {
+    const options = buildProductTransformOptions({
+      helpCenterSettings: { headingAnchors: false, contents: true },
+      blogSettings: { headingAnchors: true },
+    })
+    expect(getTransformationCode(HELP_TABLE, options)).toContain('var BLOG_CONTENTS = true')
+    expect(getTransformationCode('teleport_blog_posts', options)).toContain(
+      'var BLOG_CONTENTS = false'
+    )
+  })
+
+  it('tells the transform when the fetch is a post page’s own', () => {
+    expect(getTransformWrapperCode(HELP_TABLE)).toContain(
+      'details: Array.isArray(records) && records.length === 1'
+    )
+  })
+})

package/__tests__/blog-post-page-enrichment.test.ts

@@ -29,6 +29,16 @@ const post = (id: string, overrides: Record<string, unknown> = {}) => ({
 })
 
 describe('blog post transform — author box fields', () => {
+  it('keeps the author email out of the post a page is given, under both spellings', () => {
+    const built = buildBlogPost(
+      post('a', { author_name: 'Ana', author_email: 'ana@example.com' })
+    ) as Record<string, unknown>
+    expect(built.authorName).toBe('Ana')
+    expect('authorEmail' in built).toBe(false)
+    expect('author_email' in built).toBe(false)
+    expect(JSON.stringify(built)).not.toContain('ana@example.com')
+  })
+
   it('resolves the bio in the request language, falling back to the main one', () => {
     const record = post('a', {
       author_bio: 'Writes about tea.',
@@ -152,7 +162,7 @@ describe('blog post transform — heading anchors', () => {
     expect(buildBlogPost(post('a', { content })).content).toBe(content)
   })
 
-  it('gives every h2-h6 a unique id and a hidden # link, keeping ids it already has', () => {
+  it('gives every h2-h6 a unique id, makes its text a link to itself with a # after it, keeping ids it already has', () => {
     const built = buildWith({ headingAnchors: true })(
       post('a', {
         content:
@@ -160,13 +170,26 @@ describe('blog post transform — heading anchors', () => {
           '<h2>Getting started</h2><h4><br></h4><h2 id="getting-started-2">Clash</h2>',
       })
     )
+    const anchored = (tag: string, attrs: string, id: string, text: string) =>
+      `<${tag}${attrs}><a class="tq-heading-link" href="#${id}">${text}</a>` +
+      `<a class="tq-heading-anchor" href="#${id}" aria-hidden="true" tabindex="-1">#</a></${tag}>`
     expect(built.content).toBe(
       '<h1>Title</h1>' +
-        '<h2 id="getting-started">Getting Started<a class="tq-heading-anchor" href="#getting-started" aria-hidden="true" tabindex="-1">#</a></h2>' +
-        '<h3 class="x" id="custom">Café &amp; Crème<a class="tq-heading-anchor" href="#custom" aria-hidden="true" tabindex="-1">#</a></h3>' +
-        '<h2 id="getting-started-3">Getting started<a class="tq-heading-anchor" href="#getting-started-3" aria-hidden="true" tabindex="-1">#</a></h2>' +
+        anchored('h2', ' id="getting-started"', 'getting-started', 'Getting Started') +
+        anchored('h3', ' class="x" id="custom"', 'custom', 'Café &amp; Crème') +
+        anchored('h2', ' id="getting-started-3"', 'getting-started-3', 'Getting started') +
         '<h4><br></h4>' +
-        '<h2 id="getting-started-2">Clash<a class="tq-heading-anchor" href="#getting-started-2" aria-hidden="true" tabindex="-1">#</a></h2>'
+        anchored('h2', ' id="getting-started-2"', 'getting-started-2', 'Clash')
+    )
+  })
+
+  it('links a heading that holds a link of its own through the # alone', () => {
+    const built = buildWith({ headingAnchors: true })(
+      post('a', { content: '<h2>See <a href="/pricing">pricing</a></h2>' })
+    )
+    expect(built.content).toBe(
+      '<h2 id="see-pricing">See <a href="/pricing">pricing</a>' +
+        '<a class="tq-heading-anchor" href="#see-pricing" aria-hidden="true" tabindex="-1">#</a></h2>'
     )
   })
 

package/__tests__/blog-post-picture-stand-in.test.ts

@@ -0,0 +1,48 @@
+import { ContentTables } from '@teleporthq/teleport-shared'
+import { generateBlogPostTransformationCode } from '../src/transformations/blog-post'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+
+/**
+ * What a post without a picture carries to its card and post page. The Blog
+ * shows the grey "No image" stand-in; the Help Center's articles are text, so
+ * an article without a picture carries none and its card closes up (the card
+ * draws the picture only when there is one). The editor reads the same
+ * `ContentTables.pictureStandIn`, so the canvas and the site agree.
+ */
+
+const buildPost = (
+  key: ContentTables.ContentPresetKey
+): ((record: unknown) => Record<string, unknown>) => {
+  const code =
+    generateSharedTransformationCode() +
+    '\n' +
+    generateBlogPostTransformationCode({ tables: ContentTables.contentTablesByKey(key) })
+  return new Function(code + '\nreturn buildBlogPost;')() as (
+    record: unknown
+  ) => Record<string, unknown>
+}
+
+const POST = { id: 'p1', title: 'Connect a domain', slug: 'connect-a-domain', status: 'published' }
+const DEFAULT_PICTURE = 'https://play.teleporthq.io/static/svg/default-img.svg'
+
+describe('a post without a picture', () => {
+  it('gets the grey stand-in on the Blog', () => {
+    expect(buildPost('blog')(POST).featuredImageUrl).toMatch(/^data:image\/svg\+xml/)
+  })
+
+  it('carries none in the Help Center, so its card closes up', () => {
+    expect(buildPost('help')(POST).featuredImageUrl).toBeNull()
+  })
+
+  it('counts the platform default picture as none', () => {
+    const record = { ...POST, featured_image_url: DEFAULT_PICTURE }
+    expect(buildPost('help')(record).featuredImageUrl).toBeNull()
+    expect(buildPost('blog')(record).featuredImageUrl).toMatch(/^data:image\/svg\+xml/)
+  })
+
+  it('keeps a picture of its own in both', () => {
+    const record = { ...POST, featured_image_url: 'https://cdn.example.com/domains.png' }
+    expect(buildPost('help')(record).featuredImageUrl).toBe('https://cdn.example.com/domains.png')
+    expect(buildPost('blog')(record).featuredImageUrl).toBe('https://cdn.example.com/domains.png')
+  })
+})