@antelopejs/dms-marketing 0.6.1 → 0.7.0

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

@@ -0,0 +1,64 @@
+import { computed, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { useCopyDraft } from '../app/composables/useCopyDraft'
+
+/** A form as `useFormDirty` sees it: values against a baseline. */
+function form(initial: string) {
+  const value = ref(initial)
+  const baseline = ref(initial)
+  const dirty = computed(() => value.value !== baseline.value)
+  const markClean = () => {
+    baseline.value = value.value
+  }
+  const copy = useCopyDraft({ values: () => value.value, dirty, markClean })
+  return { value, dirty, copy }
+}
+
+describe('a form opened on a copy', () => {
+  it('shows the copy as a change to save, but holds no leave until edited', () => {
+    const { value, dirty, copy } = form('')
+    value.value = 'Copy of checkout'
+    copy.open()
+    expect(dirty.value).toBe(true)
+    expect(copy.unsaved.value).toBe(false)
+    value.value = 'Copy of checkout (B)'
+    expect(copy.unsaved.value).toBe(true)
+    value.value = 'Copy of checkout'
+    expect(copy.unsaved.value).toBe(false)
+  })
+
+  // QA m8: Cancel on a copy did nothing and the leave stayed held.
+  it('settles a cancelled copy, edits included: nothing holds the leave after', () => {
+    const { value, dirty, copy } = form('')
+    value.value = 'Copy of checkout'
+    copy.open()
+    value.value = 'Edited copy'
+    copy.settle()
+    expect(copy.isCopy.value).toBe(false)
+    expect(dirty.value).toBe(false)
+    expect(copy.unsaved.value).toBe(false)
+  })
+
+  // QA B09: a saved copy still held the leave, so its report never opened.
+  it('settles a saved copy: leaving to its report asks nothing', () => {
+    const { value, dirty, copy } = form('')
+    value.value = 'Copy of checkout'
+    copy.open()
+    value.value = 'Checkout (B)'
+    expect(copy.unsaved.value).toBe(true)
+    copy.settle()
+    expect(copy.isCopy.value).toBe(false)
+    expect(dirty.value).toBe(false)
+    expect(copy.unsaved.value).toBe(false)
+  })
+})
+
+describe('a form opened on a stored value', () => {
+  it('holds the leave exactly while dirty', () => {
+    const { value, copy } = form('Checkout')
+    expect(copy.isCopy.value).toBe(false)
+    expect(copy.unsaved.value).toBe(false)
+    value.value = 'Checkout v2'
+    expect(copy.unsaved.value).toBe(true)
+  })
+})

package/frontend-vue/tests/drift-dismissals.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { dismissDrift, driftDismissed } from '../app/utils/drift-dismissals'
+
+describe('dismissed drift warnings', () => {
+  it('stay dismissed for that page of that website only', () => {
+    expect(driftDismissed('site-a', '/pricing')).toBe(false)
+    dismissDrift('site-a', '/pricing')
+    expect(driftDismissed('site-a', '/pricing')).toBe(true)
+    expect(driftDismissed('site-a', '/')).toBe(false)
+    expect(driftDismissed('site-b', '/pricing')).toBe(false)
+  })
+})

package/frontend-vue/tests/fill-height.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import {
+  fillHeight,
+  MIN_FILL_HEIGHT,
+  trailingExtent,
+  type TrailingLevel,
+} from '../app/utils/fill-height'
+
+describe('the height the pages panes fill', () => {
+  it('is what the viewport leaves below their top and above what follows', () => {
+    // 1000 px window, panes from 290 px, a 40 px note and padding after them.
+    expect(fillHeight({ viewHeight: 1000, top: 290, trailing: 40 })).toBe(670)
+  })
+
+  it('grows and shrinks with the viewport alone', () => {
+    const at = (viewHeight: number) =>
+      fillHeight({ viewHeight, top: 274, trailing: 37 })
+    expect(at(900)).toBe(589)
+    expect(at(1100)).toBe(789)
+    expect(at(900)).toBe(589)
+  })
+
+  it('stops shrinking at its floor', () => {
+    expect(fillHeight({ viewHeight: 600, top: 290, trailing: 40 })).toBe(
+      MIN_FILL_HEIGHT,
+    )
+  })
+})
+
+describe('what the content lays out after the panes', () => {
+  it('is how far the following siblings reach, plus the closing padding', () => {
+    expect(
+      trailingExtent([
+        // The panes, then a note 16 px below them, 40 px high.
+        { bottom: 800, marginBottom: 0, following: [856], closing: 0 },
+        // Their block ends the content, which closes on 24 px of padding.
+        { bottom: 856, marginBottom: 0, following: [], closing: 24 },
+      ]),
+    ).toBe(80)
+  })
+
+  it('counts the bottom margin of a box nothing follows', () => {
+    expect(
+      trailingExtent([
+        { bottom: 500, marginBottom: 12, following: [], closing: 8 },
+      ]),
+    ).toBe(20)
+  })
+
+  it('ignores siblings laid out beside the box rather than after it', () => {
+    expect(
+      trailingExtent([
+        { bottom: 500, marginBottom: 0, following: [320], closing: 0 },
+      ]),
+    ).toBe(0)
+  })
+})
+
+/**
+ * An app shell, as the pages surface sits in it: a scroll viewport with
+ * 24 px of padding, a wrapper stretched to at least the viewport
+ * (`min-height: 100%`), a 250 px header, then the panes' block — the panes
+ * and a 40 px note 16 px below them.
+ */
+function shell(viewHeight: number, paneHeight: number): TrailingLevel[] {
+  const top = 274
+  const panesBottom = top + paneHeight
+  const blockBottom = panesBottom + 16 + 40
+  const wrapperBottom = Math.max(blockBottom, viewHeight - 24)
+  return [
+    {
+      bottom: panesBottom,
+      marginBottom: 0,
+      following: [blockBottom],
+      closing: 0,
+    },
+    { bottom: blockBottom, marginBottom: 0, following: [], closing: 0 },
+    { bottom: wrapperBottom, marginBottom: 0, following: [], closing: 24 },
+  ]
+}
+
+/** One measurement, as a resize triggers it: from the panes' current height. */
+function measure(viewHeight: number, paneHeight: number): number {
+  return fillHeight({
+    viewHeight,
+    top: 274,
+    trailing: trailingExtent(shell(viewHeight, paneHeight)),
+  })
+}
+
+describe('the panes in a shell that stretches its content', () => {
+  it('fill a fresh window', () => {
+    expect(measure(900, 0)).toBe(546)
+  })
+
+  it('grow with the window in one measurement', () => {
+    // The content is shorter than the grown viewport: the wrapper's empty
+    // space below the panes is not content after them.
+    expect(measure(1100, measure(900, 0))).toBe(746)
+  })
+
+  it('shrink with the window in one measurement', () => {
+    expect(measure(900, measure(1100, 0))).toBe(546)
+  })
+
+  it('settle at once: measuring again changes nothing', () => {
+    const height = measure(1100, 546)
+    expect(measure(1100, height)).toBe(height)
+  })
+})

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
   displayName,
   formatDuration,
+  formatRelativeTime,
   formatShortDate,
   formatSignedDelta,
   initials,
@@ -19,6 +20,19 @@ describe('formatting', () => {
     expect(formatDuration(3720)).toBe('1h 2m')
   })
 
+  it('never writes an event age in the future', () => {
+    const now = Date.UTC(2026, 9, 18, 12)
+    // The server's clock a few seconds ahead of the reader's.
+    expect(formatRelativeTime(now + 3_000, now, 'en-GB', 'short')).toBe('now')
+    expect(formatRelativeTime(now + 3_000, now, 'fr-FR', 'short')).toBe(
+      'maintenant',
+    )
+    expect(formatRelativeTime(now - 4_000, now, 'en-GB')).toBe('now')
+    expect(formatRelativeTime(now - 12_000, now, 'en-GB')).toBe(
+      '12 seconds ago',
+    )
+  })
+
   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')

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

@@ -5,9 +5,14 @@ import {
   splitSampleSize,
   templateSteps,
   variationSnippet,
+  withRequestedSplit,
+  DEFAULT_WINDOW_HOURS,
+  WINDOW_PRESET_HOURS,
   type FunnelDraftValues,
 } from '../app/utils/funnel-draft'
 import { sampleSizePerArm } from '../app/utils/sample-size'
+import en from '../i18n/locales/marketing-en-GB.json'
+import fr from '../i18n/locales/marketing-fr-FR.json'
 
 function draft(overrides: Partial<FunnelDraftValues> = {}): FunnelDraftValues {
   return {
@@ -68,6 +73,20 @@ describe('template links', () => {
   })
 })
 
+// QA B08: "Split into A/B test" opened a plain funnel with its split off.
+describe('a split requested by the link', () => {
+  it("turns a stored funnel's split on, and never off", () => {
+    expect(withRequestedSplit(draft({ split: false }), '1').split).toBe(true)
+    expect(withRequestedSplit(draft({ split: false }), undefined).split).toBe(
+      false,
+    )
+    expect(withRequestedSplit(draft({ split: true }), undefined).split).toBe(
+      true,
+    )
+    expect(withRequestedSplit(draft({ split: false }), ['1']).split).toBe(false)
+  })
+})
+
 describe('draft issues', () => {
   it('are empty for a valid funnel', () => {
     expect(draftIssues(draft(), false)).toEqual({})
@@ -192,3 +211,21 @@ describe('variation snippet', () => {
     expect(code).toContain('// garder control')
   })
 })
+
+describe('window presets', () => {
+  // QA m8: a preset read "Whole session" while the funnel saved "24 h".
+  it('label each preset with the hours it saves, in every locale', () => {
+    for (const messages of [en, fr]) {
+      const labels: Record<string, string> =
+        messages.page.marketing.builder.window_presets
+      expect(Object.keys(labels).map(Number)).toEqual([...WINDOW_PRESET_HOURS])
+      for (const hours of WINDOW_PRESET_HOURS) {
+        expect(labels[hours]?.replace(/\s/g, '')).toBe(`${hours}h`)
+      }
+    }
+  })
+
+  it('preselect the default window', () => {
+    expect(WINDOW_PRESET_HOURS).toContain(DEFAULT_WINDOW_HOURS)
+  })
+})

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
   heatmapDataLabel,
   normalizePagePath,
+  selectedPageRow,
 } from '../app/utils/heatmap'
 
 /** A `t` that shows which key and which plural form were asked for. */
@@ -29,4 +30,28 @@ describe('heatmap helpers', () => {
       '18 events[n] + 1 snapshots',
     )
   })
+
+  describe('selectedPageRow', () => {
+    const pricing = { path: '/pricing', pageviews: 42 }
+    const home = { path: '/', pageviews: 7 }
+
+    it('takes the selected path row from the list just read', () => {
+      expect(
+        selectedPageRow([home, { ...pricing, pageviews: 3 }], '/pricing', pricing),
+      ).toEqual({ path: '/pricing', pageviews: 3 })
+    })
+
+    it('keeps the row a filter hides from the list', () => {
+      expect(selectedPageRow([home], '/pricing', pricing)).toBe(pricing)
+    })
+
+    it('keeps nothing once dropped (another workspace or other days)', () => {
+      expect(selectedPageRow([home], '/pricing', undefined)).toBeUndefined()
+    })
+
+    it('never keeps the row of another path', () => {
+      expect(selectedPageRow([home], '/about', pricing)).toBeUndefined()
+      expect(selectedPageRow([home], undefined, pricing)).toBeUndefined()
+    })
+  })
 })

