@teleporthq/teleport-plugin-next-data-source 0.43.66 → 0.43.68

package/__tests__/data-source-request-locale.test.ts

@@ -0,0 +1,313 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import {
+  ChunkType,
+  FileType,
+  ComponentStructure,
+  ChunkDefinition,
+  GeneratorOptions,
+  UIDLDataSource,
+  UIDLDependency,
+} from '@teleporthq/teleport-types'
+import { createNextPagesDataSourcePlugin, createNextComponentDataSourcePlugin } from '../src/index'
+
+/**
+ * A page in a multi-language project renders rows in ITS language: every
+ * data-source fetch — the build-time prefetch in getStaticProps and the
+ * client-side refetch behind pagination, search and filters — says which
+ * locale it is for, and a locale switch (a client-side transition on the same
+ * page instance) refetches. A single-language project generates exactly what
+ * it generated before: no locale, no router.
+ */
+
+const DS_ID = 'ds1'
+const TABLE = 'teleport_products'
+/** A page writes the fetcher to `utils/`, a component straight into `api/`. */
+const FETCHER_KEYS = ['utils/teleport-teleport_products-ds1', 'api/teleport-teleport_products-ds1']
+
+const I18N: GeneratorOptions['internationalization'] = {
+  main: { name: 'English', locale: 'en' },
+  languages: { en: 'English', es: 'Spanish' },
+}
+
+const dataSource: UIDLDataSource = {
+  id: DS_ID,
+  name: 'TeleportHQ database',
+  type: 'teleport',
+  config: {
+    selectedTables: {
+      [TABLE]: {
+        columns: [{ name: 'id' }, { name: 'name' }, { name: 'slug' }, { name: 'es_name' }],
+      },
+    },
+  },
+}
+
+const jsx = (name: string, attrs: types.JSXAttribute[], children: types.JSXElement[] = []) =>
+  types.jsxElement(
+    types.jsxOpeningElement(types.jsxIdentifier(name), attrs, children.length === 0),
+    children.length === 0 ? null : types.jsxClosingElement(types.jsxIdentifier(name)),
+    children,
+    children.length === 0
+  )
+
+const resourceDefinitionAttr = () =>
+  types.jsxAttribute(
+    types.jsxIdentifier('resourceDefinition'),
+    types.jsxExpressionContainer(
+      types.objectExpression([
+        types.objectProperty(types.stringLiteral('dataSourceId'), types.stringLiteral(DS_ID)),
+        types.objectProperty(types.stringLiteral('tableName'), types.stringLiteral(TABLE)),
+        types.objectProperty(
+          types.stringLiteral('dataSourceType'),
+          types.stringLiteral('teleport')
+        ),
+      ])
+    )
+  )
+
+/** `<DataProvider name={'items'} resourceDefinition={…} renderSuccess={(items) => <Repeater …/>} />` */
+const makeListProvider = (): types.JSXElement => {
+  const repeater = jsx('Repeater', [
+    types.jsxAttribute(
+      types.jsxIdentifier('items'),
+      types.jsxExpressionContainer(types.identifier('items'))
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderItem'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('product')], jsx('div', []))
+      )
+    ),
+  ])
+  return jsx('DataProvider', [
+    types.jsxAttribute(
+      types.jsxIdentifier('name'),
+      types.jsxExpressionContainer(types.stringLiteral('items'))
+    ),
+    resourceDefinitionAttr(),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderSuccess'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('items')], repeater)
+      )
+    ),
+  ])
+}
+
+/** `<DataProvider name={'item'} resourceDefinition={…} renderSuccess={(item) => <div/>} />` */
+const makeItemProvider = (): types.JSXElement =>
+  jsx('DataProvider', [
+    types.jsxAttribute(
+      types.jsxIdentifier('name'),
+      types.jsxExpressionContainer(types.stringLiteral('item'))
+    ),
+    resourceDefinitionAttr(),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderSuccess'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('item')], jsx('div', []))
+      )
+    ),
+  ])
+
+const makeComponentChunk = (provider: types.JSXElement): ChunkDefinition => ({
+  name: 'jsx-component',
+  type: ChunkType.AST,
+  fileType: FileType.JS,
+  linkAfter: [],
+  content: types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('ProductsList'),
+      types.arrowFunctionExpression(
+        [types.identifier('props')],
+        types.blockStatement([types.returnStatement(jsx('div', [], [provider]))])
+      )
+    ),
+  ]),
+  meta: { nodesLookup: { provider } },
+})
+
+// tslint:disable-next-line:no-any
+const makeListNode = (paginated: boolean): any => ({
+  type: 'data-source-list',
+  content: {
+    renderPropIdentifier: 'items',
+    resourceDefinition: { dataSourceId: DS_ID, tableName: TABLE, dataSourceType: 'teleport' },
+    resource: {
+      id: 'TQ_products',
+      params: { queryColumns: { type: 'static', content: ['name', 'es_name'] } },
+    },
+    nodes: {
+      success: {
+        type: 'cms-list-repeater',
+        content: {
+          renderPropIdentifier: 'product',
+          paginated,
+          perPage: 20,
+          searchEnabled: false,
+          nodes: { list: { type: 'element', content: { elementType: 'div' } } },
+        },
+      },
+    },
+  },
+})
+
+/** An item whose params cannot be resolved at build time, so it fetches client-side. */
+// tslint:disable-next-line:no-any
+const makeDynamicItemNode = (withParams: boolean): any => ({
+  type: 'data-source-item',
+  content: {
+    renderPropIdentifier: 'item',
+    resourceDefinition: { dataSourceId: DS_ID, tableName: TABLE, dataSourceType: 'teleport' },
+    resource: {
+      params: withParams
+        ? { limit: { type: 'dynamic', content: { referenceType: 'prop', id: 'limit' } } }
+        : {},
+    },
+    children: [{ type: 'element', content: { elementType: 'div' } }],
+  },
+})
+
+const run = async (
+  plugin: ReturnType<typeof createNextPagesDataSourcePlugin>,
+  // tslint:disable-next-line:no-any
+  node: any,
+  provider: types.JSXElement,
+  localized: boolean
+) => {
+  const chunk = makeComponentChunk(provider)
+  const dependencies: Record<string, UIDLDependency> = {}
+  // tslint:disable-next-line:no-any
+  const extractedResources: Record<string, any> = {}
+  const structure: ComponentStructure = {
+    uidl: { name: 'ProductsList', node, outputOptions: { folderPath: [] } },
+    chunks: [chunk],
+    dependencies,
+    options: {
+      dataSources: { [DS_ID]: dataSource },
+      extractedResources,
+      ...(localized ? { internationalization: I18N } : {}),
+    },
+  } as never
+  await plugin(structure)
+  const getStaticProps = structure.chunks.find((c) => c.name === 'getStaticProps')
+  return {
+    code: generator(chunk.content as types.Node).code,
+    staticProps: getStaticProps ? generator(getStaticProps.content as types.Node).code : '',
+    dependencies,
+    fetcher: FETCHER_KEYS.map((key) => extractedResources[key]?.content).find(Boolean) as string,
+  }
+}
+
+const collapse = (code: string): string => code.replace(/\s+/g, ' ')
+
+describe('data-source fetches in a multi-language project', () => {
+  const pagesPlugin = createNextPagesDataSourcePlugin()
+  const componentPlugin = createNextComponentDataSourcePlugin()
+
+  describe('a paginated list page', () => {
+    it('fetches the first page for the language getStaticProps runs for', async () => {
+      const { staticProps } = await run(pagesPlugin, makeListNode(true), makeListProvider(), true)
+      expect(collapse(staticProps)).toContain(
+        'fetchData({ page: 1, perPage: 20, queryColumns: JSON.stringify(["name", "es_name"]), locale: context.locale })'
+      )
+      // The count is the same in every language.
+      expect(collapse(staticProps)).toContain('fetchCount().catch')
+    })
+
+    it('sends the client locale with every refetch and refetches when it changes', async () => {
+      const { code, dependencies } = await run(
+        pagesPlugin,
+        makeListNode(true),
+        makeListProvider(),
+        true
+      )
+      const flat = collapse(code)
+      expect(flat).toContain(
+        'params={useMemo(() => ({ page: ds_0_page, perPage: 20, locale: router?.locale }), [ds_0_page, router?.locale])}'
+      )
+      expect(code).toContain('const router = useRouter()')
+      expect(dependencies.useRouter).toMatchObject({ type: 'library', path: 'next/router' })
+    })
+
+    it('bakes the per-language columns into the fetcher it emits', async () => {
+      const { fetcher } = await run(pagesPlugin, makeListNode(true), makeListProvider(), true)
+      expect(fetcher).toContain('var LOCALIZED_COLUMNS = {"name":{"es":"es_name"}}')
+      expect(fetcher).toContain('mainLanguage: "en"')
+    })
+  })
+
+  describe('a plain list page', () => {
+    it('prefetches and refetches in the page language', async () => {
+      const { code, staticProps } = await run(
+        pagesPlugin,
+        makeListNode(false),
+        makeListProvider(),
+        true
+      )
+      expect(collapse(staticProps)).toContain(
+        'fetchData({ "queryColumns": JSON.stringify(["name", "es_name"]), locale: context.locale })'
+      )
+      expect(collapse(code)).toContain(
+        'params={useMemo(() => ({ locale: router?.locale }), [router?.locale])}'
+      )
+      expect(code).toContain('const router = useRouter()')
+    })
+  })
+
+  describe('a component item that fetches client-side', () => {
+    it('adds the locale to the params it already sends', async () => {
+      const { code, dependencies } = await run(
+        componentPlugin,
+        makeDynamicItemNode(true),
+        makeItemProvider(),
+        true
+      )
+      const flat = collapse(code)
+      expect(flat).toContain('locale: router?.locale')
+      // The route is a template literal that interpolates the params.
+      expect(flat).toContain(
+        'fetch(`/api/teleport-teleport_products-ds1?$' + '{new URLSearchParams(params)}`'
+      )
+      expect(code).toContain('const router = useRouter()')
+      expect(dependencies.useRouter).toBeDefined()
+    })
+
+    it('creates the params when the node declared none', async () => {
+      const { code } = await run(
+        componentPlugin,
+        makeDynamicItemNode(false),
+        makeItemProvider(),
+        true
+      )
+      const flat = collapse(code)
+      expect(flat).toContain('params={{ locale: router?.locale }}')
+      expect(flat).toContain('new URLSearchParams(params)')
+    })
+  })
+
+  describe('a single-language project', () => {
+    it.each([
+      ['a paginated list page', pagesPlugin, makeListNode(true), makeListProvider],
+      ['a plain list page', pagesPlugin, makeListNode(false), makeListProvider],
+      ['a component item', componentPlugin, makeDynamicItemNode(true), makeItemProvider],
+    ])(
+      'generates %s exactly as before — no locale, no router',
+      async (_, plugin, node, provider) => {
+        const { code, staticProps, dependencies, fetcher } = await run(
+          plugin,
+          node,
+          provider(),
+          false
+        )
+        expect(code).not.toContain('locale')
+        expect(code).not.toContain('useRouter')
+        expect(staticProps).not.toContain('locale')
+        expect(dependencies.useRouter).toBeUndefined()
+        expect(fetcher).toContain('var LOCALIZED_COLUMNS = {}')
+        expect(fetcher).toContain('mainLanguage: null')
+      }
+    )
+  })
+})

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

