@teleporthq/teleport-plugin-next-data-source 0.43.59 → 0.43.60

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

@@ -0,0 +1,230 @@
+import * as types from '@babel/types'
+import { ChunkType, FileType, ChunkDefinition } from '@teleporthq/teleport-types'
+import { PAGINATION_CONTROL_ATTR } from '../../src/pagination-controls'
+
+/**
+ * A component shell carrying a `DataProvider` and the pagination controls a
+ * builder would have authored, so the wiring steps of the plugin have something
+ * real to find.
+ *
+ * `__tests__/_helpers` is excluded from the jest test match, so this file is a
+ * fixture rather than a suite.
+ */
+
+// tslint:disable:no-any
+
+interface ControlOptions {
+  /** Which `data-tq-pagination-control` markers to author. */
+  controls: string[]
+  /** Author Previous/Next with only the legacy class names, no markers. */
+  legacyOnly?: boolean
+  /** Number of DataProvider + widget pairs to emit (order-based zip coverage). */
+  mappers?: number
+}
+
+const control = (marker: string, children: types.JSXElement['children'] = []): types.JSXElement =>
+  types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('div'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('className'),
+          types.stringLiteral(`thq-${marker}-elm`)
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier(PAGINATION_CONTROL_ATTR),
+          types.stringLiteral(marker)
+        ),
+      ],
+      false
+    ),
+    types.jsxClosingElement(types.jsxIdentifier('div')),
+    children,
+    false
+  )
+
+const legacyControl = (direction: 'previous' | 'next'): types.JSXElement =>
+  types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('div'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('className'),
+          types.stringLiteral(`products-list-thq-${direction}-elm`)
+        ),
+      ],
+      false
+    ),
+    types.jsxClosingElement(types.jsxIdentifier('div')),
+    [types.jsxText(direction === 'previous' ? 'Previous' : 'Next')],
+    false
+  )
+
+const buildWidget = (options: ControlOptions): types.JSXElement => {
+  const children: types.JSXElement[] = []
+  for (const marker of options.controls) {
+    if (marker === 'pages') {
+      // The container holds ONE template button, which the generator repeats.
+      children.push(control('pages', [control('page', [types.jsxText('1')])]))
+      continue
+    }
+    if (options.legacyOnly && (marker === 'previous' || marker === 'next')) {
+      children.push(legacyControl(marker))
+      continue
+    }
+    children.push(control(marker))
+  }
+
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('div'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('className'),
+          types.stringLiteral('products-list-cms-pagination-node')
+        ),
+      ],
+      false
+    ),
+    types.jsxClosingElement(types.jsxIdentifier('div')),
+    children,
+    false
+  )
+}
+
+// Mirrors the real emitted shape: a self-closing `<DataProvider>` whose
+// `renderSuccess` returns a `<Repeater renderItem={row => …}>`. The plugin only
+// treats a provider as an array mapper when it can read that `renderItem`
+// parameter name, so the fixture must carry one.
+const buildDataProvider = (name: string, rowIdentifier: string): types.JSXElement =>
+  types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('DataProvider'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('name'),
+          types.jsxExpressionContainer(types.stringLiteral(name))
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier('renderSuccess'),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              [types.identifier('items')],
+              types.jsxElement(
+                types.jsxOpeningElement(
+                  types.jsxIdentifier('Repeater'),
+                  [
+                    types.jsxAttribute(
+                      types.jsxIdentifier('renderItem'),
+                      types.jsxExpressionContainer(
+                        types.arrowFunctionExpression(
+                          [types.identifier(rowIdentifier)],
+                          types.jsxElement(
+                            types.jsxOpeningElement(types.jsxIdentifier('div'), [], true),
+                            null,
+                            [],
+                            true
+                          )
+                        )
+                      )
+                    ),
+                  ],
+                  true
+                ),
+                null,
+                [],
+                true
+              )
+            )
+          )
+        ),
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  )
+
+export const makeWidgetComponentChunk = (options: ControlOptions): ChunkDefinition => {
+  const sections: types.JSXElement[] = []
+  const mappers = options.mappers ?? 1
+  for (let i = 0; i < mappers; i += 1) {
+    const identifier = `items${i === 0 ? '' : i}`
+    sections.push(buildDataProvider(identifier, `${identifier}_row`))
+    sections.push(buildWidget(options))
+  }
+
+  const root = types.jsxElement(
+    types.jsxOpeningElement(types.jsxIdentifier('div'), [], false),
+    types.jsxClosingElement(types.jsxIdentifier('div')),
+    sections,
+    false
+  )
+
+  return {
+    name: 'jsx-component',
+    type: ChunkType.AST,
+    fileType: FileType.JS,
+    linkAfter: [],
+    content: types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier('TestComponent'),
+        types.arrowFunctionExpression(
+          [types.identifier('props')],
+          types.blockStatement([types.returnStatement(root)])
+        )
+      ),
+    ]),
+    meta: {},
+  }
+}
+
+export interface RepeaterOptions {
+  paginated?: boolean
+  searchEnabled?: boolean
+  paginationMode?: 'buttons' | 'numbered'
+  infiniteScroll?: boolean
+  infiniteScrollLoadMore?: boolean
+  perPage?: number
+}
+
+export const makeUidlNode = (options: RepeaterOptions, identifier: string = 'items'): any => ({
+  type: 'data-source-list',
+  content: {
+    renderPropIdentifier: identifier,
+    resourceDefinition: {
+      dataSourceId: 'ds1',
+      tableName: 'products',
+      dataSourceType: 'postgresql',
+    },
+    resource: { params: { queryColumns: { content: ['name'] } } },
+    nodes: {
+      success: {
+        type: 'cms-list-repeater',
+        content: {
+          renderPropIdentifier: `${identifier}_row`,
+          paginated: options.paginated !== false,
+          perPage: options.perPage ?? 20,
+          searchEnabled: !!options.searchEnabled,
+          searchDebounce: 300,
+          ...(options.paginationMode ? { paginationMode: options.paginationMode } : {}),
+          ...(options.infiniteScroll ? { infiniteScroll: true } : {}),
+          ...(options.infiniteScrollLoadMore ? { infiniteScrollLoadMore: true } : {}),
+          nodes: { list: { type: 'element', content: { elementType: 'div' } } },
+        },
+      },
+    },
+  },
+})
+
+/** Wraps several data-source-lists in one element node, as a page would. */
+export const makeMultiMapperUidl = (repeaters: RepeaterOptions[]): any => ({
+  type: 'element',
+  content: {
+    elementType: 'container',
+    children: repeaters.map((options, index) =>
+      makeUidlNode(options, `items${index === 0 ? '' : index}`)
+    ),
+  },
+})