package/frontend-vue/tests/install-guide.test.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// vitest runs with the frontend module as its root.
+const SOURCE = readFileSync(
+  join(process.cwd(), 'app', 'components', 'InstallGuide.vue'),
+  'utf8',
+)
+
+/** The `:to` of the link whose label is the given i18n key. */
+function linkTargetOf(labelKey: string): string | undefined {
+  const link = new RegExp(
+    String.raw`:to="([^"]+)"[^>]*>\s*\{\{\s*t\('${labelKey.replaceAll('.', String.raw`\.`)}'\)`,
+  )
+  return link.exec(SOURCE)?.[1]
+}
+
+describe('InstallGuide', () => {
+  it("opens the added site's settings modal from step 1's Edit", () => {
+    expect(linkTargetOf('page.marketing.common.edit')).toBe(
+      'websitesLink(website.id)',
+    )
+  })
+})

package/frontend-vue/tests/marketing-reads.test.ts

@@ -2,6 +2,7 @@ import { createSSRApp, defineComponent, h, ref, toValue } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
+  useDashboardWorkspaces,
   useFunnelTemplates,
   useHeatmapCountRead,
   useMarketingContextRead,
@@ -152,13 +153,11 @@ describe('useMarketingNow', () => {
 })
 
 describe('the reads with triggers of their own', () => {
-  it('reads the context bar on its own clock, not with the page', () => {
-    useMarketingContextRead({ refreshInterval: 60_000 })
+  it('reads the context bar on its own triggers, on no clock of its own', () => {
+    useMarketingContextRead()
     const [context] = calls
-    expect(context?.options).toMatchObject({
-      refreshOnPageRefresh: false,
-      refreshInterval: 60_000,
-    })
+    expect(context?.options).toMatchObject({ refreshOnPageRefresh: false })
+    expect(context?.options).not.toHaveProperty('refreshInterval')
   })
 
   it('polls the connection check when asked to', () => {
@@ -180,6 +179,21 @@ describe('the reads with triggers of their own', () => {
   })
 })
 
+describe('the dashboard workspaces', () => {
+  // The pages panel grew a row after the first paint while the workspaces
+  // were read in the browser only.
+  it('are read with the page, server render included, once there is a site', () => {
+    const website = ref('')
+    useDashboardWorkspaces(website)
+    const [workspaces] = calls
+    expect(workspaces?.options.server).not.toBe(false)
+    expect(workspaces?.url()).toBeNull()
+    website.value = 'dashboard-site'
+    expect(workspaces?.url()).toBe('/api/marketing/stats/workspaces')
+    expect(query(workspaces)).toEqual({ website: 'dashboard-site' })
+  })
+})
+
 describe('the page preview', () => {
   it('reads the clicks in the browser only, once there is a site and a path', () => {
     const website = ref<string | undefined>(undefined)

package/frontend-vue/tests/page-snapshot.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { pageSnapshotBadge } from '../app/utils/page-snapshot'
+
+/** A `t` that shows which key, values and plural form were asked for. */
+function t(key: string, named: Record<string, unknown> = {}, plural?: number) {
+  const name = key.split('.').at(-1)
+  const values = Object.values(named).join(',')
+  return plural === undefined
+    ? `${name}(${values})`
+    : `${name}:${plural}(${values})`
+}
+
+const NOW = Date.UTC(2026, 9, 17, 15)
+const HOUR = 3_600_000
+
+describe('the snapshot mark of a pages row', () => {
+  it('says nothing while the site has snapshots off', () => {
+    expect(pageSnapshotBadge(undefined, NOW, t, 'en-GB')).toBeNull()
+  })
+
+  it('says a page has none, muted', () => {
+    expect(pageSnapshotBadge(null, NOW, t, 'en-GB')).toEqual({
+      icon: 'i-ph-camera-slash',
+      label: 'none()',
+      title: 'none_title()',
+      muted: true,
+    })
+  })
+
+  it('gives the age of the newest capture and names its layouts', () => {
+    const badge = pageSnapshotBadge(
+      {
+        capturedAt: NOW - 3 * HOUR,
+        layouts: ['desktop', 'phone'],
+        tooHeavy: false,
+      },
+      NOW,
+      t,
+      'fr-FR',
+    )
+    expect(badge).toEqual({
+      icon: 'i-ph-camera',
+      // Intl writes a no-break space before the unit.
+      label: new Intl.RelativeTimeFormat('fr-FR', { style: 'short' }).format(
+        -3,
+        'hour',
+      ),
+      title: 'title:2(17 oct.,layout_desktop(), layout_phone())',
+      muted: false,
+    })
+  })
+
+  it('tells a page too heavy to capture', () => {
+    const badge = pageSnapshotBadge(
+      { capturedAt: NOW, layouts: [], tooHeavy: true },
+      NOW,
+      t,
+      'en-GB',
+    )
+    expect(badge).toMatchObject({ icon: 'i-ph-file-x', label: 'too_heavy()' })
+  })
+})

package/frontend-vue/tests/record-crumb.test.ts

@@ -0,0 +1,43 @@
+import { nextTick, ref } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useRecordCrumb } from '../app/composables/useRecordCrumb'
+
+let labels: { path: string; label: string | undefined }[]
+
+beforeEach(() => {
+  labels = []
+  // The DMS's own: the label its header ends the breadcrumb with.
+  vi.stubGlobal('usePageRecordLabel', () => ({
+    setLabel: (path: string, label: string | undefined) =>
+      labels.push({ path, label }),
+  }))
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+// QA m13: the funnel report's breadcrumb stopped at "Funnel".
+describe('the record crumb', () => {
+  it("names the page's record once it is loaded, and follows it", async () => {
+    const name = ref<string | null>(null)
+    useRecordCrumb(() => name.value)
+    name.value = 'Checkout'
+    await nextTick()
+    name.value = 'Pricing to signup'
+    await nextTick()
+    expect(labels).toEqual([
+      { path: '/', label: undefined },
+      { path: '/', label: 'Checkout' },
+      { path: '/', label: 'Pricing to signup' },
+    ])
+  })
+
+  it("gives the page's own name back while no record is shown", async () => {
+    const name = ref<string | null>('Checkout')
+    useRecordCrumb(() => name.value)
+    name.value = null
+    await nextTick()
+    expect(labels.at(-1)).toEqual({ path: '/', label: undefined })
+  })
+})

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

@@ -16,7 +16,10 @@ const BACKEND_ADDRESSED = [
   'FunnelTemplates',
   'FunnelReport',
   'FunnelBuilder',
-  'WebsitesGrid',
+  'WebsiteCard',
+  'WebsiteSettings',
+  'WebsiteCreate',
+  'FirstRun',
   'InstallGuide',
   'FunnelStepsInput',
   'ExperimentInput',

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

@@ -7,6 +7,8 @@ import {
   installLink,
   overviewLink,
   pagesLink,
+  websiteSettingOf,
+  websitesLink,
   withWebsite,
 } from '../app/composables/useMarketingRoutes'
 
@@ -80,4 +82,23 @@ describe('module links', () => {
       '/modules/marketing/acquisition',
     )
   })
+
+  it('open the Websites page on a site setting', () => {
+    expect(websitesLink()).toBe('/modules/marketing/websites')
+    expect(websitesLink('site 1')).toBe(
+      '/modules/marketing/websites?record=site+1',
+    )
+    expect(websitesLink('site-1', 'snapshots')).toBe(
+      '/modules/marketing/websites?record=site-1&setting=snapshots',
+    )
+    // A setting without a site has no modal to open.
+    expect(websitesLink(null, 'snapshots')).toBe('/modules/marketing/websites')
+  })
+
+  it('read the setting to scroll to back from the Websites page query', () => {
+    expect(websiteSettingOf({})).toBeUndefined()
+    expect(websiteSettingOf({ setting: 'snapshots' })).toBe('snapshots')
+    expect(websiteSettingOf({ setting: 'other' })).toBeUndefined()
+    expect(websiteSettingOf({ setting: ['snapshots'] })).toBeUndefined()
+  })
 })

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

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  saveFunnel,
+  type MarketingFunnelInput,
+  type MarketingFunnelListItem,
+} from '../app/composables/useMarketingApi'
+
+const INPUT: MarketingFunnelInput = {
+  websiteId: 'acme-shop',
+  name: 'Checkout',
+  steps: [{ kind: 'url', value: '/cart' }],
+  conversionWindowHours: 24,
+  experiment: null,
+}
+
+// What interface-data-api 0.3 answers on `new`: the created row, not its key
+// in an array.
+const CREATED: MarketingFunnelListItem = {
+  _id: 'funnel-new',
+  websiteId: 'acme-shop',
+  name: 'Checkout',
+  steps: [{ kind: 'url', value: '/cart' }],
+  conversionWindowHours: 24,
+  experiment: null,
+}
+
+function fakeApi() {
+  return {
+    createFunnel: vi.fn(async () => CREATED),
+    updateFunnel: vi.fn(async () => CREATED),
+  }
+}
+
+describe('saving a funnel', () => {
+  it('answers the id of the row the insert created', async () => {
+    const api = fakeApi()
+    expect(await saveFunnel(api, INPUT)).toBe('funnel-new')
+    expect(api.updateFunnel).not.toHaveBeenCalled()
+  })
+
+  it('updates the definition it edits and answers its id', async () => {
+    const api = fakeApi()
+    expect(await saveFunnel(api, INPUT, 'funnel-1')).toBe('funnel-1')
+    expect(api.updateFunnel).toHaveBeenCalledWith('funnel-1', INPUT)
+    expect(api.createFunnel).not.toHaveBeenCalled()
+  })
+})

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

@@ -23,6 +23,9 @@ describe('front rules mirror the server', () => {
       server.MAX_FUNNEL_STEP_VALUE_LENGTH,
     )
     expect(draft.MAX_WINDOW_HOURS).toBe(server.MAX_CONVERSION_WINDOW_HOURS)
+    expect(draft.DEFAULT_WINDOW_HOURS).toBe(
+      server.DEFAULT_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(