@antelopejs/dms-marketing 0.6.1 → 0.7.1

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

@@ -0,0 +1,148 @@
+import { describe, expect, it } from 'vitest'
+import en from '../i18n/locales/marketing-en-GB.json'
+import fr from '../i18n/locales/marketing-fr-FR.json'
+import {
+  changesSnapshotOptions,
+  confirmSnapshotChange,
+  snapshotDiscardConfirmation,
+  snapshotOptionItems,
+} from '../app/utils/snapshot-options'
+
+/** A `t` that shows which key, count and plural form were asked for. */
+function t(key: string, named: Record<string, unknown> = {}, plural?: number) {
+  const name = key.split('.').at(-1)
+  return plural === undefined ? `${name}` : `${name}:${named.count}/${plural}`
+}
+
+describe('snapshot options', () => {
+  const site = { snapshotsEnabled: true, snapshotMaskText: false }
+
+  it('names the changes the server discards snapshots on', () => {
+    expect(changesSnapshotOptions(site, { snapshotsEnabled: false })).toBe(true)
+    expect(changesSnapshotOptions(site, { snapshotMaskText: true })).toBe(true)
+    // Unchanged values and absent keys discard nothing.
+    expect(changesSnapshotOptions(site, { snapshotsEnabled: true })).toBe(false)
+    expect(changesSnapshotOptions(site, { snapshotMaskText: false })).toBe(
+      false,
+    )
+    expect(changesSnapshotOptions(site, {})).toBe(false)
+    // A site saved before the mask existed has it off.
+    expect(
+      changesSnapshotOptions(
+        { snapshotsEnabled: true },
+        { snapshotMaskText: false },
+      ),
+    ).toBe(false)
+  })
+
+  it('asks with the count, or without it when it could not be read', () => {
+    expect(snapshotDiscardConfirmation(t, 12)).toMatchObject({
+      title: 'title',
+      description: 'description:12/12',
+      confirmLabel: 'confirm',
+      cancelLabel: 'cancel',
+      color: 'warning',
+    })
+    expect(snapshotDiscardConfirmation(t, null).description).toBe(
+      'description_unknown',
+    )
+  })
+
+  it('says in both languages that clicks and scroll depth are kept', () => {
+    const en_ = en.page.marketing.websites.discard_confirm
+    const fr_ = fr.page.marketing.websites.discard_confirm
+    for (const text of [en_.description, en_.description_unknown]) {
+      expect(text).toMatch(/Clicks and scroll depth are kept/)
+    }
+    for (const text of [fr_.description, fr_.description_unknown]) {
+      expect(text).toMatch(
+        /clics et la profondeur de défilement sont conservés/,
+      )
+    }
+    // Singular | plural, the count in the plural.
+    expect(en_.description.split(' | ')[1]).toContain('{count}')
+    expect(fr_.description.split(' | ')[1]).toContain('{count}')
+  })
+})
+
+describe('the heatmap menu snapshot checkboxes', () => {
+  const site = { snapshotsEnabled: true, snapshotMaskText: false }
+
+  /** The page's flow, as PagePreview wires it: ask, then save or not. */
+  function menu(
+    website: { snapshotsEnabled: boolean; snapshotMaskText: boolean },
+    answer: boolean,
+    count: number | null = 3,
+  ) {
+    const asked: string[] = []
+    const saved: Array<Record<string, boolean>> = []
+    const settled: Array<Promise<void>> = []
+    const items = snapshotOptionItems(
+      website,
+      (patch) =>
+        void settled.push(
+          confirmSnapshotChange(website, patch, {
+            count: async () => count,
+            confirm: async (options) => {
+              asked.push(options.title)
+              return answer
+            },
+            t,
+          }).then((go) => void (go && saved.push(patch))),
+        ),
+      t,
+    )
+    return { items, asked, saved, settled }
+  }
+
+  it('asks before "Mask all text" and saves nothing on Cancel', async () => {
+    const { items, asked, saved, settled } = menu(site, false)
+    const mask = items[1]!
+    expect(mask.checked).toBe(false)
+    mask.onUpdateChecked(true)
+    await Promise.all(settled)
+    expect(asked).toEqual(['title'])
+    expect(saved).toEqual([])
+    // Rebuilt from the website, which nothing changed: still unchecked.
+    expect(snapshotOptionItems(site, () => {}, t)[1]!.checked).toBe(false)
+  })
+
+  it('asks even when the site holds no snapshot yet', async () => {
+    const { items, asked, saved, settled } = menu(site, true, 0)
+    items[1]!.onUpdateChecked(true)
+    items[0]!.onUpdateChecked(false)
+    await Promise.all(settled)
+    expect(asked).toEqual(['title_none', 'title_none'])
+    expect(saved).toEqual([
+      { snapshotMaskText: true },
+      { snapshotsEnabled: false },
+    ])
+  })
+
+  it('turns snapshots on without asking when there are none', async () => {
+    const off = { snapshotsEnabled: false, snapshotMaskText: false }
+    const { items, asked, saved, settled } = menu(off, false, 0)
+    expect(items[1]!.disabled).toBe(true)
+    items[0]!.onUpdateChecked(true)
+    await Promise.all(settled)
+    expect(asked).toEqual([])
+    expect(saved).toEqual([{ snapshotsEnabled: true }])
+  })
+
+  it('asks without a number when the count fails', async () => {
+    let description = ''
+    await confirmSnapshotChange(
+      site,
+      { snapshotMaskText: true },
+      {
+        count: () => Promise.reject(new Error('offline')),
+        confirm: async (options) => {
+          description = options.description
+          return false
+        },
+        t,
+      },
+    )
+    expect(description).toBe('description_unknown')
+  })
+})

