@antelopejs/dms-mailing 0.4.1 → 0.5.0

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

@@ -10,15 +10,16 @@ import {
 	typeInto,
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
+import { mailingReads, stubApiData } from './helpers/api-data'
 
 const api = {
 	listTemplates: vi.fn(),
 	starters: vi.fn(),
-	listCategories: vi.fn(),
 	createTemplate: vi.fn(),
 }
 
-vi.mock('../app/composables/useMailingApi', () => ({
+vi.mock('../app/composables/useMailingApi', async (importOriginal) => ({
+	...(await importOriginal<object>()),
 	useMailingApi: () => api,
 }))
 
@@ -54,9 +55,20 @@ beforeEach(() => {
 			},
 		],
 	})
-	api.listCategories.mockResolvedValue({
-		categories: [{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' }],
-	})
+	stubApiData().respond(
+		mailingReads(
+			{ listTemplates: api.listTemplates, starters: api.starters },
+			({ url }) => {
+				if (url !== '/api/mailing/templates/categories')
+					throw new Error(`unexpected read ${url}`)
+				return {
+					categories: [
+						{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' },
+					],
+				}
+			},
+		),
+	)
 	api.createTemplate.mockResolvedValue(['new-id'])
 })
 

package/frontend-vue/tests/on-demand-reads.test.ts

@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope, ref } from 'vue'
+import {
+	useStarterPreviewRead,
+	useTemplateContentRead,
+	useTemplateListRead,
+} from '../app/composables/useMailingReads'
+import { stubApiData, type ApiDataStub } from './helpers/api-data'
+
+let reads: ApiDataStub
+const options: Record<string, unknown>[] = []
+
+beforeEach(() => {
+	reads = stubApiData()
+	options.length = 0
+	const stubbed = globalThis.useApiData
+	vi.stubGlobal(
+		'useApiData',
+		(url: unknown, readOptions: Record<string, unknown>) => {
+			options.push(readOptions)
+			return stubbed(url as string, readOptions)
+		},
+	)
+})
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+})
+
+const inScope = <T>(setup: () => T): T => effectScope().run(setup) as T
+
+describe('reads made on demand', () => {
+	it('read nothing until asked, then the current URL each time', async () => {
+		reads.respond(({ url }) => ({ url }))
+		const id = ref('t1')
+		const readContent = inScope(() => useTemplateContentRead(id))
+		await Promise.resolve()
+		expect(reads.reads).toEqual([])
+		expect(options[0]).toMatchObject({
+			immediate: false,
+			refreshOnPageRefresh: false,
+		})
+
+		await expect(readContent()).resolves.toEqual({
+			url: '/api/mailing/templates/t1/content',
+		})
+		id.value = 't2'
+		await readContent()
+		expect(reads.reads.map((read) => read.url)).toEqual([
+			'/api/mailing/templates/t1/content',
+			'/api/mailing/templates/t2/content',
+		])
+	})
+
+	it('reject with what the read failed with', async () => {
+		const failure = Object.assign(new Error('gone'), { statusCode: 404 })
+		reads.respond(() => Promise.reject(failure))
+		const readContent = inScope(() => useTemplateContentRead('t1'))
+		await expect(readContent()).rejects.toBe(failure)
+	})
+
+	it('send their query with the read', async () => {
+		reads.respond(() => ({}))
+		const readList = inScope(() => useTemplateListRead())
+		const readPreview = inScope(() =>
+			useStarterPreviewRead('invoice-ready', 'fr'),
+		)
+		await readList()
+		await readPreview()
+		expect(reads.reads).toEqual([
+			{
+				url: '/api/mailing/tables/templates/list',
+				query: { limit: '100', sortKey: 'name' },
+			},
+			{
+				url: '/api/mailing/templates/starters/invoice-ready/preview',
+				query: { locale: 'fr' },
+			},
+		])
+	})
+})

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

@@ -1,20 +1,14 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, onBeforeUnmount, ref } from 'vue'
+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'
 
