@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import {
+	HISTORY_COALESCE_MS,
+	HISTORY_LIMIT,
+	createHistory,
+	recordChange,
+	redoChange,
+	undoChange,
+} from '../app/utils/history'
+
+describe('editor history', () => {
+	it('records steps and walks back and forth', () => {
+		const history = createHistory('a')
+		recordChange(history, 'b', HISTORY_COALESCE_MS)
+		recordChange(history, 'c', HISTORY_COALESCE_MS * 2)
+		expect(undoChange(history)).toBe('b')
+		expect(undoChange(history)).toBe('a')
+		expect(undoChange(history)).toBeNull()
+		expect(redoChange(history)).toBe('b')
+		recordChange(history, 'd', HISTORY_COALESCE_MS * 10)
+		expect(redoChange(history)).toBeNull()
+	})
+	it('merges quick successive changes into one step', () => {
+		const history = createHistory('a')
+		recordChange(history, 'ab', 1000)
+		recordChange(history, 'abc', 1000 + HISTORY_COALESCE_MS / 2)
+		expect(undoChange(history)).toBe('a')
+	})
+	it('ignores a change that leaves the content as it was', () => {
+		const history = createHistory('a')
+		recordChange(history, 'a', HISTORY_COALESCE_MS)
+		expect(history.past).toEqual([])
+	})
+	it('keeps a bounded number of steps', () => {
+		const history = createHistory('0')
+		for (let step = 1; step <= HISTORY_LIMIT + 10; step += 1)
+			recordChange(history, String(step), step * HISTORY_COALESCE_MS)
+		expect(history.past).toHaveLength(HISTORY_LIMIT)
+	})
+	it('keeps a discrete change in a step of its own', () => {
+		const history = createHistory('a')
+		recordChange(history, 'b', HISTORY_COALESCE_MS)
+		recordChange(history, 'c', HISTORY_COALESCE_MS + 1, true)
+		recordChange(history, 'd', HISTORY_COALESCE_MS + 2)
+		expect(history.past).toEqual(['a', 'b', 'c'])
+		expect(undoChange(history)).toBe('c')
+	})
+})

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

@@ -1,7 +1,37 @@
+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'
 
