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

package/__tests__/_helpers/first-page-runtime.ts

@@ -0,0 +1,184 @@
+/* tslint:disable:function-constructor max-classes-per-file no-any */
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import { generateDataSourceFetcherWithCore } from '../../src/data-source-fetchers'
+
+/**
+ * Runs what a generated page asks its data module for: the arguments its
+ * `getStaticProps` hands `fetchData`, the params a provider computes in the
+ * browser, and the products route both reach — so a test can check that the
+ * build and the browser order one row set the same way.
+ *
+ * `__tests__/_helpers` is excluded from the jest test match, so this file is a
+ * fixture rather than a suite.
+ */
+
+const isFetchDataCall = (node: types.Node): node is types.CallExpression =>
+  node.type === 'CallExpression' &&
+  node.callee.type === 'MemberExpression' &&
+  node.callee.property.type === 'Identifier' &&
+  node.callee.property.name === 'fetchData' &&
+  node.arguments[0]?.type === 'ObjectExpression'
+
+// The `Promise.all` entry whose result lands in `propKey`.
+const prefetchOf = (content: types.Node, propKey: string): types.Node | undefined => {
+  let entry: types.Node | undefined
+  types.traverseFast(content, (node) => {
+    if (
+      !entry &&
+      node.type === 'VariableDeclarator' &&
+      node.id.type === 'ArrayPattern' &&
+      node.init?.type === 'AwaitExpression' &&
+      node.init.argument.type === 'CallExpression' &&
+      node.init.argument.arguments[0]?.type === 'ArrayExpression'
+    ) {
+      const index = node.id.elements.findIndex(
+        (element) => element?.type === 'Identifier' && element.name === propKey
+      )
+      if (index !== -1) {
+        entry = (node.init.argument.arguments[0] as types.ArrayExpression).elements[index] as
+          | types.Node
+          | undefined
+      }
+    }
+  })
+  return entry
+}
+
+/**
+ * What getStaticProps hands fetchData — `{ page: 1, perPage: 20, …, sorts }`,
+ * then who it reads for — for the prefetch filling `propKey`, or the first one.
+ */
+export const buildTimeArguments = (
+  staticPropsChunk: any,
+  propKey?: string
+): Array<Record<string, unknown>> => {
+  const scope = propKey ? prefetchOf(staticPropsChunk.content, propKey) : staticPropsChunk.content
+  let call: types.CallExpression | undefined
+  types.traverseFast(scope as types.Node, (node) => {
+    if (!call && isFetchDataCall(node)) {
+      call = node
+    }
+  })
+  const args = call!.arguments.map((arg) => generator(arg as types.Node).code)
+  return new Function(`return [${args.join(', ')}]`)()
+}
+
+// The `nth` memoized `params` a provider of the component sends.
+const browserParamsBody = (chunk: any, nth: number): types.Expression => {
+  const bodies: types.Expression[] = []
+  types.traverseFast(chunk.content, (node) => {
+    if (
+      node.type === 'JSXAttribute' &&
+      node.name.name === 'params' &&
+      node.value?.type === 'JSXExpressionContainer' &&
+      node.value.expression.type === 'CallExpression'
+    ) {
+      const arrow = node.value.expression.arguments[0]
+      if (arrow?.type === 'ArrowFunctionExpression') {
+        bodies.push(arrow.body as types.Expression)
+      }
+    }
+  })
+  return bodies[nth]
+}
+
+/** The provider's params as the browser computes them for the given state, as they go on the wire. */
+export const browserParams = (
+  chunk: any,
+  state: Record<string, unknown>,
+  nth: number = 0
+): Record<string, string> => {
+  const names = Object.keys(state)
+  const params = new Function(
+    ...names,
+    `return (${generator(browserParamsBody(chunk, nth)).code})`
+  )(...names.map((name) => state[name]))
+  // What `new URLSearchParams(params)` puts on the wire.
+  return Object.fromEntries(new URLSearchParams(params))
+}
+
+/**
+ * The products route as the project ships it, over a database that records
+ * the statements it is sent.
+ */
+export const bootProductsRoute = () => {
+  const dataSource = {
+    id: 'ds-1',
+    name: 'db',
+    type: 'teleport',
+    config: {
+      host: 'teleporthq.secrets.TELEPORT_DB_HOST',
+      port: 5432,
+      user: 'teleporthq.secrets.TELEPORT_DB_USER',
+      password: 'teleporthq.secrets.TELEPORT_DB_PASSWORD',
+      database: 'teleporthq.secrets.TELEPORT_DB_NAME',
+      selectedTables: { teleport_products: { columns: [{ name: 'id', type: 'uuid' }] } },
+    },
+  }
+  const code = generateDataSourceFetcherWithCore(dataSource as never, 'teleport_products')
+    .replace(
+      "import { Client, types as pgTypes } from 'pg'",
+      "const { Client, types: pgTypes } = require('pg')"
+    )
+    .replace(/^export \{[^}]*\}\s*$/m, '')
+    .replace(/^export default \{[^}]*\}\s*$/m, '')
+    .concat('\nmodule.exports = { handler: handler, fetchData: fetchData }')
+  expect(code).not.toMatch(/^(export|import) /m)
+
+  const statements: string[] = []
+  class FakeClient {
+    public async connect(): Promise<void> {
+      return
+    }
+    public async end(): Promise<void> {
+      return
+    }
+    public async query(sql: string): Promise<any> {
+      statements.push(sql)
+      return { rows: [], rowCount: 0 }
+    }
+  }
+  const fakeRequire = (name: string): any => {
+    if (name === 'pg') {
+      return { Client: FakeClient }
+    }
+    if (name === 'next-auth/jwt') {
+      return { getToken: async (): Promise<null> => null }
+    }
+    throw new Error('unexpected require: ' + name)
+  }
+  const moduleObj: { exports: any } = { exports: {} }
+  new Function('require', 'module', 'exports', 'process', 'console', code)(
+    fakeRequire,
+    moduleObj,
+    moduleObj.exports,
+    {
+      env: {
+        NEXTAUTH_SECRET: 'secret',
+        TELEPORT_DB_HOST: 'h',
+        TELEPORT_DB_USER: 'u',
+        TELEPORT_DB_PASSWORD: 'p',
+        TELEPORT_DB_NAME: 'd',
+      },
+    },
+    { error: (): void => undefined, warn: (): void => undefined, log: (): void => undefined }
+  )
+  const lastSelect = (): string =>
+    statements.filter((sql) => /^\s*SELECT \* FROM/i.test(sql)).pop() || ''
+  return {
+    atBuild: async (args: Array<Record<string, unknown>>) => {
+      await moduleObj.exports.fetchData(...args)
+      return lastSelect()
+    },
+    inBrowser: async (query: Record<string, string>) => {
+      const res = { status: () => res, json: () => res, setHeader: () => res }
+      await moduleObj.exports.handler({ method: 'GET', query, headers: {} }, res)
+      return lastSelect()
+    },
+  }
+}
+
+export const orderBy = (sql: string): string => (sql.match(/ ORDER BY .*? LIMIT/) || [''])[0]
+export const rowWindow = (sql: string): string =>
+  (sql.match(/ LIMIT \d+( OFFSET \d+)?$/) || [''])[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
   )