@@ -0,0 +1,206 @@
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { ProductDiscounts, ProductOptions } from '@teleporthq/teleport-shared'
+import { getTransformWrapperCode } from '../src/transformations'
+import { generateEcommerceProductTransformationCode } from '../src/transformations/ecommerce-product'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+
+/**
+ * Product options in the GENERATED storefront transform. The fixture is a
+ * byte-for-byte copy of the GUI's
+ * `features/e-commerce/utils/product-options/__tests__/fixtures/product-options-storefront.fixture.json`,
+ * which the canvas transform (`packages/renderer/src/utils/ecommerce-products.ts`)
+ * runs in `ecommerce-products-options.test.ts`: both transforms must emit
+ * exactly these fields, or the configurator, the configured price and the
+ * card's quick-add gate differ between the editor and the published store.
+ */
+
+type Build = (record: unknown, options?: Record<string, unknown>) => Record<string, unknown>
+
+interface FixtureCase {
+  name: string
+  includeDetail: boolean
+  taxRate: number
+  currentLanguage: string | null
+  mainLanguage: string | null
+  variants: Array<Record<string, unknown>> | null
+  record: Record<string, unknown>
+  expected: Record<string, unknown>
+}
+
+const readJson = <T>(file: string): T => JSON.parse(readFileSync(join(__dirname, file), 'utf8'))
+
+const FIXTURE = readJson<{ cases: FixtureCase[] }>('product-options-storefront.fixture.json')
+const PRE_OPTIONS_GOLDEN = readJson<{
+  records: Array<Record<string, unknown>>
+  variantsByProductId: Record<string, unknown>
+  assetMap: Record<string, unknown>
+  storefrontTaxRate: number
+  expected: Array<Record<string, unknown>>
+}>('ecommerce-product-pre-options.golden.json')
+
+const transformCode = (storefrontTaxRate: number): string =>
+  generateSharedTransformationCode() +
+  '\n' +
+  generateEcommerceProductTransformationCode({ storefrontTaxRate })
+
+const buildProduct = (storefrontTaxRate: number): Build =>
+  new Function(transformCode(storefrontTaxRate) + '\nreturn buildEcommerceProduct;')() as Build
+
+const OPTION_FIELDS = Object.keys(FIXTURE.cases[0].expected)
+
+const pickOptionFields = (product: Record<string, unknown>) =>
+  OPTION_FIELDS.reduce<Record<string, unknown>>((picked, field) => {
+    picked[field] = product[field]
+    return picked
+  }, {})
+
+const withoutOptionFields = (product: Record<string, unknown>) =>
+  Object.keys(product)
+    .filter((field) => OPTION_FIELDS.indexOf(field) === -1)
+    .reduce<Record<string, unknown>>((kept, field) => {
+      kept[field] = product[field]
+      return kept
+    }, {})
+
+const EMPTY_OPTION_FIELDS = FIXTURE.cases.find(
+  (entry) => entry.name === 'a product without options'
+)?.expected as Record<string, unknown>
+
+const PRINT_GROUPS = [
+  {
+    key: 'paper',
+    label: 'Paper',
+    type: 'choice',
+    display: 'cards',
+    required: true,
+    values: [
+      {
+        key: 'matte',
+        label: 'Matte',
+        price: { mode: 'none' },
+        default: true,
+        imageUrl: 'TQ_matte',
+      },
+    ],
+  },
+]
+
+describe('product transform — product options fixture (shared with the canvas)', () => {
+  it.each(FIXTURE.cases.map((entry) => [entry.name, entry] as [string, FixtureCase]))(
+    '%s',
+    (_name, entry) => {
+      const product = buildProduct(entry.taxRate)(entry.record, {
+        assetMap: {},
+        currentLanguage: entry.currentLanguage,
+        mainLanguage: entry.mainLanguage,
+        variantsByProductId: entry.variants ? { [String(entry.record.id)]: entry.variants } : null,
+        includeOptionDetail: entry.includeDetail,
+      })
+      expect(pickOptionFields(product)).toEqual(entry.expected)
+    }
+  )
+})
+
+describe('product transform — products without options are unchanged', () => {
+  it.each([false, true])(
+    'equals the pre-options output plus empty fields (detail: %s)',
+    (detail) => {
+      const build = buildProduct(PRE_OPTIONS_GOLDEN.storefrontTaxRate)
+      PRE_OPTIONS_GOLDEN.records.forEach((record, index) => {
+        const product = build(record, {
+          assetMap: PRE_OPTIONS_GOLDEN.assetMap,
+          currentLanguage: null,
+          mainLanguage: null,
+          variantsByProductId: PRE_OPTIONS_GOLDEN.variantsByProductId,
+          ratingsByProductId: {},
+          reviewsByProductId: {},
+          includeOptionDetail: detail,
+        })
+        expect(JSON.parse(JSON.stringify(withoutOptionFields(product)))).toEqual(
+          PRE_OPTIONS_GOLDEN.expected[index]
+        )
+        expect(pickOptionFields(product)).toEqual(EMPTY_OPTION_FIELDS)
+      })
+    }
+  )
+})
+
+describe('product transform — option detail wiring', () => {
+  const record = { id: 'p1', name: 'Print', price: 10, option_groups: JSON.stringify(PRINT_GROUPS) }
+
+  it('resolves a value image stored as an asset id through the asset map', () => {
+    const product = buildProduct(0)(record, {
+      assetMap: { TQ_matte: { remoteSrc: 'https://cdn.example.com/matte.jpg' } },
+      includeOptionDetail: true,
+    })
+    const groups = product.optionGroups as Array<{ values: Array<Record<string, unknown>> }>
+    expect(groups[0].values[0]).toMatchObject({
+      imageUrl: 'https://cdn.example.com/matte.jpg',
+      showImage: 'true',
+    })
+  })
+
+  it('never hands a related product the option detail', () => {
+    const parent = buildProduct(0)(
+      { id: 'p0', name: 'Frame', price: 5, related_product_ids: '["p1"]' },
+      { includeOptionDetail: true, relatedProductsById: { p1: record } }
+    )
+    const [related] = parent.relatedProducts as Array<Record<string, unknown>>
+    expect(related.hasProductOptions).toBe('true')
+    expect(related.optionGroups).toEqual([])
+    expect(related.optionsPricingJson).toBe('{}')
+  })
+
+  it('splices the options helpers right after the discount helpers', () => {
+    const code = generateEcommerceProductTransformationCode({})
+    const discounts = code.indexOf(ProductDiscounts.generateProductDiscountHelperCode())
+    const options = code.indexOf(ProductOptions.generateProductOptionsHelperCode())
+    expect(discounts).toBeGreaterThan(-1)
+    expect(options).toBe(
+      discounts + ProductDiscounts.generateProductDiscountHelperCode().length + 1
+    )
+  })
+})
+
+describe('transform wrapper — option detail on the single-record fetch only', () => {
+  // Every lookup fails (no database): the maps fall back to their "unknown" or
+  // empty answers, which is all the transform needs here.
+  const offline = () => ({
+    connect: () => Promise.reject(new Error('offline')),
+    query: () => Promise.reject(new Error('offline')),
+    end: () => Promise.resolve(),
+  })
+  const transformRecords = new Function(
+    transformCode(0) +
+      '\n' +
+      getTransformWrapperCode('teleport_products') +
+      '\nreturn transformRecords;'
+  )() as (
+    records: unknown[],
+    getClient: () => unknown,
+    query: Record<string, unknown>
+  ) => Promise<Array<Record<string, unknown>>>
+
+  const product = (id: string) => ({
+    id,
+    name: id,
+    price: 10,
+    option_groups: JSON.stringify(PRINT_GROUPS),
+  })
+
+  it('emits the detail for the details page', async () => {
+    const [details] = await transformRecords([product('p1')], offline, {})
+    expect((details.optionGroups as unknown[]).length).toBe(1)
+    expect(details.optionsFreshKey).toBe('fresh:p1')
+  })
+
+  it('keeps a listing to the flags', async () => {
+    const listing = await transformRecords([product('p1'), product('p2')], offline, {})
+    for (const card of listing) {
+      expect(card.hasProductOptions).toBe('true')
+      expect(card.optionGroups).toEqual([])
+      expect(card.optionGroupsJson).toBe('[]')
+    }
+  })
+})

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