+const APP = join(__dirname, '..', 'app')
+const EDITOR_SOURCES = [
+	join(APP, 'components', 'Editor.vue'),
+	join(APP, 'composables', 'useEditorActions.ts'),
+	join(APP, 'composables', 'useEditorShortcuts.ts'),
+	...readdirSync(join(APP, 'components', 'editor')).map((file) =>
+		join(APP, 'components', 'editor', file),
+	),
+]
+const LITERAL_KEY =
+	/'(dms_mailing\.(?:editor|blocks|templates\.status)\.[a-z_.]+)'/g
+const PREFIX_CONSTANT = /const (\w*KEY) = '(dms_mailing[a-z_.]*)'/g
+const PREFIXED_KEY = /\$\{(\w*KEY)\}\.([a-z_.]+)`/g
+
+function keysUsedIn(source: string): string[] {
+	const prefixes = new Map(
+		[...source.matchAll(PREFIX_CONSTANT)].map((match) => [match[1], match[2]]),
+	)
+	const prefixValues = new Set(prefixes.values())
+	const literal = [...source.matchAll(LITERAL_KEY)]
+		.map((match) => match[1] as string)
+		.filter((key) => !prefixValues.has(key))
+	const prefixed = [...source.matchAll(PREFIXED_KEY)]
+		.filter((match) => prefixes.has(match[1]))
+		.map((match) => `${prefixes.get(match[1])}.${match[2]}`)
+	return [...literal, ...prefixed]
+}
+
 function keysOf(value: unknown, prefix = ''): string[] {
 	if (typeof value !== 'object' || value === null) return [prefix]
 	return Object.entries(value).flatMap(([key, child]) =>
@@ -18,4 +48,12 @@ describe('editor locales', () => {
 			expect(en.dms_mailing).toHaveProperty(namespace)
 		}
 	})
+	it('define every literal key the editor components use', () => {
+		const known = new Set(keysOf(en))
+		const used = EDITOR_SOURCES.flatMap((file) =>
+			keysUsedIn(readFileSync(file, 'utf8')),
+		)
+		expect(used.length).toBeGreaterThan(0)
+		expect(used.filter((key) => !known.has(key))).toEqual([])
+	})
 })

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

@@ -39,6 +39,28 @@ function backendKeys(): string[] {
 	return [...found].sort()
 }
 
+function messagesOf(value: unknown, prefix = ''): [string, string][] {
+	if (typeof value === 'string') return [[prefix, value]]
+	if (typeof value !== 'object' || value === null) return []
+	return Object.entries(value).flatMap(([key, child]) =>
+		messagesOf(child, prefix ? `${prefix}.${key}` : key),
+	)
+}
+
+// `{name}` placeholders and `{'…'}` literals, the only braces a message holds.
+const BRACED = /\{'[^']*'\}|\{\w+\}/g
+const PLACEHOLDER = /\{(\w+)\}/g
+const PLURAL_SEPARATOR = '|'
+// vue-i18n's default rule picks, for three forms, the first at 0 and the
+// second at 1: French says « 0 envoi », so every French plural needs all three.
+const FRENCH_PLURAL_FORMS = 3
+
+function placeholdersOf(message: string): string[] {
+	return [
+		...new Set([...message.matchAll(PLACEHOLDER)].map((match) => match[1])),
+	].sort()
+}
+
 function resolve(root: unknown, key: string): unknown {
 	return key
 		.split('.')
@@ -80,4 +102,37 @@ describe('locales', () => {
 			[],
 		)
 	})
+	it('compile: no stray brace or unescaped @ outside placeholders', () => {
+		const broken = [...messagesOf(en), ...messagesOf(fr)].filter(
+			([, message]) => /[{}@]/.test(message.replace(BRACED, '')),
+		)
+		expect(broken).toEqual([])
+	})
+	it('give each message the same placeholders in both languages', () => {
+		const french = new Map(messagesOf(fr))
+		const mismatched = messagesOf(en)
+			.filter(
+				([key, message]) =>
+					placeholdersOf(message).join() !==
+					placeholdersOf(french.get(key) ?? '').join(),
+			)
+			.map(([key]) => key)
+		expect(mismatched).toEqual([])
+	})
+	it('say « modèle », never « template », in French', () => {
+		const anglicisms = messagesOf(fr)
+			.filter(([, message]) => /\btemplates?\b/i.test(message))
+			.map(([key]) => key)
+		expect(anglicisms).toEqual([])
+	})
+	it('write every French plural with three forms, 0 in the singular', () => {
+		const incomplete = messagesOf(fr)
+			.filter(
+				([, message]) =>
+					message.includes(PLURAL_SEPARATOR) &&
+					message.split(PLURAL_SEPARATOR).length !== FRENCH_PLURAL_FORMS,
+			)
+			.map(([key]) => key)
+		expect(incomplete).toEqual([])
+	})
 })

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

@@ -0,0 +1,145 @@
+import { describe, expect, it } from 'vitest'
+import {
+	afterLifecycle,
+	canPublish,
+	isPublishable,
+	lifecycleActions,
+	noticeFor,
+	noticeMomentOf,
+	publishedMoment,
+	statusKeyOf,
+} from '../app/utils/lifecycle'
+
+describe('lifecycle', () => {
+	it('dates an unpublish now, so the notice reads its moment', () => {
+		const template = {
+			_id: 't1',
+			slug: 'welcome',
+			name: 'Welcome',
+			status: 'live' as const,
+			updatedAt: '2026-01-01T00:00:00.000Z',
+			updatedBy: 'me',
+			publishedAt: '2026-01-01T00:00:00.000Z',
+		}
+		const now = new Date('2026-02-03T04:05:06.000Z')
+		const unpublished = afterLifecycle(template, 'unpublish', 'draft', now)
+		expect(unpublished).toMatchObject({
+			status: 'draft',
+			unpublishedAt: now.toISOString(),
+		})
+		expect(noticeMomentOf('unpublished', unpublished)).toBe(now.toISOString())
+		expect(afterLifecycle(template, 'archive', 'archived', now)).toEqual({
+			...template,
+			status: 'archived',
+		})
+	})
+	it('offers only the transitions the backend accepts', () => {
+		expect(lifecycleActions('live').map((button) => button.action)).toEqual([
+			'unpublish',
+			'archive',
+		])
+		expect(lifecycleActions('draft').map((button) => button.action)).toEqual([
+			'archive',
+		])
+		expect(lifecycleActions('archived').map((button) => button.action)).toEqual(
+			['restore'],
+		)
+		expect(canPublish('archived')).toBe(false)
+		expect(canPublish('draft')).toBe(true)
+	})
+	it('picks the notice from status, version and pending changes', () => {
+		const base = { saveStatus: 'idle' as const }
+		expect(
+			noticeFor({ ...base, status: 'live', version: 12, changeCount: 3 }),
+		).toEqual({
+			kind: 'live_changes',
+			tone: 'primary',
+			actions: ['compare', 'discard'],
+		})
+		expect(
+			noticeFor({ ...base, status: 'live', version: 12, changeCount: 0 })?.kind,
+		).toBe('live_clean')
+		expect(
+			noticeFor({ ...base, status: 'draft', version: 0, changeCount: 2 }),
+		).toEqual({ kind: 'never_published', tone: 'primary', actions: [] })
+		expect(
+			noticeFor({ ...base, status: 'draft', version: 0, changeCount: 0 }),
+		).toBeNull()
+		expect(
+			noticeFor({ ...base, status: 'archived', version: 4, changeCount: 0 }),
+		).toBeNull()
+	})
+	it('tells an unpublished template apart and offers to republish it', () => {
+		const unpublished = noticeFor({
+			status: 'draft',
+			version: 5,
+			changeCount: 0,
+			saveStatus: 'idle',
+		})
+		expect(unpublished).toEqual({
+			kind: 'unpublished',
+			tone: 'warning',
+			actions: ['republish'],
+		})
+		expect(
+			noticeFor({
+				status: 'draft',
+				version: 5,
+				changeCount: 2,
+				saveStatus: 'idle',
+			})?.actions,
+		).toEqual(['compare', 'discard', 'republish'])
+		expect(statusKeyOf('draft', 5)).toBe('unpublished')
+		expect(statusKeyOf('draft', 0)).toBe('draft')
+		expect(statusKeyOf('live', 5)).toBe('live')
+	})
+	it('puts a failed save or a conflict before any other notice', () => {
+		const live = { status: 'live' as const, version: 3, changeCount: 1 }
+		expect(noticeFor({ ...live, saveStatus: 'error' })).toEqual({
+			kind: 'save_error',
+			tone: 'error',
+			actions: ['retry'],
+		})
+		expect(noticeFor({ ...live, saveStatus: 'conflict' })).toEqual({
+			kind: 'conflict',
+			tone: 'error',
+			actions: ['reload', 'overwrite'],
+		})
+	})
+	it('dates an unpublished notice by the unpublish', () => {
+		const template = {
+			publishedAt: '2026-09-01T10:00:00Z',
+			unpublishedAt: '2026-10-01T10:00:00Z',
+			updatedAt: '2026-10-02T10:00:00Z',
+		}
+		expect(noticeMomentOf('unpublished', template)).toBe(template.unpublishedAt)
+		expect(
+			noticeMomentOf('unpublished', { ...template, unpublishedAt: null }),
+		).toBe(template.updatedAt)
+		expect(noticeMomentOf('live_clean', template)).toBe(template.publishedAt)
+	})
+	it('lets ⌘↵ publish exactly when the button would', () => {
+		expect(isPublishable({ status: 'live', changeCount: 0, dirty: 0 })).toBe(
+			false,
+		)
+		expect(isPublishable({ status: 'live', changeCount: 1, dirty: 0 })).toBe(
+			true,
+		)
+		expect(isPublishable({ status: 'live', changeCount: 0, dirty: 2 })).toBe(
+			true,
+		)
+		expect(isPublishable({ status: 'draft', changeCount: 0, dirty: 0 })).toBe(
+			true,
+		)
+		expect(
+			isPublishable({ status: 'archived', changeCount: 3, dirty: 0 }),
+		).toBe(false)
+	})
+	it('splits a publication date for the notice', () => {
+		const moment = publishedMoment('2026-09-29T09:14:00', 'en-GB')
+		expect(moment?.time).toBe('09:14')
+		expect(moment?.date).toContain('29')
+		expect(publishedMoment(null, 'en-GB')).toBeNull()
+		expect(publishedMoment('nope', 'en-GB')).toBeNull()
+	})
+})

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

@@ -1,8 +1,16 @@
 import { describe, expect, it } from 'vitest'
 import {
+	LOCALE_CHIP_MISSING_CLASS,
 	localeBadges,
+	localeChipClass,
+	localeChips,
 	localeCoverage,
+	localeLanguage,
+	missingLocales,
 	parseLocaleList,
+	pickLocale,
+	languageLabel,
+	languageName,
 } from '../app/utils/locales'
 
 describe('parseLocaleList', () => {
@@ -11,6 +19,7 @@ describe('parseLocaleList', () => {
 		expect(parseLocaleList(' en , fr ')).toEqual(['en', 'fr'])
 		expect(parseLocaleList('')).toEqual([])
 		expect(parseLocaleList(undefined)).toEqual([])
+		expect(parseLocaleList(null)).toEqual([])
 	})
 })
 
@@ -36,3 +45,54 @@ describe('localeBadges', () => {
 		expect(localeBadges(undefined, ['en', 'fr'])).toEqual([])
 	})
 })
+
+describe('localeChips', () => {
+	it('keeps locales the workspace no longer offers after its own', () => {
+		expect(localeChips('it,en', ['en', 'fr'])).toEqual([
+			{ code: 'en', present: true },
+			{ code: 'fr', present: false },
+			{ code: 'it', present: true },
+		])
+		expect(localeChips('', ['en'])).toEqual([])
+	})
+})
+
+describe('missingLocales', () => {
+	it('lists the workspace locales a content lacks', () => {
+		expect(missingLocales(['en'], ['en', 'fr', 'de'])).toEqual(['fr', 'de'])
+		expect(missingLocales(['en', 'fr'], ['en', 'fr'])).toEqual([])
+	})
+})
+
+describe('localeChipClass', () => {
+	it('dashes a missing locale', () => {
+		expect(localeChipClass(false)).toContain(LOCALE_CHIP_MISSING_CLASS)
+		expect(localeChipClass(true)).not.toContain('border-dashed')
+	})
+})
+
+describe('pickLocale', () => {
+	it('matches a regional or upper-case request to its base language', () => {
+		expect(pickLocale(['en', 'fr'], 'fr-BE', 'en')).toBe('fr')
+		expect(pickLocale(['en', 'fr'], 'FR', 'en')).toBe('fr')
+		expect(localeLanguage('fr_CA')).toBe('fr')
+	})
+	it('falls back like the server: tenant locale, English, then the first', () => {
+		expect(pickLocale(['en', 'fr'], 'de', 'fr')).toBe('fr')
+		expect(pickLocale(['en', 'fr'], 'de', 'nl')).toBe('en')
+		expect(pickLocale(['fr', 'de'], 'nl', 'en')).toBe('fr')
+	})
+})
+
+describe('languageLabel', () => {
+	it('names a language in the interface language, capitalised', () => {
+		expect(languageLabel('en', 'fr')).toBe('Anglais (EN)')
+		expect(languageLabel('fr', 'fr')).toBe('Français (FR)')
+		expect(languageLabel('fr', 'en')).toBe('French (FR)')
+	})
+	it('falls back to the given name, then to the code', () => {
+		expect(languageLabel('zz', 'en', 'Zed')).toBe('Zed (ZZ)')
+		expect(languageLabel('zz', 'en')).toBe('ZZ')
+		expect(languageName('en', 'not a locale')).toBeUndefined()
+	})
+})

package/frontend-vue/tests/localized-defaults.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import {
+	defaultCategoryLabelKey,
+	localizeCategories,
+} from '../app/utils/categories'
+import { localizeStarters, starterNameKey } from '../app/utils/starters'
+
+const FRENCH: Record<string, string> = {
+	'dms_mailing.categories.defaults.orders': 'Commandes',
+	'dms_mailing.categories.defaults.billing': 'Facturation',
+	'dms_mailing.starters.names.order-confirmed': 'Confirmation de commande',
+}
+const translate = (key: string): string | undefined => FRENCH[key]
+
+describe('localizeCategories', () => {
+	it('translates a shipped category nobody renamed', () => {
+		const [orders] = localizeCategories(
+			[{ id: 'orders', label: 'Orders', icon: 'i-ph-package' }],
+			translate,
+		)
+		expect(orders).toEqual({
+			id: 'orders',
+			label: 'Commandes',
+			icon: 'i-ph-package',
+		})
+	})
+	it('keeps a label someone wrote, and a category it cannot translate', () => {
+		const categories = [
+			{ id: 'billing', label: 'Invoices & receipts', icon: 'i-ph-file-text' },
+			{ id: 'forms', label: 'Forms', icon: 'i-ph-textbox' },
+			{ id: 'news', label: 'News', icon: 'i-ph-newspaper' },
+		]
+		expect(localizeCategories(categories, translate)).toEqual(categories)
+		expect(defaultCategoryLabelKey(categories[2]!)).toBeUndefined()
+	})
+})
+
+describe('localizeStarters', () => {
+	it('names a known starter in the interface language, else as shipped', () => {
+		const starters = [
+			{ id: 'order-confirmed', name: 'Order confirmation' },
+			{ id: 'custom', name: 'Custom starter' },
+		].map((starter) => ({
+			...starter,
+			slug: starter.id,
+			category: 'orders',
+			locales: ['en', 'fr'],
+		}))
+		expect(
+			localizeStarters(starters, translate).map((starter) => starter.name),
+		).toEqual(['Confirmation de commande', 'Custom starter'])
+		expect(starterNameKey('custom')).toBe('dms_mailing.starters.names.custom')
+	})
+})

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

@@ -0,0 +1,210 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import NewTemplateModal from '../app/components/NewTemplateModal.vue'
+import {
+	FORM_STUBS,
+	flush,
+	mount,
+	slotStub,
+	stubNuxtGlobals,
+	typeInto,
+	type NuxtStubs,
+} from './helpers/nuxt-globals'
+
+const api = {
+	listTemplates: vi.fn(),
+	starters: vi.fn(),
+	listCategories: vi.fn(),
+	createTemplate: vi.fn(),
+}
+
+vi.mock('../app/composables/useMailingApi', () => ({
+	useMailingApi: () => api,
+}))
+
+const globals = {
+	...FORM_STUBS,
+	MailingTemplatePreviewFrame: slotStub('MailingTemplatePreviewFrame'),
+}
+
+let stubs: NuxtStubs
+
+beforeEach(() => {
+	stubs = stubNuxtGlobals()
+	api.listTemplates.mockResolvedValue({
+		results: [
+			{
+				_id: 't1',
+				name: 'Welcome',
+				slug: 'welcome',
+				status: 'live',
+				category: 'account',
+			},
+		],
+		total: 1,
+	})
+	api.starters.mockResolvedValue({
+		starters: [
+			{
+				id: 'invoice-ready',
+				name: 'Invoice available',
+				slug: 'invoice-ready',
+				category: 'billing',
+				locales: ['en'],
+			},
+		],
+	})
+	api.listCategories.mockResolvedValue({
+		categories: [{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' }],
+	})
+	api.createTemplate.mockResolvedValue(['new-id'])
+})
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+	document.body.innerHTML = ''
+})
+
+const inputs = (host: HTMLElement) => [...host.querySelectorAll('input')]
+const fields = (host: HTMLElement) =>
+	[...host.querySelectorAll('[data-stub="UFormField"]')] as HTMLElement[]
+
+describe('NewTemplateModal', () => {
+	it('derives the slug from the name until the slug is edited', async () => {
+		const view = mount(NewTemplateModal, {}, globals)
+		await flush()
+		const [name, slug] = inputs(view.host)
+		await typeInto(name!, 'Quote accepted')
+		expect((slug as HTMLInputElement).value).toBe('quote-accepted')
+		await typeInto(slug!, 'quote-ok')
+		await typeInto(name!, 'Quote accepted for real')
+		expect((slug as HTMLInputElement).value).toBe('quote-ok')
+		view.unmount()
+	})
+
+	it('asks for a slug when the name gives none, and derives it again once cleared', async () => {
+		const view = mount(NewTemplateModal, {}, globals)
+		await flush()
+		const [name, slug] = inputs(view.host)
+		await typeInto(name!, '日本語のテンプレート')
+		expect(fields(view.host)[1]!.getAttribute('error')).toBe(
+			'dms_mailing.new_template.slug_from_name_empty',
+		)
+		await typeInto(name!, 'Quote accepted')
+		await typeInto(slug!, 'quote-ok')
+		await typeInto(slug!, '')
+		expect((slug as HTMLInputElement).value).toBe('quote-accepted')
+		await typeInto(name!, 'Quote refused')
+		expect((slug as HTMLInputElement).value).toBe('quote-refused')
+		view.unmount()
+	})
+
+	it('lists the starters apart from the templates to copy, archived ones left out', async () => {
+		api.listTemplates.mockResolvedValue({
+			results: [
+				{ _id: 't1', name: 'Welcome', slug: 'welcome', status: 'live' },
+				{ _id: 't2', name: 'Invoice', slug: 'invoice', status: 'draft' },
+				{ _id: 't3', name: 'Old', slug: 'old', status: 'archived' },
+			],
+			total: 3,
+		})
+		const view = mount(NewTemplateModal, {}, globals)
+		await flush()
+		const titles = () =>
+			[...view.host.querySelectorAll('section')].map((section) =>
+				[...section.querySelectorAll('button[role="radio"]')].map(
+					(tile) => tile.querySelector('span:nth-of-type(2)')?.textContent,
+				),
+			)
+		expect(titles()).toEqual([
+			['dms_mailing.templates.start_from.blank', 'Invoice available'],
+			['Welcome', 'Invoice'],
+		])
+		const search = inputs(view.host)[2]!
+		await typeInto(search, 'welc')
+		expect(titles()[1]).toEqual(['Welcome'])
+		view.unmount()
+	})
+
+	it('refuses a taken slug inline, before the server does', async () => {
+		const view = mount(NewTemplateModal, { initialName: 'Welcome' }, globals)
+		await flush()
+		expect(fields(view.host)[1]!.getAttribute('error')).toBe(
+			'dms_mailing.templates.slug_errors.taken',
+		)
+		;(view.host.querySelector('form') as HTMLFormElement).dispatchEvent(
+			new Event('submit'),
+		)
+		await flush()
+		expect(api.createTemplate).not.toHaveBeenCalled()
+		view.unmount()
+	})
+
+	it('creates from a starter and opens the editor of the new template', async () => {
+		const view = mount(NewTemplateModal, {}, globals)
+		await flush()
+		const starter = [
+			...view.host.querySelectorAll('button[role="radio"]'),
+		].find((tile) =>
+			tile.textContent?.includes('Invoice available'),
+		) as HTMLElement
+		starter.click()
+		await flush()
+		expect((inputs(view.host)[0] as HTMLInputElement).value).toBe(
+			'Invoice available',
+		)
+		;(view.host.querySelector('form') as HTMLFormElement).dispatchEvent(
+			new Event('submit'),
+		)
+		await flush()
+		expect(api.createTemplate).toHaveBeenCalledWith({
+			name: 'Invoice available',
+			slug: 'invoice-available',
+			category: 'billing',
+			starterId: 'invoice-ready',
+		})
+		expect(stubs.navigations).toEqual([
+			{ path: '/modules/mailing/templates/new-id', query: {} },
+		])
+		view.unmount()
+	})
+
+	it('marks the slug taken when the server answers 409', async () => {
+		api.createTemplate.mockRejectedValue({ statusCode: 409 })
+		const view = mount(NewTemplateModal, { initialName: 'Refund' }, globals)
+		await flush()
+		;(view.host.querySelector('form') as HTMLFormElement).dispatchEvent(
+			new Event('submit'),
+		)
+		await flush()
+		expect(fields(view.host)[1]!.getAttribute('error')).toBe(
+			'dms_mailing.templates.slug_errors.taken',
+		)
+		expect(stubs.toasts).toEqual([])
+		view.unmount()
+	})
+
+	it('copies an existing template when one is picked', async () => {
+		const onSuccessCallback = vi.fn()
+		const view = mount(
+			NewTemplateModal,
+			{ initialName: 'Welcome B2B', onSuccessCallback },
+			globals,
+		)
+		await flush()
+		const tile = [...view.host.querySelectorAll('button[role="radio"]')].find(
+			(candidate) => candidate.textContent?.includes('welcome'),
+		) as HTMLElement
+		tile.click()
+		;(view.host.querySelector('form') as HTMLFormElement).dispatchEvent(
+			new Event('submit'),
+		)
+		await flush()
+		expect(api.createTemplate).toHaveBeenCalledWith({
+			name: 'Welcome B2B',
+			slug: 'welcome-b2b',
+			sourceTemplateId: 't1',
+		})
+		expect(onSuccessCallback).toHaveBeenCalled()
+		view.unmount()
+	})
+})