package/frontend-vue/tests/snapshot-scroll-root.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+import {
+  unrollScrollRoot,
+  type UnrollElement,
+  type UnrollStyle,
+} from '../app/utils/snapshotScrollRoot'
+
+interface FakeElement extends UnrollElement {
+  name: string
+  parentElement: FakeElement | null
+  computed: UnrollStyle
+  set: Record<string, string>
+}
+
+function element(
+  name: string,
+  parent: FakeElement | null,
+  computed: Partial<UnrollStyle> = {},
+): FakeElement {
+  const set: Record<string, string> = {}
+  return {
+    name,
+    parentElement: parent,
+    computed: {
+      position: 'static',
+      overflowX: 'visible',
+      display: 'block',
+      flexDirection: 'row',
+      ...computed,
+    },
+    set,
+    style: {
+      setProperty(property, value, priority) {
+        expect(priority).toBe('important')
+        set[property] = value
+      },
+    },
+  }
+}
+
+describe('snapshot scroll root', () => {
+  // The dashboard shape: a fixed shell, a sidebar row, a column panel whose
+  // body scrolls.
+  const html = element('html', null)
+  const body = element('body', html, { overflowX: 'hidden' })
+  const shell = element('shell', body, {
+    position: 'fixed',
+    overflowX: 'hidden',
+    display: 'flex',
+  })
+  const panel = element('panel', shell, {
+    display: 'flex',
+    flexDirection: 'column',
+  })
+  const scroller = element('scroller', panel, { overflowX: 'hidden' })
+  unrollScrollRoot(scroller, (node) => node.computed)
+
+  it('lets the scroll root and every ancestor grow with the content', () => {
+    for (const node of [scroller, panel, shell, body, html]) {
+      expect(node.set.height, node.name).toBe('auto')
+      expect(node.set['max-height'], node.name).toBe('none')
+      expect(node.set['overflow-y'], node.name).toBe('visible')
+    }
+  })
+
+  it('keeps a horizontal clip without making a scroll container', () => {
+    expect(scroller.set['overflow-x']).toBe('clip')
+    expect(body.set['overflow-x']).toBe('clip')
+    expect(panel.set['overflow-x']).toBeUndefined()
+  })
+
+  it('puts a fixed shell back in the document, unpinned at the bottom', () => {
+    expect(shell.set.position).toBe('absolute')
+    expect(shell.set.bottom).toBe('auto')
+    expect(panel.set.position).toBeUndefined()
+  })
+
+  it('touches the flex basis in a column only', () => {
+    expect(scroller.set['flex-basis']).toBe('auto')
+    expect(scroller.set['flex-shrink']).toBe('0')
+    // The panel is an item of a row: its basis is a width.
+    expect(panel.set['flex-basis']).toBeUndefined()
+  })
+})

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