@@ -0,0 +1,82 @@
+import { generateEcommerceProductTransformationCode } from '../src/transformations/ecommerce-product'
+import { generateSharedTransformationCode } from '../src/transformations/shared-utils'
+import { buildProductTransformOptions } from '../src/transformations'
+import type { UIDLEcommerceProductPages } from '@teleporthq/teleport-types'
+import fixtures from './product-page-url-fixtures.json'
+
+/**
+ * Custom product pages: with `ecommerceSettings.productPages` baked in, every
+ * product carries `productPageKey` (the page it opens on, '' = the standard
+ * one) and `productPageUrl` (its canonical address) — the product pages'
+ * guarded redirect and every product link read them. Without it the transform
+ * is exactly what it was. The addresses are pinned against the GUI's own
+ * builder by the SAME fixture file (`product-page-url-fixtures.json`, a copy of
+ * the GUI's `utils/product-pages/__tests__/fixtures/` one).
+ */
+
+type BuildProduct = (record: unknown, options?: unknown) => Record<string, unknown>
+
+const evalBuildProduct = (productPages?: UIDLEcommerceProductPages): BuildProduct => {
+  const code =
+    generateSharedTransformationCode() +
+    '\n' +
+    generateEcommerceProductTransformationCode({ productPages })
+  return new Function(code + '\nreturn buildEcommerceProduct;')() as BuildProduct
+}
+
+const PRODUCT = { id: '7', name: 'Mug', slug: 'mug', price: 12, currency: 'USD' }
+
+describe('ecommerce product transform — product pages', () => {
+  it('adds nothing to a store without custom product pages', () => {
+    const code = generateEcommerceProductTransformationCode({})
+    expect(code).not.toContain('PRODUCT_PAGES')
+    expect(code).not.toContain('productPageUrl')
+    const product = evalBuildProduct()({ ...PRODUCT, product_page: 'personalise' })
+    expect(product).not.toHaveProperty('productPageKey')
+    expect(product).not.toHaveProperty('productPageUrl')
+  })
+
+  it("builds every product's page and address exactly as the GUI does", () => {
+    const build = evalBuildProduct(fixtures.config as UIDLEcommerceProductPages)
+    for (const fixture of fixtures.cases) {
+      const product = build({
+        ...PRODUCT,
+        ...fixture.values,
+        product_page: fixture.raw,
+      })
+      expect({
+        name: fixture.name,
+        key: product.productPageKey,
+        url: product.productPageUrl,
+      }).toEqual({
+        name: fixture.name,
+        key: fixture.key,
+        url: fixture.url,
+      })
+    }
+  })
+
+  it('reads the camel-cased column a non-SQL source hands back', () => {
+    const build = evalBuildProduct(fixtures.config as UIDLEcommerceProductPages)
+    const product = build({ ...PRODUCT, slug: 'postcard', productPage: 'personalise' })
+    expect(product.productPageUrl).toBe('/personalise/postcard')
+  })
+
+  it('bakes routes only — a page name never reaches the site', () => {
+    const code = generateEcommerceProductTransformationCode({
+      productPages: fixtures.config as UIDLEcommerceProductPages,
+    })
+    expect(code).not.toContain('Personalise')
+    // The helpers add no backtick: the transform is spliced into template literals.
+    const backticks = (text: string) => text.split('`').length
+    expect(backticks(code)).toBe(backticks(generateEcommerceProductTransformationCode({})))
+  })
+
+  it('takes the config from the exported e-commerce settings', () => {
+    const options = buildProductTransformOptions({
+      ecommerceSettings: { productPages: fixtures.config },
+    } as never)
+    expect(options.productPages).toEqual(fixtures.config)
+    expect(buildProductTransformOptions({} as never).productPages).toBeUndefined()
+  })
+})