@antelopejs/dms-marketing 0.3.3 → 0.4.1

package/frontend-vue/package.json

@@ -7,7 +7,7 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.6.5",
   "engines": {
-    "@antelopejs/dms-frontend": ">=0.2.8 <0.4.0"
+    "@antelopejs/dms-frontend": ">=0.5.2 <0.6.0"
   },
   "scripts": {
     "dev": "pnpm --dir ../playground frontend:dev",
@@ -24,7 +24,6 @@
     "@vitejs/plugin-vue": "^6.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-vue": "^10.0.0",
-    "jsdom": "^26",
     "prettier": "^3.5.3",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.0.0",

package/frontend-vue/pnpm-lock.yaml

@@ -24,9 +24,6 @@ importers:
       eslint-plugin-vue:
         specifier: ^10.0.0
         version: 10.11.0(@typescript-eslint/parser@8.70.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.5(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@9.39.5(jiti@2.7.0)))
-      jsdom:
-        specifier: ^26
-        version: 26.1.0
       prettier:
         specifier: ^3.5.3
         version: 3.9.7
@@ -2653,6 +2650,7 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 10.4.3
+    optional: true
 
   '@babel/helper-string-parser@7.29.7': {}
 
@@ -2671,12 +2669,14 @@ snapshots:
     dependencies:
       fontkitten: 1.0.3
 
-  '@csstools/color-helpers@5.1.0': {}
+  '@csstools/color-helpers@5.1.0':
+    optional: true
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
+    optional: true
 
   '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
@@ -2684,12 +2684,15 @@ snapshots:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
+    optional: true
 
   '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
+    optional: true
 
-  '@csstools/css-tokenizer@3.0.4': {}
+  '@csstools/css-tokenizer@3.0.4':
+    optional: true
 
   '@esbuild/aix-ppc64@0.27.7':
     optional: true
@@ -3830,7 +3833,8 @@ snapshots:
 
   acorn@8.18.0: {}
 
-  agent-base@7.1.4: {}
+  agent-base@7.1.4:
+    optional: true
 
   ajv@6.15.0:
     dependencies:
@@ -3946,6 +3950,7 @@ snapshots:
     dependencies:
       '@asamuzakjp/css-color': 3.2.0
       rrweb-cssom: 0.8.0
+    optional: true
 
   csstype@3.2.3: {}
 
@@ -3953,12 +3958,14 @@ snapshots:
     dependencies:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
+    optional: true
 
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
-  decimal.js@10.6.0: {}
+  decimal.js@10.6.0:
+    optional: true
 
   deep-is@0.1.4: {}
 
@@ -4012,7 +4019,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.3
 
-  entities@6.0.1: {}
+  entities@6.0.1:
+    optional: true
 
   entities@7.0.1: {}
 
@@ -4293,6 +4301,7 @@ snapshots:
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
+    optional: true
 
   http-proxy-agent@7.0.2:
     dependencies:
@@ -4300,6 +4309,7 @@ snapshots:
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   https-proxy-agent@7.0.6:
     dependencies:
@@ -4307,12 +4317,14 @@ snapshots:
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   human-signals@5.0.0: {}
 
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
+    optional: true
 
   ignore@5.3.2: {}
 
@@ -4335,7 +4347,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-potential-custom-element-name@1.0.1: {}
+  is-potential-custom-element-name@1.0.1:
+    optional: true
 
   is-stream@3.0.0: {}
 
@@ -4377,6 +4390,7 @@ snapshots:
       - bufferutil
       - supports-color
       - utf-8-validate
+    optional: true
 
   json-buffer@3.0.1: {}
 
@@ -4513,7 +4527,8 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lru-cache@10.4.3: {}
+  lru-cache@10.4.3:
+    optional: true
 
   lru-cache@11.5.2: {}
 
@@ -4600,7 +4615,8 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nwsapi@2.2.27: {}
+  nwsapi@2.2.27:
+    optional: true
 
   obug@2.2.1: {}
 
@@ -4649,6 +4665,7 @@ snapshots:
   parse5@7.3.0:
     dependencies:
       entities: 6.0.1
+    optional: true
 
   path-exists@4.0.0: {}
 
@@ -4823,13 +4840,16 @@ snapshots:
 
   rope-sequence@1.3.4: {}
 
-  rrweb-cssom@0.8.0: {}
+  rrweb-cssom@0.8.0:
+    optional: true
 
-  safer-buffer@2.1.2: {}
+  safer-buffer@2.1.2:
+    optional: true
 
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
+    optional: true
 
   scule@1.3.0: {}
 
@@ -4869,7 +4889,8 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  symbol-tree@3.2.4: {}
+  symbol-tree@3.2.4:
+    optional: true
 
   tailwind-merge@3.7.0: {}
 
@@ -4895,21 +4916,25 @@ snapshots:
 
   tinyrainbow@3.1.1: {}
 
-  tldts-core@6.1.86: {}
+  tldts-core@6.1.86:
+    optional: true
 
   tldts@6.1.86:
     dependencies:
       tldts-core: 6.1.86
+    optional: true
 
   totalist@3.0.1: {}
 
   tough-cookie@5.1.2:
     dependencies:
       tldts: 6.1.86
+    optional: true
 
   tr46@5.1.1:
     dependencies:
       punycode: 2.3.1
+    optional: true
 
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
@@ -5179,21 +5204,26 @@ snapshots:
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
+    optional: true
 
-  webidl-conversions@7.0.0: {}
+  webidl-conversions@7.0.0:
+    optional: true
 
   webpack-virtual-modules@0.6.2: {}
 
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
+    optional: true
 
-  whatwg-mimetype@4.0.0: {}
+  whatwg-mimetype@4.0.0:
+    optional: true
 
   whatwg-url@14.2.0:
     dependencies:
       tr46: 5.1.1
       webidl-conversions: 7.0.0
+    optional: true
 
   wheel-gestures@2.3.0: {}
 
@@ -5208,11 +5238,13 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  ws@8.21.3: {}
+  ws@8.21.3:
+    optional: true
 
   xml-name-validator@5.0.0: {}
 
-  xmlchars@2.2.0: {}
+  xmlchars@2.2.0:
+    optional: true
 
   y-protocols@1.0.7(yjs@13.6.32):
     dependencies:

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

@@ -33,9 +33,9 @@ describe('parseExperimentValue', () => {
   })
 
   it('reads a value carrying no runs as a split that served no traffic', () => {
-    expect(
-      parseExperimentValue({ key: 'cta', variations: [] })?.runs,
-    ).toEqual([])
+    expect(parseExperimentValue({ key: 'cta', variations: [] })?.runs).toEqual(
+      [],
+    )
   })
 
   it('answers null on anything else', () => {

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

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest'
+import {
+  displayName,
+  formatDuration,
+  formatSignedDelta,
+  initials,
+  percentChangeTrend,
+} from '../app/utils/format'
+import { sampleSizePerArm } from '../app/utils/sample-size'
+import { normalizeFunnelStepPath } from '../app/utils/step-path'
+import { trackerSnippet } from '../app/utils/snippet'
+
+describe('formatting', () => {
+  it('writes durations the way analytics tools do', () => {
+    expect(formatDuration(8)).toBe('8s')
+    expect(formatDuration(168)).toBe('2m 48s')
+    expect(formatDuration(3720)).toBe('1h 2m')
+  })
+
+  it('signs deltas after rounding, so a tiny change reads as flat', () => {
+    expect(formatSignedDelta(-2.34, 'points', 'en')).toBe('−2.3 pt')
+    expect(formatSignedDelta(8, 'seconds', 'en')).toBe('+8s')
+    expect(formatSignedDelta(0.04, 'number', 'en')).toBe('±0.0')
+  })
+
+  it('reads a change in percent that rounds to 0 % as flat', () => {
+    expect(percentChangeTrend(0.3)).toBe('flat')
+    expect(percentChangeTrend(-0.49)).toBe('flat')
+    expect(percentChangeTrend(0)).toBe('flat')
+    expect(percentChangeTrend(0.5)).toBe('up')
+    expect(percentChangeTrend(-12)).toBe('down')
+  })
+
+  it('shows a pasted page step as the path the server matches', () => {
+    expect(
+      normalizeFunnelStepPath('https://shop.acme.test/Sale/Chairs/?utm=x'),
+    ).toBe('/Sale/Chairs')
+    expect(normalizeFunnelStepPath('/blog/*')).toBe('/blog/*')
+    expect(normalizeFunnelStepPath('/')).toBe('/')
+  })
+
+  it('names websites by their initials', () => {
+    expect(initials('Acme shop')).toBe('AS')
+    expect(initials('docs')).toBe('DO')
+  })
+
+  it('falls back to the raw code on a malformed region', () => {
+    expect(displayName('FR', 'region', 'en')).toBe('France')
+    expect(displayName('not a code!', 'region', 'en')).toBe('not a code!')
+  })
+})
+
+describe('helpers', () => {
+  it('asks for more sessions on a rarer conversion', () => {
+    expect(sampleSizePerArm(0.03, 0.2)).toBeGreaterThan(
+      sampleSizePerArm(0.3, 0.2),
+    )
+  })
+
+  it('builds the tracker tag for every flavour', () => {
+    const html = trackerSnippet('html', 'https://dms.example.com/', 'site-1')
+    expect(html).toContain(
+      'src="https://dms.example.com/api/marketing/tracker.js"',
+    )
+    expect(html).toContain('data-website-id="site-1"')
+    expect(
+      trackerSnippet('gtm', 'https://dms.example.com', 'site-1'),
+    ).toContain('setAttribute("data-website-id", "site-1")')
+    expect(
+      trackerSnippet('nuxt', 'https://dms.example.com', 'site-1'),
+    ).toContain('"data-website-id": "site-1"')
+  })
+})

package/frontend-vue/tests/funnel-draft.test.ts

@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'vitest'
+import {
+  draftIssues,
+  isExperimentKey,
+  splitSampleSize,
+  templateSteps,
+  variationSnippet,
+  type FunnelDraftValues,
+} from '../app/utils/funnel-draft'
+import { sampleSizePerArm } from '../app/utils/sample-size'
+
+function draft(overrides: Partial<FunnelDraftValues> = {}): FunnelDraftValues {
+  return {
+    name: 'Checkout',
+    websiteId: 'acme-shop',
+    steps: [{ kind: 'url', value: '/cart' }],
+    windowHours: 24,
+    split: false,
+    experimentKey: '',
+    variations: [
+      { key: 'control', weight: 1 },
+      { key: 'bold', weight: 1 },
+    ],
+    ...overrides,
+  }
+}
+
+describe('experiment keys', () => {
+  it('follow the server rule: a slug starting with a letter or a digit, 64 max', () => {
+    expect(isExperimentKey('hero-cta')).toBe(true)
+    expect(isExperimentKey('a_1')).toBe(true)
+    expect(isExperimentKey('-abc')).toBe(false)
+    expect(isExperimentKey('_abc')).toBe(false)
+    expect(isExperimentKey('Hero CTA')).toBe(false)
+    expect(isExperimentKey('')).toBe(false)
+    expect(isExperimentKey('a'.repeat(64))).toBe(true)
+    expect(isExperimentKey('a'.repeat(65))).toBe(false)
+  })
+})
+
+describe('template links', () => {
+  it('keep the valid steps and drop the rest, never throwing', () => {
+    expect(templateSteps('[{"kind":"custom"}]')).toEqual([])
+    expect(templateSteps('not json')).toEqual([])
+    expect(templateSteps('{"kind":"url","value":"/"}')).toEqual([])
+    expect(templateSteps(undefined)).toEqual([])
+    expect(
+      templateSteps(
+        JSON.stringify([
+          { kind: 'foo', value: '/a' },
+          { kind: 'url', value: ' /b ' },
+          { kind: 'url', value: `/${'x'.repeat(600)}` },
+          { kind: 'custom', value: 'signup' },
+        ]),
+      ),
+    ).toEqual([
+      { kind: 'url', value: '/b' },
+      { kind: 'custom', value: 'signup' },
+    ])
+  })
+
+  it('stop at the step limit', () => {
+    const many = Array.from({ length: 12 }, (_, i) => ({
+      kind: 'url',
+      value: `/p${i}`,
+    }))
+    expect(templateSteps(JSON.stringify(many))).toHaveLength(10)
+  })
+})
+
+describe('draft issues', () => {
+  it('are empty for a valid funnel', () => {
+    expect(draftIssues(draft(), false)).toEqual({})
+  })
+
+  it('name the field each refusal belongs to', () => {
+    const issues = draftIssues(
+      draft({
+        name: ' ',
+        websiteId: '',
+        steps: [{ kind: 'url', value: '' }],
+        windowHours: 1000,
+      }),
+      false,
+    )
+    expect(Object.keys(issues)).toEqual([
+      'name',
+      'websiteId',
+      'steps',
+      'conversionWindowHours',
+    ])
+  })
+
+  it('flag the step that is too long', () => {
+    const issues = draftIssues(
+      draft({
+        steps: [
+          { kind: 'url', value: '/a' },
+          { kind: 'url', value: `/${'x'.repeat(500)}` },
+        ],
+      }),
+      false,
+    )
+    expect(issues.steps).toMatchObject({ message: 'step_length', index: 1 })
+  })
+
+  it('refuse a window that is empty, fractional or out of bounds', () => {
+    for (const windowHours of ['', 0, 1.5, 721]) {
+      expect(draftIssues(draft({ windowHours }), false)).toHaveProperty(
+        'conversionWindowHours',
+      )
+    }
+    expect(draftIssues(draft({ windowHours: 720 }), false)).toEqual({})
+  })
+
+  it('check the split: key, arm keys, then weights', () => {
+    const split = { split: true, experimentKey: 'hero-cta' }
+    expect(draftIssues(draft(split), false)).toEqual({})
+    expect(
+      draftIssues(draft({ ...split, experimentKey: '-abc' }), false),
+    ).toHaveProperty('experiment')
+    expect(
+      draftIssues(
+        draft({
+          ...split,
+          variations: [
+            { key: 'a', weight: 1 },
+            { key: 'a', weight: 1 },
+          ],
+        }),
+        false,
+      ).variations,
+    ).toMatchObject({ message: 'variations', index: 1 })
+    for (const weights of [
+      [0, 0],
+      [-3, 1],
+      ['', 1],
+    ]) {
+      expect(
+        draftIssues(
+          draft({
+            ...split,
+            variations: [
+              { key: 'control', weight: weights[0]! },
+              { key: 'bold', weight: weights[1]! },
+            ],
+          }),
+          false,
+        ).variations,
+      ).toMatchObject({ message: 'weights' })
+    }
+  })
+
+  it('leave a started split alone: its key and arms are frozen', () => {
+    expect(
+      draftIssues(draft({ split: true, experimentKey: '-abc' }), true),
+    ).toEqual({})
+  })
+})
+
+describe('split sample size', () => {
+  it('is what the smallest arm needs, scaled to the whole traffic', () => {
+    const perArm = sampleSizePerArm(0.04, 0.2)
+    expect(splitSampleSize(0.04, 0.2, [1, 1])).toBeCloseTo(perArm * 2)
+    expect(splitSampleSize(0.04, 0.2, [1, 3])).toBeCloseTo(perArm * 4)
+    expect(splitSampleSize(0.04, 0.2, [1, 1, 1])).toBeCloseTo(perArm * 3)
+  })
+
+  it('ignores arms that receive no traffic, and needs two that do', () => {
+    const perArm = sampleSizePerArm(0.04, 0.2)
+    expect(splitSampleSize(0.04, 0.2, [1, 1, 0])).toBeCloseTo(perArm * 2)
+    expect(splitSampleSize(0.04, 0.2, [1, 0])).toBeNull()
+    expect(splitSampleSize(0, 0.2, [1, 1])).toBeNull()
+  })
+})
+
+describe('variation snippet', () => {
+  it('runs in a classic script: no top-level await', () => {
+    const code = variationSnippet('hero-cta', 'control', ['bold', 'quiet'])
+    expect(code).not.toMatch(/^\s*(const|let|var) .*= await/m)
+    expect(code).toContain('variation("hero-cta").then(')
+    expect(code).toContain('} else if (arm === "quiet") {')
+    expect(() => new Function(code)).not.toThrow()
+  })
+
+  it('writes its comments in the language it is given', () => {
+    const code = variationSnippet('hero-cta', 'control', ['bold'], {
+      show: (variation) => `afficher ${variation}`,
+      keep: (control) => `garder ${control}`,
+    })
+    expect(code).toContain('// afficher bold')
+    expect(code).toContain('// garder control')
+  })
+})

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

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import {
+  heatmapDataLabel,
+  normalizePagePath,
+} from '../app/utils/heatmap'
+
+/** A `t` that shows which key and which plural form were asked for. */
+function t(key: string, named: Record<string, unknown> = {}, plural?: number) {
+  const name = key.split('.').at(-1)
+  if (name === 'and') {
+    return `${named.first} + ${named.second}`
+  }
+  return `${named.count} ${name}${plural === 1 ? '' : '[n]'}`
+}
+
+describe('heatmap helpers', () => {
+  it('reduces a typed path the way the tracker stores it', () => {
+    expect(normalizePagePath('demo/pricing')).toBe('/demo/pricing')
+    expect(normalizePagePath(' /demo/pricing?x=1#top ')).toBe('/demo/pricing')
+    expect(normalizePagePath('https://shop.example/cart')).toBe('/cart')
+    expect(normalizePagePath('   ')).toBeUndefined()
+  })
+
+  it('names what a reset deletes, snapshots only when there are some', () => {
+    expect(heatmapDataLabel({ events: 1, snapshots: 0 }, t, 'en-GB')).toBe(
+      '1 events',
+    )
+    expect(heatmapDataLabel({ events: 18, snapshots: 1 }, t, 'en-GB')).toBe(
+      '18 events[n] + 1 snapshots',
+    )
+  })
+})