@@ -20,7 +20,11 @@ export interface DmsFrontendSdk {
     setup: DmsPluginSetup,
     options?: { clientOnly?: boolean },
   ) => void
-  registerMiddleware: (name: string, handler: unknown) => void
+  registerMiddleware: (
+    name: string,
+    handler: unknown,
+    options?: { global?: boolean },
+  ) => void
   provide: (key: string, value: unknown) => void
   use: (plugin: Plugin) => void
 }

package/frontend-vue/tests/top-list-tabs.test.ts

@@ -0,0 +1,158 @@
+import { createSSRApp, defineComponent, h, onServerPrefetch, ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { beforeAll, describe, expect, it } from 'vitest'
+
+/**
+ * The overview top lists as a server renders them: with their data, the
+ * rows of the first tab (a watcher never runs there once data lands, so
+ * the active tab cannot come from one); without, a skeleton the size of a
+ * full card.
+ */
+
+interface ChartState {
+  data: unknown
+  isLoading: boolean
+  error: unknown
+}
+
+let chart: ChartState = { data: null, isLoading: false, error: null }
+
+const globals = globalThis as Record<string, unknown>
+
+beforeAll(() => {
+  // As `useAsyncData` on a server: the answer lands in `serverPrefetch`,
+  // after setup, before the render.
+  globals.useChartFetch = () => {
+    const data = ref<unknown>(null)
+    const isLoading = ref(true)
+    const error = ref<unknown>(null)
+    onServerPrefetch(async () => {
+      data.value = chart.data
+      isLoading.value = chart.isLoading
+      error.value = chart.error
+    })
+    return { data, isLoading, error, refresh: async () => {} }
+  }
+  globals.useTranslation = () => ({ processI18n: (key: string) => key })
+})
+
+/** An auto-import the template reads: an app global, as Nuxt provides it. */
+const formatPercentage = (value: number) => `${Math.round(value * 100)}%`
+
+const slotStub = (tag: string) =>
+  defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { slots, attrs }) =>
+      () =>
+        h(tag, { class: attrs.class }, [
+          String(attrs.title ?? attrs.label ?? ''),
+          slots.default?.(),
+        ]),
+  })
+
+const STUBS = {
+  DmsEyebrow: slotStub('p'),
+  DmsEmptyState: slotStub('div'),
+  DmsStatusPill: slotStub('span'),
+  DmsAutoLink: slotStub('a'),
+  UTabs: slotStub('div'),
+  UButton: slotStub('button'),
+  UIcon: slotStub('i'),
+  USkeleton: defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { attrs }) =>
+      () =>
+        h('div', { class: ['skeleton', attrs.class] }),
+  }),
+}
+
+async function render(state: ChartState): Promise<string> {
+  chart = state
+  const { default: TopListTabs } =
+    await import('../app/components/TopListTabs.vue')
+  const app = createSSRApp(TopListTabs, {
+    fetchUrl: '/api/marketing/blocks/tops?group=content',
+    eyebrow: 'Content',
+    valueLabel: 'Views',
+  })
+  app.config.globalProperties.formatPercentage = formatPercentage
+  for (const [name, component] of Object.entries(STUBS)) {
+    app.component(name, component)
+  }
+  return renderToString(app)
+}
+
+const TABS = {
+  tabs: [
+    {
+      id: 'pages',
+      label: 'Top pages',
+      labelKind: 'raw',
+      total: 3,
+      items: [
+        { id: '/home', title: '/home', value: 2, share: 66.7 },
+        { id: '/pricing', title: '/pricing', value: 1, share: 33.3 },
+      ],
+    },
+    {
+      id: 'entry',
+      label: 'Entry pages',
+      labelKind: 'raw',
+      total: 1,
+      items: [{ id: '/blog', title: '/blog', value: 1, share: 100 }],
+    },
+  ],
+}
+
+function count(html: string, text: string): number {
+  return html.split(text).length - 1
+}
+
+describe('TopListTabs server render', () => {
+  it('draws the first tab’s rows with the page, never its empty state', async () => {
+    const html = await render({ data: TABS, isLoading: false, error: null })
+    expect(html).toContain('/home')
+    expect(html).toContain('/pricing')
+    expect(html).not.toContain('/blog')
+    expect(html).not.toContain('page.marketing.overview.groups.empty')
+    expect(html).not.toContain('skeleton')
+  })
+
+  it('keeps the rows on screen while a newer read loads', async () => {
+    const html = await render({ data: TABS, isLoading: true, error: null })
+    expect(html).toContain('/home')
+    expect(html).not.toContain('skeleton')
+  })
+
+  it('draws a full card of row-sized skeletons while nothing is there yet', async () => {
+    const html = await render({ data: null, isLoading: true, error: null })
+    // Eight rows (the route's limit), each on a list row's grid and padding.
+    expect(
+      count(
+        html,
+        'grid grid-cols-[1.5rem_minmax(0,1fr)_auto_3rem] items-center gap-x-3 px-4 py-2',
+      ),
+    ).toBe(8)
+    // The label line keeps a row's text height, its share bar under it.
+    expect(count(html, 'flex h-[19.5px] items-center')).toBe(8)
+    expect(count(html, 'mt-1 h-0.5')).toBe(8)
+    // The tab strip's place, at a tab's height, never wrapping the header.
+    expect(count(html, 'class="px-2 py-3"')).toBe(3)
+    expect(html).toContain(
+      'overflow-hidden sm:order-none sm:mx-0 sm:flex-1 sm:basis-0',
+    )
+  })
+
+  it('shows a failed read as an error, not as a skeleton or an empty list', async () => {
+    const html = await render({
+      data: null,
+      isLoading: false,
+      error: new Error('down'),
+    })
+    expect(html).toContain('page.marketing.common.load_error')
+    expect(html).not.toContain('skeleton')
+    expect(html).not.toContain('page.marketing.overview.groups.empty')
+  })
+})

