@antelopejs/dms-marketing 0.3.3 → 0.4.1

package/frontend-vue/tests/i18n.test.ts

@@ -46,6 +46,51 @@ function backendKeys(): string[] {
   return [...found].sort()
 }
 
+const COMPONENT_DIR = join(process.cwd(), 'app')
+// `t('page.marketing.a.b'` as the components call it; template-built keys
+// are resolved at runtime and cannot be checked here.
+const COMPONENT_KEY = /t\('(page\.marketing\.[\w.-]+)'/g
+
+function filesUnder(directory: string, extension: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name)
+    if (entry.isDirectory()) {
+      return filesUnder(path, extension)
+    }
+    return entry.isFile() && path.endsWith(extension) ? [path] : []
+  })
+}
+
+function componentKeys(): string[] {
+  const found = new Set<string>()
+  for (const file of [
+    ...filesUnder(COMPONENT_DIR, '.vue'),
+    ...filesUnder(COMPONENT_DIR, '.ts'),
+  ]) {
+    for (const match of readFileSync(file, 'utf8').matchAll(COMPONENT_KEY)) {
+      found.add(match[1]!)
+    }
+  }
+  return [...found].sort()
+}
+
+// The second argument of MarketingBlock(name, key, …) and of blockMeta(key, …):
+// the key every block's permission title is read under.
+const BLOCK_KEY =
+  /(?:MarketingBlock\(\s*"\w+",\s*|blockMeta\(\s*)[`"]([\w${}.-]+)[`"]/g
+
+function blockKeys(): string[] {
+  const found = new Set<string>()
+  for (const file of typescriptFiles(join(BACKEND_SOURCE_DIR, 'pages'))) {
+    for (const match of readFileSync(file, 'utf8').matchAll(BLOCK_KEY)) {
+      if (!match[1]!.includes('$')) {
+        found.add(match[1]!)
+      }
+    }
+  }
+  return [...found].sort()
+}
+
 function resolveKey(root: unknown, key: string): unknown {
   return key
     .split('.')
@@ -65,22 +110,60 @@ describe('locales', () => {
 
   it('cover every namespace the surfaces use', () => {
     for (const namespace of [
+      'context',
       'overview',
+      'acquisition',
       'pages',
-      'campaigns',
       'funnels',
-      'settings',
+      'funnel',
+      'experiment',
+      'builder',
       'websites',
+      'install',
+      'settings',
+      'blocks',
       'errors',
     ]) {
       expect(en.page.marketing).toHaveProperty(namespace)
     }
   })
 
+  it('resolve every static key the components ask for', () => {
+    const keys = componentKeys()
+    expect(keys.length).toBeGreaterThan(0)
+    expect(
+      keys.filter((key) => typeof resolveKey(en, key) !== 'string'),
+    ).toEqual([])
+    expect(
+      keys.filter((key) => typeof resolveKey(fr, key) !== 'string'),
+    ).toEqual([])
+  })
+
+  it('name every block the pages declare', () => {
+    for (const key of backendKeys().filter((key) =>
+      key.startsWith('page.marketing.blocks.'),
+    )) {
+      expect(typeof resolveKey(en, key)).toBe('string')
+    }
+    expect(blockKeys().length).toBeGreaterThan(20)
+    for (const block of blockKeys()) {
+      expect(typeof resolveKey(en, `page.marketing.blocks.${block}.name`)).toBe(
+        'string',
+      )
+      expect(
+        typeof resolveKey(fr, `page.marketing.blocks.${block}.description`),
+      ).toBe('string')
+    }
+  })
+
   it('resolve every static key the backend emits', () => {
     const keys = backendKeys()
     expect(keys.length).toBeGreaterThan(0)
-    expect(keys.filter((key) => typeof resolveKey(en, key) !== 'string')).toEqual([])
-    expect(keys.filter((key) => typeof resolveKey(fr, key) !== 'string')).toEqual([])
+    expect(
+      keys.filter((key) => typeof resolveKey(en, key) !== 'string'),
+    ).toEqual([])
+    expect(
+      keys.filter((key) => typeof resolveKey(fr, key) !== 'string'),
+    ).toEqual([])
   })
 })

package/frontend-vue/tests/latest-request.test.ts

@@ -5,9 +5,12 @@ import { useLatestRequest } from '../app/composables/useLatestRequest'
 describe('useLatestRequest loading states', () => {
   it('is unsettled immediately and settles with the fetched path inventory', async () => {
     let resolve: ((value: { pages: { path: string }[] }) => void) | undefined
-    const request = useLatestRequest(() => new Promise((done) => {
-      resolve = done
-    }))
+    const request = useLatestRequest(
+      () =>
+        new Promise((done) => {
+          resolve = done
+        }),
+    )
 
     const pending = request.run()
     expect(request.settled.value).toBe(false)

package/frontend-vue/tests/locale-typography.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+import en from '../i18n/locales/marketing-en-GB.json'
+import fr from '../i18n/locales/marketing-fr-FR.json'
+
+/**
+ * What vue-i18n and French typography expect of every message, checked on the
+ * files themselves so a new string cannot bring a broken one back.
+ */
+
+const NO_BREAK_SPACE = '\u00A0'
+const NARROW_NO_BREAK_SPACE = '\u202F'
+
+// `{count}` messages whose count is never 1: a fixed minimum, a list cap.
+const COUNT_NEVER_ONE = new Set([
+  'page.marketing.experiment.insufficient_description',
+  'page.marketing.pages.list_truncated',
+])
+
+// What intlify warns about as HTML in a message (`warnHtmlMessage`).
+const HTML_TAG = /<\/?[\w\s="/.':;#-]+>/
+// A `@` that is not the literal `{'@'}` starts a linked message.
+const BARE_AT = /@(?<!\{'@)/
+
+function messages(value: unknown, prefix = ''): [string, string][] {
+  if (typeof value === 'string') {
+    return [[prefix, value]]
+  }
+  return Object.entries(value as Record<string, unknown>).flatMap(
+    ([key, child]) => messages(child, prefix ? `${prefix}.${key}` : key),
+  )
+}
+
+const english = messages(en)
+const french = messages(fr)
+
+function offending(
+  list: [string, string][],
+  test: (text: string, key: string) => boolean,
+): string[] {
+  return list.filter(([key, text]) => test(text, key)).map(([key]) => key)
+}
+
+describe('locale messages', () => {
+  it('pair every English key with a French one', () => {
+    expect(french.map(([key]) => key).sort()).toEqual(
+      english.map(([key]) => key).sort(),
+    )
+  })
+
+  it('carry no HTML, which vue-i18n warns about', () => {
+    expect(
+      offending([...english, ...french], (text) => HTML_TAG.test(text)),
+    ).toEqual([])
+  })
+
+  it("escape every @ as {'@'}", () => {
+    expect(
+      offending([...english, ...french], (text) => BARE_AT.test(text)),
+    ).toEqual([])
+  })
+
+  it('give a count its singular and plural forms', () => {
+    const needsForms = (text: string, key: string) =>
+      text.includes('{count}') &&
+      !text.includes('|') &&
+      !COUNT_NEVER_ONE.has(key)
+    expect(offending(english, needsForms)).toEqual([])
+    expect(offending(french, needsForms)).toEqual([])
+  })
+
+  it('pluralise the same keys in both languages', () => {
+    const plural = new Map(
+      english.map(([key, text]) => [key, text.includes('|')]),
+    )
+    expect(
+      offending(french, (text, key) => text.includes('|') !== plural.get(key)),
+    ).toEqual([])
+  })
+})
+
+describe('French typography', () => {
+  it('keeps : ; ! ? % and » off the start of a line', () => {
+    expect(offending(french, (text) => / [:;!?%»]/.test(text))).toEqual([])
+    expect(offending(french, (text) => /« /.test(text))).toEqual([])
+  })
+
+  it('puts a narrow no-break space before ; ! ? % and a no-break space before :', () => {
+    expect(
+      offending(french, (text) =>
+        // "(%)": a unit in a field label.
+        new RegExp(`[^${NARROW_NO_BREAK_SPACE}(][;!?%]`).test(text),
+      ),
+    ).toEqual([])
+    expect(
+      offending(french, (text) =>
+        new RegExp(`[^${NO_BREAK_SPACE}]:`).test(text),
+      ),
+    ).toEqual([])
+  })
+
+  it('writes French quotes and straight apostrophes', () => {
+    expect(offending(french, (text) => /[“”’]/.test(text))).toEqual([])
+  })
+
+  it('leaves no English product words in French prose', () => {
+    expect(
+      offending(french, (text) =>
+        /\b(analytics|first-party|tracker|snippet|capture|tagu)/i.test(
+          // utm_* parameters are typed as they are; placeholders are code.
+          text.replace(/utm_\w+|\{\w+\}|\(first-party\)/g, ''),
+        ),
+      ),
+    ).toEqual([])
+  })
+})

package/frontend-vue/tests/registration.test.ts

@@ -2,21 +2,27 @@ import { expect, it, vi } from 'vitest'
 import frontendModule from '../dms.frontend'
 
 /**
- * The backend addresses this module's surfaces by component name — the pages
+ * The backend addresses this module's blocks by component name — the pages
  * through `CustomComponent('DmsMarketing…')`, the DataTypes through their
- * form components — so a name that stops being registered silently falls back
- * to the generic card renderer instead of failing.
+ * form components. The loader puts the module's `componentPrefix` in front of
+ * each registered name, so a name that stops being registered silently
+ * falls back to a bare `<div>` instead of failing.
  */
 const BACKEND_ADDRESSED = [
-  'DmsMarketingOverviewView',
-  'DmsMarketingPagesView',
-  'DmsMarketingCampaignsView',
-  'DmsMarketingFunnelsView',
-  'DmsMarketingFunnelStepsInput',
-  'DmsMarketingExperimentInput',
+  'Context',
+  'TopListTabs',
+  'ChannelsCard',
+  'PagesExplorer',
+  'FunnelTemplates',
+  'FunnelReport',
+  'FunnelBuilder',
+  'WebsitesGrid',
+  'InstallGuide',
+  'FunnelStepsInput',
+  'ExperimentInput',
 ]
 
-it('registers every component under the DmsMarketing prefix', async () => {
+it('registers every backend-addressed component, once, without the prefix', async () => {
   const registerComponent = vi.fn()
   const registerPlugin = vi.fn()
   await frontendModule.setup({
@@ -36,7 +42,7 @@ it('registers every component under the DmsMarketing prefix', async () => {
   expect(names.length).toBeGreaterThan(0)
   expect(new Set(names).size).toBe(names.length)
   for (const name of names) {
-    expect(name.startsWith('DmsMarketing')).toBe(true)
+    expect(name.startsWith('DmsMarketing')).toBe(false)
   }
   for (const name of BACKEND_ADDRESSED) {
     expect(names).toContain(name)

package/frontend-vue/tests/routes.test.ts

@@ -1,23 +1,83 @@
 import { describe, expect, it } from 'vitest'
 import {
-  campaignsLink,
+  acquisitionLink,
+  funnelBuilderLink,
+  funnelLink,
   funnelsLink,
+  installLink,
+  overviewLink,
   pagesLink,
+  withWebsite,
 } from '../app/composables/useMarketingRoutes'
 
 describe('module links', () => {
   it('stay bare when nothing is selected', () => {
     expect(pagesLink()).toBe('/modules/marketing/pages')
-    expect(campaignsLink()).toBe('/modules/marketing/campaigns')
+    expect(acquisitionLink()).toBe('/modules/marketing/acquisition')
     expect(funnelsLink()).toBe('/modules/marketing/funnels')
+    expect(funnelBuilderLink()).toBe('/modules/marketing/funnel-builder')
+    expect(installLink()).toBe('/modules/marketing/install')
   })
 
-  it('serializes the exact button route and encodes selected values', () => {
-    expect(funnelsLink({ website: 'test-site-1' })).toBe(
-      '/modules/marketing/funnels?website=test-site-1',
+  it('encode the values they carry', () => {
+    expect(pagesLink('/pricing?x=1')).toBe(
+      '/modules/marketing/pages?path=%2Fpricing%3Fx%3D1',
     )
-    expect(pagesLink({ website: 'w 1', path: '/pricing?x=1', period: '7d' })).toBe(
-      '/modules/marketing/pages?website=w+1&path=%2Fpricing%3Fx%3D1&period=7d',
+    expect(funnelLink('f 1')).toBe('/modules/marketing/funnel?id=f+1')
+    expect(installLink('site-1')).toBe(
+      '/modules/marketing/install?website=site-1',
+    )
+  })
+
+  it('carry a template and the split switch to the builder', () => {
+    const link = funnelBuilderLink(null, {
+      split: true,
+      steps: [{ kind: 'custom', value: 'signup' }],
+    })
+    const query = new URL(link, 'http://x').searchParams
+    expect(query.get('split')).toBe('1')
+    expect(JSON.parse(query.get('steps')!)).toEqual([
+      { kind: 'custom', value: 'signup' },
+    ])
+  })
+
+  it('opens the builder on a copy of a funnel (Duplicate)', () => {
+    expect(funnelBuilderLink(null, { copy: 'f1' })).toBe(
+      '/modules/marketing/funnel-builder?copy=f1',
+    )
+  })
+
+  it('open the overview on a website', () => {
+    expect(overviewLink()).toBe('/modules/marketing/overview')
+    expect(overviewLink('site-1')).toBe(
+      '/modules/marketing/overview?website=site-1',
+    )
+  })
+
+  it('carry the website of the page they are followed from', () => {
+    const query = {
+      website: 'site-1',
+      'marketing.period': 'last-7-days',
+      path: '/ignored',
+    }
+    expect(withWebsite(pagesLink('/pricing'), query)).toBe(
+      '/modules/marketing/pages?path=%2Fpricing&website=site-1',
+    )
+    expect(withWebsite(acquisitionLink(), query)).toBe(
+      '/modules/marketing/acquisition?website=site-1',
+    )
+  })
+
+  it('keep the website a link names, and stay bare without one', () => {
+    const query = { website: 'site-1' }
+    expect(withWebsite(overviewLink('site-2'), query)).toBe(
+      '/modules/marketing/overview?website=site-2',
+    )
+    expect(withWebsite(acquisitionLink(), {})).toBe(
+      '/modules/marketing/acquisition',
+    )
+    expect(withWebsite(acquisitionLink(), { website: ['site-1'] })).toBe(
+      '/modules/marketing/acquisition',
     )
   })
 })

package/frontend-vue/tests/server-parity.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+// The server's own rules, read from its sources: the builder and the website
+// forms check a draft before saving it, and must refuse what the API refuses.
+import * as server from '../../src/types/constants'
+import { normalizeStepPath } from '../../src/services/funnels/step-path'
+import * as draft from '../app/utils/funnel-draft'
+import { normalizeFunnelStepPath } from '../app/utils/step-path'
+import {
+  MAX_WEBSITE_DOMAIN_LENGTH,
+  MAX_WEBSITE_NAME_LENGTH,
+} from '../app/constants'
+
+describe('front rules mirror the server', () => {
+  it('caps a funnel draft as the server does', () => {
+    expect(draft.MAX_NAME_LENGTH).toBe(server.MAX_NAME_LENGTH)
+    expect(draft.MAX_STEPS).toBe(server.MAX_FUNNEL_STEPS)
+    expect(draft.MAX_STEP_VALUE_LENGTH).toBe(
+      server.MAX_FUNNEL_STEP_VALUE_LENGTH,
+    )
+    expect(draft.MAX_WINDOW_HOURS).toBe(server.MAX_CONVERSION_WINDOW_HOURS)
+    expect(draft.MIN_VARIATIONS).toBe(server.MIN_EXPERIMENT_VARIATIONS)
+    expect(draft.MAX_VARIATIONS).toBe(server.MAX_EXPERIMENT_VARIATIONS)
+    expect(draft.MAX_EXPERIMENT_KEY_LENGTH).toBe(
+      server.MAX_EXPERIMENT_KEY_LENGTH,
+    )
+  })
+
+  it('accepts the experiment keys the server accepts', () => {
+    const keys = [
+      'hero-cta',
+      'v2_bold',
+      '0day',
+      '-lead',
+      '_lead',
+      'Hero',
+      'with space',
+      'é',
+      'a'.repeat(server.MAX_EXPERIMENT_KEY_LENGTH),
+      'a'.repeat(server.MAX_EXPERIMENT_KEY_LENGTH + 1),
+    ]
+    for (const key of keys) {
+      expect(draft.isExperimentKey(key), key).toBe(
+        server.EXPERIMENT_KEY_PATTERN.test(key) &&
+          key.length <= server.MAX_EXPERIMENT_KEY_LENGTH,
+      )
+    }
+  })
+
+  it('normalizes a page step as the server does', () => {
+    const typed = [
+      '/pricing',
+      'pricing',
+      '/Sale/Chairs/',
+      '/',
+      '',
+      '  /cart?step=2#top ',
+      'https://shop.acme.test/Sale/Chairs/?utm=x',
+      'shop.acme.test/checkout/',
+      'HTTP://Shop.Acme.Test/a',
+      '/blog/*',
+      'shop.acme.test/blog/*',
+      '*',
+      '/a b',
+      'http://[bad',
+    ]
+    for (const value of typed) {
+      expect(normalizeFunnelStepPath(value), value).toBe(
+        normalizeStepPath(value),
+      )
+    }
+  })
+
+  it('caps a website name and domain as the server does', () => {
+    expect(MAX_WEBSITE_NAME_LENGTH).toBe(server.MAX_NAME_LENGTH)
+    expect(MAX_WEBSITE_DOMAIN_LENGTH).toBe(server.MAX_DOMAIN_LENGTH)
+  })
+})

package/frontend-vue/tests/stubs/frontend-module.ts

@@ -26,6 +26,7 @@ export interface DmsFrontendSdk {
 }
 
 export interface DmsFrontendModule {
+  componentPrefix?: string
   setup(sdk: DmsFrontendSdk): void | Promise<void>
 }
 
@@ -33,15 +34,22 @@ export function defineDmsPlugin(setup: DmsPluginSetup): DmsPluginSetup {
   return setup
 }
 
-export function useI18n(): { t: (key: string) => string, te: () => boolean, locale: { value: string } } {
+export function useI18n(): {
+  t: (key: string) => string
+  te: () => boolean
+  locale: { value: string }
+} {
   return { t: (key: string) => key, te: () => false, locale: { value: 'en' } }
 }
 
-export function useDmsRoute(): { query: Record<string, string>, path: string } {
+export function useDmsRoute(): { query: Record<string, string>; path: string } {
   return { query: {}, path: '/' }
 }
 
-export function useDmsRouter(): { replace: () => Promise<void>, push: () => Promise<void> } {
+export function useDmsRouter(): {
+  replace: () => Promise<void>
+  push: () => Promise<void>
+} {
   return { replace: async () => {}, push: async () => {} }
 }
 
@@ -52,3 +60,10 @@ export function useDmsRuntimeConfig(): { public: Record<string, unknown> } {
 export function resolveDmsComponent(): Component | undefined {
   return undefined
 }
+
+export function useDmsCookie<T>(
+  _name: string,
+  options: { default: () => T },
+): { value: T } {
+  return { value: options.default() }
+}

package/frontend-vue/vitest.config.ts

@@ -14,7 +14,9 @@ export default defineConfig({
     },
   },
   test: {
-    environment: 'jsdom',
+    // No test touches the DOM: the suites drive composables, pure helpers
+    // and the module's setup. jsdom only added its boot to every file.
+    environment: 'node',
     include: ['tests/**/*.test.ts'],
   },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-marketing",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -31,23 +31,25 @@
     "@antelopejs/interface-api": ">=0.0.13 <1.0.0",
     "@antelopejs/interface-api-util": ">=0.1.2 <1.0.0",
     "@antelopejs/interface-core": ">=0.1.1 <1.0.0",
-    "@antelopejs/interface-data-api": ">=0.1.9 <1.0.0",
+    "@antelopejs/interface-data-api": ">=0.2.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
-    "@antelopejs/interface-database-decorators": ">=0.1.6 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.2.0 <1.0.0",
-    "@antelopejs/interface-dms-marketing": ">=0.3.1 <0.4.0",
+    "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.6.0 <1.0.0",
+    "@antelopejs/interface-dms-marketing": ">=0.4.0 <0.5.0",
     "defu": "^6.1.4",
     "maxmind": "^5.0.7",
     "node-cron": "^4.2.1",
+    "sanitize-html": "^2.18.0",
     "ua-parser-js": "^2.0.9",
     "zod": "~3.24.4"
   },
   "devDependencies": {
-    "@antelopejs/core": ">=1.10.1 <2",
+    "@antelopejs/core": ">=1.13.5 <2",
     "@antelopejs/interface-mongodb": ">=0.0.5 <1.0.0",
-    "@antelopejs/mongodb": "1.4.0",
+    "@antelopejs/mongodb": "1.4.2",
     "@antelopejs/tooling-configs": ">=0.0.7 <1.0.0",
     "@types/node": "^22.19.15",
+    "@types/sanitize-html": "^2.16.2",
     "knip": "^6.34.0",
     "mongodb": "^6.21.0",
     "mongodb-memory-server-core": "^10.4.3",
@@ -74,7 +76,7 @@
   "scripts": {
     "build": "pnpm --filter @antelopejs/interface-dms-marketing build && rimraf dist && tsc",
     "test": "pnpm run test:backend && pnpm run test:layer",
-    "test:backend": "pnpm run build && ajs module test .",
+    "test:backend": "([ -n \"$DMS_PREBUILT\" ] || pnpm run build) && ajs module test .",
     "test:layer": "cd frontend-vue && pnpm test",
     "dev": "ajs project run -w -p playground",
     "frontend:dev": "cd playground && pnpm frontend:dev",