@@ -189,6 +269,16 @@ export interface RepeaterOptions {
   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
+  /** The repeater's sort and direction as the UIDL carries them: a static column, or an expression. */
+  sort?: unknown
+  sortDirection?: unknown
+  /** The repeater's cache config. */
+  cache?: unknown
+  /** The repeater's `source`, for a list bound inside the payload (with `dataSourceType`). */
+  source?: string
+  dataSourceType?: string
 }
 
 export const makeUidlNode = (options: RepeaterOptions, identifier: string = 'items'): any => ({
@@ -198,7 +288,7 @@ export const makeUidlNode = (options: RepeaterOptions, identifier: string = 'ite
     resourceDefinition: {
       dataSourceId: 'ds1',
       tableName: 'products',
-      dataSourceType: 'postgresql',
+      dataSourceType: options.dataSourceType ?? 'postgresql',
     },
     resource: {
       params: {
@@ -218,6 +308,11 @@ 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 } : {}),
+          ...(options.sort ? { sort: options.sort } : {}),
+          ...(options.sortDirection ? { sortDirection: options.sortDirection } : {}),
+          ...(options.cache ? { cache: options.cache } : {}),
+          ...(options.source ? { source: options.source } : {}),
           nodes: { list: { type: 'element', content: { elementType: 'div' } } },
         },
       },
@@ -235,3 +330,57 @@ export const makeMultiMapperUidl = (repeaters: RepeaterOptions[]): any => ({
     ),
   },
 })
+
+/**
+ * The page's `getStaticProps` as the main data-source plugin leaves it: a
+ * `Promise.all` of prefetches and a `props` object, which the pagination plugin
+ * extends with each paginated list's first page and its count. Its presence is
+ * what makes the component a page.
+ */
+export const makeGetStaticPropsChunk = (): ChunkDefinition => ({
+  name: 'getStaticProps',
+  type: ChunkType.AST,
+  fileType: FileType.JS,
+  linkAfter: ['jsx-component'],
+  meta: {},
+  content: types.exportNamedDeclaration(
+    types.functionDeclaration(
+      types.identifier('getStaticProps'),
+      [types.identifier('context')],
+      types.blockStatement([
+        types.tryStatement(
+          types.blockStatement([
+            types.variableDeclaration('const', [
+              types.variableDeclarator(
+                types.arrayPattern([]),
+                types.awaitExpression(
+                  types.callExpression(
+                    types.memberExpression(types.identifier('Promise'), types.identifier('all')),
+                    [types.arrayExpression([])]
+                  )
+                )
+              ),
+            ]),
+            types.returnStatement(
+              types.objectExpression([
+                types.objectProperty(types.identifier('props'), types.objectExpression([])),
+              ])
+            ),
+          ]),
+          types.catchClause(
+            types.identifier('error'),
+            types.blockStatement([
+              types.returnStatement(
+                types.objectExpression([
+                  types.objectProperty(types.identifier('props'), types.objectExpression([])),
+                ])
+              ),
+            ])
+          )
+        ),
+      ]),
+      false,
+      true
+    )
+  ),
+})