package/frontend-vue/tests/website-card.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+import { websiteCardOf } from '../app/utils/website-card'
+import {
+  WEBSITE_LIVE_WINDOW_MS,
+  websiteDisplayState,
+} from '../app/utils/website-state'
+
+/** A row as the websites table lists it: stored fields, card merged in. */
+function listedRow(overrides: Record<string, unknown> = {}) {
+  return {
+    _id: 'site-1',
+    name: 'Shop',
+    domain: 'shop.example.com',
+    trackingEnabled: true,
+    snapshotsEnabled: true,
+    createdAt: Date.UTC(2026, 8, 1),
+    id: 'site-1',
+    state: 'live',
+    lastActivityAt: Date.UTC(2026, 9, 17),
+    extraDomains: ['staging.example.com'],
+    snapshotMaskText: true,
+    sessions: 120,
+    pages: 14,
+    funnels: 2,
+    snapshots: 5,
+    sampleRate: 0.25,
+    rejected: [{ hostname: 'evil.test', count: 3, lastAt: 1 }],
+    ...overrides,
+  }
+}
+
+describe('websiteCardOf', () => {
+  it('reads a listed row into the card it draws', () => {
+    expect(websiteCardOf(listedRow())).toEqual({
+      id: 'site-1',
+      name: 'Shop',
+      domain: 'shop.example.com',
+      state: 'live',
+      lastActivityAt: Date.UTC(2026, 9, 17),
+      extraDomains: ['staging.example.com'],
+      snapshotsEnabled: true,
+      snapshotMaskText: true,
+      createdAt: Date.UTC(2026, 8, 1),
+      sessions: 120,
+      pages: 14,
+      funnels: 2,
+      snapshots: 5,
+      sampleRate: 0.25,
+      rejected: [{ hostname: 'evil.test', count: 3, lastAt: 1 }],
+      dashboard: false,
+    })
+  })
+
+  it('takes the id of the row and reads an ISO date', () => {
+    const card = websiteCardOf(
+      listedRow({ id: undefined, createdAt: '2026-09-01T00:00:00.000Z' }),
+    )
+    expect(card.id).toBe('site-1')
+    expect(card.createdAt).toBe(Date.UTC(2026, 8, 1))
+  })
+
+  it('defaults a row read without its card', () => {
+    const card = websiteCardOf({
+      _id: 'site-2',
+      name: 'Blog',
+      domain: 'blog.example.com',
+      trackingEnabled: false,
+    })
+    expect(card).toMatchObject({
+      id: 'site-2',
+      state: 'paused',
+      lastActivityAt: null,
+      extraDomains: [],
+      snapshotsEnabled: false,
+      snapshotMaskText: false,
+      sessions: 0,
+      snapshots: 0,
+      rejected: [],
+      dashboard: false,
+    })
+    expect(websiteCardOf({ _id: 'site-3' }).state).toBe('waiting')
+  })
+
+  it("flags the dashboard's own site only when the backend says so", () => {
+    expect(websiteCardOf(listedRow({ dashboard: true })).dashboard).toBe(true)
+    expect(websiteCardOf(listedRow({ dashboard: 'yes' })).dashboard).toBe(false)
+  })
+
+  it('drops what is not a host or a refused source', () => {
+    const card = websiteCardOf(
+      listedRow({
+        extraDomains: ['a.example.com', 3, null],
+        rejected: [{ hostname: 'b.test', count: 1, lastAt: 1 }, 'x', null],
+        sessions: Number.NaN,
+      }),
+    )
+    expect(card.extraDomains).toEqual(['a.example.com'])
+    expect(card.rejected).toHaveLength(1)
+    expect(card.sessions).toBe(0)
+  })
+})
+
+// QA m10: a card read off the table shows the same state as everywhere else,
+// not the backend's sticky \`live\`.
+describe('a listed card', () => {
+  const lastActivityAt = Date.UTC(2026, 9, 17, 12)
+
+  it('is not shown live once its last event is over 5 minutes old', () => {
+    const card = websiteCardOf(listedRow({ lastActivityAt }))
+    const later = lastActivityAt + WEBSITE_LIVE_WINDOW_MS + 1
+    expect(card.state).toBe('live')
+    expect(websiteDisplayState(card, later)).toBe('idle')
+  })
+
+  it('is shown live while its last event is recent', () => {
+    const card = websiteCardOf(listedRow({ lastActivityAt }))
+    expect(websiteDisplayState(card, lastActivityAt + 60_000)).toBe('live')
+  })
+})

