@antelopejs/dms-mailing 0.3.4 → 0.4.0

package/frontend-vue/tests/blocks-factory.test.ts

@@ -25,4 +25,50 @@ describe('block factory', () => {
 	it('prefixes ids with the type', () => {
 		expect(newBlockId('heading')).toMatch(/^heading_[a-z0-9]{6}$/)
 	})
+	it('invents no variable token in a new block', () => {
+		expect(createBlock('code')).toMatchObject({ text: '' })
+		expect(createBlock('total')).toMatchObject({ value: '' })
+	})
+	it('points lists and conditions at a declared variable of the right type', () => {
+		const context = {
+			variables: [
+				{ path: 'contact.name', type: 'string' as const, required: false },
+				{ path: 'cart.items', type: 'array' as const, required: false },
+				{ path: 'contact.vip', type: 'boolean' as const, required: false },
+			],
+		}
+		expect(createBlock('list', context)).toMatchObject({ source: 'cart.items' })
+		const branch = createBlock('if', context)
+		expect(branch.type === 'if' && branch.condition.path).toBe('contact.vip')
+		const fallback = createBlock('if', { detected: ['order.id'] })
+		expect(fallback.type === 'if' && fallback.condition.path).toBe('order.id')
+	})
+	it('writes the footer labels in the locale of the page', () => {
+		expect(createBlock('footer', { locale: 'fr' })).toMatchObject({
+			unsubscribeLabel: 'Se désinscrire',
+			preferencesLabel: 'Préférences',
+		})
+		expect(createBlock('footer', { locale: 'de' })).toMatchObject({
+			unsubscribeLabel: 'Unsubscribe',
+		})
+	})
+})
+
+describe('starting words', () => {
+	it('speak the language of the locale being edited', () => {
+		const context = { locale: 'fr-BE' }
+		expect(createBlock('heading', context)).toMatchObject({
+			text: 'Nouveau titre',
+		})
+		expect(createBlock('paragraph', context)).toMatchObject({
+			text: 'Votre texte…',
+		})
+		expect(createBlock('button', context)).toMatchObject({ text: 'Bouton' })
+	})
+	it('fall back to English for a language without its own', () => {
+		expect(createBlock('heading', { locale: 'de' })).toMatchObject({
+			text: 'New heading',
+		})
+		expect(createBlock('button')).toMatchObject({ text: 'Button' })
+	})
 })

package/frontend-vue/tests/blocks-outline.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+import {
+	blockPosition,
+	branchCounts,
+	buildOutline,
+	filterPalette,
+	flattenBlocks,
+	insertionAfter,
+	paletteLabelKey,
+	summarizeBlock,
+	BLOCK_PALETTE,
+} from '../app/utils/blocks'
+import type { Block, IfBlock } from '../app/types/mailing'
+
+const branch: IfBlock = {
+	id: 'if1',
+	type: 'if',
+	condition: { path: 'order.isFirstOrder', operator: 'truthy', value: '' },
+	children: [{ id: 'c1', type: 'code', text: 'WELCOME10', visibleIf: null }],
+	elseChildren: [
+		{
+			id: 'p2',
+			type: 'paragraph',
+			text: 'Thanks for ordering again, see you soon',
+			align: 'left',
+			visibleIf: null,
+		},
+	],
+	visibleIf: null,
+}
+
+const BLOCKS: Block[] = [
+	{
+		id: 'h1',
+		type: 'heading',
+		text: 'Thanks',
+		align: 'left',
+		size: 23,
+		visibleIf: null,
+	},
+	branch,
+	{ id: 'd1', type: 'divider', visibleIf: null },
+]
+
+describe('outline', () => {
+	it('nests condition branches with an ELSE marker', () => {
+		expect(
+			buildOutline(BLOCKS).map((row) => [row.kind, row.blockId, row.depth]),
+		).toEqual([
+			['block', 'h1', 0],
+			['block', 'if1', 0],
+			['block', 'c1', 1],
+			['else', 'if1', 1],
+			['block', 'p2', 1],
+			['block', 'd1', 0],
+		])
+	})
+	it('summarises a block in a few characters', () => {
+		expect(summarizeBlock(branch)).toBe('order.isFirstOrder')
+		expect(summarizeBlock(branch.elseChildren![0]!)).toBe('Thanks for orderin…')
+		expect(summarizeBlock(BLOCKS[2]!)).toBe('')
+	})
+})
+
+describe('tree positions', () => {
+	it('counts every block of the tree, depth first', () => {
+		expect(flattenBlocks(BLOCKS).map((block) => block.id)).toEqual([
+			'h1',
+			'if1',
+			'c1',
+			'p2',
+			'd1',
+		])
+		expect(blockPosition(BLOCKS, 'p2')).toEqual({ index: 4, total: 5 })
+		expect(blockPosition(BLOCKS, 'nope')).toBeNull()
+		expect(branchCounts(branch)).toEqual({ then: 1, else: 1 })
+	})
+	it('inserts after the selected block in its own list', () => {
+		const point = insertionAfter(BLOCKS, 'c1')
+		expect(point.list).toBe(branch.children)
+		expect(point.index).toBe(1)
+		expect(insertionAfter(BLOCKS, null)).toEqual({ list: BLOCKS, index: 3 })
+	})
+})
+
+describe('palette', () => {
+	it('filters tiles by label or type', () => {
+		const labelOf = (entry: { type: string }) => `Label ${entry.type}`
+		expect(
+			filterPalette(BLOCK_PALETTE, 'HERO', labelOf).map((e) => e.type),
+		).toEqual(['hero'])
+		expect(filterPalette(BLOCK_PALETTE, '  ', labelOf)).toHaveLength(
+			BLOCK_PALETTE.length,
+		)
+	})
+	it('gives the footer and the condition their longer tile labels', () => {
+		expect(paletteLabelKey('footer')).toBe(
+			'dms_mailing.editor.palette.tiles.footer',
+		)
+		expect(paletteLabelKey('heading')).toBe('dms_mailing.blocks.heading')
+	})
+})

