@antelopejs/dms-mailing 0.6.0 → 0.7.0

package/frontend-vue/i18n/locales/mailing-en-GB.json

@@ -437,11 +437,13 @@
 		"metrics": {
 			"bounces": "Bounces",
 			"click_rate": "Click rate",
+			"compared": "Compared period",
 			"deliverability": "Deliverability",
 			"domain_sends": "Domains with 5 or more deliveries",
 			"domains": "Open rate by domain",
 			"open_rate": "Open rate",
 			"previous": "Previous period",
+			"previous_year": "Previous year",
 			"ranking": "Best opened templates",
 			"sends": "Sends",
 			"unsubscribes": "Unsubscribes",
@@ -532,7 +534,8 @@
 					"send_again": "Send again…",
 					"copy_address": "Copy the address"
 				},
-				"position": "Send {index} of {total} shown",
+				"heading": "{recipientEmail} · {templateSlug}",
+				"position": "Send {index} of {total}",
 				"replayed_by": "Sent again on {date}",
 				"replay_of": "This send repeats an earlier one",
 				"see_send": "See the send",
@@ -619,8 +622,9 @@
 				"latency_detail": "API call to {provider}",
 				"latency_detail_generic": "API call to the provider",
 				"joined": "{left} · {right}",
-				"delta_up": "▲ {delta}",
-				"delta_down": "▼ {delta}",
+				"versus": "vs {previous}",
+				"delta_up_versus": "▲ {delta} vs {previous}",
+				"delta_down_versus": "▼ {delta} vs {previous}",
 				"rate": "{rate}",
 				"latency_ms": "{value} ms",
 				"latency_s": "{value} s",
@@ -999,9 +1003,6 @@
 				"archived": "Archived",
 				"attention": "Needs attention"
 			},
-			"filters": {
-				"category": "Category"
-			},
 			"footer": {
 				"count": "{count} template | {count} templates",
 				"hint": "Open a template to edit it · ↵ open · T test send"
@@ -1075,8 +1076,12 @@
 				"description": "The overview dashboard, or the setup steps until the workspace can send."
 			},
 			"page_header": {
-				"name": "Provider and period",
-				"description": "The provider state and the period switch in the page header."
+				"name": "Page toolbar",
+				"description": "The provider state, the last update, live mode and the period switch at the top of the page."
+			},
+			"provider_pill": {
+				"name": "Provider state",
+				"description": "The pill in the page toolbar saying whether a provider carries the mail."
 			},
 			"settings_form": {
 				"name": "Mailing settings",
@@ -1194,15 +1199,8 @@
 			"current_sender": "Sender as set in the settings today",
 			"meant_for": "The e-mail meant for {name}"
 		},
