@teleporthq/teleport-plugin-next-data-source 0.43.75 → 0.44.1

package/__tests__/range-control.test.ts

@@ -0,0 +1,159 @@
+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,
+  RANGE_DRAWN_TEXT,
+  type RepeaterOptions,
+} from './_helpers/pagination-widget-fixture'
+
+type ControlOptions = Parameters<typeof makeWidgetComponentChunk>[0]
+
+const runPlugin = async (repeater: RepeaterOptions, controls: ControlOptions): 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, ' ')
+
+const TOTAL_STATE = 'const [ds_0_total, setDs_0_total] = useState(null)'
+const DRAWN = `ds_0_total === null ? "${RANGE_DRAWN_TEXT}" :`
+const FROM_BY_PAGE = '(ds_0_total === 0 ? 0 : (ds_0_page - 1) * 20 + 1).toLocaleString("en-US")'
+const FROM_FIRST_ROW = '(ds_0_total === 0 ? 0 : 1).toLocaleString("en-US")'
+const TO = 'Math.min(ds_0_page * 20, ds_0_total).toLocaleString("en-US")'
+const TOTAL = 'ds_0_total.toLocaleString("en-US")'
+
+describe('pagination plugin — range control', () => {
+  it('fills the authored words with the page window in buttons mode', async () => {
+    const flat = collapse(await runPlugin({}, { controls: ['previous', 'range', 'next'] }))
+
+    // The total is a state of its own — `maxPages` cannot give it back — and
+    // the count effect fills both from the same response.
+    expect(flat).toContain(TOTAL_STATE)
+    expect(flat).toContain('setDs_0_maxPages(')
+    expect(flat).toContain('setDs_0_total(data.count)')
+
+    // The drawn text stays until the count has answered; then the template.
+    expect(flat).toContain(`${DRAWN} \`Showing \${${FROM_BY_PAGE}}–\${${TO}} of \${${TOTAL}}\``)
+    // The marker and template ride along, so the DOM carries the contract.
+    expect(flat).toContain('data-tq-pagination-control="range"')
+    expect(flat).toContain('data-tq-range-template=')
+  })
+
+  it('counts from the first row in an appending list and survives the mode pruning', async () => {
+    const flat = collapse(
+      await runPlugin(
+        { infiniteScroll: true, infiniteScrollLoadMore: true },
+        { controls: ['previous', 'range', 'load-more', 'next'] }
+      )
+    )
+
+    // Previous/Next are pruned for an appending list; the range is not.
+    expect(flat).not.toContain('thq-previous-elm')
+    expect(flat).not.toContain('thq-next-elm')
+    expect(flat).toContain('thq-load-more-elm')
+    expect(flat).toContain('data-tq-pagination-control="range"')
+
+    // Everything loaded so far: 1 .. min(pages × perPage, total).
+    expect(flat).toContain(`${DRAWN} \`Showing \${${FROM_FIRST_ROW}}–\${${TO}} of \${${TOTAL}}\``)
+    expect(flat).not.toContain(FROM_BY_PAGE)
+  })
+
+  it('is kept and wired beside a sentinel-driven infinite scroll too', async () => {
+    const flat = collapse(await runPlugin({ infiniteScroll: true }, { controls: ['range'] }))
+
+    expect(flat).toContain('ds_0_sentinelRef')
+    expect(flat).toContain(TOTAL_STATE)
+    expect(flat).toContain(FROM_FIRST_ROW)
+  })
+
+  it('survives numbered mode with the page window', async () => {
+    const flat = collapse(
+      await runPlugin(
+        { paginationMode: 'numbered' },
+        { controls: ['first', 'previous', 'pages', 'range', 'next', 'last'] }
+      )
+    )
+
+    expect(flat).toContain('ds_0_pageTokens.map(token =>')
+    expect(flat).toContain('data-tq-pagination-control="range"')
+    expect(flat).toContain(FROM_BY_PAGE)
+  })
+
+  it('reads the page off the combined state beside a search input', async () => {
+    const flat = collapse(
+      await runPlugin({ searchEnabled: true }, { controls: ['previous', 'range', 'next'] })
+    )
+
+    expect(flat).toContain(TOTAL_STATE)
+    expect(flat).toContain('setDs_0_total(data.count)')
+    expect(flat).toContain(
+      '(ds_0_total === 0 ? 0 : (ds_0_state.page - 1) * 20 + 1).toLocaleString("en-US")'
+    )
+    expect(flat).toContain('Math.min(ds_0_state.page * 20, ds_0_total).toLocaleString("en-US")')
+  })
+
+  it('reads a template the JSX printer escaped the braces of', async () => {
+    const flat = collapse(
+      await runPlugin(
+        {},
+        {
+          controls: ['range'],
+          rangeTemplate: 'Showing &#123;from&#125;–&#123;to&#125; of &#123;total&#125;',
+        }
+      )
+    )
+    expect(flat).not.toContain('`Showing &#123;')
+    expect(flat).toMatch(/`Showing \$\{[^`]*–\$\{[^`]*of \$\{[^`]*`/)
+  })
+
+  it('falls back to "{from}–{to} of {total}" when no template is authored', async () => {
+    const flat = collapse(await runPlugin({}, { controls: ['range'], rangeTemplate: null }))
+
+    expect(flat).not.toContain('data-tq-range-template')
+    expect(flat).toContain(`${DRAWN} \`\${${FROM_BY_PAGE}}–\${${TO}} of \${${TOTAL}}\``)
+  })
+
+  it('wires a range outside every widget to the mapper it names, wherever it sits', async () => {
+    // Placed BEFORE the provider — a toolbar above the list — so the
+    // container-ownership rule could never have reached it.
+    const flat = collapse(
+      await runPlugin(
+        { nodeId: 'mapper-1' },
+        { controls: ['previous', 'next'], standaloneRange: { forNodeId: 'mapper-1' } }
+      )
+    )
+
+    expect(flat).toContain('data-tq-pagination-for="mapper-1"')
+    expect(flat).toContain(TOTAL_STATE)
+    expect(flat).toContain(`${DRAWN} \`Showing \${${FROM_BY_PAGE}}–\${${TO}} of \${${TOTAL}}\``)
+  })
+
+  it('leaves a range naming a mapper this component does not render as drawn', async () => {
+    const flat = collapse(
+      await runPlugin(
+        { nodeId: 'mapper-1' },
+        { controls: ['previous', 'next'], standaloneRange: { forNodeId: 'someone-else' } }
+      )
+    )
+
+    expect(flat).toContain(`>${RANGE_DRAWN_TEXT}</div>`)
+    expect(flat).not.toContain('ds_0_total === null')
+  })
+
+  it('changes nothing for a component without a range control', async () => {
+    const flat = collapse(await runPlugin({}, { controls: ['previous', 'next'] }))
+
+    expect(flat).not.toContain('ds_0_total')
+    expect(flat).not.toContain('setDs_0_total')
+  })
+})

