@antelopejs/dms-mailing 0.7.1 → 0.8.0

package/frontend-vue/tests/backend-boundary.test.ts

@@ -0,0 +1,203 @@
+import {
+	mkdirSync,
+	mkdtempSync,
+	realpathSync,
+	rmSync,
+	symlinkSync,
+	writeFileSync,
+} from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { build as viteBuild, type Plugin } from 'vite'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { backendBoundary } from '../build/backend-boundary'
+
+/** A scratch repository: the backend package, another package, and the frontend module inside the backend package. */
+let repository: string
+let frontend: string
+
+function write(file: string, text: string): void {
+	mkdirSync(dirname(file), { recursive: true })
+	writeFileSync(file, text)
+}
+
+beforeAll(() => {
+	repository = realpathSync(
+		mkdtempSync(join(tmpdir(), 'dms-mailing-boundary-')),
+	)
+	const backend = join(repository, 'packages/dms-mailing')
+	frontend = join(backend, 'frontend-vue')
+	write(
+		join(backend, 'package.json'),
+		JSON.stringify({ name: '@antelopejs/dms-mailing' }),
+	)
+	write(join(backend, 'src/backend.ts'), 'export const secret = 1\n')
+	write(join(backend, 'src/nested/deep.ts'), 'export const deep = 6\n')
+	write(join(backend, 'dist/built.js'), 'export const built = 2\n')
+	write(join(backend, 'dist/src/nested.js'), 'export const nested = 4\n')
+	write(join(backend, 'srcx/sibling.ts'), 'export const sibling = 5\n')
+	write(
+		join(repository, 'packages/other/package.json'),
+		JSON.stringify({ name: 'other' }),
+	)
+	write(
+		join(repository, 'packages/other/src/shared.ts'),
+		'export const shared = 3\n',
+	)
+	mkdirSync(frontend, { recursive: true })
+	symlinkSync(join(backend, 'src/backend.ts'), join(frontend, 'linked.ts'))
+})
+
+afterAll(() => {
+	rmSync(repository, { recursive: true, force: true })
+})
+
+interface BuildOptions {
+	extra?: Plugin[]
+	alias?: Record<string, string>
+	preserveSymlinks?: boolean
+	external?: string[]
+}
+
+/** Builds a frontend entry made of `source` with the boundary plugin, and returns the bundled code. */
+async function build(
+	source: string,
+	options: BuildOptions = {},
+): Promise<string> {
+	write(join(frontend, 'entry.ts'), source)
+	const result = await viteBuild({
+		root: frontend,
+		configFile: false,
+		logLevel: 'silent',
+		plugins: [backendBoundary(), ...(options.extra ?? [])],
+		resolve: {
+			alias: options.alias ?? {},
+			preserveSymlinks: options.preserveSymlinks ?? false,
+		},
+		build: {
+			write: false,
+			rollupOptions: { external: options.external ?? [] },
+			lib: { entry: join(frontend, 'entry.ts'), formats: ['es'] },
+		},
+	})
+	return JSON.stringify(result)
+}
+
+/** A plugin that answers the import `request` with the module id `id`. */
+function resolver(request: string, id: string): Plugin {
+	return {
+		name: 'test-resolver',
+		resolveId: (source) => (source === request ? { id } : null),
+		load: (loaded) =>
+			loaded === id || loaded.startsWith('\0') ? 'export default 1\n' : null,
+	}
+}
+
+const backendFile = () =>
+	join(repository, 'packages/dms-mailing/src/backend.ts')
+
+describe('the backend boundary of the frontend build', () => {
+	it('fails on an import of the backend source, naming both files', async () => {
+		const failure = build(
+			'import { secret } from "../src/backend.ts"\nexport { secret }\n',
+		)
+		await expect(failure).rejects.toThrow(/Backend boundary/)
+		await expect(failure).rejects.toThrow(join(frontend, 'entry.ts'))
+		await expect(failure).rejects.toThrow(backendFile())
+	})
+
+	it('fails on a file deeper under the backend source', async () => {
+		await expect(
+			build('import { deep } from "../src/nested/deep.ts"\nexport { deep }\n'),
+		).rejects.toThrow(/Backend boundary/)
+	})
+
+	it('fails on an alias that points into the backend source', async () => {
+		await expect(
+			build(
+				'import { secret } from "@backend/backend.ts"\nexport { secret }\n',
+				{
+					alias: { '@backend': join(repository, 'packages/dms-mailing/src') },
+				},
+			),
+		).rejects.toThrow(/Backend boundary/)
+	})
+
+	it('fails on a symlink to the backend source that the resolver returns', async () => {
+		await expect(
+			build('import { secret } from "./linked.ts"\nexport { secret }\n', {
+				extra: [resolver('./linked.ts', join(frontend, 'linked.ts'))],
+				preserveSymlinks: true,
+			}),
+		).rejects.toThrow(/Backend boundary/)
+	})
+
+	it('fails on an id that names the backend source with a query or a hash', async () => {
+		for (const suffix of ['?raw', '#fragment']) {
+			await expect(
+				build('import secret from "virtual-backend"\nexport { secret }\n', {
+					extra: [resolver('virtual-backend', `${backendFile()}${suffix}`)],
+				}),
+			).rejects.toThrow(/Backend boundary/)
+		}
+	})
+
+	it('fails on a backend source import declared external', async () => {
+		await expect(
+			build('import { secret } from "../src/backend.ts"\nexport { secret }\n', {
+				external: [backendFile()],
+			}),
+		).rejects.toThrow(/Backend boundary/)
+	})
+
+	it('fails on a worker entry under the backend source', async () => {
+		await expect(
+			build(
+				'export const worker = new Worker(new URL("../src/backend.ts", import.meta.url), { type: "module" })\n',
+			),
+		).rejects.toThrow(/Backend boundary/)
+	})
+
+	it('fails on a worker of the frontend that imports the backend source', async () => {
+		write(
+			join(frontend, 'worker.ts'),
+			'import { secret } from "../src/backend.ts"\npostMessage(secret)\n',
+		)
+		await expect(
+			build(
+				'export const worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module" })\n',
+			),
+		).rejects.toThrow(/Backend boundary/)
+	})
+
+	it('passes the built output, a virtual module and the source of another package', async () => {
+		expect(
+			await build(
+				'import { built } from "../dist/built.js"\nexport { built }\n',
+			),
+		).toMatch(/built/)
+		expect(
+			await build('import value from "virtual:thing"\nexport { value }\n', {
+				extra: [resolver('virtual:thing', '\0virtual:thing')],
+			}),
+		).toMatch(/value/)
+		expect(
+			await build(
+				'import { shared } from "../../other/src/shared.ts"\nexport { shared }\n',
+			),
+		).toMatch(/shared/)
+	})
+
+	it('passes a sibling folder named like src and a src folder inside dist', async () => {
+		expect(
+			await build(
+				'import { sibling } from "../srcx/sibling.ts"\nexport { sibling }\n',
+			),
+		).toMatch(/sibling/)
+		expect(
+			await build(
+				'import { nested } from "../dist/src/nested.js"\nexport { nested }\n',
+			),
+		).toMatch(/nested/)
+	})
+})

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