package/__tests__/ecommerce-product-discounts.test.ts

@@ -0,0 +1,196 @@
+import { generateEcommerceProductTransformationCode } from '../src/transformations/ecommerce-product'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+
+/**
+ * Per-product discounts in the GENERATED storefront transform — the third
+ * mirror of the rule that also lives in teleport-gui as
+ * `features/e-commerce/utils/product-discounts.ts` (editor/canvas) and
+ * `.../builders/ecommerce/product-discount-script.ts` (the baked add-to-cart
+ * script). The GUI's `product-discount-parity.spec.ts` pins those two together;
+ * this file is what keeps THIS copy honest.
+ *
+ * The two invariants under test: a discount comes off the NET price BEFORE tax,
+ * and the stored `price` never moves — every write path re-reads the raw row.
+ */
+
+const evalBuildProduct = (
+  storefrontTaxRate = 0
+): ((record: unknown) => Record<string, unknown>) => {
+  const code =
+    generateSharedTransformationCode() +
+    '\n' +
+    generateEcommerceProductTransformationCode({ storefrontTaxRate })
+  const fn = new Function(code + '\nreturn buildEcommerceProduct;')
+  return fn() as (record: unknown) => Record<string, unknown>
+}
+
+const FLAT_PRODUCT = { id: 'p1', name: 'P', slug: 'p', price: '100.00', currency: 'USD' }
+
+const discountsColumn = (
+  over: Partial<{
+    type: string
+    value: number
+    startsAt: string | null
+    endsAt: string | null
+  }> = {}
+): string =>
+  JSON.stringify([
+    { id: 'd1', type: 'percentage', value: 10, startsAt: null, endsAt: null, ...over },
+  ])
+
+describe('ecommerce product transform — per-product discounts', () => {
+  it('leaves `price` alone and marks the DISPLAY price down', () => {
+    const product = evalBuildProduct()({ ...FLAT_PRODUCT, discounts: discountsColumn() })
+    expect(product.price).toBe(100)
+    expect(product.displayPrice).toBe('90.00')
+    expect(product.hasDiscount).toBe('true')
+    expect(product.originalDisplayPrice).toBe('100.00')
+  })
+
+  it('takes the discount off the NET price, then adds tax on top of that', () => {
+    const product = evalBuildProduct(19)({ ...FLAT_PRODUCT, discounts: discountsColumn() })
+    // 100 → 90 net → 90 * 1.19 = 107.10 gross. Taxing first would give 119 − 10%.
+    expect(product.displayPrice).toBe('107.10')
+    expect(product.originalDisplayPrice).toBe('119.00')
+  })
+
+  it('emits the badge copy for both discount types', () => {
+    const percentage = evalBuildProduct()({ ...FLAT_PRODUCT, discounts: discountsColumn() })
+    expect(percentage.discountLabel).toBe('10% off')
+
+    const fixed = evalBuildProduct()({
+      ...FLAT_PRODUCT,
+      discounts: discountsColumn({ type: 'fixed', value: 15 }),
+    })
+    expect(fixed.discountLabel).toBe('$15 off')
+    expect(fixed.displayPrice).toBe('85.00')
+  })
+
+  it('puts the currency symbol where the currency wants it', () => {
+    const product = evalBuildProduct()({
+      ...FLAT_PRODUCT,
+      currency: 'SEK',
+      discounts: discountsColumn({ type: 'fixed', value: 20 }),
+    })
+    expect(String(product.discountLabel).endsWith(' off')).toBe(true)
+    expect(String(product.discountLabel)).toContain('20')
+  })
+
+  it('reports no discount — and no struck price — when nothing is scheduled', () => {
+    const product = evalBuildProduct()(FLAT_PRODUCT)
+    expect(product.hasDiscount).toBe('false')
+    expect(product.discountLabel).toBe('')
+    expect(product.originalDisplayPrice).toBe('')
+    expect(product.displayPrice).toBe('100.00')
+  })
+
+  it('honours the half-open window: live at the start instant, over at the end', () => {
+    const now = Date.now()
+    const live = evalBuildProduct()({
+      ...FLAT_PRODUCT,
+      discounts: JSON.stringify([
+        {
+          id: 'd1',
+          type: 'percentage',
+          value: 10,
+          startsAt: new Date(now - 1000).toISOString(),
+          endsAt: new Date(now + 60000).toISOString(),
+        },
+      ]),
+    })
+    expect(live.hasDiscount).toBe('true')
+
+    const expired = evalBuildProduct()({
+      ...FLAT_PRODUCT,
+      discounts: JSON.stringify([
+        {
+          id: 'd1',
+          type: 'percentage',
+          value: 10,
+          startsAt: new Date(now - 60000).toISOString(),
+          endsAt: new Date(now - 1000).toISOString(),
+        },
+      ]),
+    })
+    expect(expired.hasDiscount).toBe('false')
+    expect(expired.displayPrice).toBe('100.00')
+
+    const scheduled = evalBuildProduct()({
+      ...FLAT_PRODUCT,
+      discounts: JSON.stringify([
+        { id: 'd1', type: 'percentage', value: 10, startsAt: new Date(now + 60000).toISOString() },
+      ]),
+    })
+    expect(scheduled.hasDiscount).toBe('false')
+  })
+
+  it('never goes below zero, and never renders a negative price', () => {
+    const product = evalBuildProduct()({
+      ...FLAT_PRODUCT,
+      discounts: discountsColumn({ type: 'fixed', value: 500 }),
+    })
+    expect(product.displayPrice).toBe('0.00')
+  })
+
+  it('falls back to the list price when the column is unusable', () => {
+    const cases = ['{not json', JSON.stringify({ type: 'percentage' }), '', null]
+    cases.forEach((discounts) => {
+      const product = evalBuildProduct()({ ...FLAT_PRODUCT, discounts })
+      expect(product.hasDiscount).toBe('false')
+      expect(product.displayPrice).toBe('100.00')
+    })
+  })
+
+  it('discounts each variant from its OWN price, carrying the pre-discount twin', () => {
+    const record = {
+      ...FLAT_PRODUCT,
+      discounts: discountsColumn({ value: 50 }),
+      variant_options: JSON.stringify([
+        {
+          key: 'size',
+          name: 'Size',
+          type: 'text',
+          values: [
+            { value: 's', label: 'S' },
+            { value: 'l', label: 'L' },
+          ],
+        },
+      ]),
+    }
+    const build = new Function(
+      generateSharedTransformationCode() +
+        '\n' +
+        generateEcommerceProductTransformationCode({ storefrontTaxRate: 0 }) +
+        '\nreturn buildEcommerceProduct;'
+    )() as (row: unknown, variants: unknown) => Record<string, unknown>
+
+    const product = build(record, {
+      variantsByProductId: {
+        // An overriding combination, and one that INHERITS the product price.
+        p1: [
+          { id: 'v-s', options: { size: 's' }, price: '40.00', quantity: 5 },
+          { id: 'v-l', options: { size: 'l' }, price: null, quantity: 5 },
+        ],
+      },
+    })
+
+    const variantsDisplay = JSON.parse(String(product.variantsDisplayJson)) as Array<{
+      id: string
+      price: number
+      originalPrice: number | null
+    }>
+    const small = variantsDisplay.find((entry) => entry.id === 'v-s')
+    const large = variantsDisplay.find((entry) => entry.id === 'v-l')
+
+    expect(small?.price).toBe(20)
+    expect(small?.originalPrice).toBe(40)
+    // The inheriting combination is discounted from the PRODUCT price, not left
+    // at the undiscounted base.
+    expect(large?.price).toBe(50)
+    expect(large?.originalPrice).toBe(100)
+
+    // The net twins stay untouched — every write path re-reads them.
+    const variantsJson = JSON.parse(String(product.variantsJson)) as Array<{ price: number | null }>
+    expect(variantsJson.map((entry) => entry.price)).toEqual([40, null])
+  })
+})

