@antelopejs/dms-mailing 0.2.2

package/frontend-vue/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - '.'

package/frontend-vue/tests/block-components.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { BLOCK_TYPES } from '../app/types/mailing'
+import { BLOCK_COMPONENT_NAMES } from '../app/utils/blocks/components'
+
+describe('block components', () => {
+	it('names a canvas renderer for every block type', () => {
+		expect(Object.keys(BLOCK_COMPONENT_NAMES).sort()).toEqual(
+			[...BLOCK_TYPES].sort(),
+		)
+	})
+	it('routes the if block to the editor branch component', () => {
+		expect(BLOCK_COMPONENT_NAMES.if).toBe('DmsMailingEditorIfBlock')
+	})
+})

package/frontend-vue/tests/block-fields.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { fieldsFor } from '../app/utils/blocks/fields'
+
+describe('fieldsFor', () => {
+	it('lists the editable fields of each block type', () => {
+		expect(fieldsFor('button').map((field) => field.key)).toEqual([
+			'text',
+			'href',
+			'align',
+		])
+		expect(fieldsFor('heading').map((field) => field.key)).toEqual([
+			'text',
+			'align',
+			'size',
+		])
+		expect(fieldsFor('divider')).toEqual([])
+		expect(fieldsFor('list').map((field) => field.kind)).toEqual([
+			'text',
+			'text',
+			'text',
+		])
+	})
+})

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

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import {
+	BLOCK_PALETTE,
+	LOGIC_PALETTE,
+	createBlock,
+	newBlockId,
+} from '../app/utils/blocks'
+
+describe('block factory', () => {
+	it('creates every palette block with a unique id and no visibility rule', () => {
+		const ids = new Set<string>()
+		for (const entry of [...BLOCK_PALETTE, ...LOGIC_PALETTE]) {
+			const block = createBlock(entry.type)
+			expect(block.type).toBe(entry.type)
+			expect(block.visibleIf).toBeNull()
+			expect(ids.has(block.id)).toBe(false)
+			ids.add(block.id)
+		}
+	})
+	it('gives an if block an empty then-branch and no else-branch', () => {
+		const block = createBlock('if')
+		expect(block.type === 'if' && block.children).toEqual([])
+		expect(block.type === 'if' && block.elseChildren).toBeNull()
+	})
+	it('prefixes ids with the type', () => {
+		expect(newBlockId('heading')).toMatch(/^heading_[a-z0-9]{6}$/)
+	})
+})

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

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import {
+	createBlock,
+	duplicateBlock,
+	findBlock,
+	findParentList,
+	moveBlock,
+	removeBlock,
+} from '../app/utils/blocks'
+import type { Block, IfBlock } from '../app/types/mailing'
+
+function tree(): Block[] {
+	const branch = createBlock('if') as IfBlock
+	branch.id = 'if1'
+	branch.children = [{ ...createBlock('paragraph'), id: 'p1' }]
+	return [
+		{ ...createBlock('heading'), id: 'h1' },
+		branch,
+		{ ...createBlock('footer'), id: 'f1' },
+	]
+}
+
+describe('block tree', () => {
+	it('finds nested blocks and their parent list', () => {
+		const blocks = tree()
+		expect(findBlock(blocks, 'p1')?.type).toBe('paragraph')
+		expect(findParentList(blocks, 'p1')).toBe((blocks[1] as IfBlock).children)
+		expect(findParentList(blocks, 'h1')).toBe(blocks)
+		expect(findBlock(blocks, 'nope')).toBeNull()
+	})
+	it('moves within the parent list and clamps at the edges', () => {
+		const blocks = tree()
+		expect(moveBlock(blocks, 'f1', -1)).toBe(true)
+		expect(blocks.map((block) => block.id)).toEqual(['h1', 'f1', 'if1'])
+		expect(moveBlock(blocks, 'h1', -1)).toBe(false)
+	})
+	it('duplicates right after the source with fresh ids (deep)', () => {
+		const blocks = tree()
+		const copy = duplicateBlock(blocks, 'if1')
+		expect(copy?.id).not.toBe('if1')
+		expect(copy?.type === 'if' && copy.children[0]?.id).not.toBe('p1')
+		expect(blocks[2]).toBe(copy)
+	})
+	it('removes nested blocks', () => {
+		const blocks = tree()
+		expect(removeBlock(blocks, 'p1')).toBe(true)
+		expect((blocks[1] as IfBlock).children).toEqual([])
+	})
+})

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

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import {
+	fromCategoryOption,
+	NO_CATEGORY,
+	parseCategories,
+	serializeCategories,
+	slugifyId,
+	toCategoryOption,
+} from '../app/utils/categories'
+import type { TemplateCategory } from '../app/types/mailing'
+
+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')
+		expect(slugifyId('  Facturation  ')).toBe('facturation')
+		expect(slugifyId('Été 2026')).toBe('ete-2026')
+	})
+
+	it('answers an empty string when nothing survives', () => {
+		expect(slugifyId('!!!')).toBe('')
+	})
+})
+
+describe('the uncategorised sentinel', () => {
+	// Reka's `Select` reserves the empty string for "nothing selected": an item
+	// offering it makes the listbox refuse to open, silently. The sentinel must
+	// therefore never be empty, and must never leak out of the widget.
+	it('is never the empty string', () => {
+		expect(NO_CATEGORY).not.toBe('')
+	})
+
+	it('maps every empty form of "no category" onto the sentinel', () => {
+		expect(toCategoryOption('')).toBe(NO_CATEGORY)
+		expect(toCategoryOption(null)).toBe(NO_CATEGORY)
+		expect(toCategoryOption(undefined)).toBe(NO_CATEGORY)
+	})
+
+	it('leaves a real category id alone in both directions', () => {
+		expect(toCategoryOption('orders')).toBe('orders')
+		expect(fromCategoryOption('orders')).toBe('orders')
+	})
+
+	it('maps the sentinel back to the empty value callers expect', () => {
+		expect(fromCategoryOption(NO_CATEGORY)).toBe('')
+		expect(fromCategoryOption(toCategoryOption(null))).toBe('')
+	})
+})

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

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import {
+	OPERATORS_WITH_VALUE,
+	compileCondition,
+	describeCondition,
+} 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(
+				{ path: 'a', operator: 'ne', value: '1' },
+				(key) => key.split('.').at(-1) ?? key,
+			),
+		).toBe('a ne 1')
+		expect(OPERATORS_WITH_VALUE).toEqual(['eq', 'ne', 'gt', 'lt'])
+	})
+})

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

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { DRAG_GROUP, cloneFromPalette } from '../app/utils/blocks/dnd'
+
+describe('dnd', () => {
+	it('clones a palette entry into a fresh block', () => {
+		const block = cloneFromPalette({ type: 'button', icon: 'x' })
+		expect(block.type).toBe('button')
+		expect(block.id).toMatch(/^button_/)
+		expect(DRAG_GROUP.name).toBe('mailing-blocks')
+	})
+})

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

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+	createApp,
+	defineAsyncComponent,
+	defineComponent,
+	h,
+	nextTick,
+	reactive,
+} from 'vue'
+import EditorBlockList from '../app/components/editor/EditorBlockList.vue'
+import type { Block } from '../app/types/mailing'
+
+vi.mock('../app/composables/useEditorContext', () => ({
+	useEditorContext: () => ({ editor: { touch: vi.fn() } }),
+}))
+
+vi.mock('../app/components/editor/EditorBlock.vue', () => ({
+	default: defineComponent({
+		props: ['block'],
+		setup: (props) => () => h('div', { 'data-block': props.block.id }),
+	}),
+}))
+
+afterEach(() => vi.unstubAllGlobals())
+
+describe('editor draggable items', () => {
+	it('mounts item elements before globally registered async blocks resolve', async () => {
+		vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+		const list = reactive<Block[]>([
+			{ id: 'first', type: 'divider', visibleIf: null },
+			{ id: 'second', type: 'divider', visibleIf: null },
+		])
+		const errors: unknown[] = []
+		const host = document.createElement('div')
+		const app = createApp(EditorBlockList, { list })
+		app.component(
+			'DmsMailingEditorBlock',
+			defineAsyncComponent(() => new Promise(() => {})),
+		)
+		app.config.errorHandler = (error) => errors.push(error)
+		try {
+			app.mount(host)
+			await nextTick()
+			expect(errors).toEqual([])
+			expect(
+				[...host.querySelectorAll('[data-block]')].map((item) =>
+					item.getAttribute('data-block'),
+				),
+			).toEqual(['first', 'second'])
+		} finally {
+			app.unmount()
+		}
+	})
+})

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

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { EDITOR_PATH, editorRoute } from '../app/utils/editor-route'
+
+describe('editorRoute', () => {
+	it('targets the editor page with the template id', () => {
+		expect(editorRoute('abc')).toEqual({
+			path: EDITOR_PATH,
+			query: { id: 'abc' },
+		})
+	})
+	it('carries the locale when one is selected', () => {
+		expect(editorRoute('abc', 'fr')).toEqual({
+			path: '/modules/mailing/editor',
+			query: { id: 'abc', locale: 'fr' },
+		})
+	})
+	it('omits an empty locale rather than sending a blank query param', () => {
+		expect(editorRoute('abc', '')).toEqual({
+			path: EDITOR_PATH,
+			query: { id: 'abc' },
+		})
+	})
+})

