@antelopejs/dms-mailing 0.3.4 → 0.4.1

package/frontend-vue/tests/column-displays.test.ts

@@ -0,0 +1,73 @@
+// @vitest-environment node
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { VNode } from 'vue'
+
+interface RegisteredType {
+	id: string
+	formatter: { default: (...args: unknown[]) => VNode }
+}
+
+type PluginSetup = () => void
+
+const registered: RegisteredType[] = []
+
+beforeEach(() => {
+	registered.length = 0
+	vi.stubGlobal('defineDmsPlugin', (setup: PluginSetup) => setup)
+	vi.stubGlobal('useDataTypes', () => ({
+		registerDataType: (type: RegisteredType) => registered.push(type),
+	}))
+	vi.stubGlobal('useUniqueLocales', () => ({
+		uniqueLocales: { value: [{ code: 'en' }, { code: 'fr' }, { code: 'de' }] },
+	}))
+})
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+	vi.resetModules()
+})
+
+function texts(node: VNode): string[] {
+	if (typeof node.children === 'string') return [node.children]
+	if (!Array.isArray(node.children)) return []
+	return (node.children as (VNode | string)[]).flatMap((child) =>
+		typeof child === 'string' ? [child] : texts(child),
+	)
+}
+
+describe('column displays plugin', () => {
+	it('registers the locale chips and category displays without a DOM', async () => {
+		const { default: setup } = await import('../app/plugins/column-displays')
+		;(setup as unknown as PluginSetup)()
+		expect(registered.map((type) => type.id)).toEqual([
+			'mailing:locale-chips',
+			'mailing:category',
+		])
+	})
+
+	it('draws a category through its label component', async () => {
+		const { renderCategory } = await import('../app/plugins/column-displays')
+		const { default: CategoryLabel } =
+			await import('../app/components/CategoryLabel.vue')
+		const cell = renderCategory('orders')
+		expect(cell.type).toBe(CategoryLabel)
+		expect(cell.props).toEqual({ value: 'orders' })
+		expect(renderCategory(undefined).props).toEqual({ value: null })
+	})
+
+	it('draws the locale chips with the missing workspace ones dashed', async () => {
+		const { default: setup } = await import('../app/plugins/column-displays')
+		;(setup as unknown as PluginSetup)()
+		const cell = registered[0]!.formatter.default('en,fr', 'en')
+		const chips = cell.children as VNode[]
+		expect(chips.map((chip) => chip.children)).toEqual(['en', 'fr', 'de'])
+		expect(String(chips[2]!.props?.class)).toContain('border-dashed')
+		expect(String(chips[0]!.props?.class)).not.toContain('border-dashed')
+	})
+
+	it('draws a dash for a row without locale information', async () => {
+		const { renderLocaleChips } = await import('../app/plugins/column-displays')
+		expect(texts(renderLocaleChips('', ['en']))).toEqual(['—'])
+		expect(texts(renderLocaleChips(undefined, ['en']))).toEqual(['—'])
+	})
+})

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