package/frontend-vue/tests/website-purge.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import type { MarketingWebsiteDeletionImpact } from '../app/composables/useMarketingApi'
+import {
+  websitePurgeImpact,
+  websitePurgeResult,
+} from '../app/utils/website-purge'
+
+const t = (key: string, named?: Record<string, unknown>) =>
+  named ? `${key} ${JSON.stringify(named)}` : key
+
+const IMPACT: MarketingWebsiteDeletionImpact = {
+  sessions: 1200,
+  pageviews: 3400,
+  since: null,
+  funnels: 2,
+  snapshots: 3,
+  heatmapEvents: 560,
+}
+
+describe('a purge confirmation', () => {
+  it('counts the clicks, scrolls and snapshots of the heatmaps, and keeps the traffic', () => {
+    const lines = websitePurgeImpact('heatmaps', IMPACT, t, 'en-GB')
+    expect(lines.map((line) => line.count)).toEqual(['560', '3', undefined])
+    expect(lines.at(-1)?.label).toBe(
+      'page.marketing.websites.purge.kept_traffic',
+    )
+  })
+
+  it('counts the traffic too for all the data, since the oldest day', () => {
+    const lines = websitePurgeImpact(
+      'all',
+      { ...IMPACT, since: Date.UTC(2026, 0, 5) },
+      t,
+      'en-GB',
+    )
+    expect(lines.map((line) => line.count)).toEqual([
+      '1,200',
+      '3,400',
+      '560',
+      '3',
+      undefined,
+    ])
+    expect(lines[0]?.label).toContain(
+      'page.marketing.websites.delete.sessions_since',
+    )
+    expect(lines.at(-1)?.label).toBe('page.marketing.websites.purge.kept')
+  })
+
+  it('says what a purge deleted, in its scope', () => {
+    const deleted = {
+      events: 9,
+      sessions: 2,
+      days: 1,
+      snapshots: 0,
+      imports: 0,
+    }
+    expect(
+      websitePurgeResult(
+        { purged: 'site', scope: 'heatmaps', deleted },
+        t,
+        'en-GB',
+      ),
+    ).toBe(
+      'page.marketing.websites.purge.done_heatmaps_counts {"events":"9","snapshots":"0"}',
+    )
+    expect(
+      websitePurgeResult({ purged: 'site', scope: 'all', deleted }, t, 'en-GB'),
+    ).toContain('"sessions":"2"')
+  })
+})