-const api = { setupFacts: vi.fn() }
-const hidesPeriod = ref(false)
-
-vi.mock('../app/composables/useMailingApi', () => ({
-	useMailingApi: () => api,
-}))
-
-vi.mock('../app/composables/useOverviewSetup', () => ({
-	useSetupHidesPeriod: () => hidesPeriod,
-}))
+let api: ApiDataStub
+const SETUP_URL = '/api/mailing/metrics/setup'
 
 interface ButtonAction {
 	label: string
@@ -63,6 +57,15 @@ 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,
@@ -85,8 +88,10 @@ const facts = (overrides: Partial<SetupFacts> = {}): SetupFacts => ({
 beforeEach(() => {
 	stubNuxtGlobals()
 	vi.stubGlobal('onBeforeUnmount', onBeforeUnmount)
-	api.setupFacts.mockReset()
-	hidesPeriod.value = false
+	vi.stubGlobal('holdPageHeaderActions', () =>
+		defineComponent({ setup: () => () => null }),
+	)
+	api = stubApiData()
 })
 
 afterEach(() => {
@@ -96,34 +101,44 @@ afterEach(() => {
 
 describe('OverviewGate', () => {
 	it('mounts nothing of the dashboard before the facts are known', () => {
-		api.setupFacts.mockReturnValue(new Promise(() => undefined))
+		api.respond(() => new Promise(() => undefined))
 		const { host } = mount(Gate, {}, GLOBALS)
 		expect(host.querySelector('[data-dashboard]')).toBeNull()
 		expect(host.querySelector('[data-stub="USkeleton"]')).not.toBeNull()
 	})
 
 	it('says the facts failed to load and retries', async () => {
-		api.setupFacts.mockRejectedValueOnce(new Error('500'))
-		api.setupFacts.mockResolvedValueOnce(facts())
+		api.respond(() => Promise.reject(new Error('500')))
 		const { host } = mount(Gate, {}, GLOBALS)
 		await flush()
 		expect(host.querySelector('[data-dashboard]')).toBeNull()
+		expect(api.reads).toEqual([{ url: SETUP_URL, query: {} }])
+		api.respond(() => facts())
 		host.querySelector<HTMLButtonElement>('[data-empty-state] button')?.click()
 		await flush()
 		expect(host.querySelector('[data-dashboard]')).not.toBeNull()
 	})
 
 	it('holds the dashboard and the period back while nothing can be sent', async () => {
-		api.setupFacts.mockResolvedValue(facts({ liveTemplateCount: 0 }))
+		api.respond(() => facts({ liveTemplateCount: 0 }))
 		const { host } = mount(Gate, {}, GLOBALS)
 		await flush()
 		expect(host.querySelector('[data-dashboard]')).toBeNull()
 		expect(host.querySelectorAll('[data-step]')).toHaveLength(4)
-		expect(hidesPeriod.value).toBe(true)
+	})
+
+	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.setupFacts.mockResolvedValue(facts({ hasTestSend: false }))
+		api.respond(() => facts({ hasTestSend: false }))
 		const { host } = mount(Gate, {}, GLOBALS)
 		await flush()
 		expect(host.querySelector('[data-dashboard]')).not.toBeNull()
@@ -135,11 +150,34 @@ describe('OverviewGate', () => {
 		await flush()
 		expect(host.querySelectorAll('[data-step]')).toHaveLength(4)
 		expect(host.querySelector('[data-dashboard]')).not.toBeNull()
-		expect(hidesPeriod.value).toBe(false)
+	})
+
+	it('takes the props the page renderer adds without a fragment warning', async () => {
+		api.respond(() => facts())
+		const warnings: string[] = []
+		const app = createApp(() =>
+			h(
+				OverviewGate,
+				{ childCount: 0, routeParams: {} },
+				{ default: () => h(Dashboard) },
+			),
+		)
+		Object.entries(GLOBALS).forEach(([name, value]) =>
+			app.component(name, value),
+		)
+		app.config.warnHandler = (message) => warnings.push(message)
+		app.mount(document.body.appendChild(document.createElement('div')))
+		await flush()
+		app.unmount()
+		expect(
+			warnings.filter((message) =>
+				message.includes('Extraneous non-props attributes'),
+			),
+		).toEqual([])
 	})
 
 	it('offers no resume once every step is done', async () => {
-		api.setupFacts.mockResolvedValue(facts())
+		api.respond(() => facts())
 		const { host } = mount(Gate, {}, GLOBALS)
 		await flush()
 		expect(host.textContent).not.toContain('dms_mailing.setup.resume')

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

@@ -0,0 +1,157 @@
+// @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 WebhookStatus from '../app/components/WebhookStatus.vue'
+import type { WebhookStatus as Status } from '../app/utils/webhook-status'
+import {
+	stubApiData,
+	stubRegionalFormat,
+	type ApiDataStub,
+} from './helpers/api-data'
+import { flush, mount, slotStub, stubNuxtGlobals } from './helpers/nuxt-globals'
+
+const api = { webhookTest: vi.fn() }
+
+vi.mock('../app/composables/useMailingApi', async (importOriginal) => ({
+	...(await importOriginal<object>()),
+	useMailingApi: () => api,
+}))
+
+const PROVIDER_URL = '/api/mailing/provider'
+const STATUS_URL = '/api/mailing/settings/webhook-status'
+
+const NEVER: Status = { lastReceived: null, lastRefused: null }
+const TESTED: Status = {
+	lastReceived: {
+		at: new Date().toISOString(),
+		provider: 'smtp',
+		type: 'delivered',
+		isMatched: false,
+		isTest: true,
+	},
+	lastRefused: null,
+}
+
+const PillStub = defineComponent({
+	props: { label: { type: String, default: '' } },
+	setup: (props) => () => h('span', { 'data-pill': props.label }),
+})
+
+const ButtonStub = defineComponent({
+	props: { label: { type: String, default: '' } },
+	emits: ['click'],
+	setup:
+		(props, { emit }) =>
+		() =>
+			h('button', { onClick: () => emit('click') }, props.label),
+})
+
+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('useApiError', vi.fn())
+	api$ = stubApiData()
+	api.webhookTest.mockReset()
+})
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+	document.body.innerHTML = ''
+})
+
+describe('PageHeader', () => {
+	it('names the provider read with the page', async () => {
+		api$.respond(() => ({ name: 'smtp', connected: true, features: null }))
+		const view = mount(HeaderOutlet, {})
+		await flush()
+		expect(api$.reads).toEqual([{ url: PROVIDER_URL, query: {} }])
+		expect(
+			view.host.querySelector('[data-pill]')?.getAttribute('data-pill'),
+		).toBe('dms_mailing.page_header.provider_connected name=smtp')
+		view.unmount()
+	})
+
+	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, {})
+		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 })
+		await flush()
+		expect(api$.reads).toEqual([])
+		expect(hidden.host.querySelector('[data-pill]')).toBeNull()
+		hidden.unmount()
+	})
+})
+
+describe('WebhookStatus', () => {
+	it('shows the status read, then the one a test event answers', async () => {
+		api$.respond(() => NEVER)
+		api.webhookTest.mockResolvedValue({
+			isReceived: true,
+			url: 'https://example.test/hook',
+			durationMs: 12,
+			status: TESTED,
+		})
+		const view = mount(
+			WebhookStatus,
+			{},
+			{
+				UButton: ButtonStub,
+				UIcon: slotStub('UIcon'),
+				USkeleton: slotStub('USkeleton'),
+			},
+		)
+		await flush()
+		expect(view.host.textContent).toContain(
+			'dms_mailing.settings.webhook_status.never_received',
+		)
+		view.host.querySelector('button')?.click()
+		await flush()
+		expect(view.host.textContent).toContain(
+			'dms_mailing.settings.webhook_status.received_test',
+		)
+		expect(api$.reads).toEqual([{ url: STATUS_URL, query: {} }])
+		view.unmount()
+	})
+
+	it('says the status is unavailable when its read fails', async () => {
+		api$.respond(() => Promise.reject(new Error('500')))
+		const view = mount(
+			WebhookStatus,
+			{},
+			{ UButton: ButtonStub, USkeleton: slotStub('USkeleton') },
+		)
+		await flush()
+		expect(view.host.textContent).toContain(
+			'dms_mailing.settings.webhook_status.unavailable',
+		)
+		view.unmount()
+	})
+})

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

@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import {
 	clampRetention,
-	formatClock,
 	isWithinADay,
 	minutesSince,
 	presetShortLabelKey,
@@ -9,14 +8,6 @@ import {
 	retentionChoice,
 } from '../app/utils/period'
 
-describe('formatClock', () => {
-	it('reads a 24-hour clock whatever the locale', () => {
-		const afternoon = new Date(2026, 9, 11, 17, 5)
-		expect(formatClock(afternoon, 'en')).toBe('17:05')
-		expect(formatClock(afternoon, 'fr-FR')).toBe('17:05')
-	})
-})
-
 describe('presetShortLabelKey', () => {
 	it('maps a preset id onto an i18n key', () => {
 		expect(presetShortLabelKey('last-24h')).toBe(

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

@@ -8,15 +8,14 @@ import {
 	stubNuxtGlobals,
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
+import {
+	stubApiData,
+	stubRegionalFormat,
+	type ApiDataStub,
+} from './helpers/api-data'
 import type { RetentionPreview } from '../app/types/mailing'
 
-const api = {
-	retentionPreview: vi.fn(),
-}
-
-vi.mock('../app/composables/useMailingApi', () => ({
-	useMailingApi: () => api,
-}))
+const PREVIEW_URL = '/api/mailing/settings/retention-preview'
 
 const SAVED_DAYS = 90
 const DEBOUNCE_MS = 400
@@ -71,15 +70,37 @@ function segmented(host: HTMLElement): HTMLElement {
 
 describe('RetentionInput', () => {
 	let stubs: NuxtStubs
+	let api: ApiDataStub
 	let harness: Harness | undefined
 
 	beforeEach(() => {
 		vi.useFakeTimers()
 		stubs = stubNuxtGlobals()
 		vi.stubGlobal('computed', computed)
-		api.retentionPreview.mockImplementation(async (days: number) =>
-			preview(days, days < SAVED_DAYS ? 3 : 0),
+		stubRegionalFormat()
+		api = stubApiData()
+		api.respond(({ query }) => {
+			const days = Number(query.days)
+			return preview(days, days < SAVED_DAYS ? 3 : 0)
+		})
+	})
+
+	it('reads the saved days at once, then the days picked once they hold still', async () => {
+		harness = mountRetention()
+		await flush()
+		expect(api.reads).toEqual([
+			{ url: PREVIEW_URL, query: { days: String(SAVED_DAYS) } },
+		])
+		expect(harness.host.textContent).toContain(
+			'dms_mailing.settings.retention.preview_none',
 		)
+		harness.state.days = 30
+		await nextTick()
+		harness.state.days = 365
+		await nextTick()
+		await vi.advanceTimersByTimeAsync(DEBOUNCE_MS)
+		await flush()
+		expect(api.reads.map((read) => read.query.days)).toEqual(['90', '365'])
 	})
 
 	afterEach(() => {

package/frontend-vue/tests/send-modals.test.ts

@@ -17,6 +17,7 @@ import {
 	typeInto,
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
+import { mailingReads, stubApiData } from './helpers/api-data'
 
 const api = {
 	templateContent: vi.fn(),
@@ -25,7 +26,8 @@ const api = {
 	realSend: vi.fn(),
 }
 
-vi.mock('../app/composables/useMailingApi', () => ({
+vi.mock('../app/composables/useMailingApi', async (importOriginal) => ({
+	...(await importOriginal<object>()),
 	useMailingApi: () => api,
 }))
 
@@ -102,6 +104,11 @@ let stubs: NuxtStubs
 
 beforeEach(() => {
 	stubs = stubNuxtGlobals('camille@acme.com')
+	stubApiData().respond(
+		mailingReads({ templateContent: api.templateContent }, ({ url }) => {
+			throw new Error(`unexpected read ${url}`)
+		}),
+	)
 	api.preview.mockResolvedValue({
 		html: '',
 		subject: '20% off every chair',

package/frontend-vue/tests/template-drawer.test.ts

@@ -17,6 +17,7 @@ import {
 	typeInto,
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
+import { mailingReads, stubApiData } from './helpers/api-data'
 
 const api = {
 	templateContent: vi.fn(),
@@ -29,12 +30,12 @@ const api = {
 	listTemplates: vi.fn(),
 	duplicate: vi.fn(),
 	starters: vi.fn(),
-	listCategories: vi.fn(),
 	createTemplate: vi.fn(),
 	saveTemplateDetails: vi.fn(),
 }
 
-vi.mock('../app/composables/useMailingApi', () => ({
+vi.mock('../app/composables/useMailingApi', async (importOriginal) => ({
+	...(await importOriginal<object>()),
 	useMailingApi: () => api,
 }))
 
@@ -108,9 +109,27 @@ const globals = {
 
 let stubs: NuxtStubs
 
+let starters: unknown[] = []
+
 beforeEach(() => {
 	stubs = stubNuxtGlobals()
 	menuGroups = []
+	starters = []
+	stubApiData().respond(
+		mailingReads(
+			{
+				templateContent: api.templateContent,
+				performance: api.performance,
+				listTemplates: api.listTemplates,
+			},
+			({ url }) => {
+				if (url === '/api/mailing/templates/categories')
+					return { categories: [] }
+				if (url === '/api/mailing/templates/starters') return { starters }
+				throw new Error(`unexpected read ${url}`)
+			},
+		),
+	)
 	api.performance.mockResolvedValue({
 		id: 't1',
 		slug: 'order-confirmed',
@@ -403,18 +422,15 @@ describe('DuplicateModal', () => {
 
 describe('StarterGallery', () => {
 	beforeEach(() => {
-		api.starters.mockResolvedValue({
-			starters: [
-				{
-					id: 'order-confirmed',
-					name: 'Order confirmation',
-					slug: 'order-confirmed',
-					category: 'orders',
-					locales: ['en'],
-				},
-			],
-		})
-		api.listCategories.mockResolvedValue({ categories: [] })
+		starters = [
+			{
+				id: 'order-confirmed',
+				name: 'Order confirmation',
+				slug: 'order-confirmed',
+				category: 'orders',
+				locales: ['en'],
+			},
+		]
 	})
 
 	it('creates a starter as a draft and opens it', async () => {