package/__tests__/infinite-scroll.test.ts

@@ -0,0 +1,143 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import { ComponentStructure } from '@teleporthq/teleport-types'
+import { createNextArrayMapperPaginationPlugin } from '../src/pagination-plugin'
+import {
+  makeMultiMapperUidl,
+  makeUidlNode,
+  makeWidgetComponentChunk,
+  type RepeaterOptions,
+} from './_helpers/pagination-widget-fixture'
+
+const runPlugin = async (
+  repeater: RepeaterOptions,
+  controls: string[] = ['previous', 'next']
+): Promise<string> => {
+  const chunk = makeWidgetComponentChunk({ controls })
+  const structure: ComponentStructure = {
+    uidl: { name: 'TestComponent', node: makeUidlNode(repeater) },
+    chunks: [chunk],
+    dependencies: {},
+    options: { dataSources: {}, extractedResources: {} },
+  } as never
+  await createNextArrayMapperPaginationPlugin()(structure)
+  return generator(chunk.content as types.Node).code
+}
+
+const collapse = (code: string): string => code.replace(/\s+/g, ' ')
+
+describe('pagination plugin — infinite scroll', () => {
+  it('accumulates pages inside fetchData and reports the end of the data', async () => {
+    const code = await runPlugin({ infiniteScroll: true })
+    const flat = collapse(code)
+
+    expect(flat).toContain('const ds_0_accumRef = useRef({ sig: "", pages: {} })')
+    expect(flat).toContain('const [ds_0_hasMoreFlag, setDs_0_hasMoreFlag] = useState(true)')
+    // Two independent end-of-data signals: a short page, and the counted total.
+    expect(flat).toContain(
+      'const ds_0_hasMore = ds_0_hasMoreFlag && (ds_0_maxPages === 0 || ds_0_page < ds_0_maxPages)'
+    )
+
+    // Everything but the page identifies the QUERY: a filter, sort or search
+    // change must start a fresh list rather than interleave two result sets.
+    expect(flat).toContain('const sig = JSON.stringify({ ...params, page: 0 })')
+    expect(flat).toContain('if (ds_0_accumRef.current.sig !== sig)')
+    expect(flat).toContain('ds_0_accumRef.current = { sig, pages: {} }')
+    expect(flat).toContain('ds_0_accumRef.current.pages[page] = rows')
+    // A short page is the only end signal a source that cannot count gives.
+    expect(flat).toContain('setDs_0_hasMoreFlag(rows.length >= 20)')
+    // Numeric sort, so page 10 does not land between 1 and 2.
+    expect(flat).toContain('.map(Number).sort((a, b) => a - b).reduce(')
+  })
+
+  it('keeps the page out of the provider key and suppresses initialData', async () => {
+    const code = await runPlugin({ infiniteScroll: true })
+
+    // Remounting per appended page would throw away the accumulated rows...
+    expect(code).not.toContain('ds_0_page}`')
+    // ...and initialData would make DataProvider skip the fetch that fills the
+    // accumulator with page 1.
+    expect(code).not.toContain('initialData')
+  })
+
+  it('observes a sentinel after the list when there is no Load More button', async () => {
+    const code = await runPlugin({ infiniteScroll: true })
+    const flat = collapse(code)
+
+    expect(flat).toContain('const ds_0_sentinelRef = useRef(null)')
+    expect(flat).toContain(
+      '<div ref={ds_0_sentinelRef} aria-hidden="true" style={{ height: "1px" }} />'
+    )
+    expect(flat).toContain('new IntersectionObserver(')
+    expect(flat).toContain('typeof IntersectionObserver === "undefined"')
+    expect(flat).toContain('rootMargin: "200px"')
+    expect(flat).toContain('return () => observer.disconnect()')
+    expect(flat).toContain('}, [ds_0_hasMore, ds_0_maxPages])')
+    // ⛔ The next page comes from the updater's OWN argument. The effect is
+    // re-armed on hasMore/maxPages, neither of which changes on an append while
+    // the total is unknown — a captured page would still read 1 on the second
+    // intersection and the list would stop growing after one page.
+    expect(flat).toContain(
+      'setDs_0_page(page => ds_0_maxPages > 0 && page >= ds_0_maxPages ? page : page + 1)'
+    )
+  })
+
+  it('wires the authored Load More button instead, with no observer', async () => {
+    const code = await runPlugin({ infiniteScroll: true, infiniteScrollLoadMore: true }, [
+      'load-more',
+    ])
+    const flat = collapse(code)
+
+    expect(flat).toContain('className="thq-load-more-elm"')
+    expect(flat).toContain('type="button"')
+    expect(flat).toContain('disabled={!ds_0_hasMore}')
+    expect(flat).not.toContain('IntersectionObserver')
+    expect(flat).not.toContain('sentinelRef')
+  })
+
+  it('drops page controls left in the widget when the list appends', async () => {
+    const code = await runPlugin({ infiniteScroll: true, infiniteScrollLoadMore: true }, [
+      'previous',
+      'load-more',
+      'next',
+    ])
+
+    // A visitor of an appending list never leaves page 1, so Previous/Next
+    // would be dead controls.
+    expect(code).not.toContain('thq-previous-elm')
+    expect(code).not.toContain('thq-next-elm')
+    expect(code).toContain('thq-load-more-elm')
+  })
+
+  it('strips a widget left behind on an auto-loading list', async () => {
+    // An older project (or an externally placed widget) can still carry
+    // Previous/Next after the author switches to infinite scroll. They would be
+    // dead controls, so the mode's own pruning removes them even though this
+    // mapper renders no widget of its own.
+    const code = await runPlugin({ infiniteScroll: true }, ['previous', 'next'])
+
+    expect(code).not.toContain('thq-previous-elm')
+    expect(code).not.toContain('thq-next-elm')
+  })
+
+  it('does not desynchronise the widget zip when mappers use different modes', async () => {
+    // ⛔ The infinite mapper draws no container. Counting one for it would wire
+    // THIS mapper's buttons to the other mapper's state.
+    const chunk = makeWidgetComponentChunk({ controls: ['previous', 'next'], mappers: 1 })
+    const structure: ComponentStructure = {
+      uidl: {
+        name: 'TestComponent',
+        node: makeMultiMapperUidl([{ infiniteScroll: true }, {}]),
+      },
+      chunks: [chunk],
+      dependencies: {},
+      options: { dataSources: {}, extractedResources: {} },
+    } as never
+    await createNextArrayMapperPaginationPlugin()(structure)
+    const code = generator(chunk.content as types.Node).code
+
+    // The single authored widget belongs to the SECOND (paginated) mapper.
+    expect(code).toContain('setDs_1_page')
+    expect(code).not.toContain('setDs_0_page(page => Math.max(1, page - 1))')
+  })
+})