package/frontend-vue/tests/blocks-tree.test.ts

@@ -4,10 +4,13 @@ import {
 	duplicateBlock,
 	findBlock,
 	findParentList,
+	insertionAfter,
+	localizeFooters,
 	moveBlock,
+	neighbourOf,
 	removeBlock,
 } from '../app/utils/blocks'
-import type { Block, IfBlock } from '../app/types/mailing'
+import type { Block, FooterBlock, IfBlock } from '../app/types/mailing'
 
 function tree(): Block[] {
 	const branch = createBlock('if') as IfBlock
@@ -47,3 +50,27 @@ describe('block tree', () => {
 		expect((blocks[1] as IfBlock).children).toEqual([])
 	})
 })
+
+describe('insertion and removal helpers', () => {
+	it('adds above the closing footer when nothing is selected', () => {
+		const blocks = tree()
+		expect(insertionAfter(blocks, null, 'heading').index).toBe(2)
+		expect(insertionAfter(blocks, null, 'footer').index).toBe(3)
+		expect(insertionAfter(blocks.slice(0, 2), null).index).toBe(2)
+	})
+	it('picks the next sibling, the previous one, then the parent condition', () => {
+		const blocks = tree()
+		expect(neighbourOf(blocks, 'h1')).toBe('if1')
+		expect(neighbourOf(blocks, 'f1')).toBe('if1')
+		expect(neighbourOf(blocks, 'p1')).toBe('if1')
+		expect(neighbourOf(blocks, 'missing')).toBeNull()
+	})
+	it('translates the default footer labels and keeps typed ones', () => {
+		const blocks = tree()
+		const footer = blocks[2] as FooterBlock
+		footer.preferencesLabel = 'My settings'
+		localizeFooters(blocks, 'en', 'fr')
+		expect(footer.unsubscribeLabel).toBe('Se désinscrire')
+		expect(footer.preferencesLabel).toBe('My settings')
+	})
+})

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

