@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { createEditorState } from '../app/composables/useTemplateEditor'
-import type { TemplateContent } from '../app/types/mailing'
+import type { Block, TemplateContent } from '../app/types/mailing'
+import { HISTORY_COALESCE_MS } from '../app/utils/history'
 
 const CONTENT: TemplateContent = {
 	locales: {
@@ -21,6 +22,11 @@ const CONTENT: TemplateContent = {
 	},
 }
 
+function steppingClock() {
+	let now = 0
+	return () => (now += HISTORY_COALESCE_MS)
+}
+
 describe('editor state', () => {
 	it('starts clean on the requested locale and tracks dirtiness', () => {
 		const state = createEditorState(CONTENT, 'en', ['en', 'fr'])
@@ -30,13 +36,14 @@ describe('editor state', () => {
 		expect(state.dirty).toBe(1)
 		expect(state.current?.blocks[0]).toMatchObject({ text: 'Hello' })
 	})
-	it('selects and deselects blocks and the subject', () => {
+	it('selects a block and opens the Block tab of the inspector', () => {
 		const state = createEditorState(CONTENT, 'en', ['en'])
+		state.rightTab = 'template'
 		state.select('h1')
 		expect(state.selected?.id).toBe('h1')
-		state.selectSubject()
+		expect(state.rightTab).toBe('block')
+		state.select(null)
 		expect(state.selected).toBeNull()
-		expect(state.subjectSelected).toBe(true)
 	})
 	it('reports missing locales and creates one from a source locale', () => {
 		const state = createEditorState(CONTENT, 'fr', ['en', 'fr'])
@@ -46,20 +53,222 @@ describe('editor state', () => {
 		expect(state.current?.subject).toBe('S')
 		expect(state.current?.blocks[0]?.id).not.toBe('h1')
 	})
-	it('removes a block by id and marks the state dirty', () => {
+	it('removes the selected block and clears the selection', () => {
 		const state = createEditorState(CONTENT, 'en', ['en'])
+		state.select('h1')
 		state.removeBlockById('h1')
 		expect(state.current?.blocks).toHaveLength(0)
+		expect(state.selectedId).toBeNull()
 		expect(state.dirty).toBe(1)
 	})
-	it('adds blocks at the end of a list, inside branches too, and resets on save', () => {
+	it('adds a block under the selected one, inside branches too', () => {
 		const state = createEditorState(CONTENT, 'en', ['en'])
 		const branch = state.addBlock('if')
-		state.addBlock('paragraph', { parentId: branch.id, branch: 'children' })
-		expect(state.current?.blocks.at(-1)?.type).toBe('if')
+		const nested = state.addBlock('paragraph', {
+			parentId: branch.id,
+			branch: 'children',
+		})
+		state.select(nested.id)
+		state.addBlockUnderSelected('button')
 		const found = state.findBlock(branch.id)
-		expect(found?.type === 'if' && found.children).toHaveLength(1)
+		expect(found?.type === 'if' && found.children.map((b) => b.type)).toEqual([
+			'paragraph',
+			'button',
+		])
+		state.select('h1')
+		state.addBlockUnderSelected('divider')
+		expect(state.current?.blocks.map((block) => block.type)).toEqual([
+			'heading',
+			'divider',
+			'if',
+		])
+	})
+	it('duplicates and moves blocks by id', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'])
+		state.duplicateBlockById('h1')
+		const copyId = state.selectedId
+		expect(copyId).not.toBe('h1')
+		state.moveBlockById(copyId as string, -1)
+		expect(state.current?.blocks[0]?.id).toBe(copyId)
+	})
+	it('switches the else branch on and off', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'])
+		const branch = state.addBlock('if')
+		state.setElse(branch.id, true)
+		const found = () => state.findBlock(branch.id)
+		expect(found()?.type === 'if' && found()?.elseChildren).toHaveLength(1)
+		state.setElse(branch.id, false)
+		expect(found()?.type === 'if' && found()?.elseChildren).toBeNull()
+	})
+	it('marks only the revision a save captured as saved', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'])
+		state.updateBlock('h1', { text: 'A' })
+		const captured = state.revision
+		state.updateBlock('h1', { text: 'B' })
+		state.markSaved(captured)
+		expect(state.dirty).toBe(1)
 		state.markSaved()
 		expect(state.dirty).toBe(0)
 	})
+	it('undoes and redoes changes, each one bumping the revision', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'], steppingClock())
+		state.updateBlock('h1', { text: 'One' })
+		state.updateBlock('h1', { text: 'Two' })
+		expect(state.canUndo).toBe(true)
+		state.undo()
+		expect(state.current?.blocks[0]).toMatchObject({ text: 'One' })
+		state.undo()
+		expect(state.current?.blocks[0]).toMatchObject({ text: 'Hi' })
+		expect(state.canUndo).toBe(false)
+		state.redo()
+		expect(state.current?.blocks[0]).toMatchObject({ text: 'One' })
+		expect(state.dirty).toBeGreaterThan(0)
+	})
+	it('drops the selection when an undo removes the selected block', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'], steppingClock())
+		const added = state.addBlock('divider')
+		expect(state.selectedId).toBe(added.id)
+		state.undo()
+		expect(state.selectedId).toBeNull()
+	})
+	it('resets to new content with an empty history', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'], steppingClock())
+		state.updateBlock('h1', { text: 'Changed' })
+		state.reset(CONTENT)
+		expect(state.dirty).toBe(0)
+		expect(state.canUndo).toBe(false)
+		expect(state.current?.blocks[0]).toMatchObject({ text: 'Hi' })
+	})
+	it('opens the block search on the Blocks tab', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'])
+		state.leftTab = 'outline'
+		state.requestSearch()
+		expect(state.leftTab).toBe('blocks')
+		expect(state.isSearchRequested).toBe(true)
+	})
+	it('switches to the locale an undo changes and announces it', () => {
+		const content: TemplateContent = {
+			locales: { ...CONTENT.locales, fr: { ...CONTENT.locales.en! } },
+		}
+		const state = createEditorState(
+			content,
+			'en',
+			['en', 'fr'],
+			steppingClock(),
+		)
+		state.updateBlock('h1', { text: 'Changed' })
+		state.setLocale('fr')
+		state.undo()
+		expect(state.locale).toBe('en')
+		expect(state.current?.blocks[0]).toMatchObject({ text: 'Hi' })
+		expect(state.announcement).toMatchObject({
+			kind: 'undone_in_locale',
+			locale: 'en',
+		})
+		state.redo()
+		expect(state.announcement?.kind).toBe('undone_in_locale')
+	})
+	it('adds a block above the footer when nothing is selected', () => {
+		const footer: Block = {
+			id: 'f1',
+			type: 'footer',
+			text: '',
+			unsubscribeLabel: 'Unsubscribe',
+			preferencesLabel: 'Preferences',
+			visibleIf: null,
+		}
+		const content: TemplateContent = {
+			locales: { en: { subject: '', preheader: '', blocks: [footer] } },
+		}
+		const state = createEditorState(content, 'en', ['en'])
+		state.addBlockUnderSelected('heading')
+		expect(state.current?.blocks.map((block) => block.type)).toEqual([
+			'heading',
+			'footer',
+		])
+	})
+	it('starts an empty locale with its own footer, translates a copy', () => {
+		const state = createEditorState(CONTENT, 'en', ['en', 'fr', 'de'])
+		state.addBlock('footer')
+		state.createLocale('fr', 'en')
+		expect(state.current?.blocks[1]).toMatchObject({
+			unsubscribeLabel: 'Se désinscrire',
+		})
+		state.createLocale('de')
+		expect(state.current?.blocks).toEqual([
+			expect.objectContaining({
+				type: 'footer',
+				unsubscribeLabel: 'Unsubscribe',
+			}),
+		])
+	})
+	it('starts an empty locale of a transactional template without footer links', () => {
+		const state = createEditorState(CONTENT, 'en', ['en', 'fr', 'de'])
+		state.createLocale('fr', undefined, { category: 'orders' })
+		expect(state.current?.blocks).toEqual([
+			expect.objectContaining({
+				type: 'footer',
+				unsubscribeLabel: '',
+				preferencesLabel: '',
+			}),
+		])
+		state.createLocale('de', undefined, { category: 'marketing' })
+		expect(state.current?.blocks[0]).toMatchObject({
+			unsubscribeLabel: 'Unsubscribe',
+		})
+	})
+	it('announces a deletion with its inner blocks and selects the neighbour', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'], steppingClock())
+		const branch = state.addBlock('if')
+		state.addBlock('paragraph', { parentId: branch.id, branch: 'children' })
+		state.select(branch.id)
+		state.removeBlockById(branch.id)
+		expect(state.selectedId).toBe('h1')
+		expect(state.announcement).toMatchObject({
+			kind: 'block_removed',
+			blockType: 'if',
+			count: 1,
+		})
+		state.undoIfLatest(state.announcement?.undoable as string)
+		expect(state.findBlock(branch.id)).not.toBeNull()
+	})
+	it('renames a variable through the content as one undoable step', () => {
+		const declared = [{ path: 'name', type: 'string' as const, required: true }]
+		const state = createEditorState(
+			CONTENT,
+			'en',
+			['en'],
+			steppingClock(),
+			declared,
+		)
+		state.updateBlock('h1', { text: 'Hi {{ name }}' })
+		state.setVariables([{ ...declared[0]!, path: 'first_name' }], {
+			from: 'name',
+			to: 'first_name',
+		})
+		expect(state.current?.blocks[0]).toMatchObject({
+			text: 'Hi {{first_name}}',
+		})
+		expect(state.variables.map((variable) => variable.path)).toEqual([
+			'first_name',
+		])
+		state.undo()
+		expect(state.current?.blocks[0]).toMatchObject({ text: 'Hi {{ name }}' })
+		expect(state.variables).toEqual(declared)
+	})
+	it('keeps the declarations in the draft: saved, undone and redone with it', () => {
+		const state = createEditorState(CONTENT, 'en', ['en'], steppingClock())
+		state.markSaved()
+		state.setVariables([{ path: 'order.id', type: 'string', required: true }])
+		expect(state.dirty).toBeGreaterThan(0)
+		state.undo()
+		expect(state.variables).toEqual([])
+		state.redo()
+		expect(state.variables).toEqual([
+			{ path: 'order.id', type: 'string', required: true },
+		])
+		state.reset(CONTENT, [])
+		expect(state.variables).toEqual([])
+		expect(state.canUndo).toBe(false)
+	})
 })

package/frontend-vue/tests/template-gallery-display.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment node
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { Component } from 'vue'
+
+interface DisplayRegistration {
+	id: string
+	component: Component
+}
+
+type PluginSetup = () => void
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+	vi.resetModules()
+})
+
+describe('template gallery display plugin', () => {
+	it('registers the gallery under the mailing namespace without a DOM', async () => {
+		const registrations: DisplayRegistration[] = []
+		vi.stubGlobal('defineDmsPlugin', (setup: PluginSetup) => setup)
+		vi.stubGlobal(
+			'registerTableViewDisplay',
+			(registration: DisplayRegistration) => registrations.push(registration),
+		)
+		const { default: setup } =
+			await import('../app/plugins/template-gallery-display')
+		setup()
+		expect(registrations.map((registration) => registration.id)).toEqual([
+			'mailing:gallery',
+		])
+	})
+})

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

@@ -0,0 +1,370 @@
+import { reactive } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import TemplateGallery from '../app/components/TemplateGallery.vue'
+import TemplateCard from '../app/components/TemplateCard.vue'
+import type { TemplateRow, TemplateStats } from '../app/types/mailing'
+import {
+	flush,
+	mount,
+	slotStub,
+	stubNuxtGlobals,
+	type NuxtStubs,
+} from './helpers/nuxt-globals'
+
+const api = {
+	listCategories: vi.fn(),
+	templatesOverview: vi.fn(),
+	listTemplates: vi.fn(),
+}
+
+vi.mock('../app/composables/useMailingApi', () => ({
+	useMailingApi: () => api,
+}))
+
+const RECENT = new Date(Date.now() - 3_600_000).toISOString()
+
+function row(overrides: Partial<TemplateRow>): TemplateRow {
+	return {
+		_id: 'id',
+		slug: 'slug',
+		name: 'Name',
+		category: 'orders',
+		status: 'live',
+		locales: 'en,fr,de',
+		updatedAt: RECENT,
+		updatedBy: 'Julie Martin',
+		publishedVersion: 2,
+		publishedAt: RECENT,
+		attention: '',
+		...overrides,
+	}
+}
+
+const LIVE = row({
+	_id: 'live',
+	name: 'Order confirmation',
+	slug: 'order-confirmed',
+})
+const MISSING_DE = row({
+	_id: 'missing',
+	name: 'Shipping update',
+	locales: 'en,fr',
+	attention: 'missing_locale',
+})
+const DRAFT = row({
+	_id: 'draft',
+	name: 'Delivery delayed',
+	status: 'draft',
+	publishedVersion: 0,
+	category: 'billing',
+})
+const STALE_DRAFT = row({
+	_id: 'stale',
+	name: 'Account closed',
+	status: 'draft',
+	publishedVersion: 0,
+	category: 'billing',
+	updatedAt: '2026-01-01T00:00:00Z',
+	attention: 'stale_draft',
+})
+const ARCHIVED = row({
+	_id: 'archived',
+	name: 'Old receipt',
+	status: 'archived',
+	locales: 'en',
+})
+
+const stats = (id: string, sends: number): TemplateStats => ({
+	id,
+	slug: id,
+	sends,
+	openRate: 71.9,
+	problems: 0,
+	lastSentAt: null,
+})
+
+interface ContextOptions {
+	items: TemplateRow[]
+	query?: Record<string, unknown>
+}
+
+function context({ items, query = {} }: ContextOptions) {
+	return {
+		items,
+		loading: false,
+		query,
+		pagination: {
+			pageIndex: 0,
+			pageSize: 50,
+			total: items.length,
+			setPage: vi.fn(),
+		},
+		actions: { open: vi.fn() },
+		refresh: vi.fn(),
+		table: { setGlobalFilter: vi.fn() },
+	}
+}
+
+const globals = {
+	MailingTemplateCard: TemplateCard,
+	MailingTemplatePreviewFrame: slotStub('MailingTemplatePreviewFrame'),
+	MailingStarterGallery: slotStub('MailingStarterGallery'),
+	DmsEmptyState: slotStub('DmsEmptyState'),
+}
+
+let stubs: NuxtStubs
+let routeQuery: Record<string, unknown> = {}
+
+beforeEach(() => {
+	stubs = stubNuxtGlobals()
+	routeQuery = {}
+	vi.stubGlobal('useDmsRoute', () => ({ query: routeQuery }))
+	api.listCategories.mockResolvedValue({
+		categories: [
+			{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
+			{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' },
+		],
+	})
+	api.templatesOverview.mockResolvedValue({
+		items: [stats('live', 6812), stats('missing', 12)],
+	})
+	api.listTemplates.mockResolvedValue({ results: [], total: 3 })
+})
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+	document.body.innerHTML = ''
+})
+
+const cardNames = (host: HTMLElement) =>
+	[...host.querySelectorAll('h3')].map((title) => title.textContent?.trim())
+
+describe('TemplateGallery', () => {
+	it('groups the cards by category, in the settings order', async () => {
+		const view = mount(
+			TemplateGallery,
+			{ context: context({ items: [DRAFT, LIVE, MISSING_DE] }) },
+			globals,
+		)
+		await flush()
+		const headings = [...view.host.querySelectorAll('h2')].map((h) =>
+			h.textContent?.trim(),
+		)
+		expect(headings).toEqual(['Orders', 'Billing'])
+		expect(cardNames(view.host)).toEqual([
+			'Order confirmation',
+			'Shipping update',
+			'Delivery delayed',
+		])
+		view.unmount()
+	})
+
+	it('draws the 30-day figures and the attention badges on the cards', async () => {
+		const view = mount(
+			TemplateGallery,
+			{ context: context({ items: [LIVE, DRAFT, STALE_DRAFT] }) },
+			globals,
+		)
+		await flush()
+		const text = view.host.textContent ?? ''
+		expect(text).toContain('6,812')
+		expect(text).toContain('dms_mailing.templates.card.edited_by')
+		expect(text).toContain('name=Julie')
+		expect(
+			view.host.querySelector(
+				'[label*="dms_mailing.templates.card.stale_days"]',
+			),
+		).not.toBeNull()
+		view.unmount()
+	})
+
+	it('lists the rows of the attention tab, and says when none is left', async () => {
+		const query = { filter_needsAttention: 'is:true' }
+		const listed = mount(
+			TemplateGallery,
+			{ context: context({ items: [MISSING_DE, STALE_DRAFT], query }) },
+			globals,
+		)
+		await flush()
+		expect(cardNames(listed.host)).toEqual([
+			'Shipping update',
+			'Account closed',
+		])
+		listed.unmount()
+		const cleared = mount(
+			TemplateGallery,
+			{ context: context({ items: [], query }) },
+			globals,
+		)
+		await flush()
+		expect(
+			cleared.host.querySelector(
+				'[title*="dms_mailing.templates.attention.none_title"]',
+			),
+		).not.toBeNull()
+		cleared.unmount()
+	})
+
+	it('reloads the figures when the table refreshes, not when it pages', async () => {
+		api.listTemplates.mockClear()
+		api.templatesOverview.mockClear()
+		const ctx = reactive(context({ items: [LIVE] }))
+		const view = mount(TemplateGallery, { context: ctx }, globals)
+		await flush()
+		expect(api.listTemplates).toHaveBeenCalledTimes(1)
+		ctx.items = [LIVE]
+		await flush()
+		expect(api.listTemplates).toHaveBeenCalledTimes(2)
+		expect(api.templatesOverview).toHaveBeenCalledTimes(2)
+		ctx.pagination.pageIndex = 1
+		ctx.items = [MISSING_DE]
+		await flush()
+		expect(api.listTemplates).toHaveBeenCalledTimes(2)
+		view.unmount()
+	})
+
+	it('drops the category groups under an explicit sort, and steps the drawer in the drawn order', async () => {
+		const ctx = context({
+			items: [DRAFT, LIVE, MISSING_DE],
+			query: { sortKey: 'name', sortDirection: 'asc' },
+		})
+		const view = mount(TemplateGallery, { context: ctx }, globals)
+		await flush()
+		expect(view.host.querySelectorAll('h2')).toHaveLength(0)
+		expect(cardNames(view.host)).toEqual([
+			'Delivery delayed',
+			'Order confirmation',
+			'Shipping update',
+		])
+		view.unmount()
+
+		const grouped = mount(
+			TemplateGallery,
+			{ context: context({ items: [DRAFT, LIVE, MISSING_DE] }) },
+			globals,
+		)
+		await flush()
+		const details = [
+			...grouped.host.querySelectorAll('ubutton[aria-label]'),
+		].filter(
+			(button) =>
+				button.getAttribute('aria-label') ===
+				'dms_mailing.templates.actions.details',
+		) as HTMLElement[]
+		details[0]!.click()
+		const rows = stubs.drawerCalls[0]?.componentOptions?.navigation as {
+			total: number
+			index: number
+		}
+		expect(rows).toMatchObject({ index: 0, total: 3 })
+		grouped.unmount()
+	})
+
+	it('shows the starters on a first run', async () => {
+		api.listTemplates.mockResolvedValue({ results: [], total: 0 })
+		const view = mount(
+			TemplateGallery,
+			{ context: context({ items: [] }) },
+			globals,
+		)
+		await flush()
+		expect(
+			view.host.querySelector('[data-stub="MailingStarterGallery"]'),
+		).not.toBeNull()
+		view.unmount()
+	})
+
+	it('offers to reset a search with no match, and to create from it', async () => {
+		const ctx = context({
+			items: [],
+			query: { search: 'Refund', filter_status: 'is_not:archived' },
+		})
+		const view = mount(TemplateGallery, { context: ctx }, globals)
+		await flush()
+		const empty = view.host.querySelector(
+			'[data-stub="DmsEmptyState"]',
+		) as HTMLElement
+		expect(empty.getAttribute('title')).toContain('search=Refund')
+		const buttons = [...empty.querySelectorAll('ubutton')] as HTMLElement[]
+		buttons[0]!.click()
+		expect(ctx.table.setGlobalFilter).toHaveBeenCalledWith('')
+		expect(stubs.navigations).toEqual([])
+		buttons[1]!.click()
+		expect(stubs.modalCalls[0]?.componentOptions).toMatchObject({
+			initialName: 'Refund',
+		})
+		view.unmount()
+	})
+
+	it('also leaves the page state behind when a quick filter narrows it', async () => {
+		const ctx = context({ items: [], query: { filter_category: 'is:billing' } })
+		const view = mount(TemplateGallery, { context: ctx }, globals)
+		await flush()
+		;(
+			view.host.querySelector(
+				'[data-stub="DmsEmptyState"] ubutton',
+			) as HTMLElement
+		).click()
+		expect(stubs.navigations).toEqual([{ path: '/modules/mailing/templates' }])
+		view.unmount()
+	})
+
+	it('opens the new template dialog on N, not while typing', async () => {
+		const view = mount(
+			TemplateGallery,
+			{ context: context({ items: [LIVE] }) },
+			globals,
+		)
+		await flush()
+		const input = document.createElement('input')
+		document.body.appendChild(input)
+		input.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'n', bubbles: true }),
+		)
+		expect(stubs.modalCalls).toHaveLength(0)
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'n' }))
+		expect(stubs.modalCalls[0]?.component).toEqual({
+			name: 'MailingNewTemplateModal',
+		})
+		view.unmount()
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'n' }))
+		expect(stubs.modalCalls).toHaveLength(1)
+	})
+
+	it('opens a focused card on Enter and tests it on T', async () => {
+		const ctx = context({ items: [LIVE] })
+		const view = mount(TemplateGallery, { context: ctx }, globals)
+		await flush()
+		const card = view.host.querySelector('dmscard') as HTMLElement
+		card.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 't', bubbles: true }),
+		)
+		expect(stubs.modalCalls[0]?.component).toEqual({
+			name: 'MailingTestSendModal',
+		})
+		card.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+		)
+		expect(ctx.actions.open).toHaveBeenCalledWith(LIVE)
+		view.unmount()
+	})
+
+	it('opens the editor on a missing locale chip', async () => {
+		const view = mount(
+			TemplateGallery,
+			{ context: context({ items: [MISSING_DE] }) },
+			globals,
+		)
+		await flush()
+		const chips = [
+			...view.host.querySelectorAll('button[aria-label]'),
+		] as HTMLElement[]
+		const missing = chips.find((chip) => chip.textContent?.trim() === 'de')!
+		expect(missing.className).toContain('border-dashed')
+		missing.click()
+		expect(stubs.navigations).toEqual([
+			{ path: '/modules/mailing/templates/missing', query: { locale: 'de' } },
+		])
+		view.unmount()
+	})
+})