package/__tests__/refetch-loading-state.test.ts

@@ -98,7 +98,8 @@ const makeComponentChunk = (dataProvider: types.JSXElement): ChunkDefinition =>
 // A `data-source-list > cms-list-repeater` UIDL. `category` decides which
 // DataProvider updater runs, so every one of them is covered below.
 const makeUidlNode = (
-  category: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain'
+  category: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain',
+  repeater: Record<string, unknown> = {}
   // tslint:disable-next-line:no-any
 ): any => ({
   type: 'data-source-list',
@@ -120,6 +121,7 @@ const makeUidlNode = (
           searchEnabled: category === 'paginated+search' || category === 'search-only',
           searchDebounce: 300,
           nodes: { list: { type: 'element', content: { elementType: 'div' } } },
+          ...repeater,
         },
       },
     },
@@ -129,11 +131,17 @@ const makeUidlNode = (
 const runPlugin = async (options: {
   category?: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain'
   withLoadingSlot?: boolean
+  repeater?: Record<string, unknown>
+  onChunk?: (chunk: ChunkDefinition) => void
 }): Promise<string> => {
   const dataProvider = makeDataProviderJSX({ withLoadingSlot: options.withLoadingSlot !== false })
   const chunk = makeComponentChunk(dataProvider)
+  options.onChunk?.(chunk)
   const structure: ComponentStructure = {
-    uidl: { name: 'ProductsList', node: makeUidlNode(options.category || 'paginated+search') },
+    uidl: {
+      name: 'ProductsList',
+      node: makeUidlNode(options.category || 'paginated+search', options.repeater),
+    },
     chunks: [chunk],
     dependencies: {},
     options: { dataSources: {}, extractedResources: {} },
@@ -285,3 +293,151 @@ describe('pagination plugin — refetch loading state', () => {
     expect(code).toContain('persistDataDuringLoading={true}')
   })
 })
+
+/**
+ * An appending list (infinite scroll, Load more) loads its next page BELOW the
+ * rows on show. Raising the flag for that request too swapped every row for the
+ * loading slot until the page arrived: the list collapsed under the visitor's
+ * scroll on each append. Only a list loading afresh shows its loading slot.
+ */
+describe('pagination plugin — refetch loading state of an appending list', () => {
+  it.each([
+    ['infinite scroll', { infiniteScroll: true }],
+    ['Load more', { infiniteScroll: true, infiniteScrollLoadMore: true }],
+  ])(
+    'keeps the rows on screen while the next page of a list with %s loads',
+    async (_, repeater) => {
+      const code = (await runPlugin({ category: 'paginated-only', repeater })).replace(/\s+/g, ' ')
+
+      expect(code).toContain('const [ds_0_isAppending, setDs_0_isAppending] = useState(false)')
+      // Recorded with the request, from the request the list now stands on.
+      expect(code).toContain(
+        'setDs_0_isAppending(ds_0_accumRef.current.latest.page > 1 && ds_0_accumRef.current.latest.sig === ds_0_accumRef.current.sig); setDs_0_isFetching(true);'
+      )
+      expect(code.indexOf('ds_0_accumRef.current.latest = {')).toBeLessThan(
+        code.indexOf('setDs_0_isAppending(ds_0_accumRef')
+      )
+      expect(code).toContain('persistDataDuringLoading={!ds_0_isFetching || ds_0_isAppending}')
+    }
+  )
+
+  it('leaves a list that pages unchanged: a page change loads it afresh', async () => {
+    const code = await runPlugin({ category: 'paginated-only' })
+
+    expect(code).toContain('persistDataDuringLoading={!ds_0_isFetching}')
+    expect(code).not.toContain('isAppending')
+  })
+})
+
+/**
+ * Executed: the `fetchData` and `persistDataDuringLoading` the page emits, under
+ * a model of what `DataProvider` (@teleporthq/react-components) paints:
+ *
+ *   on a params change:  status = "loading"; if (!persistDataDuringLoading) data = undefined
+ *   while loading:       persistDataDuringLoading && data ? renderSuccess(data) : renderLoading()
+ *   once answered:       data = <what fetchData resolved with>
+ */
+describe('an appending list, run', () => {
+  const PER_PAGE = 20
+  // tslint:disable:no-any
+
+  const findAttribute = (root: types.Node, name: string): types.Expression => {
+    let found: types.Expression | undefined
+    types.traverseFast(root, (node) => {
+      if (
+        !found &&
+        node.type === 'JSXAttribute' &&
+        node.name.name === name &&
+        node.value?.type === 'JSXExpressionContainer'
+      ) {
+        found = node.value.expression as types.Expression
+      }
+    })
+    return found!
+  }
+
+  const bootList = async () => {
+    let chunk: ChunkDefinition | undefined
+    await runPlugin({
+      category: 'paginated-only',
+      repeater: { infiniteScroll: true, infiniteScrollLoadMore: true },
+      onChunk: (made) => (chunk = made),
+    })
+    const content = chunk!.content as types.Node
+    const memoized = findAttribute(content, 'fetchData') as types.CallExpression
+    const persistCode = generator(findAttribute(content, 'persistDataDuringLoading')).code
+
+    const state = { isFetching: false, isAppending: false }
+    const scope = {
+      ds_0_accumRef: { current: { sig: '', pages: {}, latest: null } },
+      ds_0_fetchSeq: { current: 0 },
+      ds_0_fetchesInFlight: { current: 0 },
+      ds_0_latestData: { current: undefined },
+      setDs_0_hasMoreFlag: () => undefined,
+      setDs_0_isFetching: (value: boolean) => (state.isFetching = value),
+      setDs_0_isAppending: (value: boolean) => (state.isAppending = value),
+    }
+    const answers: Array<() => void> = []
+    const fakeFetch = (url: string) => {
+      const query = new URL(url, 'http://shop.test').searchParams
+      const page = Number(query.get('page'))
+      const rows = Array.from({ length: PER_PAGE }, (_, i) => `${query.get('sorts')}${page}-${i}`)
+      return new Promise((resolve) => answers.push(() => resolve({ json: () => ({ data: rows }) })))
+    }
+    const fetchData = new Function(
+      'fetch',
+      ...Object.keys(scope),
+      `return (${generator(memoized.arguments[0]).code})`
+    )(fakeFetch, ...Object.values(scope))
+    const persistDataDuringLoading = (): boolean =>
+      new Function('ds_0_isFetching', 'ds_0_isAppending', `return (${persistCode})`)(
+        state.isFetching,
+        state.isAppending
+      )
+
+    // The provider: a component's list, so nothing on show until page 1.
+    let data: string[] | undefined
+    let status = 'idle'
+    let persistAtLastPaint = persistDataDuringLoading()
+    const paint = () => {
+      persistAtLastPaint = persistDataDuringLoading()
+      if (status === 'success') {
+        return `${data!.length} rows`
+      }
+      return persistAtLastPaint && data ? `${data.length} rows` : 'loading slot'
+    }
+    const load = async (page: number, sorts: string) => {
+      status = 'loading'
+      if (!persistAtLastPaint) {
+        data = undefined
+      }
+      const answered = fetchData({ page, perPage: PER_PAGE, sorts })
+      const whileLoading = paint()
+      answers.shift()!()
+      data = await answered
+      status = 'success'
+      return { whileLoading, after: paint() }
+    }
+    return { load }
+  }
+
+  it('paints its loading slot for its first page, then keeps the rows through every append', async () => {
+    const list = await bootList()
+
+    expect(await list.load(1, 'A')).toEqual({ whileLoading: 'loading slot', after: '20 rows' })
+    expect(await list.load(2, 'A')).toEqual({ whileLoading: '20 rows', after: '40 rows' })
+    expect(await list.load(3, 'A')).toEqual({ whileLoading: '40 rows', after: '60 rows' })
+  })
+
+  it('paints the loading slot again for a fresh list: a sort, filter or search change', async () => {
+    const list = await bootList()
+    await list.load(1, 'A')
+    await list.load(2, 'A')
+
+    // The page the change fires before the list is reset to page 1 is another
+    // query's, and no append either.
+    expect((await list.load(2, 'B')).whileLoading).toBe('loading slot')
+    expect(await list.load(1, 'B')).toEqual({ whileLoading: 'loading slot', after: '20 rows' })
+    expect(await list.load(2, 'B')).toEqual({ whileLoading: '20 rows', after: '40 rows' })
+  })
+})

package/__tests__/search-input-marker.test.ts

@@ -0,0 +1,86 @@
+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,
+  makeWidgetComponentChunk,
+  type RepeaterOptions,
+} from './_helpers/pagination-widget-fixture'
+
+type ControlOptions = Parameters<typeof makeWidgetComponentChunk>[0]
+
+/**
+ * A page's OWN search box, marked `data-tq-search-for` with its mapper's node
+ * id, is wired like the platform's `search-input`: controlled by the mapper's
+ * query state. It is paired by the id it names, never by its place among the
+ * platform inputs.
+ */
+
+const runPlugin = async (
+  repeaters: RepeaterOptions[],
+  controls: ControlOptions
+): Promise<string> => {
+  const chunk = makeWidgetComponentChunk(controls)
+  const structure: ComponentStructure = {
+    uidl: { name: 'TestComponent', node: makeMultiMapperUidl(repeaters) },
+    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 wiredTo = (index: number): string =>
+  `onChange={e => setDs_${index}_searchQuery(e.target.value)} value={ds_${index}_searchQuery}`
+
+describe('pagination plugin — a page’s own search box', () => {
+  it('controls a marked input by the query of the mapper it names, and keeps Enter from submitting', async () => {
+    const flat = collapse(
+      await runPlugin([{ searchEnabled: true, nodeId: 'TQ_orders' }], {
+        controls: ['previous', 'next'],
+        standaloneSearch: [{ name: 'hm-search', forNodeId: 'TQ_orders' }],
+      })
+    )
+    expect(flat).toContain(`name="hm-search" data-tq-search-for="TQ_orders" ${wiredTo(0)}`)
+    expect(flat).toContain('onKeyDown={e => { if (e.key === "Enter") e.preventDefault(); }}')
+  })
+
+  it('pairs by the id named, whatever the order: the platform input keeps its place', async () => {
+    const flat = collapse(
+      await runPlugin(
+        [
+          { searchEnabled: true, nodeId: 'TQ_jobs' },
+          { searchEnabled: true, nodeId: 'TQ_orders' },
+        ],
+        {
+          controls: ['previous', 'next'],
+          mappers: 2,
+          standaloneSearch: [
+            { name: 'hm-search', forNodeId: 'TQ_orders' },
+            { name: 'platform-search' },
+          ],
+        }
+      )
+    )
+    // The marked box searches the second mapper; the platform box, first of its kind, the first.
+    expect(flat).toContain(`data-tq-search-for="TQ_orders" ${wiredTo(1)}`)
+    expect(flat).toContain(
+      `name="platform-search" className="products-list-search-input" ${wiredTo(0)}`
+    )
+  })
+
+  it('leaves a marked input alone when no search-enabled mapper carries its id', async () => {
+    const flat = collapse(
+      await runPlugin([{ searchEnabled: true, nodeId: 'TQ_orders' }], {
+        controls: ['previous', 'next'],
+        standaloneSearch: [{ name: 'hm-search', forNodeId: 'TQ_elsewhere' }],
+      })
+    )
+    expect(flat).toContain('name="hm-search" data-tq-search-for="TQ_elsewhere" />')
+    expect(flat).not.toContain('setDs_0_searchQuery(e.target.value)')
+  })
+})

package/__tests__/search-url-sync.test.ts

@@ -40,7 +40,7 @@ const makeComponentChunk = (): ChunkDefinition => {
 // A `data-source-list > cms-list-repeater` UIDL: a paginated + search-enabled
 // products list, optionally bound to a URL search-param key.
 // tslint:disable-next-line:no-any
-const makeUidlNode = (searchUrlParamKey?: string): any => ({
+const makeUidlNode = (searchUrlParamKey?: string, pageUrlParamKey?: string): any => ({
   type: 'data-source-list',
   content: {
     renderPropIdentifier: 'items',
@@ -60,6 +60,7 @@ const makeUidlNode = (searchUrlParamKey?: string): any => ({
           searchEnabled: true,
           searchDebounce: 300,
           ...(searchUrlParamKey ? { searchUrlParamKey } : {}),
+          ...(pageUrlParamKey ? { pageUrlParamKey } : {}),
           nodes: { list: { type: 'element', content: { elementType: 'div' } } },
         },
       },
@@ -67,10 +68,17 @@ const makeUidlNode = (searchUrlParamKey?: string): any => ({
   },
 })
 
-const runPlugin = async (searchUrlParamKey?: string, paginated = true): Promise<string> => {
+interface RunOptions {
+  paginated?: boolean
+  pageUrlParamKey?: string
+  infiniteScroll?: boolean
+}
+
+const runPlugin = async (searchUrlParamKey?: string, options: RunOptions = {}): Promise<string> => {
   const chunk = makeComponentChunk()
-  const node = makeUidlNode(searchUrlParamKey)
-  node.content.nodes.success.content.paginated = paginated
+  const node = makeUidlNode(searchUrlParamKey, options.pageUrlParamKey)
+  node.content.nodes.success.content.paginated = options.paginated ?? true
+  node.content.nodes.success.content.infiniteScroll = !!options.infiniteScroll
   const structure: ComponentStructure = {
     uidl: { name: 'TestComponent', node },
     chunks: [chunk],
@@ -108,19 +116,37 @@ describe('pagination plugin — search input URL two-way sync (searchUrlParamKey
     )
     expect(code).toContain('}, [ds_0_state.debouncedQuery, router.isReady])')
 
-    // Read-back (URL → input AND applied query at once, keeping the page),
-    // functional setState bail-out (loop-free), then the handshake flag.
+    // Read-back (URL → input AND applied query at once, from page 1: the page
+    // is not in the address), functional setState bail-out (loop-free), then
+    // the handshake flag.
     expect(code).toContain('const __urlValue = router.query.searchKeyword')
     expect(code).toContain('ds_0_adoptUrlSearch(prev => prev === __nextValue ? prev : __nextValue)')
     expect(code).toContain('ds_0_searchUrlAdopted.current = true')
     expect(code).toContain('}, [router.query.searchKeyword, router.isReady])')
     expect(code.replace(/\s+/g, ' ')).toContain(
-      'const ds_0_adoptUrlSearch = update => { setDs_0_searchQuery(update); setDs_0_state(state => { const next = update(state.debouncedQuery); return next === state.debouncedQuery ? state : { ...state, debouncedQuery: next }; }); };'
+      'const ds_0_adoptUrlSearch = update => { setDs_0_searchQuery(update); setDs_0_state(state => { const next = update(state.debouncedQuery); return next === state.debouncedQuery ? state : { ...state, page: 1, debouncedQuery: next }; }); };'
+    )
+  })
+
+  it('starts an appending list on page 1 when the address brings a query', async () => {
+    // The scroll sentinel has usually fetched page 2 before the router is
+    // ready: kept, the query's first answer was its page 2 — empty when only a
+    // few rows match.
+    const code = await runPlugin('q', { infiniteScroll: true })
+    expect(code.replace(/\s+/g, ' ')).toContain(
+      'return next === state.debouncedQuery ? state : { ...state, page: 1, debouncedQuery: next };'
+    )
+  })
+
+  it('keeps the page of a list whose page is in the address too', async () => {
+    const code = await runPlugin('searchKeyword', { pageUrlParamKey: 'page' })
+    expect(code.replace(/\s+/g, ' ')).toContain(
+      'return next === state.debouncedQuery ? state : { ...state, debouncedQuery: next };'
     )
   })
 
   it('adopts the address into both queries of a list without pages too', async () => {
-    const code = await runPlugin('searchKeyword', false)
+    const code = await runPlugin('searchKeyword', { paginated: false })
     expect(code).not.toContain('window.location.search')
     expect(code.replace(/\s+/g, ' ')).toContain(
       'const ds_0_adoptUrlSearch = update => { setDs_0_searchQuery(update); setDs_0_debouncedQuery(update); };'