package/__tests__/numbered-pagination.test.ts

@@ -0,0 +1,113 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import { ComponentStructure } from '@teleporthq/teleport-types'
+import { createNextArrayMapperPaginationPlugin } from '../src/pagination-plugin'
+import {
+  makeUidlNode,
+  makeWidgetComponentChunk,
+  type RepeaterOptions,
+} from './_helpers/pagination-widget-fixture'
+
+const runPlugin = async (
+  repeater: RepeaterOptions,
+  controls: string[],
+  legacyOnly = false
+): Promise<string> => {
+  const chunk = makeWidgetComponentChunk({ controls, legacyOnly })
+  const structure: ComponentStructure = {
+    uidl: { name: 'TestComponent', node: makeUidlNode(repeater) },
+    chunks: [chunk],
+    dependencies: {},
+    options: { dataSources: {}, extractedResources: {} },
+  } as never
+  await createNextArrayMapperPaginationPlugin()(structure)
+  return generator(chunk.content as types.Node).code
+}
+
+const collapse = (code: string): string => code.replace(/\s+/g, ' ')
+
+const NUMBERED_CONTROLS = ['first', 'previous', 'pages', 'next', 'last']
+
+describe('pagination plugin — numbered mode', () => {
+  it('computes a windowed token list with an ellipsis on each side', async () => {
+    const code = await runPlugin({ paginationMode: 'numbered' }, NUMBERED_CONTROLS)
+    const flat = collapse(code)
+
+    expect(flat).toContain('const ds_0_pageTokens = useMemo(')
+    // No results at all and a single page are answered without a window.
+    expect(flat).toContain('if (total <= 0) return []')
+    expect(flat).toContain('if (total === 1) return [1]')
+    // First and last are always shown, with one neighbour either side.
+    expect(flat).toContain('const start = Math.max(2, current - 1)')
+    expect(flat).toContain('const end = Math.min(total - 1, current + 1)')
+    expect(flat).toContain('if (start > 2) tokens.push("start-ellipsis")')
+    expect(flat).toContain('if (end < total - 1) tokens.push("end-ellipsis")')
+    expect(flat).toContain('}, [ds_0_maxPages, ds_0_page])')
+  })
+
+  it('repeats the authored template button per page, preserving its class', async () => {
+    const code = await runPlugin({ paginationMode: 'numbered' }, NUMBERED_CONTROLS)
+    const flat = collapse(code)
+
+    expect(flat).toContain('ds_0_pageTokens.map(token =>')
+    expect(flat).toContain('typeof token === "number"')
+    // The author's own node is cloned, so their styling survives.
+    expect(flat).toContain('className="thq-page-elm"')
+    // The current page is MARKED, not disabled — it stays reachable and
+    // `[aria-current='page']` is styleable.
+    expect(flat).toContain('aria-current={ds_0_page === token ? "page" : undefined}')
+    // The `${token}` here is the GENERATED source being asserted on, not an
+    // interpolation this file wants performed.
+    // tslint:disable-next-line:no-invalid-template-strings
+    expect(flat).toContain('key={`page-${token}`}')
+    expect(flat).toContain('onClick={() => setDs_0_page(page => page === token ? page : token)}')
+    // Whatever label the template carried is replaced by the real number.
+    expect(flat).toContain('>{token}<')
+    // No authored ellipsis template ⇒ a plain span fills the gap.
+    expect(flat).toContain('<span key={token}>…</span>')
+  })
+
+  it('wires First and Last against the live page count', async () => {
+    const code = await runPlugin({ paginationMode: 'numbered' }, NUMBERED_CONTROLS)
+    const flat = collapse(code)
+
+    expect(flat).toContain('onClick={() => setDs_0_page(page => page === 1 ? page : 1)}')
+    expect(flat).toContain('disabled={ds_0_page <= 1}')
+    expect(flat).toContain(
+      'onClick={() => setDs_0_page(page => page === ds_0_maxPages ? page : ds_0_maxPages)}'
+    )
+    // maxPages 0 is "no results", where the last page would be page 0.
+    expect(flat).toContain('disabled={ds_0_maxPages === 0 || ds_0_page >= ds_0_maxPages}')
+  })
+
+  it('fetches a live count on a PAGE, which otherwise only has the build-time one', async () => {
+    const code = await runPlugin({ paginationMode: 'numbered' }, NUMBERED_CONTROLS)
+
+    // A numbered strip labels every page, so a stale build-time count would
+    // print numbers that do not exist.
+    expect(code).toContain('-count?')
+    expect(code).toContain('setDs_0_maxPages(data.count === 0 ? 0 : Math.ceil(data.count / 20))')
+  })
+
+  it('removes a numbered strip left over from a mode switch', async () => {
+    // The builder never deletes controls on a mode switch (that would discard
+    // the author's styling), so a Previous/Next list can still carry them.
+    const code = await runPlugin({}, NUMBERED_CONTROLS)
+
+    expect(code).not.toContain('ds_0_pageTokens')
+    expect(code).not.toContain('thq-first-elm')
+    expect(code).not.toContain('thq-last-elm')
+    expect(code).not.toContain('thq-pages-elm')
+    // Previous/Next are still wired exactly as before.
+    expect(code).toContain('thq-previous-elm')
+    expect(code).toContain('disabled={ds_0_page <= 1}')
+  })
+
+  it('still finds Previous/Next by class name in projects predating the marker', async () => {
+    const code = await runPlugin({}, ['previous', 'next'], /* legacyOnly */ true)
+
+    expect(code).toContain('products-list-thq-previous-elm')
+    expect(code).toContain('disabled={ds_0_page <= 1}')
+    expect(code).toContain('disabled={ds_0_page >= ds_0_maxPages}')
+  })
+})