-		"period": {
-			"short": {
-				"last_hour": "1H",
-				"last_24h": "24H",
-				"today": "1D",
-				"last_7_days": "7D",
-				"last_30_days": "30D",
-				"last_90_days": "90D"
-			}
+		"live": {
+			"new_sends": "{count} new send | {count} new sends"
 		},
 		"page_header": {
 			"provider_connected": "{name} connected",
@@ -1266,11 +1264,13 @@
 			"error_title": "The funnel could not be loaded",
 			"retry": "Try again",
 			"untracked": "Delivery is not measured: connect the provider’s webhook to follow the funnel.",
-			"no_loss": "No e-mail was lost between the steps."
+			"no_loss": "No e-mail was lost between the steps.",
+			"compared_count": "vs {value} in the compared period"
 		},
 		"common": {
 			"cancel": "Cancel",
-			"on_date": "{date}"
+			"on_date": "{date}",
+			"preview_unavailable": "Preview unavailable"
 		},
 		"duplicate": {
 			"title": "Duplicate template",
@@ -1389,15 +1389,6 @@
 			"boolean": "Yes / no",
 			"array": "List"
 		},
-		"categories": {
-			"defaults": {
-				"orders": "Orders",
-				"account": "Account & access",
-				"billing": "Billing",
-				"marketing": "Marketing",
-				"forms": "Forms"
-			}
-		},
 		"starters": {
 			"names": {
 				"order-confirmed": "Order confirmation",

package/frontend-vue/i18n/locales/mailing-fr-FR.json

@@ -437,11 +437,13 @@
 		"metrics": {
 			"bounces": "Rebonds",
 			"click_rate": "Taux de clic",
+			"compared": "Période comparée",
 			"deliverability": "Délivrabilité",
 			"domain_sends": "Domaines avec 5 distributions ou plus",
 			"domains": "Taux d’ouverture par domaine",
 			"open_rate": "Taux d’ouverture",
 			"previous": "Période précédente",
+			"previous_year": "Année précédente",
 			"ranking": "Modèles les plus ouverts",
 			"sends": "Envois",
 			"unsubscribes": "Désinscriptions",
@@ -532,7 +534,8 @@
 					"send_again": "Renvoyer…",
 					"copy_address": "Copier l’adresse"
 				},
-				"position": "Envoi {index} sur {total} affichés",
+				"heading": "{recipientEmail} · {templateSlug}",
+				"position": "Envoi {index} sur {total}",
 				"replayed_by": "Renvoyé le {date}",
 				"replay_of": "Cet envoi répète un envoi précédent",
 				"see_send": "Voir l’envoi",
@@ -619,8 +622,9 @@
 				"latency_detail": "Appel API à {provider}",
 				"latency_detail_generic": "Appel API au fournisseur",
 				"joined": "{left} · {right}",
-				"delta_up": "▲ {delta}",
-				"delta_down": "▼ {delta}",
+				"versus": "vs {previous}",
+				"delta_up_versus": "▲ {delta} vs {previous}",
+				"delta_down_versus": "▼ {delta} vs {previous}",
 				"rate": "{rate}",
 				"latency_ms": "{value} ms",
 				"latency_s": "{value} s",
@@ -999,9 +1003,6 @@
 				"archived": "Archivés",
 				"attention": "À revoir"
 			},
-			"filters": {
-				"category": "Catégorie"
-			},
 			"footer": {
 				"count": "aucun modèle | {count} modèle | {count} modèles",
 				"hint": "Ouvrez un modèle pour le modifier · ↵ ouvrir · T envoi de test"
@@ -1075,8 +1076,12 @@
 				"description": "Le tableau de bord, ou les étapes de configuration tant que l’espace de travail ne peut pas envoyer."
 			},
 			"page_header": {
-				"name": "Fournisseur et période",
-				"description": "L’état du fournisseur et le choix de période dans l’en-tête de page."
+				"name": "Barre de page",
+				"description": "L’état du fournisseur, la dernière mise à jour, le mode direct et le choix de la période en haut de la page."
+			},
+			"provider_pill": {
+				"name": "État du fournisseur",
+				"description": "La pastille de la barre de page qui dit si un fournisseur achemine les e-mails."
 			},
 			"settings_form": {
 				"name": "Réglages Mailing",
@@ -1194,15 +1199,8 @@
 			"current_sender": "Expéditeur actuel des réglages",
 			"meant_for": "L’e-mail destiné à {name}"
 		},
-		"period": {
-			"short": {
-				"last_hour": "1 h",
-				"last_24h": "24 h",
-				"today": "1 j",
-				"last_7_days": "7 j",
-				"last_30_days": "30 j",
-				"last_90_days": "90 j"
-			}
+		"live": {
+			"new_sends": "{count} nouvel envoi | {count} nouvel envoi | {count} nouveaux envois"
 		},
 		"page_header": {
 			"provider_connected": "{name} connecté",
@@ -1266,11 +1264,13 @@
 			"error_title": "Impossible de charger l’entonnoir",
 			"retry": "Réessayer",
 			"untracked": "La distribution n’est pas mesurée : branchez le webhook du fournisseur pour suivre l’entonnoir.",
-			"no_loss": "Aucun e-mail perdu entre les étapes."
+			"no_loss": "Aucun e-mail perdu entre les étapes.",
+			"compared_count": "vs {value} sur la période comparée"
 		},
 		"common": {
 			"cancel": "Annuler",
-			"on_date": "le {date}"
+			"on_date": "le {date}",
+			"preview_unavailable": "Aperçu indisponible"
 		},
 		"duplicate": {
 			"title": "Dupliquer le modèle",
@@ -1389,15 +1389,6 @@
 			"boolean": "Oui / non",
 			"array": "Liste"
 		},
-		"categories": {
-			"defaults": {
-				"orders": "Commandes",
-				"account": "Compte et accès",
-				"billing": "Facturation",
-				"marketing": "Marketing",
-				"forms": "Formulaires"
-			}
-		},
 		"starters": {
 			"names": {
 				"order-confirmed": "Confirmation de commande",

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
 	"license": "Apache-2.0",
 	"packageManager": "pnpm@10.2.0",
 	"engines": {
-		"@antelopejs/dms-frontend": ">=0.6.3 <0.7.0"
+		"@antelopejs/dms-frontend": ">=0.8.0 <0.9.0"
 	},
 	"scripts": {
 		"format": "prettier --write .",

package/frontend-vue/tests/categories-input.test.ts

@@ -10,17 +10,11 @@ import {
 	type Mounted,
 } from './helpers/nuxt-globals'
 import { stubApiData, type ApiDataStub } from './helpers/api-data'
-import type { TemplateCategory } from '../app/types/mailing'
+import type { StoredCategory } from '../app/types/mailing'
 
-vi.mock('../app/composables/useLocalizedDefaults', () => ({
-	useLocalizedDefaults: () => ({
-		categories: (list: TemplateCategory[]) => list,
-	}),
-}))
-
-const CATEGORIES: TemplateCategory[] = [
-	{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
-	{ id: 'marketing', label: 'Marketing', icon: 'i-ph-sparkle' },
+const CATEGORIES: StoredCategory[] = [
+	{ id: 'orders', label: { en: 'Orders' }, icon: 'i-ph-package' },
+	{ id: 'marketing', label: { en: 'Marketing' }, icon: 'i-ph-sparkle' },
 ]
 const ROW_ERROR = 'dms_mailing.settings.categories.label_required'
 

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

@@ -14,14 +14,15 @@ import {
 	slugifyId,
 	toCategoryOption,
 	toStoredCategories,
+	toEditableRows,
 	toStoredCategory,
 	uniqueId,
 	type EditableCategory,
 } from '../app/utils/categories'
-import type { TemplateCategory } from '../app/types/mailing'
+import type { StoredCategory } from '../app/types/mailing'
 
-const CATEGORIES: TemplateCategory[] = [
-	{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
+const CATEGORIES: StoredCategory[] = [
+	{ id: 'orders', label: { en: 'Orders' }, icon: 'i-ph-package' },
 ]
 
 describe('slugifyId', () => {
@@ -89,22 +90,56 @@ const row = (patch: Partial<EditableCategory>): EditableCategory => ({
 	label: '',
 	icon: 'i-ph-package',
 	isNew: false,
+	labels: {},
 	...patch,
 })
 
 describe('toStoredCategories', () => {
 	it('keeps saved ids even after a rename', () => {
 		expect(
-			toStoredCategories([row({ id: 'orders', label: 'Purchases' })]),
-		).toEqual([{ id: 'orders', label: 'Purchases', icon: 'i-ph-package' }])
+			toStoredCategories([row({ id: 'orders', label: 'Purchases' })], 'en'),
+		).toEqual([
+			{ id: 'orders', label: { en: 'Purchases' }, icon: 'i-ph-package' },
+		])
 	})
 
-	it('derives a new row id from its whole label, unique among the others', () => {
-		const stored = toStoredCategories([
-			row({ id: 'billing', label: 'Billing' }),
-			row({ label: 'Billing', isNew: true }),
-			row({ label: 'Été', isNew: true }),
+	it('shows each label in the language edited and writes it back there only', () => {
+		const stored: StoredCategory[] = [
+			{
+				id: 'orders',
+				label: { en: 'Orders', fr: 'Commandes' },
+				icon: 'i-ph-package',
+			},
+			{ id: 'billing', label: { en: 'Billing' }, icon: 'i-ph-file-text' },
+		]
+		let next = 0
+		const rows = toEditableRows(stored, 'fr', () => `row-${next++}`)
+		expect(rows.map((entry) => entry.label)).toEqual(['Commandes', 'Billing'])
+		rows[0]!.label = 'Achats'
+		rows[1]!.label = 'Facturation'
+		expect(toStoredCategories(rows, 'fr')).toEqual([
+			{
+				id: 'orders',
+				label: { en: 'Orders', fr: 'Achats' },
+				icon: 'i-ph-package',
+			},
+			{
+				id: 'billing',
+				label: { en: 'Billing', fr: 'Facturation' },
+				icon: 'i-ph-file-text',
+			},
 		])
+	})
+
+	it('derives a new row id from its whole label, unique among the others', () => {
+		const stored = toStoredCategories(
+			[
+				row({ id: 'billing', label: 'Billing' }),
+				row({ label: 'Billing', isNew: true }),
+				row({ label: 'Été', isNew: true }),
+			],
+			'en',
+		)
 		expect(stored.map((category) => category.id)).toEqual([
 			'billing',
 			'billing-2',
@@ -113,13 +148,16 @@ describe('toStoredCategories', () => {
 	})
 
 	it('keeps a row without a label, for the server to name, and fills a missing icon', () => {
-		const stored = toStoredCategories([
-			row({ label: '   ', isNew: true }),
-			row({ label: '!!!', isNew: true, icon: '' }),
-		])
+		const stored = toStoredCategories(
+			[
+				row({ label: '   ', isNew: true }),
+				row({ label: '!!!', isNew: true, icon: '' }),
+			],
+			'en',
+		)
 		expect(stored).toEqual([
-			{ id: 'category', label: '', icon: 'i-ph-package' },
-			{ id: 'category-2', label: '!!!', icon: 'i-ph-folder' },
+			{ id: 'category', label: { en: '' }, icon: 'i-ph-package' },
+			{ id: 'category-2', label: { en: '!!!' }, icon: 'i-ph-folder' },
 		])
 	})
 })
@@ -151,7 +189,7 @@ describe('moveRow', () => {
 })
 
 describe('category moves', () => {
-	const gone = { id: 'gone', label: 'Gone', icon: 'i-ph-gift' }
+	const gone = { id: 'gone', label: { en: 'Gone' }, icon: 'i-ph-gift' }
 
 	it('hands the form the kept categories, then the moved ones', () => {
 		const entries = withMoves(CATEGORIES, [

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

@@ -1,8 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import {
-	describeCondition,
-	evaluateCondition,
-} from '../app/utils/conditions'
+import { describeCondition, evaluateCondition } from '../app/utils/conditions'
 
 describe('conditions', () => {
 	it('describes with translated operator labels', () => {

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

@@ -114,4 +114,31 @@ describe('FunnelCard', () => {
 		expect(host.querySelectorAll('[data-funnel-untracked]')).toHaveLength(3)
 		expect(host.textContent).toContain('dms_mailing.funnel_card.untracked')
 	})
+
+	it('adds the change of each step while the toolbar compares', async () => {
+		chart.data.value = {
+			steps: [
+				{ ...funnelStep('sent', 30), previousCount: 20, delta: 50 },
+				{ ...funnelStep('delivered', 30), previousCount: 0 },
+			],
+		}
+		const { host } = mount(FunnelCard, {}, GLOBALS)
+		await flush()
+
+		const deltas = host.querySelectorAll('[data-funnel-delta]')
+		expect(deltas).toHaveLength(2)
+		expect(deltas[0]?.textContent?.trim()).toBe('▲ 50%')
+		expect(deltas[0]?.getAttribute('title')).toContain(
+			'dms_mailing.funnel_card.compared_count',
+		)
+		expect(deltas[1]?.textContent?.trim()).toBe('—')
+	})
+
+	it('drops the change column with the comparison off', async () => {
+		chart.data.value = { steps: [funnelStep('sent', 30)] }
+		const { host } = mount(FunnelCard, {}, GLOBALS)
+		await flush()
+
+		expect(host.querySelectorAll('[data-funnel-delta]')).toHaveLength(0)
+	})
 })

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

@@ -1,8 +1,11 @@
 import { describe, expect, it } from 'vitest'
 import {
 	biggestDrop,
+	deltaTone,
+	formatDelta,
 	formatRate,
 	funnelTakeaway,
+	isCompared,
 	type FunnelStepReading,
 } from '../app/utils/funnel'
 
@@ -79,3 +82,25 @@ describe('formatRate', () => {
 		expect(formatRate(null, 'en-GB')).toBe('—')
 	})
 })
+
+describe('the comparison of the steps', () => {
+	it('is on as soon as a step carries a compared count', () => {
+		expect(isCompared([step('sent', 4)])).toBe(false)
+		expect(isCompared([{ ...step('sent', 4), previousCount: 0 }])).toBe(true)
+	})
+
+	it('prints the change with its arrow, a dash without one', () => {
+		expect(formatDelta(12.5, 'en-GB')).toBe('▲ 12.5%')
+		expect(formatDelta(-40, 'en-GB')).toBe('▼ 40%')
+		expect(formatDelta(0, 'en-GB')).toBe('0%')
+		expect(formatDelta(undefined, 'en-GB')).toBe('—')
+	})
+
+	it('reads growth as good down the funnel and bad for the leak', () => {
+		expect(deltaTone({ ...step('opened', 4), delta: 10 })).toBe('success')
+		expect(deltaTone({ ...step('opened', 4), delta: -10 })).toBe('error')
+		expect(deltaTone({ ...step('unsubscribed', 4), delta: 10 })).toBe('error')
+		expect(deltaTone({ ...step('unsubscribed', 4), delta: -10 })).toBe('success')
+		expect(deltaTone(step('opened', 4))).toBe('neutral')
+	})
+})

package/frontend-vue/tests/localized-defaults.test.ts

@@ -1,40 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import {
-	defaultCategoryLabelKey,
-	localizeCategories,
-} from '../app/utils/categories'
 import { localizeStarters, starterNameKey } from '../app/utils/starters'
 
 const FRENCH: Record<string, string> = {
-	'dms_mailing.categories.defaults.orders': 'Commandes',
-	'dms_mailing.categories.defaults.billing': 'Facturation',
 	'dms_mailing.starters.names.order-confirmed': 'Confirmation de commande',
 }
 const translate = (key: string): string | undefined => FRENCH[key]
 
-describe('localizeCategories', () => {
-	it('translates a shipped category nobody renamed', () => {
-		const [orders] = localizeCategories(
-			[{ id: 'orders', label: 'Orders', icon: 'i-ph-package' }],
-			translate,
-		)
-		expect(orders).toEqual({
-			id: 'orders',
-			label: 'Commandes',
-			icon: 'i-ph-package',
-		})
-	})
-	it('keeps a label someone wrote, and a category it cannot translate', () => {
-		const categories = [
-			{ id: 'billing', label: 'Invoices & receipts', icon: 'i-ph-file-text' },
-			{ id: 'forms', label: 'Forms', icon: 'i-ph-textbox' },
-			{ id: 'news', label: 'News', icon: 'i-ph-newspaper' },
-		]
-		expect(localizeCategories(categories, translate)).toEqual(categories)
-		expect(defaultCategoryLabelKey(categories[2]!)).toBeUndefined()
-	})
-})
-
 describe('localizeStarters', () => {
 	it('names a known starter in the interface language, else as shipped', () => {
 		const starters = [

package/frontend-vue/tests/new-template-modal.test.ts

@@ -69,7 +69,7 @@ beforeEach(() => {
 			},
 		),
 	)
-	api.createTemplate.mockResolvedValue(['new-id'])
+	api.createTemplate.mockResolvedValue({ _id: 'new-id' })
 })
 
 afterEach(() => {

package/frontend-vue/tests/overview-gate.test.ts

@@ -2,7 +2,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, defineComponent, h, onBeforeUnmount } from 'vue'
 import OverviewGate from '../app/components/OverviewGate.vue'
-import { useSetupHidesPeriod } from '../app/composables/useOverviewSetup'
 import type { SetupFacts } from '../app/utils/overview-setup'
 import { stubApiData, type ApiDataStub } from './helpers/api-data'
 import { flush, mount, slotStub, stubNuxtGlobals } from './helpers/nuxt-globals'
@@ -57,15 +56,6 @@ const Gate = defineComponent({
 	setup: () => () => h(OverviewGate, null, { default: () => h(Dashboard) }),
 })
 
-/** What the page header renders of the period selector. */
-const PeriodHolder = defineComponent({
-	props: { scope: { type: String, default: undefined } },
-	setup: (props) => {
-		const hidesPeriod = useSetupHidesPeriod(props.scope)
-		return () => h('span', { 'data-hides-period': String(hidesPeriod.value) })
-	},
-})
-
 const GLOBALS = {
 	DmsCard: slotStub('DmsCard'),
 	DmsEmptyState: EmptyStateStub,
@@ -88,9 +78,6 @@ const facts = (overrides: Partial<SetupFacts> = {}): SetupFacts => ({
 beforeEach(() => {
 	stubNuxtGlobals()
 	vi.stubGlobal('onBeforeUnmount', onBeforeUnmount)
-	vi.stubGlobal('holdPageHeaderActions', () =>
-		defineComponent({ setup: () => () => null }),
-	)
 	api = stubApiData()
 })
 
@@ -119,7 +106,7 @@ describe('OverviewGate', () => {
 		expect(host.querySelector('[data-dashboard]')).not.toBeNull()
 	})
 
-	it('holds the dashboard and the period back while nothing can be sent', async () => {
+	it('holds the dashboard back while nothing can be sent', async () => {
 		api.respond(() => facts({ liveTemplateCount: 0 }))
 		const { host } = mount(Gate, {}, GLOBALS)
 		await flush()
@@ -127,16 +114,6 @@ describe('OverviewGate', () => {
 		expect(host.querySelectorAll('[data-step]')).toHaveLength(4)
 	})
 
-	it('hides the overview header period from the same facts, on no other page', async () => {
-		api.respond(() => facts({ liveTemplateCount: 0 }))
-		const overview = mount(PeriodHolder, { scope: 'mailing-overview' })
-		const sends = mount(PeriodHolder, { scope: 'mailing-sends' })
-		await flush()
-		expect(overview.host.innerHTML).toContain('data-hides-period="true"')
-		expect(sends.host.innerHTML).toContain('data-hides-period="false"')
-		expect(api.reads).toEqual([{ url: SETUP_URL, query: {} }])
-	})
-
 	it('lets an unfinished setup be resumed above the dashboard', async () => {
 		api.respond(() => facts({ hasTestSend: false }))
 		const { host } = mount(Gate, {}, GLOBALS)

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

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, type VNodeChild } from 'vue'
-import PageHeader from '../app/components/PageHeader.vue'
+import { defineComponent, h } from 'vue'
+import ProviderPill from '../app/components/ProviderPill.vue'
 import WebhookStatus from '../app/components/WebhookStatus.vue'
 import type { WebhookStatus as Status } from '../app/utils/webhook-status'
 import {
@@ -38,6 +38,8 @@ const PillStub = defineComponent({
 	setup: (props) => () => h('span', { 'data-pill': props.label }),
 })
 
+const PILL_GLOBALS = { DmsStatusPill: PillStub }
+
 const ButtonStub = defineComponent({
 	props: { label: { type: String, default: '' } },
 	emits: ['click'],
@@ -48,29 +50,11 @@ const ButtonStub = defineComponent({
 })
 
 let api$: ApiDataStub
-let headerActions: (() => VNodeChild) | null
-
-/** The page header: renders the actions `PageHeader` set up. */
-const Header = defineComponent({
-	setup: () => () => h('header', headerActions?.()),
-})
-
-const HeaderOutlet = defineComponent({
-	props: { showProvider: { type: Boolean, default: true } },
-	setup: (props) => () =>
-		h('div', [h(PageHeader, { showProvider: props.showProvider }), h(Header)]),
-})
 
 beforeEach(() => {
 	stubNuxtGlobals()
 	stubRegionalFormat()
-	headerActions = null
-	vi.stubGlobal('resolveComponent', (name: string) =>
-		name === 'DmsStatusPill' ? PillStub : slotStub(name),
-	)
-	vi.stubGlobal('usePageHeaderActions', (render: () => VNodeChild) => {
-		headerActions = render
-	})
+	vi.stubGlobal('resolveComponent', (name: string) => slotStub(name))
 	vi.stubGlobal('useApiError', vi.fn())
 	api$ = stubApiData()
 	api.webhookTest.mockReset()
@@ -81,10 +65,10 @@ afterEach(() => {
 	document.body.innerHTML = ''
 })
 
-describe('PageHeader', () => {
+describe('ProviderPill', () => {
 	it('names the provider read with the page', async () => {
 		api$.respond(() => ({ name: 'smtp', connected: true, features: null }))
-		const view = mount(HeaderOutlet, {})
+		const view = mount(ProviderPill, {}, PILL_GLOBALS)
 		await flush()
 		expect(api$.reads).toEqual([{ url: PROVIDER_URL, query: {} }])
 		expect(
@@ -95,14 +79,14 @@ describe('PageHeader', () => {
 
 	it('says no provider when the read fails, and reads nothing when hidden', async () => {
 		api$.respond(() => Promise.reject(new Error('503')))
-		const failed = mount(HeaderOutlet, {})
+		const failed = mount(ProviderPill, {}, PILL_GLOBALS)
 		await flush()
 		expect(
 			failed.host.querySelector('[data-pill]')?.getAttribute('data-pill'),
 		).toBe('dms_mailing.page_header.no_provider')
 		failed.unmount()
 		api$.reads.length = 0
-		const hidden = mount(HeaderOutlet, { showProvider: false })
+		const hidden = mount(ProviderPill, { showProvider: false }, PILL_GLOBALS)
 		await flush()
 		expect(api$.reads).toEqual([])
 		expect(hidden.host.querySelector('[data-pill]')).toBeNull()

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

@@ -3,22 +3,10 @@ import {
 	clampRetention,
 	isWithinADay,
 	minutesSince,
-	presetShortLabelKey,
 	RETENTION_CUSTOM,
 	retentionChoice,
 } from '../app/utils/period'
 
-describe('presetShortLabelKey', () => {
-	it('maps a preset id onto an i18n key', () => {
-		expect(presetShortLabelKey('last-24h')).toBe(
-			'dms_mailing.period.short.last_24h',
-		)
-		expect(presetShortLabelKey('last-30-days')).toBe(
-			'dms_mailing.period.short.last_30_days',
-		)
-	})
-})
-
 describe('minutesSince', () => {
 	const now = new Date('2026-09-09T10:35:00.000Z')
 	it('counts whole minutes', () => {