@teleporthq/teleport-project-generator-next 0.43.74 → 0.43.75

package/__tests__/analytics-project-plugin.test.ts

@@ -29,7 +29,11 @@ const GTM_ASSET = {
   options: { target: 'body' },
 }
 
-function makeStructure(analyticsEnabled: boolean, assets: unknown[] = []): ProjectPluginStructure {
+function makeStructure(
+  analyticsEnabled: boolean,
+  assets: unknown[] = [],
+  disabledPaths?: string[]
+): ProjectPluginStructure {
   const files = new Map()
   files.set('_app', {
     path: ['pages'],
@@ -41,7 +45,9 @@ function makeStructure(analyticsEnabled: boolean, assets: unknown[] = []): Proje
       name: 'test-project',
       globals: { settings: { title: 'Test', language: 'en' }, assets },
       root: {} as never,
-      ...(analyticsEnabled ? { analytics: { enabled: true } } : {}),
+      ...(analyticsEnabled
+        ? { analytics: { enabled: true, ...(disabledPaths ? { disabledPaths } : {}) } }
+        : {}),
     },
     files,
     dependencies: {},
@@ -186,6 +192,33 @@ describe('NextAnalyticsProjectPlugin', () => {
     ).not.toThrow()
   })
 
+  it('bakes the pages kept out of analytics into the tracker component', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(true, [], ['/admin-panel/*', '/admin-panel', '/secret'])
+
+    await plugin.runAfter(structure)
+
+    const tracker = structure.files.get('teleport-analytics-tracker').files[0].content
+    expect(tracker).toContain('const EXCLUDED_PATHS = ["/admin-panel/*","/admin-panel","/secret"]')
+    expect(tracker).toContain(
+      'initTeleportAnalytics({ excludedPaths: EXCLUDED_PATHS, locales: router.locales || [] })'
+    )
+    expect(structure.files.get('teleport-analytics-lib').files[0].content).toContain(
+      'function isPathExcluded'
+    )
+  })
+
+  it('tracks every page when the editor sent no list', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(true)
+
+    await plugin.runAfter(structure)
+
+    expect(structure.files.get('teleport-analytics-tracker').files[0].content).toContain(
+      'const EXCLUDED_PATHS = []'
+    )
+  })
+
   it('preserves env values already set by the GUI mapper', async () => {
     const plugin = new NextAnalyticsProjectPlugin()
     const structure = makeStructure(true)

package/__tests__/analytics-tracked-pages.test.ts

@@ -0,0 +1,90 @@
+import { TRACKER_SOURCE } from '../src/analytics/tracker-source'
+
+/**
+ * The emitted tracker, executed: the module syntax is stripped the way a
+ * bundler resolves it, and the matching functions plus the two module-level
+ * lists are handed back so the tests drive the real code, not a copy of it.
+ */
+interface TrackerMatching {
+  setExcludedPaths: (paths: string[]) => void
+  setLocales: (locales: string[]) => void
+  isPathExcluded: (path: string) => boolean
+  normalizeTrackedPath: (path: string) => string
+}
+
+function loadMatching(): TrackerMatching {
+  const body = TRACKER_SOURCE.replace(/^export\s+/gm, '')
+  const factory = new Function(
+    `${body}
+    return {
+      setExcludedPaths: function (paths) { excludedPaths = paths },
+      setLocales: function (locales) { siteLocales = locales },
+      isPathExcluded: isPathExcluded,
+      normalizeTrackedPath: normalizeTrackedPath,
+    }`
+  )
+  return factory() as TrackerMatching
+}
+
+describe('tracked pages — the emitted tracker', () => {
+  it('tracks every page when no list was baked in', () => {
+    const tracker = loadMatching()
+    expect(tracker.isPathExcluded('/admin-panel/orders')).toBe(false)
+    expect(tracker.isPathExcluded('/')).toBe(false)
+  })
+
+  it('keeps a listed page out, exactly or by prefix, however the address is written', () => {
+    const tracker = loadMatching()
+    tracker.setExcludedPaths(['/admin-panel', '/admin-panel/*', '/secret'])
+
+    expect(tracker.isPathExcluded('/admin-panel')).toBe(true)
+    expect(tracker.isPathExcluded('/admin-panel/')).toBe(true)
+    expect(tracker.isPathExcluded('/admin-panel/orders/42')).toBe(true)
+    expect(tracker.isPathExcluded('/secret?tab=1#top')).toBe(true)
+
+    expect(tracker.isPathExcluded('/')).toBe(false)
+    expect(tracker.isPathExcluded('/secrets')).toBe(false)
+    expect(tracker.isPathExcluded('/admin-panels')).toBe(false)
+  })
+
+  it('matches a dynamic page by its published prefix without touching its listing page', () => {
+    const tracker = loadMatching()
+    tracker.setExcludedPaths(['/products/*'])
+
+    expect(tracker.isPathExcluded('/products/42')).toBe(true)
+    expect(tracker.isPathExcluded('/products')).toBe(false)
+  })
+
+  it('judges a locale-prefixed address against the same list', () => {
+    const tracker = loadMatching()
+    tracker.setExcludedPaths(['/admin-panel/*', '/'])
+    tracker.setLocales(['en', 'fr'])
+
+    expect(tracker.normalizeTrackedPath('/fr/admin-panel/orders/')).toBe('/admin-panel/orders')
+    expect(tracker.isPathExcluded('/fr/admin-panel/orders')).toBe(true)
+    expect(tracker.isPathExcluded('/fr')).toBe(true)
+    expect(tracker.isPathExcluded('/fr/about')).toBe(false)
+  })
+
+  it('silences a page kept out of analytics instead of giving it a page identity', () => {
+    expect(TRACKER_SOURCE).toMatch(
+      /if \(isPathExcluded\(newPath\)\) \{[\s\S]*?currentPath = newPath\s*pageLoadId = null\s*return/
+    )
+    // Commerce steps guard on the page identity like clicks and heartbeats do.
+    expect(TRACKER_SOURCE).toContain('if (!initialized || !isTrackingPossible() || !pageLoadId) {')
+  })
+})
+
+describe('click matching — what a funnel step can see', () => {
+  it('reports the clicked element’s classes, capped, so ".class" steps match', () => {
+    expect(TRACKER_SOURCE).toContain(
+      "Array.prototype.slice.call(target.classList).join(' ').slice(0, 255)"
+    )
+  })
+
+  it('counts a click on any element marked data-tp-track', () => {
+    expect(TRACKER_SOURCE).toContain(
+      `'a, button, [role="button"], input[type="submit"], [data-tp-event], [data-tp-track]'`
+    )
+  })
+})

package/__tests__/content-category-page-end2end.test.ts

@@ -0,0 +1,205 @@
+import { parse } from '@babel/parser'
+import { GeneratedFolder, ProjectUIDL } from '@teleporthq/teleport-types'
+import { ContentTables } from '@teleporthq/teleport-shared'
+import { generateSafeFileName } from '@teleporthq/teleport-plugin-next-data-source'
+import uidlSample from '../../../examples/test-samples/project-sample.json'
+import { createNextProjectGenerator } from '../src'
+import NextTemplate from '../src/project-template'
+
+/**
+ * A content preset's CATEGORY PAGE end to end: the editor exports one dynamic
+ * page at `/help/category/[slug]` whose `getStaticProps` / `getStaticPaths`
+ * are EXTERNAL resources — two functions of the `content-category-pages`
+ * module the blog project plugin emits — instead of a table fetch. Generated
+ * code is the only place that contract proves itself: the page must import
+ * the functions by the names teleport-shared derives, call the resolver with
+ * the route's slug, expose the result as the page prop the page's bindings
+ * read, 404 on an empty answer, and revalidate; the module must exist and read
+ * the preset's posts through its generated fetcher.
+ */
+
+const template = JSON.parse(JSON.stringify(NextTemplate)) as GeneratedFolder
+
+const DATA_SOURCE_ID = 'ds-help-content'
+const TABLE = ContentTables.contentTablesByKey('help').posts
+const MODULE = ContentTables.CONTENT_CATEGORY_PAGES_MODULE
+const RESOLVER = ContentTables.contentCategoryPageResolverName('help')
+const LISTER = ContentTables.contentCategoryPathsListerName('help')
+const ENTITY = 'helpCenterCategory'
+
+const dependency = { type: 'local', path: MODULE, meta: { namedImport: true } }
+
+const buildUidl = (): ProjectUIDL => {
+  const uidl = JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL
+
+  uidl.dataSources = {
+    [DATA_SOURCE_ID]: {
+      id: DATA_SOURCE_ID,
+      name: 'Content',
+      type: 'teleport',
+      config: {
+        selectedTables: {
+          [TABLE]: {
+            name: TABLE,
+            columns: [
+              { name: 'id', type: 'uuid' },
+              { name: 'title', type: 'varchar' },
+              { name: 'slug', type: 'varchar' },
+              { name: 'status', type: 'varchar' },
+              { name: 'category_filter_ids', type: 'text' },
+            ],
+          },
+        },
+      },
+    },
+  } as never
+
+  // The editor emits the block for every project with a data source; the
+  // category page registers no fetcher of its own in it.
+  uidl.resources = { items: {}, resourceMappers: {} } as never
+
+  uidl.helpCenterSettings = {
+    categories: [
+      { id: 'guides', name: 'Guides', slug: 'guides', parentId: null, order: 0, children: [] },
+    ],
+    categoryPages: {
+      dataSourceId: DATA_SOURCE_ID,
+      postPath: '/help',
+      postUrlField: 'slug',
+      categoryPath: '/help/category',
+    },
+  } as never
+
+  const route = {
+    value: 'help/category/Help-Category',
+    pageId: 'TQ_help_category_page',
+    seo: { title: 'Category' },
+    pageOptions: {
+      stateDefinitions: {},
+      propDefinitions: {},
+      navLink: '/help/category/[slug]',
+      dynamicRouteAttribute: 'slug',
+      initialPropsData: {
+        exposeAs: { name: ENTITY, valuePath: ['data'] },
+        resource: {
+          name: RESOLVER,
+          dependency,
+          params: { slug: { type: 'expr', content: "params['slug']" } },
+        },
+        cache: { revalidate: 60 },
+      },
+      initialPathsData: {
+        exposeAs: { name: `${ENTITY}Paths`, valuePath: ['data'], itemValuePath: ['slug'] },
+        resource: { name: LISTER, dependency },
+      },
+    },
+  }
+
+  const pageNode = {
+    type: 'conditional',
+    content: {
+      reference: { type: 'dynamic', content: { referenceType: 'state', id: 'route' } },
+      value: 'help/category/Help-Category',
+      node: {
+        type: 'element',
+        content: {
+          elementType: 'container',
+          children: [
+            {
+              type: 'element',
+              content: {
+                elementType: 'text',
+                children: [
+                  {
+                    type: 'dynamic',
+                    content: {
+                      referenceType: 'prop',
+                      id: ENTITY,
+                      refPath: ['name'],
+                      fallback: '',
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    },
+  }
+
+  uidl.root.stateDefinitions?.route.values?.push(route as never)
+  uidl.root.node.content.children?.push(pageNode as never)
+  return uidl
+}
+
+const findFile = (folder: GeneratedFolder, path: string[]): string => {
+  let current: GeneratedFolder | undefined = folder
+  for (const segment of path.slice(0, -1)) {
+    current = current?.subFolders.find((sub) => sub.name === segment)
+  }
+  const file = current?.files.find((entry) => entry.name === path[path.length - 1])
+  expect(file).toBeDefined()
+  return file?.content as string
+}
+
+const expectValidJs = (source: string) => {
+  expect(() => parse(source, { sourceType: 'module', plugins: ['jsx'] })).not.toThrow()
+}
+
+describe('a content preset category page, generated', () => {
+  let page: string
+  let module: string
+  let blogContext: string
+
+  beforeAll(async () => {
+    const generator = createNextProjectGenerator()
+    const output = await generator.generateProject(buildUidl(), template)
+    page = findFile(output, ['pages', 'help', 'category', '[slug]'])
+    module = findFile(output, ['content-category-pages'])
+    blogContext = findFile(output, ['blog-context'])
+  })
+
+  it('resolves the category at the slug through the generated module, as the page prop', () => {
+    expectValidJs(page)
+    expect(page).toMatch(
+      new RegExp(
+        `import \\{[\\s\\S]*\\b${RESOLVER}\\b[\\s\\S]*\\} from '${MODULE.replace('/', '\\/')}'`
+      )
+    )
+    expect(page).toMatch(new RegExp(`await ${RESOLVER}\\(\\{[\\s\\S]*slug: params\\['slug'\\]`))
+    expect(page).toMatch(
+      /if \(!response\?\.data\) \{\s*return \{\s*notFound: true,\s*revalidate: 60/
+    )
+    expect(page).toContain(`${ENTITY}: response?.data`)
+    // The page's text reads the prop the resolver exposed, however the
+    // generator spells the optional chain.
+    expect(page).toMatch(new RegExp(`props\\.${ENTITY}\\??\\.(\\['name'\\]|name)`))
+  })
+
+  it('lists every category slug for getStaticPaths through the module', () => {
+    expect(page).toMatch(
+      new RegExp(
+        `import \\{[\\s\\S]*\\b${LISTER}\\b[\\s\\S]*\\} from '${MODULE.replace('/', '\\/')}'`
+      )
+    )
+    expect(page).toContain(`await ${LISTER}(`)
+    expect(page).toContain("fallback: 'blocking'")
+  })
+
+  it('emits the module over the baked taxonomy and the preset’s posts fetcher', () => {
+    expectValidJs(module)
+    expect(module).toContain(`export async function ${RESOLVER}(params)`)
+    expect(module).toContain(`export async function ${LISTER}()`)
+    expect(module).toContain(
+      `import helpPosts from './utils/data-sources/${generateSafeFileName(
+        'teleport',
+        TABLE,
+        DATA_SOURCE_ID
+      )}'`
+    )
+    expect(module).toContain("from '@/blog-context'")
+    expect(blogContext).toContain('export const HELP_CATEGORY_TREE')
+    expect(blogContext).toContain('export const localizeCategoryTree')
+  })
+})