@@ -1,12 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { DRAG_GROUP, cloneFromPalette } from '../app/utils/blocks/dnd'
+import { 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

@@ -1,5 +1,14 @@
 // @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import Sortable from 'sortablejs'
+import {
+	afterEach,
+	beforeEach,
+	describe,
+	expect,
+	it,
+	vi,
+	type MockInstance,
+} from 'vitest'
 import {
 	createApp,
 	defineAsyncComponent,
@@ -7,69 +16,130 @@ import {
 	h,
 	nextTick,
 	reactive,
+	type Component,
 } from 'vue'
 import EditorBlockList from '../app/components/editor/EditorBlockList.vue'
-import type { Block } from '../app/types/mailing'
+import { useEditorActions } from '../app/composables/useEditorActions'
+import { provideEditorContext } from '../app/composables/useEditorContext'
+import { useEditorSession } from '../app/composables/useEditorSession'
+import { useMailingApi } from '../app/composables/useMailingApi'
+import { useEditorReads } from '../app/composables/useMailingReads'
+import {
+	createEditorState,
+	type EditorState,
+} from '../app/composables/useTemplateEditor'
+import type {
+	Block,
+	TemplateContent,
+	TemplateContentResponse,
+} from '../app/types/mailing'
+import { stubApiData } from './helpers/api-data'
+import { stubAuthFetch } from './helpers/auth-fetch'
+import { stubNuxtGlobals } from './helpers/nuxt-globals'
+
+const CONTENT: TemplateContent = {
+	locales: { en: { subject: 'Hi', preheader: '', blocks: [] } },
+}
 
-const editor = vi.hoisted(() => ({ touch: vi.fn(), select: vi.fn() }))
-const sortables = vi.hoisted(
-	() => [] as { el: HTMLElement; options: Record<string, unknown> }[],
-)
+const LOADED: TemplateContentResponse = {
+	template: {
+		_id: 't1',
+		slug: 'welcome',
+		name: 'Welcome',
+		status: 'draft',
+		updatedAt: '2026-10-01T10:00:00Z',
+		updatedBy: 'camille',
+		attention: '',
+	},
+	content: CONTENT,
+	publishedContent: null,
+	hasDraft: true,
+	version: 0,
+	revision: 1,
+	changes: [],
+	variables: [],
+	detectedVariables: [],
+	testData: {},
+	fallbackLocale: 'en',
+	blockOnMissingVariables: false,
+	categories: [],
+	sender: { name: '', email: '', replyTo: '' },
+}
 
-// What SortableJS would be handed: the test calls it as SortableJS does.
-vi.mock('@vueuse/integrations/useSortable', async () => {
-	const { onMounted, unref } = await import('vue')
-	return {
-		useSortable: (
-			target: { value: HTMLElement },
-			_list: unknown,
-			options: Record<string, unknown>,
-		) => {
-			onMounted(() => sortables.push({ el: unref(target), options }))
-			return { option: () => {} }
+/** A block renderer the DMS registers globally, still loading. */
+const pending = () =>
+	defineAsyncComponent(() => new Promise<Component>(() => {}))
+
+/**
+ * Renders `render` inside an editor built as the workspace builds it, and
+ * hands the editor to `onEditor` before anything reads it.
+ */
+function inEditor(
+	render: () => ReturnType<typeof h>[],
+	onEditor: (editor: EditorState) => void = () => undefined,
+): Component {
+	return defineComponent({
+		setup() {
+			const editor = createEditorState(CONTENT, 'en', ['en'])
+			onEditor(editor)
+			const api = useMailingApi()
+			const reads = useEditorReads('t1')
+			const deps = { editor, api, reads, templateId: 't1', onError: () => {} }
+			const session = useEditorSession({ ...deps, loaded: LOADED })
+			const actions = useEditorActions({
+				...deps,
+				session,
+				reload: async () => {},
+			})
+			provideEditorContext({ editor, session, actions, api, templateId: 't1' })
+			return render
 		},
-	}
-})
+	})
+}
 
-vi.mock('../app/composables/useEditorContext', () => ({
-	useEditorContext: () => ({ editor }),
-}))
+/** Each list in a `section` of its own, so its element can be found. */
+function lists(...blocks: Block[][]): ReturnType<typeof h>[] {
+	return blocks.map((list) => h('section', [h(EditorBlockList, { list })]))
+}
 
-vi.mock('../app/components/editor/EditorInsertPoint.vue', () => ({
-	default: defineComponent({ setup: () => () => h('span') }),
-}))
+/** The SortableJS instance VueUse created on each list element under `host`. */
+function sortablesIn(host: HTMLElement): Sortable[] {
+	return [...host.querySelectorAll('section')].map((section) => {
+		const element = section.firstElementChild
+		const sortable = element instanceof HTMLElement && Sortable.get(element)
+		if (!sortable) throw new Error('no SortableJS instance on a list')
+		return sortable
+	})
+}
 
-vi.mock('../app/components/editor/EditorBlock.vue', () => ({
-	default: defineComponent({
-		props: ['block'],
-		setup: (props) => () => h('div', { 'data-block': props.block.id }),
-	}),
-}))
+beforeEach(() => {
+	stubNuxtGlobals()
+	stubApiData()
+	stubAuthFetch()
+})
 
 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(
-			'MailingEditorBlock',
-			defineAsyncComponent(() => new Promise(() => {})),
-		)
+		const app = createApp(inEditor(() => lists(list)))
+		app.component('MailingEditorBlock', pending())
+		app.component('MailingBlockDivider', pending())
+		app.config.warnHandler = () => undefined
 		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'),
+				[...host.querySelectorAll('[data-drag-item] [data-block-id]')].map(
+					(item) => item.getAttribute('data-block-id'),
 				),
 			).toEqual(['first', 'second'])
 		} finally {
@@ -77,29 +147,41 @@ describe('editor draggable items', () => {
 		}
 	})
 	it('selects a block dropped into the list', async () => {
-		vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
-		sortables.length = 0
+		const spies: {
+			touch?: MockInstance<EditorState['touch']>
+			select?: MockInstance<EditorState['select']>
+		} = {}
 		const source = reactive<Block[]>([
 			{ id: 'dropped', type: 'divider', visibleIf: null },
 		])
 		const target = reactive<Block[]>([])
-		const app = createApp({
-			render: () => [
-				h(EditorBlockList, { list: source }),
-				h(EditorBlockList, { list: target }),
-			],
-		})
-		app.mount(document.createElement('div'))
+		let editor: EditorState | undefined
+		const app = createApp(
+			inEditor(
+				() => lists(source, target),
+				(state) => {
+					editor = state
+					spies.touch = vi.spyOn(state, 'touch').mockImplementation(() => {})
+					spies.select = vi.spyOn(state, 'select')
+				},
+			),
+		)
+		app.config.warnHandler = () => undefined
+		const host = document.createElement('div')
+		app.mount(host)
 		try {
-			const [from, to] = sortables
+			const [from, to] = sortablesIn(host)
 			expect(from!.options).toMatchObject({
 				group: { name: 'mailing-blocks' },
 				handle: '.mailing-drag-handle',
 				draggable: '>[data-drag-item]',
 			})
 			const item = from!.el.querySelector('[data-drag-item]') as HTMLElement
-			const handler = (sortable: typeof from, name: string) =>
-				sortable!.options[name] as (event: unknown) => void
+			const handler = (sortable: Sortable | undefined, name: string) => {
+				const call: unknown = sortable && Reflect.get(sortable.options, name)
+				if (typeof call !== 'function') throw new Error(`no ${name} handler`)
+				return (event: unknown) => call(event)
+			}
 			handler(from, 'onStart')({ item, oldIndex: 0 })
 			to!.el.prepend(item)
 			handler(to, 'onAdd')({ item, newIndex: 0 })
@@ -108,8 +190,9 @@ describe('editor draggable items', () => {
 			await nextTick()
 			expect(source).toEqual([])
 			expect(target.map((block) => block.id)).toEqual(['dropped'])
-			expect(editor.touch).toHaveBeenCalledTimes(2)
-			expect(editor.select).toHaveBeenCalledExactlyOnceWith('dropped')
+			expect(spies.touch).toHaveBeenCalledTimes(2)
+			expect(spies.select).toHaveBeenCalledExactlyOnceWith('dropped')
+			expect(editor?.selectedId).toBe('dropped')
 		} finally {
 			app.unmount()
 		}

package/frontend-vue/tests/helpers/auth-fetch.ts

@@ -0,0 +1,123 @@
+import { vi } from 'vitest'
+
+/** A request a component made through the DMS's `$authFetch`. */
+export interface AuthFetchCall {
+	path: string
+	method: string
+	body: unknown
+}
+
+export type AuthFetchBackend = (call: AuthFetchCall) => unknown
+
+export interface AuthFetchStub {
+	/** Every request made, in order. */
+	calls: AuthFetchCall[]
+	/** Answers the next requests; a thrown error or a rejection fails them. */
+	respond: (backend: AuthFetchBackend) => void
+}
+
+interface AuthFetchOptions {
+	method?: string
+	body?: unknown
+}
+
+/**
+ * Stands in for the DMS's `useAuthFetch` (an auto-import the layer's tests do
+ * not have), the transport `useMailingApi` writes through: records every
+ * request and answers it from `respond`'s backend, as an already settled
+ * promise. Until `respond` is called, every request fails.
+ */
+export function stubAuthFetch(): AuthFetchStub {
+	let backend: AuthFetchBackend = ({ method, path }) => {
+		throw new Error(`unexpected request ${method} ${path}`)
+	}
+	const stub: AuthFetchStub = {
+		calls: [],
+		respond: (next) => {
+			backend = next
+		},
+	}
+	vi.stubGlobal('useAuthFetch', () => ({
+		$authFetch: (path: string, options: AuthFetchOptions = {}) => {
+			const call = {
+				path,
+				method: options.method ?? 'GET',
+				body: options.body,
+			}
+			stub.calls.push(call)
+			try {
+				return Promise.resolve(backend(call))
+			} catch (failure) {
+				return Promise.reject(failure)
+			}
+		},
+	}))
+	return stub
+}
+
+/**
+ * The write routes of the mailing API, as a component's tests mock them: a
+ * route under a template gets the template id, then the body sent; the
+ * others get the body.
+ */
+export type MailingWriteMocks = Partial<
+	Record<TemplateWrite, (id: string, body: unknown) => unknown> &
+		Record<ModuleWrite, (body: unknown) => unknown>
+>
+
+type TemplateWrite =
+	| 'preview'
+	| 'testSend'
+	| 'realSend'
+	| 'publish'
+	| 'unpublish'
+	| 'archive'
+	| 'restore'
+	| 'duplicate'
+	| 'saveVariables'
+	| 'saveTemplateDetails'
+
+type ModuleWrite = 'createTemplate' | 'webhookTest'
+
+/** Method and path suffix, under `/api/mailing/templates/:id`, of each write. */
+const TEMPLATE_WRITES: Array<[string, string, TemplateWrite]> = [
+	['POST', 'preview', 'preview'],
+	['POST', 'test-send', 'testSend'],
+	['POST', 'send', 'realSend'],
+	['POST', 'publish', 'publish'],
+	['POST', 'unpublish', 'unpublish'],
+	['POST', 'archive', 'archive'],
+	['POST', 'restore', 'restore'],
+	['POST', 'duplicate', 'duplicate'],
+	['POST', 'variables', 'saveVariables'],
+	['PUT', 'details', 'saveTemplateDetails'],
+]
+
+/** Method and path of each write outside a template. */
+const MODULE_WRITES: Array<[string, string, ModuleWrite]> = [
+	['POST', '/api/mailing/tables/templates/new', 'createTemplate'],
+	['POST', '/api/mailing/settings/webhook-test', 'webhookTest'],
+]
+
+const TEMPLATE_PATH = /^\/api\/mailing\/templates\/([^/]+)\/([^/]+)$/
+
+/**
+ * A backend answering the writes a component makes with the test's mocks of
+ * them. A write with no route or no mock fails, as calling a method the
+ * component was not given would.
+ */
+export function mailingWrites(mocks: MailingWriteMocks): AuthFetchBackend {
+	return ({ path, method, body }) => {
+		const [, id, suffix] = TEMPLATE_PATH.exec(path) ?? []
+		for (const [verb, routeSuffix, name] of TEMPLATE_WRITES) {
+			const mock = mocks[name]
+			if (verb === method && suffix === routeSuffix && id && mock)
+				return mock(id, body)
+		}
+		for (const [verb, routePath, name] of MODULE_WRITES) {
+			const mock = mocks[name]
+			if (verb === method && path === routePath && mock) return mock(body)
+		}
+		throw new Error(`unexpected request ${method} ${path}`)
+	}
+}

package/frontend-vue/tests/helpers/nuxt-globals.ts

@@ -1,4 +1,5 @@
 import { vi } from 'vitest'
+import { useApiErrorPresenter } from '../../../node_modules/@antelopejs/dms/frontend-vue/layers/dms-core/app/composables/useApiErrorPresenter'
 import {
 	computed,
 	createApp,
@@ -70,8 +71,23 @@ export function stubNuxtGlobals(email = 'camille@acme.com'): NuxtStubs {
 		processI18n: (message: string) => message,
 	}))
 	vi.stubGlobal('useToast', () => ({
-		add: (toast: Record<string, unknown>) => stubs.toasts.push(toast),
+		add: (toast: Record<string, unknown>) => {
+			stubs.toasts.push(toast)
+			return { id: stubs.toasts.length }
+		},
+	}))
+	vi.stubGlobal('getPluginI18n', () => ({
+		i18n: {
+			tm: (key: string) =>
+				key === 'error.read_only_demo'
+					? 'Read-only demo, changes are not saved'
+					: key,
+			rt: translate,
+		},
 	}))
+	const presented = ref(new WeakMap())
+	vi.stubGlobal('useDmsState', () => presented)
+	vi.stubGlobal('useApiErrorPresenter', useApiErrorPresenter)
 	vi.stubGlobal('useUniqueLocales', () => ({
 		uniqueLocales: ref([
 			{ code: 'en', name: 'English' },