@@ -0,0 +1,139 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, reactive } from 'vue'
+import CategoriesInput from '../app/components/CategoriesInput.vue'
+import {
+	flush,
+	mount,
+	slotStub,
+	stubNuxtGlobals,
+	type Mounted,
+} from './helpers/nuxt-globals'
+import type { TemplateCategory } from '../app/types/mailing'
+
+vi.mock('../app/composables/useMailingApi', () => ({
+	useMailingApi: () => ({
+		categoryUsage: async () => ({ counts: {} }),
+	}),
+}))
+
+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 ROW_ERROR = 'dms_mailing.settings.categories.label_required'
+
+const formErrors = reactive(new Map<string, string>())
+
+interface FormFieldStubProps {
+	name: string
+	errorPattern?: RegExp
+}
+
+function fieldError(props: FormFieldStubProps): string | undefined {
+	const match = [...formErrors].find(
+		([name]) => name === props.name || props.errorPattern?.test(name),
+	)
+	return match?.[1]
+}
+
+const FormFieldStub = defineComponent({
+	props: {
+		name: { type: String, required: true },
+		errorPattern: { type: RegExp, default: undefined },
+	},
+	setup:
+		(props, { slots }) =>
+		() =>
+			h('div', { 'data-row': props.name }, [
+				slots.default?.(),
+				h(
+					'div',
+					{ 'data-slot': 'error' },
+					slots.error?.({ error: fieldError(props) }),
+				),
+			]),
+})
+
+const ButtonStub = defineComponent({
+	inheritAttrs: false,
+	props: { icon: { type: String, default: '' } },
+	setup:
+		(props, { attrs }) =>
+		() =>
+			h('button', { ...attrs, 'data-icon': props.icon }),
+})
+
+function mountInput(): Mounted {
+	return mount(
+		CategoriesInput,
+		{ modelValue: CATEGORIES, initialValue: CATEGORIES },
+		{
+			UFormField: FormFieldStub,
+			UButton: ButtonStub,
+			UPopover: slotStub('UPopover'),
+			DmsEyebrow: slotStub('DmsEyebrow'),
+			DmsInputText: slotStub('DmsInputText'),
+		},
+	)
+}
+
+function alerts(host: HTMLElement): HTMLElement[] {
+	return [...host.querySelectorAll<HTMLElement>('[role="alert"]')]
+}
+
+describe('CategoriesInput', () => {
+	let mounted: Mounted | undefined
+
+	beforeEach(() => {
+		stubNuxtGlobals()
+		formErrors.clear()
+	})
+
+	afterEach(() => {
+		mounted?.unmount()
+		vi.unstubAllGlobals()
+	})
+
+	it('leaves the error line of a valid row empty', async () => {
+		mounted = mountInput()
+		await flush()
+		expect(alerts(mounted.host)).toHaveLength(0)
+		const lines = mounted.host.querySelectorAll('[data-slot="error"]')
+		expect([...lines].every((line) => line.matches(':empty'))).toBe(true)
+	})
+
+	it('shows an error under the row it names only', async () => {
+		mounted = mountInput()
+		formErrors.set('categories.1.label', ROW_ERROR)
+		await flush()
+		const shown = alerts(mounted.host)
+		expect(shown).toHaveLength(1)
+		expect(shown[0]?.textContent?.trim()).toBe(ROW_ERROR)
+		expect(shown[0]?.closest('[data-row]')?.getAttribute('data-row')).toBe(
+			'categories.1.label',
+		)
+	})
+
+	it('starts a new row with an icon no other row uses', async () => {
+		mounted = mountInput()
+		await flush()
+		const add = mounted.host.querySelector<HTMLElement>(
+			'button[label="dms_mailing.settings.categories.add"]',
+		)
+		add?.click()
+		await flush()
+		const pickers = mounted.host.querySelectorAll(
+			'button[aria-label="dms_mailing.settings.categories.change_icon"]',
+		)
+		expect(pickers).toHaveLength(CATEGORIES.length + 1)
+		expect(pickers[CATEGORIES.length]?.getAttribute('data-icon')).toBe(
+			'i-ph-lock',
+		)
+	})
+})

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

@@ -1,11 +1,22 @@
 import { describe, expect, it } from 'vitest'
 import {
+	CATEGORY_ICONS,
+	DEFAULT_CATEGORY_ICON,
+	categoryMoves,
+	iconName,
+	keptCategories,
+	moveRow,
+	newCategoryIcon,
+	redirectMoves,
+	withMoves,
 	fromCategoryOption,
 	NO_CATEGORY,
-	parseCategories,
-	serializeCategories,
 	slugifyId,
 	toCategoryOption,
+	toStoredCategories,
+	toStoredCategory,
+	uniqueId,
+	type EditableCategory,
 } from '../app/utils/categories'
 import type { TemplateCategory } from '../app/types/mailing'
 