package/__tests__/booking-item-transform.test.ts

@@ -0,0 +1,120 @@
+import { generateBookingItemTransformationCode } from '../src/transformations/booking-item'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+import {
+  detectTransformationType,
+  getTransformExpression,
+  getTransformWrapperCode,
+} from '../src/transformations'
+
+// A booking page binds an item's columns as stored; the transform only puts
+// its texts in the page's language. These evaluate the EMITTED code, the way
+// the runtime does.
+
+type Build = (record: unknown, options?: Record<string, unknown>) => Record<string, unknown>
+
+const builderFor = (code: string): Build =>
+  new Function(
+    generateSharedTransformationCode() + '\n' + code + '\nreturn buildBookingItem;'
+  )() as Build
+
+const buildBookingItem = builderFor(generateBookingItemTransformationCode())
+
+const buildWithCategories = builderFor(
+  generateBookingItemTransformationCode({
+    categories: [
+      {
+        id: 'rooms',
+        name: 'Rooms',
+        slug: 'rooms',
+        parentId: null,
+        order: 0,
+        translations: { es: { name: 'Habitaciones' } },
+        children: [
+          {
+            id: 'suites',
+            name: 'Suites',
+            slug: 'suites',
+            parentId: 'rooms',
+            order: 0,
+            children: [],
+          },
+        ],
+      },
+    ],
+  })
+)
+
+const item = {
+  id: 'i1',
+  slug: 'double-room',
+  name: 'Double room',
+  es_name: 'Habitación doble',
+  description: '<p>Sea view.</p>',
+  es_description: '<p>Vista al mar.</p>',
+  location: 'Main street',
+  es_location: '',
+  price: '120.00',
+  booking_unit: 'night',
+}
+
+describe('the booking item transform', () => {
+  it('is applied to the booking items table only', () => {
+    expect(detectTransformationType('teleport_booking_items')).toBe('booking-item')
+    expect(detectTransformationType('public.TELEPORT_BOOKING_ITEMS')).toBe('booking-item')
+    expect(detectTransformationType('booking_items')).toBeNull()
+    expect(getTransformExpression('teleport_booking_items')).toContain('transformRecords')
+    expect(getTransformWrapperCode('teleport_booking_items')).toContain('transformBookingItems')
+  })
+
+  it('shows the texts in the page’s language, every column kept as stored', () => {
+    const row = buildBookingItem(item, { currentLanguage: 'es', mainLanguage: 'en' })
+    expect(row).toMatchObject({
+      name: 'Habitación doble',
+      description: '<p>Vista al mar.</p>',
+      // Not translated yet: the main language's.
+      location: 'Main street',
+      slug: 'double-room',
+      price: '120.00',
+      booking_unit: 'night',
+      es_name: 'Habitación doble',
+    })
+  })
+
+  it('names its category the way the taxonomy names its first one in the page’s language', () => {
+    const filed = { ...item, category: 'Rooms', category_ids: '["rooms","suites"]' }
+    expect(buildWithCategories(filed, { currentLanguage: 'es', mainLanguage: 'en' }).category).toBe(
+      'Habitaciones'
+    )
+    expect(buildWithCategories(filed, { currentLanguage: 'en', mainLanguage: 'en' }).category).toBe(
+      'Rooms'
+    )
+    // No translation: the main name; a nested category resolves too.
+    expect(
+      buildWithCategories(
+        { ...filed, category: 'Suites', category_ids: '["suites"]' },
+        { currentLanguage: 'es', mainLanguage: 'en' }
+      ).category
+    ).toBe('Suites')
+  })
+
+  it('keeps the stored category while none of its ids is a category', () => {
+    const legacy = { ...item, category: 'Rooms', category_ids: '["gone"]' }
+    expect(
+      buildWithCategories(legacy, { currentLanguage: 'es', mainLanguage: 'en' }).category
+    ).toBe('Rooms')
+    expect(buildBookingItem(legacy, { currentLanguage: 'es', mainLanguage: 'en' }).category).toBe(
+      'Rooms'
+    )
+    // A row without category columns gains none.
+    expect(
+      'category' in buildWithCategories(item, { currentLanguage: 'es', mainLanguage: 'en' })
+    ).toBe(false)
+  })
+
+  it('keeps the main language on its own pages and without a localization', () => {
+    expect(buildBookingItem(item, { currentLanguage: 'en', mainLanguage: 'en' }).name).toBe(
+      'Double room'
+    )
+    expect(buildBookingItem(item, {}).name).toBe('Double room')
+  })
+})