package/frontend-vue/tests/email-render-cases.json

@@ -0,0 +1,77 @@
+[
+	{
+		"locale": "en",
+		"email": {
+			"subject": "Your receipt",
+			"preheader": "Thanks for your order",
+			"missing": [],
+			"hiddenBlockIds": [],
+			"blocks": [
+				{
+					"id": "intro",
+					"type": "paragraph",
+					"text": "Hello Alice & Bob",
+					"align": "left"
+				},
+				{
+					"id": "items",
+					"type": "list",
+					"rows": [
+						{ "label": "Plan", "value": "Pro" },
+						{ "label": "Seats", "value": "3" }
+					]
+				},
+				{ "id": "total", "type": "total", "label": "Total", "value": "€29.00" },
+				{
+					"id": "footer",
+					"type": "footer",
+					"text": "Sent by Antelope",
+					"unsubscribeLabel": "Unsubscribe",
+					"preferencesLabel": "Preferences",
+					"unsubscribeUrl": "https://example.test/unsubscribe/en",
+					"preferencesUrl": "https://example.test/preferences/en"
+				}
+			]
+		}
+	},
+	{
+		"locale": "fr",
+		"email": {
+			"subject": "Votre reçu",
+			"preheader": "Merci pour votre commande",
+			"missing": [],
+			"hiddenBlockIds": [],
+			"blocks": [
+				{
+					"id": "intro",
+					"type": "paragraph",
+					"text": "Bonjour Alice & Bob",
+					"align": "left"
+				},
+				{
+					"id": "items",
+					"type": "list",
+					"rows": [
+						{ "label": "Offre", "value": "Pro" },
+						{ "label": "Places", "value": "3" }
+					]
+				},
+				{
+					"id": "total",
+					"type": "total",
+					"label": "Total",
+					"value": "29,00 €"
+				},
+				{
+					"id": "footer",
+					"type": "footer",
+					"text": "Envoyé par Antelope",
+					"unsubscribeLabel": "Se désabonner",
+					"preferencesLabel": "Préférences",
+					"unsubscribeUrl": "https://example.test/unsubscribe/fr",
+					"preferencesUrl": "https://example.test/preferences/fr"
+				}
+			]
+		}
+	}
+]

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { UNCATEGORISED_GROUP_ID, groupByCategory } from '../app/utils/gallery'
+
+const CATEGORIES = [
+	{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
+	{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' },
+]
+const rows = [
+	{ _id: '1', category: 'billing' },
+	{ _id: '2', category: 'orders' },
+	{ _id: '3', category: 'unknown' },
+	{ _id: '4' },
+]
+
+describe('groupByCategory', () => {
+	it('keeps the settings order and collects the uncategorised last', () => {
+		const groups = groupByCategory(rows, CATEGORIES, 'Uncategorised')
+		expect(groups.map((group) => group.category.id)).toEqual([
+			'orders',
+			'billing',
+			UNCATEGORISED_GROUP_ID,
+		])
+		expect(groups[2]?.items.map((row) => row._id)).toEqual(['3', '4'])
+	})
+
+	it('labels the trailing group with what the caller translated', () => {
+		const groups = groupByCategory([{ _id: '1' }], [], 'Sans catégorie')
+		expect(groups[0]?.category.label).toBe('Sans catégorie')
+	})
+
+	it('drops empty groups', () => {
+		const groups = groupByCategory(
+			[{ _id: '1', category: 'orders' }],
+			CATEGORIES,
+			'x',
+		)
+		expect(groups.map((group) => group.category.id)).toEqual(['orders'])
+	})
+})

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

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import en from '../i18n/locales/mailing-en-GB.json'
+import fr from '../i18n/locales/mailing-fr-FR.json'
+
+function keysOf(value: unknown, prefix = ''): string[] {
+	if (typeof value !== 'object' || value === null) return [prefix]
+	return Object.entries(value).flatMap(([key, child]) =>
+		keysOf(child, prefix ? `${prefix}.${key}` : key),
+	)
+}
+
+describe('editor locales', () => {
+	it('carry the same key set', () => {
+		expect(keysOf(fr).sort()).toEqual(keysOf(en).sort())
+	})
+	it('cover the namespaces the editor uses', () => {
+		for (const namespace of ['editor', 'blocks']) {
+			expect(en.dms_mailing).toHaveProperty(namespace)
+		}
+	})
+})

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

@@ -0,0 +1,83 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import en from '../i18n/locales/mailing-en-GB.json'
+import fr from '../i18n/locales/mailing-fr-FR.json'
+
+// vitest runs with the layer as its root; the backend sits one level above it.
+const BACKEND_SOURCE_DIR = join(process.cwd(), '..', 'src')
+
+// `$dms_mailing.a.b` as the backend writes it. A literal that stops on a dot is
+// the prefix of a key completed by a template expression (`${status}`); those
+// are resolved at runtime and cannot be checked here.
+const KEY_LITERAL = /\$dms_mailing\.[\w.]+/g
+const DYNAMIC_KEY_SUFFIX = '.'
+
+function keysOf(value: unknown, prefix = ''): string[] {
+	if (typeof value !== 'object' || value === null) return [prefix]
+	return Object.entries(value).flatMap(([key, child]) =>
+		keysOf(child, prefix ? `${prefix}.${key}` : key),
+	)
+}
+
+function typescriptFiles(directory: string): string[] {
+	return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+		const path = join(directory, entry.name)
+		if (entry.isDirectory()) return typescriptFiles(path)
+		return entry.isFile() && path.endsWith('.ts') ? [path] : []
+	})
+}
+
+function backendKeys(): string[] {
+	const found = new Set<string>()
+	for (const file of typescriptFiles(BACKEND_SOURCE_DIR)) {
+		for (const literal of readFileSync(file, 'utf8').match(KEY_LITERAL) ?? []) {
+			const key = literal.slice(1)
+			if (!key.endsWith(DYNAMIC_KEY_SUFFIX)) found.add(key)
+		}
+	}
+	return [...found].sort()
+}
+
+function resolve(root: unknown, key: string): unknown {
+	return key
+		.split('.')
+		.reduce<unknown>(
+			(node, part) =>
+				typeof node === 'object' && node !== null
+					? (node as Record<string, unknown>)[part]
+					: undefined,
+			root,
+		)
+}
+
+describe('locales', () => {
+	it('carry the same key set', () => {
+		expect(keysOf(fr).sort()).toEqual(keysOf(en).sort())
+	})
+	it('cover every namespace the pages use', () => {
+		for (const namespace of [
+			'overview',
+			'templates',
+			'editor',
+			'sends',
+			'settings',
+			'metrics',
+			'funnel',
+			'errors',
+			'blocks',
+		]) {
+			expect(en.dms_mailing).toHaveProperty(namespace)
+		}
+	})
+	it('resolve every static key the backend emits', () => {
+		const keys = backendKeys()
+		expect(keys.length).toBeGreaterThan(0)
+		expect(keys.filter((key) => typeof resolve(en, key) !== 'string')).toEqual(
+			[],
+		)
+		expect(keys.filter((key) => typeof resolve(fr, key) !== 'string')).toEqual(
+			[],
+		)
+	})
+})

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

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import {
+	localeBadges,
+	localeCoverage,
+	parseLocaleList,
+} from '../app/utils/locales'
+
+describe('parseLocaleList', () => {
+	it('splits the stored list and drops blanks', () => {
+		expect(parseLocaleList('en,fr')).toEqual(['en', 'fr'])
+		expect(parseLocaleList(' en , fr ')).toEqual(['en', 'fr'])
+		expect(parseLocaleList('')).toEqual([])
+		expect(parseLocaleList(undefined)).toEqual([])
+	})
+})
+
+describe('localeCoverage', () => {
+	it('flags locales missing from the present set, in the tenant order', () => {
+		expect(localeCoverage(['fr'], ['en', 'fr'])).toEqual([
+			{ code: 'en', present: false },
+			{ code: 'fr', present: true },
+		])
+	})
+})
+
+describe('localeBadges', () => {
+	it('reports coverage against the tenant locales', () => {
+		expect(localeBadges('en', ['en', 'fr'])).toEqual([
+			{ code: 'en', present: true },
+			{ code: 'fr', present: false },
+		])
+	})
+
+	it('answers nothing when the row carries no locale information', () => {
+		expect(localeBadges('', ['en', 'fr'])).toEqual([])
+		expect(localeBadges(undefined, ['en', 'fr'])).toEqual([])
+	})
+})

package/frontend-vue/tests/mailing-api.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import { mailingPath } from '../app/composables/useMailingApi'
+
+describe('mailingPath', () => {
+	it('builds module paths without double slashes', () => {
+		expect(mailingPath('templates', 'abc', 'preview')).toBe(
+			'/api/mailing/templates/abc/preview',
+		)
+	})
+})