@@ -13,19 +24,6 @@ const CATEGORIES: TemplateCategory[] = [
 	{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
 ]
 
-describe('parseCategories', () => {
-	it('round-trips through the string form the form field stores', () => {
-		expect(parseCategories(serializeCategories(CATEGORIES))).toEqual(CATEGORIES)
-		expect(parseCategories('')).toEqual([])
-		expect(parseCategories('not json')).toEqual([])
-		expect(parseCategories(undefined)).toEqual([])
-	})
-
-	it('accepts an already-parsed array', () => {
-		expect(parseCategories(CATEGORIES)).toEqual(CATEGORIES)
-	})
-})
-
 describe('slugifyId', () => {
 	it('derives a stable id from a label', () => {
 		expect(slugifyId('Orders & refunds')).toBe('orders-refunds')
@@ -62,3 +60,138 @@ describe('the uncategorised sentinel', () => {
 		expect(fromCategoryOption(toCategoryOption(null))).toBe('')
 	})
 })
+
+describe('toStoredCategory', () => {
+	// The data-api edit leaves an absent key unchanged from 0.2.0 on, so "no
+	// category" must travel as an explicit `null` to clear a stored one.
+	it('sends null for every empty form of "no category"', () => {
+		expect(toStoredCategory('')).toBeNull()
+		expect(toStoredCategory(null)).toBeNull()
+		expect(toStoredCategory(undefined)).toBeNull()
+		expect(toStoredCategory(fromCategoryOption(NO_CATEGORY))).toBeNull()
+	})
+
+	it('keeps a real category id', () => {
+		expect(toStoredCategory('orders')).toBe('orders')
+	})
+})
+
+describe('uniqueId', () => {
+	it('suffixes an id already taken', () => {
+		expect(uniqueId('orders', new Set())).toBe('orders')
+		expect(uniqueId('orders', new Set(['orders', 'orders-2']))).toBe('orders-3')
+	})
+})
+
+const row = (patch: Partial<EditableCategory>): EditableCategory => ({
+	key: patch.label ?? 'row',
+	id: '',
+	label: '',
+	icon: 'i-ph-package',
+	isNew: false,
+	...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' }])
+	})
+
+	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 }),
+		])
+		expect(stored.map((category) => category.id)).toEqual([
+			'billing',
+			'billing-2',
+			'ete',
+		])
+	})
+
+	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: '' }),
+		])
+		expect(stored).toEqual([
+			{ id: 'category', label: '', icon: 'i-ph-package' },
+			{ id: 'category-2', label: '!!!', icon: 'i-ph-folder' },
+		])
+	})
+})
+
+describe('CATEGORY_ICONS', () => {
+	it('offers sixteen distinct Phosphor icons', () => {
+		expect(new Set(CATEGORY_ICONS).size).toBe(16)
+		expect(CATEGORY_ICONS.every((icon) => icon.startsWith('i-ph-'))).toBe(true)
+	})
+})
+
+describe('moveRow', () => {
+	it('moves a row up or down and says where it went', () => {
+		expect(moveRow(['a', 'b', 'c'], 1, -1)).toEqual({
+			rows: ['b', 'a', 'c'],
+			index: 0,
+		})
+		expect(moveRow(['a', 'b', 'c'], 1, 1)).toEqual({
+			rows: ['a', 'c', 'b'],
+			index: 2,
+		})
+	})
+
+	it('stays put at either end', () => {
+		const rows = ['a', 'b']
+		expect(moveRow(rows, 0, -1)).toEqual({ rows, index: 0 })
+		expect(moveRow(rows, 1, 1)).toEqual({ rows, index: 1 })
+	})
+})
+
+describe('category moves', () => {
+	const gone = { id: 'gone', label: 'Gone', icon: 'i-ph-gift' }
+
+	it('hands the form the kept categories, then the moved ones', () => {
+		const entries = withMoves(CATEGORIES, [
+			{ ...gone, moveTo: 'orders' },
+			{ ...gone, id: 'dropped', moveTo: '' },
+		])
+		expect(entries).toEqual([...CATEGORIES, { ...gone, moveTo: 'orders' }])
+		expect(keptCategories(entries)).toEqual(CATEGORIES)
+		expect([...categoryMoves(entries)]).toEqual([['gone', 'orders']])
+	})
+
+	it('follows a removed target, or drops the move when it goes nowhere', () => {
+		const moves = [{ ...gone, moveTo: 'orders' }]
+		expect(redirectMoves(moves, 'orders', 'billing')).toEqual([
+			{ ...gone, moveTo: 'billing' },
+		])
+		expect(redirectMoves(moves, 'orders', '')).toEqual([])
+		expect(redirectMoves(moves, 'other', '')).toEqual(moves)
+	})
+})
+
+describe('iconName', () => {
+	it('names an icon for its i18n label', () => {
+		expect(iconName('i-ph-megaphone')).toBe('megaphone')
+		expect(iconName('i-ph-shopping-cart')).toBe('shopping_cart')
+	})
+})
+
+describe('newCategoryIcon', () => {
+	it('picks the first icon no category uses yet', () => {
+		expect(newCategoryIcon(CATEGORIES)).toBe(CATEGORY_ICONS[1])
+		expect(newCategoryIcon([])).toBe(CATEGORY_ICONS[0])
+	})
+
+	it('falls back to the default once every icon is taken', () => {
+		const all = CATEGORY_ICONS.map((icon, index) => ({
+			id: `c${index}`,
+			label: `C${index}`,
+			icon,
+		}))
+		expect(newCategoryIcon(all)).toBe(DEFAULT_CATEGORY_ICON)
+	})
+})

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