@@ -1,29 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import {
-	OPERATORS_WITH_VALUE,
-	compileCondition,
 	describeCondition,
+	evaluateCondition,
 } from '../app/utils/conditions'
 
 describe('conditions', () => {
-	it('compiles to the handlebars-like display form', () => {
-		expect(
-			compileCondition({
-				path: 'order.hasGift',
-				operator: 'truthy',
-				value: '',
-			}),
-		).toBe('{{#if order.hasGift}}')
-		expect(
-			compileCondition({ path: 'order.total', operator: 'gt', value: '100' }),
-		).toBe('{{#if (gt order.total 100)}}')
-		expect(
-			compileCondition({ path: 'country', operator: 'eq', value: 'BE' }),
-		).toBe('{{#if (eq country "BE")}}')
-		expect(compileCondition({ path: 'x', operator: 'falsy', value: '' })).toBe(
-			'{{#unless x}}',
-		)
-	})
 	it('describes with translated operator labels', () => {
 		expect(
 			describeCondition(
@@ -31,6 +12,53 @@ describe('conditions', () => {
 				(key) => key.split('.').at(-1) ?? key,
 			),
 		).toBe('a ne 1')
-		expect(OPERATORS_WITH_VALUE).toEqual(['eq', 'ne', 'gt', 'lt'])
+	})
+})
+
+describe('evaluateCondition', () => {
+	const data = { order: { total: 120, country: 'BE', isFirstOrder: false } }
+	it('evaluates like the backend engine', () => {
+		expect(
+			evaluateCondition(
+				{ path: 'order.isFirstOrder', operator: 'truthy', value: '' },
+				data,
+			),
+		).toBe(false)
+		expect(
+			evaluateCondition(
+				{ path: 'order.isFirstOrder', operator: 'falsy', value: '' },
+				data,
+			),
+		).toBe(true)
+		expect(
+			evaluateCondition(
+				{ path: 'order.country', operator: 'eq', value: 'BE' },
+				data,
+			),
+		).toBe(true)
+		expect(
+			evaluateCondition(
+				{ path: 'order.country', operator: 'ne', value: 'BE' },
+				data,
+			),
+		).toBe(false)
+		expect(
+			evaluateCondition(
+				{ path: 'order.total', operator: 'gt', value: '100' },
+				data,
+			),
+		).toBe(true)
+		expect(
+			evaluateCondition(
+				{ path: 'order.total', operator: 'lt', value: '100' },
+				data,
+			),
+		).toBe(false)
+		expect(
+			evaluateCondition(
+				{ path: 'missing.path', operator: 'truthy', value: '' },
+				data,
+			),
+		).toBe(false)
 	})
 })

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

@@ -9,3 +9,13 @@ describe('dnd', () => {
 		expect(DRAG_GROUP.name).toBe('mailing-blocks')
 	})
 })
+
+describe('cloneFromPalette', () => {
+	it('shapes a dropped tile like a clicked one', () => {
+		const block = cloneFromPalette(
+			{ type: 'heading', icon: 'x' },
+			{ locale: 'fr' },
+		)
+		expect(block).toMatchObject({ type: 'heading', text: 'Nouveau titre' })
+	})
+})

package/frontend-vue/tests/editor-block-list.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import {
 	createApp,
@@ -10,8 +11,14 @@ import {
 import EditorBlockList from '../app/components/editor/EditorBlockList.vue'
 import type { Block } from '../app/types/mailing'
 
+const editor = vi.hoisted(() => ({ touch: vi.fn(), select: vi.fn() }))
+
 vi.mock('../app/composables/useEditorContext', () => ({
-	useEditorContext: () => ({ editor: { touch: vi.fn() } }),
+	useEditorContext: () => ({ editor }),
+}))
+
+vi.mock('../app/components/editor/EditorInsertPoint.vue', () => ({
+	default: defineComponent({ setup: () => () => h('span') }),
 }))
 
 vi.mock('../app/components/editor/EditorBlock.vue', () => ({
@@ -34,7 +41,7 @@ describe('editor draggable items', () => {
 		const host = document.createElement('div')
 		const app = createApp(EditorBlockList, { list })
 		app.component(
-			'DmsMailingEditorBlock',
+			'MailingEditorBlock',
 			defineAsyncComponent(() => new Promise(() => {})),
 		)
 		app.config.errorHandler = (error) => errors.push(error)
@@ -51,4 +58,20 @@ describe('editor draggable items', () => {
 			app.unmount()
 		}
 	})
+	it('selects a block dropped into the list', async () => {
+		vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+		const list = reactive<Block[]>([])
+		const app = createApp(EditorBlockList, { list })
+		app.mount(document.createElement('div'))
+		try {
+			const draggable = app._instance?.subTree.props as Record<string, unknown>
+			const onChange = draggable.onChange as (change: unknown) => void
+			onChange({ added: { element: { id: 'dropped' }, newIndex: 0 } })
+			onChange({ moved: { element: { id: 'other' } } })
+			expect(editor.touch).toHaveBeenCalledTimes(2)
+			expect(editor.select).toHaveBeenCalledExactlyOnceWith('dropped')
+		} finally {
+			app.unmount()
+		}
+	})
 })

package/frontend-vue/tests/editor-checks.test.ts

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest'
+import {
+	contentChecks,
+	missingRequired,
+	openIssueCount,
+	publishBlockers,
+	publishChecks,
+	testDataChecks,
+	tokenChecks,
+	undeclaredPaths,
+} from '../app/utils/editor-checks'
+import type {
+	Block,
+	TemplateContent,
+	VariableDefinition,
+} from '../app/types/mailing'
+
+const VARIABLES: VariableDefinition[] = [
+	{ path: 'order.number', type: 'string', required: true },
+	{ path: 'order.isFirstOrder', type: 'boolean', required: false },
+]
+
+const BLOCKS: Block[] = [
+	{
+		id: 'if1',
+		type: 'if',
+		condition: { path: 'order.isFirstOrder', operator: 'truthy', value: '' },
+		children: [],
+		elseChildren: null,
+		visibleIf: null,
+	},
+]
+
+const INPUT = {
+	variables: VARIABLES,
+	detected: ['order.number', 'order.isFirstOrder', 'order.trackingUrl'],
+	data: { order: { number: '#1', isFirstOrder: false } },
+	blocks: BLOCKS,
+}
+
+describe('editor checks', () => {
+	it('finds undeclared paths and required ones missing from the data', () => {
+		expect(undeclaredPaths(INPUT.detected, VARIABLES)).toEqual([
+			'order.trackingUrl',
+		])
+		expect(missingRequired(VARIABLES, {})).toEqual(['order.number'])
+		expect(missingRequired(VARIABLES, INPUT.data)).toEqual([])
+	})
+	it('lists the publish warnings', () => {
+		expect(
+			publishChecks({ ...INPUT, data: {} }).map((check) => check.key),
+		).toEqual([
+			'dms_mailing.editor.checks.undeclared',
+			'dms_mailing.editor.checks.required_missing',
+		])
+	})
+	it('reports coverage and how each condition evaluates', () => {
+		const checks = testDataChecks(INPUT)
+		expect(
+			checks.map((check) => [check.state, check.key.split('.').at(-1)]),
+		).toEqual([
+			['ok', 'required_covered'],
+			['warn', 'missing_undeclared'],
+			['info', 'condition_false'],
+		])
+		expect(checks[0]?.params).toEqual({ count: 1 })
+		expect(openIssueCount(checks)).toBe(1)
+	})
+	it('flags a required variable the content does not use when the data lacks it', () => {
+		const checks = testDataChecks({ ...INPUT, detected: [], data: {} })
+		expect(checks.map((check) => check.key.split('.').at(-1))).toEqual([
+			'required_missing',
+			'condition_false',
+		])
+	})
+})
+
+const FOOTER: Block = {
+	id: 'footer',
+	type: 'footer',
+	text: '',
+	unsubscribeLabel: 'Unsubscribe',
+	preferencesLabel: 'Preferences',
+	visibleIf: null,
+}
+
+const PARAGRAPH: Block = {
+	id: 'p1',
+	type: 'paragraph',
+	text: 'Hello',
+	align: 'left',
+	visibleIf: null,
+}
+
+const CONTENT: TemplateContent = {
+	locales: {
+		en: { subject: 'Hi', preheader: '', blocks: [PARAGRAPH, FOOTER] },
+		fr: { subject: ' ', preheader: '', blocks: [FOOTER] },
+		de: { subject: 'Hallo', preheader: '', blocks: [PARAGRAPH] },
+	},
+}
+
+describe('content checks', () => {
+	it('blocks a publish on a blank subject', () => {
+		expect(publishBlockers(CONTENT).map((check) => check.params)).toEqual([
+			{ locale: 'FR' },
+		])
+	})
+	it('warns about an empty body, a missing footer and a missing locale', () => {
+		const checks = contentChecks({
+			content: CONTENT,
+			locales: ['en', 'fr', 'de', 'nl'],
+			fallback: 'en',
+		})
+		expect(
+			checks.map((check) => [check.key.split('.').at(-1), check.params]),
+		).toEqual([
+			['no_blocks', { locale: 'FR' }],
+			['no_footer', { locale: 'DE' }],
+			['missing_locale', { locale: 'NL', fallback: 'EN' }],
+		])
+	})
+	it('names the locale a missing one really falls back to', () => {
+		const checks = contentChecks({
+			content: { locales: { fr: CONTENT.locales.fr! } },
+			locales: ['en', 'fr'],
+			fallback: 'en',
+		})
+		expect(checks.at(-1)?.params).toEqual({ locale: 'EN', fallback: 'FR' })
+	})
+})
+
+describe('footer and token checks', () => {
+	it('warns about a second footer and a footer before other blocks', () => {
+		const checks = contentChecks({
+			content: {
+				locales: {
+					en: {
+						subject: 'Hi',
+						preheader: '',
+						blocks: [FOOTER, PARAGRAPH, { ...FOOTER, id: 'footer2' }],
+					},
+					fr: { subject: 'Salut', preheader: '', blocks: [FOOTER, PARAGRAPH] },
+				},
+			},
+			locales: ['en', 'fr'],
+			fallback: 'en',
+		})
+		expect(
+			checks.map((check) => [check.key.split('.').at(-1), check.params.locale]),
+		).toEqual([
+			['many_footers', 'EN'],
+			['footer_not_last', 'FR'],
+		])
+	})
+	it('flags malformed tokens and objects or lists printed as text', () => {
+		const content: TemplateContent = {
+			locales: {
+				en: {
+					subject: 'Order {{order.number}} {{ order number }}',
+					preheader: '{{order}}',
+					blocks: [{ ...PARAGRAPH, text: 'Lines: {{order.lines}}' }, FOOTER],
+				},
+			},
+		}
+		const data = { order: { number: '#1', lines: [{ sku: 'a' }] } }
+		expect(
+			tokenChecks(content, data).map((check) => [
+				check.key.split('.').at(-1),
+				check.params,
+			]),
+		).toEqual([
+			['invalid_token', { locale: 'EN', token: '{{ order number }}' }],
+			['token_not_text', { path: 'order' }],
+			['token_not_text', { path: 'order.lines' }],
+		])
+	})
+})

package/frontend-vue/tests/editor-route.test.ts

@@ -1,23 +1,51 @@
 import { describe, expect, it } from 'vitest'
-import { EDITOR_PATH, editorRoute } from '../app/utils/editor-route'
+import {
+	editorRoute,
+	recordLabelFor,
+	templateIdFrom,
+} from '../app/utils/editor-route'
+import { TEMPLATES_PATH } from '../app/utils/pages'
 
 describe('editorRoute', () => {
-	it('targets the editor page with the template id', () => {
+	it('targets the record page under Templates', () => {
 		expect(editorRoute('abc')).toEqual({
-			path: EDITOR_PATH,
-			query: { id: 'abc' },
+			path: `${TEMPLATES_PATH}/abc`,
+			query: {},
 		})
 	})
 	it('carries the locale when one is selected', () => {
 		expect(editorRoute('abc', 'fr')).toEqual({
-			path: '/modules/mailing/editor',
-			query: { id: 'abc', locale: 'fr' },
+			path: '/modules/mailing/templates/abc',
+			query: { locale: 'fr' },
 		})
 	})
 	it('omits an empty locale rather than sending a blank query param', () => {
-		expect(editorRoute('abc', '')).toEqual({
-			path: EDITOR_PATH,
-			query: { id: 'abc' },
+		expect(editorRoute('abc', '').query).toEqual({})
+	})
+})
+
+describe('templateIdFrom', () => {
+	it('prefers the route param', () => {
+		expect(templateIdFrom({ id: 't1' }, '/modules/mailing/templates/t2')).toBe(
+			't1',
+		)
+	})
+	it('falls back to the last path segment', () => {
+		expect(templateIdFrom(undefined, '/modules/mailing/templates/t2/')).toBe(
+			't2',
+		)
+		expect(templateIdFrom({ id: '' }, '/modules/mailing/templates/a%20b')).toBe(
+			'a b',
+		)
+	})
+})
+
+describe('recordLabelFor', () => {
+	it('names the page with the template, or clears the label', () => {
+		expect(recordLabelFor('/p', 'Order')).toEqual({
+			path: '/p',
+			label: 'Order',
 		})
+		expect(recordLabelFor('/p', '')).toBeNull()
 	})
 })

package/frontend-vue/tests/editor-session.test.ts

@@ -0,0 +1,207 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h } from 'vue'
+import type { MailingApi } from '../app/composables/useMailingApi'
+import {
+	RETRY_BASE_DELAY_MS,
+	useEditorSession,
+} from '../app/composables/useEditorSession'
+import type { EditorSession } from '../app/composables/useEditorSession'
+import { useEditorLeaveGuard } from '../app/composables/useEditorShortcuts'
+import { createEditorState } from '../app/composables/useTemplateEditor'
+import type { EditorState } from '../app/composables/useTemplateEditor'
+import type {
+	TemplateContentResponse,
+	VariableDefinition,
+} from '../app/types/mailing'
+import { flush, mount } from './helpers/nuxt-globals'
+import type { Mounted } from './helpers/nuxt-globals'
+
+const CONFLICT = {
+	statusCode: 409,
+	data: { message: '$dms_mailing.errors.draft_conflict' },
+}
+const SERVER_ERROR = { statusCode: 500, data: 'boom' }
+
+const LOADED = {
+	template: {
+		_id: 't1',
+		slug: 'welcome',
+		name: 'Welcome',
+		status: 'live',
+		updatedAt: '2026-10-01T10:00:00Z',
+		updatedBy: 'camille',
+	},
+	content: { locales: { en: { subject: 'Hi', preheader: '', blocks: [] } } },
+	publishedContent: null,
+	hasDraft: false,
+	version: 2,
+	revision: 3,
+	changes: [],
+	variables: [],
+	detectedVariables: [],
+	testData: {},
+	fallbackLocale: 'en',
+	blockOnMissingVariables: false,
+	categories: [],
+	sender: { name: '', email: '', replyTo: '' },
+} as TemplateContentResponse
+
+interface Harness {
+	editor: EditorState
+	session: EditorSession
+	api: Record<string, ReturnType<typeof vi.fn>>
+	errors: unknown[]
+	guardDirty: () => boolean
+	mounted: Mounted
+}
+
+function setup(): Harness {
+	const api = {
+		saveContent: vi.fn(),
+		changes: vi.fn(),
+	}
+	const errors: unknown[] = []
+	let guardDirty: () => boolean = () => false
+	vi.stubGlobal('useUnsavedChanges', (options: { dirty: () => boolean }) => {
+		guardDirty = options.dirty
+	})
+	const harness = { api, errors } as unknown as Harness
+	const Host = defineComponent({
+		setup() {
+			harness.editor = createEditorState(LOADED.content, 'en', ['en'])
+			harness.session = useEditorSession({
+				editor: harness.editor,
+				api: api as unknown as MailingApi,
+				templateId: 't1',
+				loaded: LOADED,
+				onError: (error) => errors.push(error),
+			})
+			useEditorLeaveGuard(harness.session)
+			return () => h('div')
+		},
+	})
+	harness.mounted = mount(Host, {})
+	harness.guardDirty = () => guardDirty()
+	return harness
+}
+
+const saved = (revision: number) => ({
+	saved: true,
+	revision,
+	detectedVariables: [],
+	changes: [{ locale: 'en', kind: 'subject' }],
+})
+
+describe('editor session autosave', () => {
+	let harness: Harness
+
+	beforeEach(() => {
+		harness = setup()
+	})
+	afterEach(() => {
+		harness.mounted.unmount()
+		vi.useRealTimers()
+	})
+
+	it('carries the revision it saw and keeps the one the server answers', async () => {
+		harness.api.saveContent!.mockResolvedValue(saved(4))
+		harness.editor.updateLocale({ subject: 'Hello' })
+		expect(await harness.session.save()).toBe(true)
+		expect(harness.api.saveContent).toHaveBeenCalledWith(
+			't1',
+			expect.objectContaining({ revision: 3 }),
+		)
+		expect(harness.session.state.revision).toBe(4)
+		expect(harness.session.state.saveStatus).toBe('idle')
+	})
+
+	it('saves the variable declarations with the draft content', async () => {
+		harness.api.saveContent!.mockResolvedValue(saved(4))
+		const declared: VariableDefinition = {
+			path: 'order.id',
+			type: 'string',
+			required: true,
+		}
+		harness.editor.setVariables([declared])
+		expect(await harness.session.save()).toBe(true)
+		expect(harness.api.saveContent).toHaveBeenCalledWith(
+			't1',
+			expect.objectContaining({
+				content: LOADED.content,
+				variables: [declared],
+				revision: 3,
+			}),
+		)
+	})
+
+	it('stops writing once the draft was saved elsewhere', async () => {
+		harness.api.saveContent!.mockRejectedValue(CONFLICT)
+		harness.editor.updateLocale({ subject: 'Mine' })
+		expect(await harness.session.save()).toBe(false)
+		expect(harness.session.state.saveStatus).toBe('conflict')
+		expect(harness.session.notice?.kind).toBe('conflict')
+		expect(harness.errors).toEqual(['$dms_mailing.errors.draft_conflict'])
+		harness.editor.updateLocale({ subject: 'Mine again' })
+		expect(await harness.session.save()).toBe(false)
+		expect(harness.api.saveContent).toHaveBeenCalledTimes(1)
+		expect(harness.guardDirty()).toBe(true)
+	})
+
+	it('overwrites the other draft with the latest revision', async () => {
+		harness.api.saveContent!.mockRejectedValueOnce(CONFLICT)
+		harness.editor.updateLocale({ subject: 'Mine' })
+		await harness.session.save()
+		harness.api.changes!.mockResolvedValue({
+			version: 2,
+			revision: 9,
+			changes: [],
+		})
+		harness.api.saveContent!.mockResolvedValue(saved(10))
+		expect(await harness.session.overwrite()).toBe(true)
+		expect(harness.api.saveContent).toHaveBeenLastCalledWith(
+			't1',
+			expect.objectContaining({ revision: 9 }),
+		)
+		expect(harness.session.state.saveStatus).toBe('idle')
+	})
+
+	it('tries a failed save again on its own and toasts only once', async () => {
+		vi.useFakeTimers()
+		harness.api.saveContent!.mockRejectedValueOnce(SERVER_ERROR)
+		harness.api.saveContent!.mockResolvedValue(saved(4))
+		harness.editor.updateLocale({ subject: 'Hello' })
+		expect(await harness.session.save()).toBe(false)
+		expect(harness.session.state.saveStatus).toBe('error')
+		expect(harness.session.notice?.kind).toBe('save_error')
+		expect(harness.guardDirty()).toBe(true)
+		await vi.advanceTimersByTimeAsync(RETRY_BASE_DELAY_MS)
+		await flush()
+		expect(harness.api.saveContent).toHaveBeenCalledTimes(2)
+		expect(harness.session.state.saveStatus).toBe('idle')
+		expect(harness.errors).toHaveLength(1)
+		expect(harness.guardDirty()).toBe(false)
+	})
+
+	it('guards unsaved test data', () => {
+		harness.session.state.testDataSource = '{"a": 1}'
+		expect(harness.guardDirty()).toBe(true)
+	})
+
+	it('hands a pending draft to a keepalive request when the page goes away', () => {
+		harness.api.saveContent!.mockResolvedValue(saved(4))
+		harness.editor.updateLocale({ subject: 'Leaving' })
+		window.dispatchEvent(new Event('pagehide'))
+		expect(harness.api.saveContent).toHaveBeenCalledWith(
+			't1',
+			expect.objectContaining({ keepalive: true, revision: 3 }),
+		)
+	})
+
+	it('asks the browser before unloading a draft not written yet', () => {
+		harness.editor.updateLocale({ subject: 'Pending' })
+		const event = new Event('beforeunload', { cancelable: true })
+		window.dispatchEvent(event)
+		expect(event.defaultPrevented).toBe(true)
+	})
+})