@@ -0,0 +1,136 @@
+import { describe, expect, it } from 'vitest'
+import { describeChanges } from '../app/utils/changes'
+import type { TemplateChange, TemplateContent } from '../app/types/mailing'
+
+const DRAFT: TemplateContent = {
+	locales: {
+		en: {
+			subject: 'S',
+			preheader: '',
+			blocks: [
+				{
+					id: 'if1',
+					type: 'if',
+					condition: {
+						path: 'order.isFirstOrder',
+						operator: 'truthy',
+						value: '',
+					},
+					children: [],
+					elseChildren: null,
+					visibleIf: null,
+				},
+			],
+		},
+	},
+}
+
+const LABELS: Record<string, string> = {
+	'dms_mailing.blocks.paragraph': 'Paragraph',
+	'dms_mailing.blocks.if': 'Condition',
+	'dms_mailing.editor.changes.block_changed': '{block} changed',
+	'dms_mailing.editor.changes.block_added': '{block} added',
+	'dms_mailing.editor.changes.subject': 'Subject changed',
+	'dms_mailing.editor.changes.variable_added': '{variable} declared',
+}
+
+const translate = (key: string, params: Record<string, string> = {}) =>
+	(LABELS[key] ?? key).replace(/\{(\w+)\}/g, (_, name) => params[name] ?? '')
+
+describe('describeChanges', () => {
+	it('reads a declaration change without a locale, naming its path', () => {
+		const lines = describeChanges(
+			[{ locale: '', kind: 'variable_added', variable: 'order.id' }],
+			{ draft: DRAFT, published: null },
+			translate,
+		)
+		expect(lines.map((line) => line.text)).toEqual(['order.id declared'])
+		expect(lines[0]?.icon).toBe('i-ph-brackets-curly')
+	})
+
+	it('reads each change as a line prefixed with its locale', () => {
+		const changes: TemplateChange[] = [
+			{
+				locale: 'en',
+				kind: 'block_changed',
+				blockId: 'p1',
+				blockType: 'paragraph',
+			},
+			{ locale: 'en', kind: 'block_added', blockId: 'if1', blockType: 'if' },
+			{ locale: 'fr', kind: 'subject' },
+		]
+		const lines = describeChanges(
+			changes,
+			{ draft: DRAFT, published: null },
+			translate,
+		)
+		expect(lines.map((line) => line.text)).toEqual([
+			'EN · Paragraph changed',
+			'EN · Condition order.isFirstOrder added',
+			'FR · Subject changed',
+		])
+		expect(lines[1]?.icon).toBe('i-ph-plus-circle')
+		expect(new Set(lines.map((line) => line.key)).size).toBe(3)
+	})
+	it('names a removed condition from the published content', () => {
+		const lines = describeChanges(
+			[
+				{
+					locale: 'en',
+					kind: 'block_removed',
+					blockId: 'if1',
+					blockType: 'if',
+				},
+			],
+			{ draft: { locales: {} }, published: DRAFT },
+			(key, params) => (params ? `${key}:${params.block}` : key),
+		)
+		expect(lines[0]?.text).toBe(
+			'EN · dms_mailing.editor.changes.block_removed:dms_mailing.blocks.if order.isFirstOrder',
+		)
+	})
+})
+
+describe('describeChanges before / after', () => {
+	const content = (subject: string, text: string): TemplateContent => ({
+		locales: {
+			fr: {
+				subject,
+				preheader: '',
+				blocks: [
+					{
+						id: 'h1',
+						type: 'heading',
+						text,
+						align: 'left',
+						size: 24,
+						visibleIf: null,
+					},
+				],
+			},
+		},
+	})
+
+	it('shows the text customers receive next to the draft one', () => {
+		const lines = describeChanges(
+			[
+				{ locale: 'fr', kind: 'subject' },
+				{
+					locale: 'fr',
+					kind: 'block_changed',
+					blockId: 'h1',
+					blockType: 'heading',
+				},
+			],
+			{
+				draft: content('Nouveau', 'Bonjour'),
+				published: content('Ancien', 'Salut'),
+			},
+			translate,
+		)
+		expect(lines.map((line) => [line.before, line.after])).toEqual([
+			['Ancien', 'Nouveau'],
+			['Salut', 'Bonjour'],
+		])
+	})
+})