feat: article editor core

web/src/views/__tests__/EditorView.spec.ts

@@ -0,0 +1,709 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import router from '@/router'
+import { useSessionStore } from '@/stores/session'
+import type { Article } from '@/composables/useArticles'
+import ArticleEditor from '@/components/ArticleEditor.vue'
+import RootComponent from '@/App.vue'
+
+const FIXED_NOW = '2026-09-26T11:02:00Z'
+
+function mockResponse(
+	status: number,
+	body: unknown = null,
+	headers: Record<string, string> = {},
+) {
+	return {
+		ok: status >= 200 && status < 300,
+		status,
+		headers: { get: (name: string) => headers[name] ?? null },
+		json: async () => body,
+	} as unknown as Response
+}
+
+function routeFor(url: string, init?: RequestInit) {
+	const method = init?.method ?? 'GET'
+	return `${method} ${url}`
+}
+
+function fetchRouter(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
+	return vi.fn((url: string, init?: RequestInit) => {
+		const key = routeFor(url, init)
+		const handler = handlers[key]
+		if (!handler) {
+			throw new Error(`Unexpected fetch call: ${key}`)
+		}
+		return handler()
+	})
+}
+
+function articleFixture(overrides: Partial<Article> = {}): Article {
+	return {
+		id: 12,
+		title: 'How we price a bathroom renovation',
+		body: 'a'.repeat(4318),
+		images: [
+			{ id: 1, url: '/images/1.png' },
+			{ id: 2, url: '/images/2.png' },
+			{ id: 3, url: '/images/3.png' },
+		],
+		is_online: false,
+		created_at: '2026-03-12T09:14:00Z',
+		updated_at: FIXED_NOW,
+		...overrides,
+	}
+}
+
+function createOverlayMock() {
+	let props: Record<string, unknown> | null = null
+	let resolveOpen: ((value: unknown) => void) | null = null
+	const create = vi.fn(
+		(_component: unknown, options: { props: Record<string, unknown> }) => {
+			props = options.props
+			return {
+				open: () =>
+					new Promise((resolve) => {
+						resolveOpen = resolve
+					}),
+			}
+		},
+	)
+	return {
+		create,
+		getProps: () => props,
+		resolveOpen: (value: unknown) => resolveOpen?.(value),
+	}
+}
+
+let overlayMock: ReturnType<typeof createOverlayMock>
+let toastAdd: ReturnType<typeof vi.fn>
+
+vi.mock('@nuxt/ui/composables', () => ({
+	useOverlay: () => overlayMock,
+	useToast: () => ({ add: toastAdd }),
+}))
+
+let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
+
+async function mountEditor(
+	handlers: Record<string, () => Response | Promise<Response>>,
+	path = '/article/12/edit',
+) {
+	setActivePinia(createPinia())
+	overlayMock = createOverlayMock()
+	toastAdd = vi.fn()
+	const session = useSessionStore()
+	session.session = { verified: true, username: 'marta' }
+	session.status = 'ready'
+	global.fetch = fetchRouter(handlers) as unknown as typeof fetch
+	await router.push(path)
+	const wrapper = mount(RootComponent, {
+		attachTo: document.body,
+		global: {
+			plugins: [router, uiPlugin],
+		},
+	})
+	currentWrapper = wrapper
+	await flushPromises()
+	return wrapper
+}
+
+function saveButton(wrapper: Awaited<ReturnType<typeof mount>>) {
+	return wrapper.find('[data-testid="save-button"]')
+}
+
+function articleEditorBody(wrapper: Awaited<ReturnType<typeof mount>>) {
+	return wrapper.findComponent(ArticleEditor).props('modelValue')
+}
+
+async function typeBody(
+	wrapper: Awaited<ReturnType<typeof mount>>,
+	body: string,
+) {
+	await wrapper
+		.findComponent(ArticleEditor)
+		.vm.$emit('update:modelValue', body)
+	await flushPromises()
+}
+
+function paragraph(inner: string) {
+	return `<p>${inner}</p>`
+}
+
+function paragraphOfLength(totalLength: number) {
+	return paragraph('a'.repeat(totalLength - 7))
+}
+
+beforeEach(() => {
+	vi.useFakeTimers()
+	vi.setSystemTime(new Date(FIXED_NOW))
+})
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	vi.useRealTimers()
+	sessionStorage.clear()
+	const onLineSpy = vi.spyOn(navigator, 'onLine', 'get')
+	onLineSpy.mockReturnValue(true)
+	window.dispatchEvent(new Event('online'))
+	onLineSpy.mockRestore()
+	await router.push('/login')
+})
+
+describe('Skeletons appear only after 150 ms, never for a fast response', () => {
+	it('shows no skeleton before 150 ms, a skeleton after, then the Saved state once resolved', async () => {
+		let resolveGet: (() => void) | null = null
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () =>
+				new Promise((resolve) => {
+					resolveGet = () =>
+						resolve(mockResponse(200, articleFixture()))
+				}),
+		})
+
+		expect(wrapper.find('[data-testid="skeleton-title"]').exists()).toBe(
+			false,
+		)
+
+		await vi.advanceTimersByTimeAsync(150)
+
+		expect(wrapper.find('[data-testid="skeleton-title"]').exists()).toBe(
+			true,
+		)
+		expect(wrapper.find('[data-testid="skeleton-content"]').exists()).toBe(
+			true,
+		)
+		expect(wrapper.find('[data-testid="skeleton-details"]').exists()).toBe(
+			true,
+		)
+
+		resolveGet?.()
+		await vi.advanceTimersByTimeAsync(0)
+		await flushPromises()
+
+		expect(wrapper.find('[data-testid="skeleton-title"]').exists()).toBe(
+			false,
+		)
+		expect(wrapper.text()).toContain('How we price a bathroom renovation')
+	})
+
+	it('never shows a skeleton when the response resolves in under 150 ms', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () =>
+				Promise.resolve(mockResponse(200, articleFixture())),
+		})
+
+		await vi.advanceTimersByTimeAsync(0)
+		await flushPromises()
+
+		expect(wrapper.find('[data-testid="skeleton-title"]').exists()).toBe(
+			false,
+		)
+		expect(wrapper.text()).toContain('How we price a bathroom renovation')
+	})
+})
+
+describe('Saved — a freshly loaded article, draft or online', () => {
+	it.each([
+		{ is_online: false, badge: 'Draft', publishLabel: 'Publish' },
+		{ is_online: true, badge: 'Online', publishLabel: 'Unpublish' },
+	])(
+		'reads the Saved state for is_online $is_online',
+		async ({ is_online, badge, publishLabel }) => {
+			const wrapper = await mountEditor({
+				'GET /v1/article/12': () =>
+					mockResponse(200, articleFixture({ is_online })),
+			})
+
+			expect(wrapper.text()).toContain('Articles')
+			expect(wrapper.text()).toContain(
+				'How we price a bathroom renovation',
+			)
+			expect(wrapper.text()).toContain(badge)
+			expect(wrapper.text()).toContain('Saved at 11:02')
+			expect(
+				(saveButton(wrapper).element as HTMLButtonElement).disabled,
+			).toBe(true)
+			expect(wrapper.text()).toContain(publishLabel)
+			expect(wrapper.text()).toContain('4 318 / 10 000')
+		},
+	)
+})
+
+describe('Unsaved changes — any edit marks the article dirty', () => {
+	it('shows Unsaved changes, enables Save and switches Publish to Save and publish', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		expect(wrapper.text()).toContain('Unsaved changes')
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(false)
+		expect(wrapper.text()).toContain('Save and publish')
+	})
+})
+
+describe('Saving — Save sends the PATCH and disables itself while in flight', () => {
+	it('sends the edited body and shows Saving…', async () => {
+		let patchBody: string | null = null
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		global.fetch = vi.fn((url: string, init?: RequestInit) => {
+			if (routeFor(url, init) === 'PATCH /v1/article/12') {
+				patchBody = init?.body as string
+				return new Promise(() => {})
+			}
+			throw new Error(`Unexpected fetch call: ${routeFor(url, init)}`)
+		}) as unknown as typeof fetch
+
+		await saveButton(wrapper).trigger('click')
+		await flushPromises()
+
+		expect(JSON.parse(patchBody ?? '{}')).toEqual({
+			body: paragraphOfLength(4320),
+		})
+		expect(wrapper.text()).toContain('Saving…')
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(true)
+	})
+})
+
+describe('Ctrl/⌘ S saves the same way as clicking Save', () => {
+	it('sends the same PATCH on Ctrl+S', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		let patchBody: string | null = null
+		global.fetch = vi.fn((url: string, init?: RequestInit) => {
+			if (routeFor(url, init) === 'PATCH /v1/article/12') {
+				patchBody = init?.body as string
+				return new Promise(() => {})
+			}
+			throw new Error(`Unexpected fetch call: ${routeFor(url, init)}`)
+		}) as unknown as typeof fetch
+
+		window.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 's', ctrlKey: true }),
+		)
+		await flushPromises()
+
+		expect(JSON.parse(patchBody ?? '{}')).toEqual({
+			body: paragraphOfLength(4320),
+		})
+		expect(wrapper.text()).toContain('Saving…')
+	})
+})
+
+describe('A successful save returns to the Saved state with the new time', () => {
+	it('shows Saved at the current time and disables Save again', async () => {
+		vi.setSystemTime(new Date('2026-09-26T11:30:00Z'))
+		let resolvePatch: (() => void) | null = null
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+			'PATCH /v1/article/12': () =>
+				new Promise((resolve) => {
+					resolvePatch = () =>
+						resolve(
+							mockResponse(
+								200,
+								articleFixture({
+									body: paragraphOfLength(4320),
+								}),
+							),
+						)
+				}),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+		await saveButton(wrapper).trigger('click')
+		await flushPromises()
+
+		resolvePatch?.()
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Saved at 11:30')
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(true)
+	})
+})
+
+describe('SaveStatus switches to a relative time after an hour', () => {
+	it('reads "Saved n min ago" once more than an hour has passed', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+
+		expect(wrapper.text()).toContain('Saved at 11:02')
+
+		vi.setSystemTime(new Date('2026-09-26T12:32:00Z'))
+		await vi.advanceTimersByTimeAsync(20000)
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Saved 90 min ago')
+	})
+})
+
+describe('Save failed — a 500 or a network failure keeps the changes and offers Retry', () => {
+	it.each([
+		{ name: 'a 500 response', handler: () => mockResponse(500) },
+		{
+			name: 'a network failure',
+			handler: () => Promise.reject(new TypeError('Failed to fetch')),
+		},
+	])('shows Save failed with Retry for $name', async ({ handler }) => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+			'PATCH /v1/article/12': handler,
+		})
+		await typeBody(wrapper, paragraph('Revised opening paragraph.'))
+		await saveButton(wrapper).trigger('click')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Save failed')
+		expect(
+			wrapper
+				.findAll('button')
+				.some((button) => button.text() === 'Retry'),
+		).toBe(true)
+		expect(articleEditorBody(wrapper)).toBe(
+			paragraph('Revised opening paragraph.'),
+		)
+	})
+})
+
+describe('Retry resends the same body and can recover', () => {
+	it('resends the same PATCH and shows Saved at the current time', async () => {
+		const patchCall = vi
+			.fn()
+			.mockResolvedValueOnce(mockResponse(500))
+			.mockResolvedValueOnce(
+				mockResponse(
+					200,
+					articleFixture({
+						body: paragraph('Revised opening paragraph.'),
+					}),
+				),
+			)
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+			'PATCH /v1/article/12': patchCall,
+		})
+		await typeBody(wrapper, paragraph('Revised opening paragraph.'))
+		await saveButton(wrapper).trigger('click')
+		await flushPromises()
+
+		const retryButton = wrapper
+			.findAll('button')
+			.find((button) => button.text() === 'Retry')
+		await retryButton?.trigger('click')
+		await flushPromises()
+
+		expect(patchCall).toHaveBeenCalledTimes(2)
+		expect(wrapper.text()).toMatch(/Saved at \d{2}:\d{2}/)
+	})
+})
+
+describe('A save against an article deleted elsewhere shows a toast, not the error SaveStatus', () => {
+	it('shows the toast and never reads Save failed', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+			'PATCH /v1/article/12': () => mockResponse(404),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+		await saveButton(wrapper).trigger('click')
+		await flushPromises()
+
+		expect(toastAdd).toHaveBeenCalledWith(
+			expect.objectContaining({
+				title: 'That article no longer exists.',
+			}),
+		)
+		expect(wrapper.text()).not.toContain('Save failed')
+	})
+})
+
+describe('Near the limit — the counter warns at 9000 characters without blocking Save', () => {
+	it('shows the warning icon and keeps Save enabled', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(9240))
+
+		expect(wrapper.text()).toContain('9 240 / 10 000')
+		expect(
+			wrapper
+				.find('[data-testid="character-counter-warning-icon"]')
+				.exists(),
+		).toBe(true)
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(false)
+	})
+})
+
+describe('Too long — over 10000 characters disables Save and Publish until shortened', () => {
+	it('shows the over-limit text and disables Save and Publish, then re-enables once shortened', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(10214))
+
+		expect(wrapper.text()).toContain('10 214 / 10 000')
+		expect(wrapper.text()).toContain(
+			'214 characters over. Shorten the text or remove an image. Formatting counts too.',
+		)
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(true)
+		const publishButton = wrapper
+			.findAll('button')
+			.find(
+				(button) =>
+					button.text() === 'Publish' ||
+					button.text() === 'Save and publish',
+			)
+		expect((publishButton?.element as HTMLButtonElement).disabled).toBe(
+			true,
+		)
+
+		await typeBody(wrapper, paragraphOfLength(9000))
+
+		expect(wrapper.text()).not.toContain('characters over')
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(false)
+	})
+})
+
+describe('Preview shows the rendered title and body without the editing surface', () => {
+	it('replaces the editor with a read-only rendering, then restores it unchanged', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () =>
+				mockResponse(200, articleFixture({ body: '<p>Some body</p>' })),
+		})
+
+		const previewSwitch = wrapper.find('button[role="switch"]')
+		await previewSwitch.trigger('click')
+		await flushPromises()
+
+		expect(wrapper.findComponent(ArticleEditor).exists()).toBe(false)
+		expect(
+			wrapper.find('[data-testid="article-preview"]').text(),
+		).toContain('How we price a bathroom renovation')
+		expect(
+			wrapper.find('[data-testid="article-preview"]').html(),
+		).toContain('Some body')
+
+		await previewSwitch.trigger('click')
+		await flushPromises()
+
+		expect(wrapper.findComponent(ArticleEditor).exists()).toBe(true)
+		expect(articleEditorBody(wrapper)).toBe('<p>Some body</p>')
+	})
+})
+
+describe('Offline blocks Save and Publish, and recovers when the connection returns', () => {
+	it('shows the offline SaveStatus and re-enables Save once back online', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		const onLineSpy = vi
+			.spyOn(navigator, 'onLine', 'get')
+			.mockReturnValue(false)
+		window.dispatchEvent(new Event('offline'))
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Waiting for connection')
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(true)
+
+		onLineSpy.mockReturnValue(true)
+		window.dispatchEvent(new Event('online'))
+		await flushPromises()
+
+		expect(
+			(saveButton(wrapper).element as HTMLButtonElement).disabled,
+		).toBe(false)
+		expect(wrapper.text()).toContain('Unsaved changes')
+		onLineSpy.mockRestore()
+	})
+})
+
+describe('Leaving with unsaved changes prompts, and "Discard changes" proceeds', () => {
+	it('opens ConfirmDialog with the exact copy and navigates away on Discard changes', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		const articlesLink = wrapper
+			.findAll('a')
+			.find((a) => a.attributes('href') === '/article')
+		expect(articlesLink).toBeTruthy()
+
+		const navigation = router.push('/article')
+		await flushPromises()
+
+		const props = overlayMock.getProps() as Record<string, unknown>
+		expect(props.title).toBe('Leave without saving?')
+		expect(props.description).toBe(
+			'Your changes to "How we price a bathroom renovation" haven\'t been saved.',
+		)
+		expect(props.cancelLabel).toBe('Discard changes')
+		expect(props.confirmLabel).toBe('Keep editing')
+		expect(props.dismissResolvesTo).toBe('confirm')
+
+		overlayMock.resolveOpen(false)
+		await navigation
+
+		expect(router.currentRoute.value.path).toBe('/article')
+	})
+})
+
+describe('Leaving with unsaved changes, "Keep editing" stays on the page', () => {
+	it('keeps the user on the editor with the unsaved body intact', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		const articlesLink = wrapper
+			.findAll('a')
+			.find((a) => a.attributes('href') === '/article')
+		expect(articlesLink).toBeTruthy()
+
+		const navigation = router.push('/article')
+		await flushPromises()
+
+		overlayMock.resolveOpen(true)
+		await navigation
+
+		expect(router.currentRoute.value.path).toBe('/article/12/edit')
+		expect(articleEditorBody(wrapper)).toBe(paragraphOfLength(4320))
+	})
+})
+
+describe('Esc or the overlay on the leave guard behaves like "Keep editing"', () => {
+	it('keeps the user on /article/12/edit with the unsaved body intact', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+		await typeBody(wrapper, paragraphOfLength(4320))
+
+		const navigation = router.push('/article')
+		await flushPromises()
+
+		const props = overlayMock.getProps() as Record<string, unknown>
+		expect(props.dismissResolvesTo).toBe('confirm')
+
+		overlayMock.resolveOpen(true)
+		await navigation
+
+		expect(router.currentRoute.value.path).toBe('/article/12/edit')
+		expect(articleEditorBody(wrapper)).toBe(paragraphOfLength(4320))
+	})
+})
+
+describe('Leaving a clean article never prompts', () => {
+	it('navigates directly with no ConfirmDialog', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+
+		const articlesLink = wrapper
+			.findAll('a')
+			.find((a) => a.attributes('href') === '/article')
+		await articlesLink?.trigger('click')
+		await flushPromises()
+
+		expect(overlayMock.getProps()).toBeNull()
+		expect(router.currentRoute.value.path).toBe('/article')
+	})
+})
+
+describe('Session expired mid-save keeps the draft and restores it after logging back in', () => {
+	it('mirrors the body to sessionStorage and restores it on the next mount', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+			'PATCH /v1/article/12': () => mockResponse(401),
+		})
+		const body = paragraph(
+			'Paragraph added just before the session expired.',
+		)
+		await typeBody(wrapper, body)
+		await saveButton(wrapper).trigger('click')
+		await flushPromises()
+
+		expect(sessionStorage.getItem('renewcms:article-draft:12')).toBe(body)
+		expect(router.currentRoute.value.path).toBe('/login')
+		expect(router.currentRoute.value.query.redirect).toBe(
+			'/article/12/edit',
+		)
+		expect(router.currentRoute.value.query.reason).toBe('expired')
+
+		const session = useSessionStore()
+		session.session = { verified: true, username: 'marta' }
+		session.status = 'ready'
+		global.fetch = fetchRouter({
+			'GET /v1/article/12': () =>
+				mockResponse(
+					200,
+					articleFixture({
+						body: 'Last saved body without that paragraph.',
+					}),
+				),
+		}) as unknown as typeof fetch
+		await router.push('/article/12/edit')
+		const secondWrapper = mount(RootComponent, {
+			attachTo: document.body,
+			global: {
+				plugins: [router, uiPlugin],
+			},
+		})
+		await flushPromises()
+
+		expect(articleEditorBody(secondWrapper)).toBe(body)
+		expect(secondWrapper.text()).toContain('Unsaved changes')
+		secondWrapper.unmount()
+	})
+})
+
+describe('An unknown or deleted article id replaces the editor with an error state', () => {
+	it('shows the not-found error state and navigates to /article', async () => {
+		const wrapper = await mountEditor(
+			{
+				'GET /v1/article/9999': () => mockResponse(404),
+			},
+			'/article/9999/edit',
+		)
+
+		expect(wrapper.text()).toContain("This article doesn't exist.")
+		expect(wrapper.find('[data-testid="save-button"]').exists()).toBe(false)
+		expect(wrapper.text()).not.toContain('Publish')
+
+		const allArticlesButton = wrapper
+			.findAll('button')
+			.find((button) => button.text() === 'All articles')
+		await allArticlesButton?.trigger('click')
+		await flushPromises()
+
+		expect(router.currentRoute.value.path).toBe('/article')
+	})
+})

web/src/views/__tests__/HomeView.spec.ts

@@ -7,7 +7,11 @@ import { useSessionStore } from '@/stores/session'
 import type { Article } from '@/composables/useArticles'
 import HomeView from '../HomeView.vue'
 
-function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
+function mockResponse(
+	status: number,
+	body: unknown = null,
+	headers: Record<string, string> = {},
+) {
 	return {
 		ok: status >= 200 && status < 300,
 		status,
@@ -21,7 +25,9 @@ function routeFor(url: string, init?: RequestInit) {
 	return `${method} ${url}`
 }
 
-function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
+function fetchRouter(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
 	return vi.fn((url: string, init?: RequestInit) => {
 		const key = routeFor(url, init)
 		const handler = handlers[key]
@@ -91,7 +97,9 @@ const sixArticles: Article[] = [
 
 let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
 
-async function mountHome(handlers: Record<string, () => Response | Promise<Response>>) {
+async function mountHome(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
 	setActivePinia(createPinia())
 	const session = useSessionStore()
 	session.session = { verified: true, username: 'marta' }
@@ -149,7 +157,8 @@ describe('Skeletons appear only after 150 ms, never for a fast response', () =>
 	it('never shows a skeleton when the response resolves in under 150 ms', async () => {
 		vi.useFakeTimers()
 		const wrapper = await mountHome({
-			'GET /v1/article/': () => Promise.resolve(mockResponse(200, sixArticles)),
+			'GET /v1/article/': () =>
+				Promise.resolve(mockResponse(200, sixArticles)),
 		})
 
 		await vi.advanceTimersByTimeAsync(0)
@@ -166,7 +175,9 @@ describe('Default — the list loaded with a mix of online and draft articles',
 			'GET /v1/article/': () => mockResponse(200, sixArticles),
 		})
 
-		expect(wrapper.text()).toContain("Here's where things stand on your site.")
+		expect(wrapper.text()).toContain(
+			"Here's where things stand on your site.",
+		)
 
 		const rows = wrapper.find('[data-testid="recent-list"]').findAll('li')
 		expect(rows).toHaveLength(5)
@@ -185,7 +196,9 @@ describe('Default — the list loaded with a mix of online and draft articles',
 		expect(wrapper.text()).toContain('2')
 		expect(wrapper.text()).toContain('drafts')
 
-		const guideLink = wrapper.findAll('a').find((a) => a.text() === 'Open the guide')
+		const guideLink = wrapper
+			.findAll('a')
+			.find((a) => a.text() === 'Open the guide')
 		expect(guideLink?.attributes('href')).toBe('/integration')
 
 		await findButton(wrapper, 'New article')?.trigger('click')
@@ -226,7 +239,9 @@ describe('Error — a 500 or a network failure shows the same inline alert', ()
 			'GET /v1/article/': handler,
 		})
 
-		expect(wrapper.text()).toContain("Here's where things stand on your site.")
+		expect(wrapper.text()).toContain(
+			"Here's where things stand on your site.",
+		)
 		expect(wrapper.text()).toContain('Good')
 		const alert = wrapper.find('[role="alert"]')
 		expect(alert.exists()).toBe(true)
@@ -267,7 +282,9 @@ describe('The list is fetched exactly once per navigation', () => {
 
 		expect(listCall).toHaveBeenCalledTimes(1)
 		expect(wrapper.text()).toContain('6')
-		expect(wrapper.find('[data-testid="recent-list"]').findAll('li')).toHaveLength(5)
+		expect(
+			wrapper.find('[data-testid="recent-list"]').findAll('li'),
+		).toHaveLength(5)
 	})
 })
 

web/src/views/__tests__/LoginView.spec.ts

@@ -5,7 +5,11 @@ import uiPlugin from '@nuxt/ui/vue-plugin'
 import router from '@/router'
 import LoginView from '../LoginView.vue'
 
-function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
+function mockResponse(
+	status: number,
+	body: unknown = null,
+	headers: Record<string, string> = {},
+) {
 	return {
 		ok: status >= 200 && status < 300,
 		status,
@@ -19,7 +23,9 @@ function routeFor(url: string, init?: RequestInit) {
 	return `${method} ${url}`
 }
 
-function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
+function fetchRouter(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
 	return vi.fn((url: string, init?: RequestInit) => {
 		const key = routeFor(url, init)
 		const handler = handlers[key]
@@ -59,7 +65,9 @@ async function fillAndSubmit(
 	password: string,
 ) {
 	await wrapper.find('input[placeholder="Your username"]').setValue(username)
-	await wrapper.find('input[autocomplete="current-password"]').setValue(password)
+	await wrapper
+		.find('input[autocomplete="current-password"]')
+		.setValue(password)
 	await wrapper.find('form').trigger('submit')
 	await flushPromises()
 }
@@ -73,16 +81,21 @@ afterEach(async () => {
 describe('Default — registration is closed', () => {
 	it('renders the default state with no create-account footer link', async () => {
 		const wrapper = await mountLogin('/login', {
-			'GET /v1/auth/registration': () => mockResponse(200, { open: false }),
+			'GET /v1/auth/registration': () =>
+				mockResponse(200, { open: false }),
 		})
 
 		expect(wrapper.find('h1').text()).toBe('Log in')
-		expect(wrapper.text()).toContain('Welcome back. Log in to manage your articles.')
+		expect(wrapper.text()).toContain(
+			'Welcome back. Log in to manage your articles.',
+		)
 
 		const usernameInput = wrapper.find('input[placeholder="Your username"]')
 		expect((usernameInput.element as HTMLInputElement).value).toBe('')
 
-		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		const passwordInput = wrapper.find(
+			'input[autocomplete="current-password"]',
+		)
 		expect((passwordInput.element as HTMLInputElement).value).toBe('')
 
 		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
@@ -93,7 +106,8 @@ describe('Default — registration is closed', () => {
 describe('Fresh install — registration is open', () => {
 	it('renders the same fields plus the create-account footer link', async () => {
 		const wrapper = await mountLogin('/login', {
-			'GET /v1/auth/registration': () => mockResponse(200, { open: true }),
+			'GET /v1/auth/registration': () =>
+				mockResponse(200, { open: true }),
 		})
 
 		expect(wrapper.find('h1').text()).toBe('Log in')
@@ -129,18 +143,26 @@ describe('Submitting — fields and button are disabled while the request is in
 				}),
 		})
 
-		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
-		await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
+		await wrapper
+			.find('input[placeholder="Your username"]')
+			.setValue('marta')
+		await wrapper
+			.find('input[autocomplete="current-password"]')
+			.setValue('limewash2026')
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()
 
 		expect(
-			(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
-				.disabled,
+			(
+				wrapper.find('input[placeholder="Your username"]')
+					.element as HTMLInputElement
+			).disabled,
 		).toBe(true)
 		expect(
-			(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
-				.disabled,
+			(
+				wrapper.find('input[autocomplete="current-password"]')
+					.element as HTMLInputElement
+			).disabled,
 		).toBe(true)
 		const submitButton = wrapper.find('button[type="submit"]')
 		expect(submitButton.text()).toBe('Logging in…')
@@ -159,13 +181,19 @@ describe('Wrong credentials — the password is cleared and focused', () => {
 
 		await fillAndSubmit(wrapper, 'marta', 'wrong-password')
 
-		expect(wrapper.text()).toContain("That username and password don't match")
-		expect(wrapper.text()).toContain('Check both and try again. Passwords are case-sensitive.')
+		expect(wrapper.text()).toContain(
+			"That username and password don't match",
+		)
+		expect(wrapper.text()).toContain(
+			'Check both and try again. Passwords are case-sensitive.',
+		)
 
 		const usernameInput = wrapper.find('input[placeholder="Your username"]')
 		expect((usernameInput.element as HTMLInputElement).value).toBe('marta')
 
-		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		const passwordInput = wrapper.find(
+			'input[autocomplete="current-password"]',
+		)
 		expect((passwordInput.element as HTMLInputElement).value).toBe('')
 		expect(passwordInput.element).toBe(document.activeElement)
 
@@ -179,20 +207,28 @@ describe('Too many attempts — the button is disabled with a live countdown', (
 	it('counts down from the Retry-After value and re-enables at zero', async () => {
 		vi.useFakeTimers()
 		const wrapper = await mountLogin('/login', {
-			'POST /v1/auth/login': () => mockResponse(429, null, { 'Retry-After': '42' }),
+			'POST /v1/auth/login': () =>
+				mockResponse(429, null, { 'Retry-After': '42' }),
 		})
 
 		await fillAndSubmit(wrapper, 'marta', 'limewash')
 
 		expect(wrapper.text()).toContain('Too many attempts')
-		expect(wrapper.text()).toContain('For your security, wait a moment before trying again.')
+		expect(wrapper.text()).toContain(
+			'For your security, wait a moment before trying again.',
+		)
 
 		expect(
-			(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement).value,
+			(
+				wrapper.find('input[placeholder="Your username"]')
+					.element as HTMLInputElement
+			).value,
 		).toBe('marta')
 		expect(
-			(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
-				.value,
+			(
+				wrapper.find('input[autocomplete="current-password"]')
+					.element as HTMLInputElement
+			).value,
 		).toBe('limewash')
 
 		const button = wrapper.find('button[type="submit"]')
@@ -200,8 +236,10 @@ describe('Too many attempts — the button is disabled with a live countdown', (
 		expect((button.element as HTMLButtonElement).disabled).toBe(true)
 
 		const fields = () => [
-			wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement,
-			wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement,
+			wrapper.find('input[placeholder="Your username"]')
+				.element as HTMLInputElement,
+			wrapper.find('input[autocomplete="current-password"]')
+				.element as HTMLInputElement,
 		]
 		expect(fields().map((field) => field.disabled)).toEqual([true, true])
 
@@ -209,9 +247,10 @@ describe('Too many attempts — the button is disabled with a live countdown', (
 		await flushPromises()
 
 		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
-		expect((wrapper.find('button[type="submit"]').element as HTMLButtonElement).disabled).toBe(
-			false,
-		)
+		expect(
+			(wrapper.find('button[type="submit"]').element as HTMLButtonElement)
+				.disabled,
+		).toBe(false)
 		expect(fields().map((field) => field.disabled)).toEqual([false, false])
 		vi.useRealTimers()
 	})
@@ -219,14 +258,19 @@ describe('Too many attempts — the button is disabled with a live countdown', (
 
 describe('Session expired — redirected from a 401 elsewhere', () => {
 	it('shows the session-expired alert and focuses the password field', async () => {
-		const wrapper = await mountLogin('/login?redirect=/article/12/edit&reason=expired', {})
+		const wrapper = await mountLogin(
+			'/login?redirect=/article/12/edit&reason=expired',
+			{},
+		)
 
 		expect(wrapper.text()).toContain('Your session expired')
 		expect(wrapper.text()).toContain(
 			'Log in again to pick up where you left off. Unsaved changes are kept on this device.',
 		)
 
-		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		const passwordInput = wrapper.find(
+			'input[autocomplete="current-password"]',
+		)
 		expect(passwordInput.element).toBe(document.activeElement)
 		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
 	})
@@ -247,7 +291,11 @@ describe('Password changed — arrived from a successful reset', () => {
 
 describe('Server or network error — the fields keep their values', () => {
 	it.each([
-		{ name: 'a 500 response', password: 'limewash2026', handler: () => mockResponse(500) },
+		{
+			name: 'a 500 response',
+			password: 'limewash2026',
+			handler: () => mockResponse(500),
+		},
 		{
 			name: 'a network failure',
 			password: 'limewash2026',
@@ -270,20 +318,28 @@ describe('Server or network error — the fields keep their values', () => {
 
 			expect(login).toHaveBeenCalled()
 			expect(wrapper.text()).toContain("Couldn't reach RenewCMS")
-			expect(wrapper.text()).toContain('Check your connection and try again.')
+			expect(wrapper.text()).toContain(
+				'Check your connection and try again.',
+			)
 
 			expect(
-				(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
-					.value,
+				(
+					wrapper.find('input[placeholder="Your username"]')
+						.element as HTMLInputElement
+				).value,
 			).toBe('marta')
 			expect(
-				(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
-					.value,
+				(
+					wrapper.find('input[autocomplete="current-password"]')
+						.element as HTMLInputElement
+				).value,
 			).toBe(password)
 
 			const submitButton = wrapper.find('button[type="submit"]')
 			expect(submitButton.text()).toBe('Log in')
-			expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
+			expect((submitButton.element as HTMLButtonElement).disabled).toBe(
+				false,
+			)
 		},
 	)
 })
@@ -302,12 +358,15 @@ describe('A successful log in navigates to the right destination', () => {
 		async ({ path, verified, destination }) => {
 			const wrapper = await mountLogin(path, {
 				'POST /v1/auth/login': () => mockResponse(200),
-				'GET /v1/auth/me': () => mockResponse(200, { is_verified: verified }),
+				'GET /v1/auth/me': () =>
+					mockResponse(200, { is_verified: verified }),
 			})
 
 			await fillAndSubmit(wrapper, 'marta', 'limewash2026')
 
-			await vi.waitFor(() => expect(router.currentRoute.value.path).toBe(destination))
+			await vi.waitFor(() =>
+				expect(router.currentRoute.value.path).toBe(destination),
+			)
 		},
 	)
 })

web/src/views/__tests__/PendingView.spec.ts

@@ -6,7 +6,11 @@ import router from '@/router'
 import { useSessionStore } from '@/stores/session'
 import PendingView from '../PendingView.vue'
 
-function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
+function mockResponse(
+	status: number,
+	body: unknown = null,
+	headers: Record<string, string> = {},
+) {
 	return {
 		ok: status >= 200 && status < 300,
 		status,
@@ -20,7 +24,9 @@ function routeFor(url: string, init?: RequestInit) {
 	return `${method} ${url}`
 }
 
-function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
+function fetchRouter(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
 	return vi.fn((url: string, init?: RequestInit) => {
 		const key = routeFor(url, init)
 		const handler = handlers[key]
@@ -34,15 +40,17 @@ function fetchRouter(handlers: Record<string, () => Response | Promise<Response>
 function createOverlayMock() {
 	let props: Record<string, unknown> | null = null
 	let resolveOpen: ((value: unknown) => void) | null = null
-	const create = vi.fn((_component: unknown, options: { props: Record<string, unknown> }) => {
-		props = options.props
-		return {
-			open: () =>
-				new Promise((resolve) => {
-					resolveOpen = resolve
-				}),
-		}
-	})
+	const create = vi.fn(
+		(_component: unknown, options: { props: Record<string, unknown> }) => {
+			props = options.props
+			return {
+				open: () =>
+					new Promise((resolve) => {
+						resolveOpen = resolve
+					}),
+			}
+		},
+	)
 	return {
 		create,
 		getProps: () => props,
@@ -140,16 +148,24 @@ describe('Logging out', () => {
 		await findButton(wrapper, 'Log out')?.trigger('click')
 		await flushPromises()
 
-		expect((findButton(wrapper, 'Log out')?.element as HTMLButtonElement).disabled).toBe(true)
 		expect(
-			(findButton(wrapper, 'Cancel registration')?.element as HTMLButtonElement).disabled,
+			(findButton(wrapper, 'Log out')?.element as HTMLButtonElement)
+				.disabled,
+		).toBe(true)
+		expect(
+			(
+				findButton(wrapper, 'Cancel registration')
+					?.element as HTMLButtonElement
+			).disabled,
 		).toBe(true)
 
 		resolveLogout?.()
 		await flushPromises()
 
 		expect(session.session).toBeNull()
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/login'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/login'),
+		)
 	})
 })
 
@@ -229,7 +245,9 @@ describe('Cancelled — 200 navigates to /register with a toast', () => {
 		overlayMock.resolveOpen(true)
 		await flushPromises()
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/register'),
+		)
 		expect(toastAdd).toHaveBeenCalledWith({
 			color: 'success',
 			icon: 'i-lucide-circle-check',
@@ -273,9 +291,12 @@ describe('Already verified — 403 shows the verified panel and toast, then navi
 		})
 		expect(router.currentRoute.value.path).not.toBe('/home')
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/home'), {
-			timeout: 2000,
-		})
+		await vi.waitFor(
+			() => expect(router.currentRoute.value.path).toBe('/home'),
+			{
+				timeout: 2000,
+			},
+		)
 		expect(toastAdd).toHaveBeenCalledTimes(1)
 		expect(pushSpy).not.toHaveBeenCalledWith('/register/pending')
 		pushSpy.mockRestore()
@@ -289,18 +310,23 @@ describe('Cancel failed — the dialog stays open and shows the failure inline',
 			name: 'a network failure',
 			handler: () => Promise.reject(new TypeError('Failed to fetch')),
 		},
-	])('rejects the action instead of navigating for $name', async ({ handler }) => {
-		const { wrapper } = await mountPending({
-			'DELETE /v1/auth/register': handler,
-		})
+	])(
+		'rejects the action instead of navigating for $name',
+		async ({ handler }) => {
+			const { wrapper } = await mountPending({
+				'DELETE /v1/auth/register': handler,
+			})
 
-		await findButton(wrapper, 'Cancel registration')?.trigger('click')
-		await flushPromises()
+			await findButton(wrapper, 'Cancel registration')?.trigger('click')
+			await flushPromises()
 
-		const props = overlayMock.getProps() as { action: () => Promise<void> }
-		await expect(props.action()).rejects.toThrow()
+			const props = overlayMock.getProps() as {
+				action: () => Promise<void>
+			}
+			await expect(props.action()).rejects.toThrow()
 
-		expect(router.currentRoute.value.path).toBe('/register/pending')
-		expect(toastAdd).not.toHaveBeenCalled()
-	})
+			expect(router.currentRoute.value.path).toBe('/register/pending')
+			expect(toastAdd).not.toHaveBeenCalled()
+		},
+	)
 })

web/src/views/__tests__/RegisterView.spec.ts

@@ -6,7 +6,11 @@ import router from '@/router'
 import ResultPanel from '@/components/ResultPanel.vue'
 import RegisterView from '../RegisterView.vue'
 
-function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
+function mockResponse(
+	status: number,
+	body: unknown = null,
+	headers: Record<string, string> = {},
+) {
 	return {
 		ok: status >= 200 && status < 300,
 		status,
@@ -20,7 +24,9 @@ function routeFor(url: string, init?: RequestInit) {
 	return `${method} ${url}`
 }
 
-function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
+function fetchRouter(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
 	return vi.fn((url: string, init?: RequestInit) => {
 		const key = routeFor(url, init)
 		const handler = handlers[key]
@@ -33,7 +39,9 @@ function fetchRouter(handlers: Record<string, () => Response | Promise<Response>
 
 let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
 
-async function mountRegister(handlers: Record<string, () => Response | Promise<Response>> = {}) {
+async function mountRegister(
+	handlers: Record<string, () => Response | Promise<Response>> = {},
+) {
 	setActivePinia(createPinia())
 	const fetchMock = fetchRouter(handlers)
 	global.fetch = fetchMock as unknown as typeof fetch
@@ -61,7 +69,9 @@ function passwordInput(wrapper: Awaited<ReturnType<typeof mountRegister>>) {
 	return wrapper.find('input[autocomplete="new-password"]')
 }
 
-async function fillValidForm(wrapper: Awaited<ReturnType<typeof mountRegister>>) {
+async function fillValidForm(
+	wrapper: Awaited<ReturnType<typeof mountRegister>>,
+) {
 	await usernameInput(wrapper).setValue('marta')
 	await emailInput(wrapper).setValue('marta@renew.example')
 	await passwordInput(wrapper).setValue('limewash2026')
@@ -82,15 +92,21 @@ describe('Default — a fresh, empty form', () => {
 			"This creates the single admin account for this site. Once it's verified, registration closes.",
 		)
 
-		expect((usernameInput(wrapper).element as HTMLInputElement).value).toBe('')
+		expect((usernameInput(wrapper).element as HTMLInputElement).value).toBe(
+			'',
+		)
 		expect(wrapper.text()).toContain('0 / 20')
 
 		expect((emailInput(wrapper).element as HTMLInputElement).value).toBe('')
 
-		expect((passwordInput(wrapper).element as HTMLInputElement).value).toBe('')
+		expect((passwordInput(wrapper).element as HTMLInputElement).value).toBe(
+			'',
+		)
 		expect(wrapper.text()).toContain('At least 8 characters')
 
-		expect(wrapper.find('button[type="submit"]').text()).toBe('Create account')
+		expect(wrapper.find('button[type="submit"]').text()).toBe(
+			'Create account',
+		)
 		expect(wrapper.text()).toContain('Already set up?')
 		const footerLink = wrapper.find('a[href="/login"]')
 		expect(footerLink.exists()).toBe(true)
@@ -116,14 +132,18 @@ describe('Validation errors — checked on blur and on submit', () => {
 
 		expect(wrapper.text()).toContain('2 / 20')
 		expect(wrapper.text()).toContain('Use 3 to 20 characters.')
-		expect(wrapper.text()).toContain('Enter a full email address, like name@example.com.')
+		expect(wrapper.text()).toContain(
+			'Enter a full email address, like name@example.com.',
+		)
 
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()
 
 		expect(register).not.toHaveBeenCalled()
 		expect(wrapper.text()).toContain('Use 3 to 20 characters.')
-		expect(wrapper.text()).toContain('Enter a full email address, like name@example.com.')
+		expect(wrapper.text()).toContain(
+			'Enter a full email address, like name@example.com.',
+		)
 	})
 })
 
@@ -136,9 +156,11 @@ describe('Filled, valid — every rule is met', () => {
 		const toggle = wrapper.find('button[aria-label="Show password"]')
 		await toggle.trigger('click')
 
-		expect(wrapper.find('button[aria-label="Hide password"]').attributes('aria-pressed')).toBe(
-			'true',
-		)
+		expect(
+			wrapper
+				.find('button[aria-label="Hide password"]')
+				.attributes('aria-pressed'),
+		).toBe('true')
 
 		expect(wrapper.text()).toContain('5 / 20')
 		expect(wrapper.text()).not.toContain('Use 3 to 20 characters.')
@@ -146,11 +168,17 @@ describe('Filled, valid — every rule is met', () => {
 			"Letters and numbers, 3 to 20 characters. You'll use it to log in.",
 		)
 
-		expect(wrapper.text()).not.toContain('Enter a full email address, like name@example.com.')
+		expect(wrapper.text()).not.toContain(
+			'Enter a full email address, like name@example.com.',
+		)
 		expect(wrapper.text()).toContain("We'll send a verification link here.")
 
-		expect((passwordInput(wrapper).element as HTMLInputElement).type).toBe('text')
-		expect((passwordInput(wrapper).element as HTMLInputElement).value).toBe('limewash2026')
+		expect((passwordInput(wrapper).element as HTMLInputElement).type).toBe(
+			'text',
+		)
+		expect((passwordInput(wrapper).element as HTMLInputElement).value).toBe(
+			'limewash2026',
+		)
 
 		const submitButton = wrapper.find('button[type="submit"]')
 		expect(submitButton.text()).toBe('Create account')
@@ -172,9 +200,15 @@ describe('Submitting — fields and button are disabled while the request is in
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()
 
-		expect((usernameInput(wrapper).element as HTMLInputElement).disabled).toBe(true)
-		expect((emailInput(wrapper).element as HTMLInputElement).disabled).toBe(true)
-		expect((passwordInput(wrapper).element as HTMLInputElement).disabled).toBe(true)
+		expect(
+			(usernameInput(wrapper).element as HTMLInputElement).disabled,
+		).toBe(true)
+		expect((emailInput(wrapper).element as HTMLInputElement).disabled).toBe(
+			true,
+		)
+		expect(
+			(passwordInput(wrapper).element as HTMLInputElement).disabled,
+		).toBe(true)
 
 		const submitButton = wrapper.find('button[type="submit"]')
 		expect(submitButton.text()).toBe('Creating account…')
@@ -221,7 +255,9 @@ describe('Registration closed — the form is replaced by a ResultPanel', () =>
 		expect(action.text()).toBe('Go to log in')
 		await action.trigger('click')
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/login'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/login'),
+		)
 	})
 })
 
@@ -232,44 +268,61 @@ describe('Server or network error — the form is kept and re-enabled', () => {
 			name: 'a network failure',
 			handler: () => Promise.reject(new TypeError('Failed to fetch')),
 		},
-	])('shows the error alert and keeps the values for $name', async ({ handler }) => {
-		const register = vi.fn(handler)
-		const { wrapper, fetchMock } = await mountRegister({
-			'POST /v1/auth/register': register,
-		})
+	])(
+		'shows the error alert and keeps the values for $name',
+		async ({ handler }) => {
+			const register = vi.fn(handler)
+			const { wrapper, fetchMock } = await mountRegister({
+				'POST /v1/auth/register': register,
+			})
 
-		await fillValidForm(wrapper)
-		await wrapper.find('form').trigger('submit')
-		await flushPromises()
+			await fillValidForm(wrapper)
+			await wrapper.find('form').trigger('submit')
+			await flushPromises()
 
-		expect(fetchMock).toHaveBeenCalledWith(
-			'/v1/auth/register',
-			expect.objectContaining({
-				method: 'POST',
-				body: JSON.stringify({
-					username: 'marta',
-					email: 'marta@renew.example',
-					password: 'limewash2026',
+			expect(fetchMock).toHaveBeenCalledWith(
+				'/v1/auth/register',
+				expect.objectContaining({
+					method: 'POST',
+					body: JSON.stringify({
+						username: 'marta',
+						email: 'marta@renew.example',
+						password: 'limewash2026',
+					}),
 				}),
-			}),
-		)
-		expect(wrapper.text()).toContain("Couldn't create the account")
-		expect(wrapper.text()).toContain(
-			'Something went wrong on the server. Try again in a moment.',
-		)
+			)
+			expect(wrapper.text()).toContain("Couldn't create the account")
+			expect(wrapper.text()).toContain(
+				'Something went wrong on the server. Try again in a moment.',
+			)
 
-		expect((usernameInput(wrapper).element as HTMLInputElement).value).toBe('marta')
-		expect((emailInput(wrapper).element as HTMLInputElement).value).toBe('marta@renew.example')
-		expect((passwordInput(wrapper).element as HTMLInputElement).value).toBe('limewash2026')
+			expect(
+				(usernameInput(wrapper).element as HTMLInputElement).value,
+			).toBe('marta')
+			expect(
+				(emailInput(wrapper).element as HTMLInputElement).value,
+			).toBe('marta@renew.example')
+			expect(
+				(passwordInput(wrapper).element as HTMLInputElement).value,
+			).toBe('limewash2026')
 
-		expect((usernameInput(wrapper).element as HTMLInputElement).disabled).toBe(false)
-		expect((emailInput(wrapper).element as HTMLInputElement).disabled).toBe(false)
-		expect((passwordInput(wrapper).element as HTMLInputElement).disabled).toBe(false)
+			expect(
+				(usernameInput(wrapper).element as HTMLInputElement).disabled,
+			).toBe(false)
+			expect(
+				(emailInput(wrapper).element as HTMLInputElement).disabled,
+			).toBe(false)
+			expect(
+				(passwordInput(wrapper).element as HTMLInputElement).disabled,
+			).toBe(false)
 
-		const submitButton = wrapper.find('button[type="submit"]')
-		expect(submitButton.text()).toBe('Create account')
-		expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
-	})
+			const submitButton = wrapper.find('button[type="submit"]')
+			expect(submitButton.text()).toBe('Create account')
+			expect((submitButton.element as HTMLButtonElement).disabled).toBe(
+				false,
+			)
+		},
+	)
 })
 
 describe('A successful registration goes straight to the pending page', () => {
@@ -282,7 +335,9 @@ describe('A successful registration goes straight to the pending page', () => {
 		await fillValidForm(wrapper)
 		await wrapper.find('form').trigger('submit')
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register/pending'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/register/pending'),
+		)
 
 		expect(fetchMock).toHaveBeenCalledWith(
 			'/v1/auth/register',
@@ -307,8 +362,12 @@ describe('A successful registration goes straight to the pending page', () => {
 		await fillValidForm(wrapper)
 		await wrapper.find('form').trigger('submit')
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register/pending'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/register/pending'),
+		)
 
-		expect(sessionStorage.getItem('renewcms:pendingEmail')).toBe('marta@renew.example')
+		expect(sessionStorage.getItem('renewcms:pendingEmail')).toBe(
+			'marta@renew.example',
+		)
 	})
 })

web/src/views/__tests__/VerifyView.spec.ts

@@ -6,7 +6,11 @@ import router from '@/router'
 import { useSessionStore } from '@/stores/session'
 import VerifyView from '../VerifyView.vue'
 
-function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
+function mockResponse(
+	status: number,
+	body: unknown = null,
+	headers: Record<string, string> = {},
+) {
 	return {
 		ok: status >= 200 && status < 300,
 		status,
@@ -20,7 +24,9 @@ function routeFor(url: string, init?: RequestInit) {
 	return `${method} ${url}`
 }
 
-function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
+function fetchRouter(
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
 	return vi.fn((url: string, init?: RequestInit) => {
 		const key = routeFor(url, init)
 		const handler = handlers[key]
@@ -75,15 +81,23 @@ afterEach(async () => {
 describe('Verifying — the code submits automatically on load', () => {
 	it('shows the full-card spinner and calls verify once with the code', async () => {
 		const verify = vi.fn(() => new Promise(() => {}))
-		const { wrapper, fetchMock } = await mountVerify('/register/validate?c=abc123', {
-			'POST /v1/auth/verify': verify,
-		})
+		const { wrapper, fetchMock } = await mountVerify(
+			'/register/validate?c=abc123',
+			{
+				'POST /v1/auth/verify': verify,
+			},
+		)
 
-		expect(wrapper.find('[role="status"]').text()).toContain('Verifying your account…')
+		expect(wrapper.find('[role="status"]').text()).toContain(
+			'Verifying your account…',
+		)
 		expect(verify).toHaveBeenCalledTimes(1)
 		expect(fetchMock).toHaveBeenCalledWith(
 			'/v1/auth/verify',
-			expect.objectContaining({ method: 'POST', body: JSON.stringify({ code: 'abc123' }) }),
+			expect.objectContaining({
+				method: 'POST',
+				body: JSON.stringify({ code: 'abc123' }),
+			}),
 		)
 	})
 })
@@ -105,9 +119,12 @@ describe('Success — 200 refreshes the session and navigates to /home with a to
 			description: 'Welcome to RenewCMS.',
 		})
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/home'), {
-			timeout: 2000,
-		})
+		await vi.waitFor(
+			() => expect(router.currentRoute.value.path).toBe('/home'),
+			{
+				timeout: 2000,
+			},
+		)
 		expect(toastAdd).toHaveBeenCalledTimes(1)
 
 		const session = useSessionStore()
@@ -135,7 +152,9 @@ describe('Invalid or expired — 403 offers a way to start over', () => {
 		expect(wrapper.text()).toContain(
 			'Cancel your registration and start over to get a new link.',
 		)
-		expect(findButton(wrapper, 'Cancel registration and start over')).toBeTruthy()
+		expect(
+			findButton(wrapper, 'Cancel registration and start over'),
+		).toBeTruthy()
 		expect(findButton(wrapper, 'Log out')).toBeTruthy()
 		expect(router.currentRoute.value.path).toBe('/register/validate')
 		expect(pushSpy).not.toHaveBeenCalledWith('/register/pending')
@@ -146,19 +165,27 @@ describe('Invalid or expired — 403 offers a way to start over', () => {
 describe('Cancel registration and start over — success', () => {
 	it('sends DELETE with onForbidden passthrough, navigates to /register and toasts', async () => {
 		const deleteRegister = vi.fn(() => mockResponse(200))
-		const { wrapper, fetchMock } = await mountVerify('/register/validate?c=abc123', {
-			'POST /v1/auth/verify': () => mockResponse(403),
-			'DELETE /v1/auth/register': deleteRegister,
-		})
+		const { wrapper, fetchMock } = await mountVerify(
+			'/register/validate?c=abc123',
+			{
+				'POST /v1/auth/verify': () => mockResponse(403),
+				'DELETE /v1/auth/register': deleteRegister,
+			},
+		)
 
-		await findButton(wrapper, 'Cancel registration and start over')?.trigger('click')
+		await findButton(
+			wrapper,
+			'Cancel registration and start over',
+		)?.trigger('click')
 		await flushPromises()
 
 		expect(fetchMock).toHaveBeenCalledWith(
 			'/v1/auth/register',
 			expect.objectContaining({ method: 'DELETE' }),
 		)
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/register'),
+		)
 		expect(toastAdd).toHaveBeenCalledWith({
 			color: 'success',
 			icon: 'i-lucide-circle-check',
@@ -170,31 +197,47 @@ describe('Cancel registration and start over — success', () => {
 
 describe('Cancel registration and start over — failure shows an alert, not a redirect', () => {
 	it.each([
-		{ name: 'a 403 (already verified elsewhere)', handler: () => mockResponse(403) },
+		{
+			name: 'a 403 (already verified elsewhere)',
+			handler: () => mockResponse(403),
+		},
 		{ name: 'a 500 response', handler: () => mockResponse(500) },
 		{
 			name: 'a network failure',
 			handler: () => Promise.reject(new TypeError('Failed to fetch')),
 		},
-	])('shows the failure alert and keeps the panel for $name', async ({ handler }) => {
-		const { wrapper } = await mountVerify('/register/validate?c=abc123', {
-			'POST /v1/auth/verify': () => mockResponse(403),
-			'DELETE /v1/auth/register': handler,
-		})
+	])(
+		'shows the failure alert and keeps the panel for $name',
+		async ({ handler }) => {
+			const { wrapper } = await mountVerify(
+				'/register/validate?c=abc123',
+				{
+					'POST /v1/auth/verify': () => mockResponse(403),
+					'DELETE /v1/auth/register': handler,
+				},
+			)
 
-		await findButton(wrapper, 'Cancel registration and start over')?.trigger('click')
-		await flushPromises()
+			await findButton(
+				wrapper,
+				'Cancel registration and start over',
+			)?.trigger('click')
+			await flushPromises()
 
-		expect(wrapper.text()).toContain("Couldn't cancel registration")
-		expect(wrapper.text()).toContain(
-			'Something went wrong on the server. Try again in a moment.',
-		)
-		expect(wrapper.text()).toContain("This verification link doesn't work")
-		expect(findButton(wrapper, 'Cancel registration and start over')).toBeTruthy()
-		expect(findButton(wrapper, 'Log out')).toBeTruthy()
-		expect(router.currentRoute.value.path).toBe('/register/validate')
-		expect(toastAdd).not.toHaveBeenCalled()
-	})
+			expect(wrapper.text()).toContain("Couldn't cancel registration")
+			expect(wrapper.text()).toContain(
+				'Something went wrong on the server. Try again in a moment.',
+			)
+			expect(wrapper.text()).toContain(
+				"This verification link doesn't work",
+			)
+			expect(
+				findButton(wrapper, 'Cancel registration and start over'),
+			).toBeTruthy()
+			expect(findButton(wrapper, 'Log out')).toBeTruthy()
+			expect(router.currentRoute.value.path).toBe('/register/validate')
+			expect(toastAdd).not.toHaveBeenCalled()
+		},
+	)
 })
 
 describe('Log out from the Invalid-or-expired state', () => {
@@ -211,7 +254,9 @@ describe('Log out from the Invalid-or-expired state', () => {
 		await flushPromises()
 
 		expect(session.session).toBeNull()
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/login'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/login'),
+		)
 	})
 })
 
@@ -225,9 +270,15 @@ describe('No session — the inline log-in form replaces the spinner', () => {
 		expect(wrapper.text()).toContain(
 			"You opened this link somewhere you're not logged in. Log in here and we'll verify your account right after.",
 		)
-		expect(wrapper.find('input[placeholder="Your username"]').exists()).toBe(true)
-		expect(wrapper.find('input[autocomplete="current-password"]').exists()).toBe(true)
-		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in and verify')
+		expect(
+			wrapper.find('input[placeholder="Your username"]').exists(),
+		).toBe(true)
+		expect(
+			wrapper.find('input[autocomplete="current-password"]').exists(),
+		).toBe(true)
+		expect(wrapper.find('button[type="submit"]').text()).toBe(
+			'Log in and verify',
+		)
 		expect(wrapper.text()).not.toContain('Forgot password?')
 		expect(wrapper.text()).not.toContain('First time here?')
 		expect(router.currentRoute.value.path).toBe('/register/validate')
@@ -259,20 +310,32 @@ describe('No session — successful login retries verification with the same cod
 		const verify = vi.fn()
 		verify.mockResolvedValueOnce(mockResponse(401))
 		verify.mockImplementationOnce(() => new Promise(() => {}))
-		const { wrapper, fetchMock } = await mountVerify('/register/validate?c=abc123', {
-			'POST /v1/auth/verify': verify,
-			'POST /v1/auth/login': () => mockResponse(200),
-		})
+		const { wrapper, fetchMock } = await mountVerify(
+			'/register/validate?c=abc123',
+			{
+				'POST /v1/auth/verify': verify,
+				'POST /v1/auth/login': () => mockResponse(200),
+			},
+		)
 
-		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
-		await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
+		await wrapper
+			.find('input[placeholder="Your username"]')
+			.setValue('marta')
+		await wrapper
+			.find('input[autocomplete="current-password"]')
+			.setValue('limewash2026')
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()
 
-		expect(wrapper.find('[role="status"]').text()).toContain('Verifying your account…')
+		expect(wrapper.find('[role="status"]').text()).toContain(
+			'Verifying your account…',
+		)
 		expect(fetchMock).toHaveBeenCalledWith(
 			'/v1/auth/verify',
-			expect.objectContaining({ method: 'POST', body: JSON.stringify({ code: 'abc123' }) }),
+			expect.objectContaining({
+				method: 'POST',
+				body: JSON.stringify({ code: 'abc123' }),
+			}),
 		)
 		expect(verify).toHaveBeenCalledTimes(2)
 	})
@@ -286,14 +349,24 @@ describe('No session — wrong credentials during the inline login', () => {
 			'POST /v1/auth/login': () => mockResponse(403),
 		})
 
-		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
-		await wrapper.find('input[autocomplete="current-password"]').setValue('wrong-password')
+		await wrapper
+			.find('input[placeholder="Your username"]')
+			.setValue('marta')
+		await wrapper
+			.find('input[autocomplete="current-password"]')
+			.setValue('wrong-password')
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()
 
-		expect(wrapper.text()).toContain("That username and password don't match")
-		expect(wrapper.text()).toContain('Check both and try again. Passwords are case-sensitive.')
-		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		expect(wrapper.text()).toContain(
+			"That username and password don't match",
+		)
+		expect(wrapper.text()).toContain(
+			'Check both and try again. Passwords are case-sensitive.',
+		)
+		const passwordInput = wrapper.find(
+			'input[autocomplete="current-password"]',
+		)
 		expect((passwordInput.element as HTMLInputElement).value).toBe('')
 		expect(passwordInput.element).toBe(document.activeElement)
 		expect(verify).toHaveBeenCalledTimes(1)
@@ -305,16 +378,23 @@ describe('No session — too many login attempts', () => {
 		vi.useFakeTimers()
 		const { wrapper } = await mountVerify('/register/validate?c=abc123', {
 			'POST /v1/auth/verify': () => mockResponse(401),
-			'POST /v1/auth/login': () => mockResponse(429, null, { 'Retry-After': '30' }),
+			'POST /v1/auth/login': () =>
+				mockResponse(429, null, { 'Retry-After': '30' }),
 		})
 
-		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
-		await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
+		await wrapper
+			.find('input[placeholder="Your username"]')
+			.setValue('marta')
+		await wrapper
+			.find('input[autocomplete="current-password"]')
+			.setValue('limewash2026')
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()
 
 		expect(wrapper.text()).toContain('Too many attempts')
-		expect(wrapper.text()).toContain('For your security, wait a moment before trying again.')
+		expect(wrapper.text()).toContain(
+			'For your security, wait a moment before trying again.',
+		)
 		const button = wrapper.find('button[type="submit"]')
 		expect(button.text()).toBe('Try again in 0:30')
 		expect((button.element as HTMLButtonElement).disabled).toBe(true)
@@ -322,7 +402,9 @@ describe('No session — too many login attempts', () => {
 		await vi.advanceTimersByTimeAsync(30000)
 		await flushPromises()
 
-		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in and verify')
+		expect(wrapper.find('button[type="submit"]').text()).toBe(
+			'Log in and verify',
+		)
 	})
 })
 
@@ -333,31 +415,50 @@ describe('No session — server or network error during the inline login', () =>
 			name: 'a network failure',
 			handler: () => Promise.reject(new TypeError('Failed to fetch')),
 		},
-	])('shows the network/server alert and keeps the fields for $name', async ({ handler }) => {
-		const { wrapper } = await mountVerify('/register/validate?c=abc123', {
-			'POST /v1/auth/verify': () => mockResponse(401),
-			'POST /v1/auth/login': handler,
-		})
+	])(
+		'shows the network/server alert and keeps the fields for $name',
+		async ({ handler }) => {
+			const { wrapper } = await mountVerify(
+				'/register/validate?c=abc123',
+				{
+					'POST /v1/auth/verify': () => mockResponse(401),
+					'POST /v1/auth/login': handler,
+				},
+			)
 
-		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
-		await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
-		await wrapper.find('form').trigger('submit')
-		await flushPromises()
+			await wrapper
+				.find('input[placeholder="Your username"]')
+				.setValue('marta')
+			await wrapper
+				.find('input[autocomplete="current-password"]')
+				.setValue('limewash2026')
+			await wrapper.find('form').trigger('submit')
+			await flushPromises()
 
-		expect(wrapper.text()).toContain("Couldn't reach RenewCMS")
-		expect(wrapper.text()).toContain('Check your connection and try again.')
-		expect(
-			(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement).value,
-		).toBe('marta')
-		expect(
-			(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
-				.value,
-		).toBe('limewash2026')
-		expect(
-			(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
-				.disabled,
-		).toBe(false)
-	})
+			expect(wrapper.text()).toContain("Couldn't reach RenewCMS")
+			expect(wrapper.text()).toContain(
+				'Check your connection and try again.',
+			)
+			expect(
+				(
+					wrapper.find('input[placeholder="Your username"]')
+						.element as HTMLInputElement
+				).value,
+			).toBe('marta')
+			expect(
+				(
+					wrapper.find('input[autocomplete="current-password"]')
+						.element as HTMLInputElement
+				).value,
+			).toBe('limewash2026')
+			expect(
+				(
+					wrapper.find('input[placeholder="Your username"]')
+						.element as HTMLInputElement
+				).disabled,
+			).toBe(false)
+		},
+	)
 })
 
 describe('Missing code — no request is made', () => {
@@ -374,6 +475,8 @@ describe('Missing code — no request is made', () => {
 		expect(action).toBeTruthy()
 		await action?.trigger('click')
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/login'))
+		await vi.waitFor(() =>
+			expect(router.currentRoute.value.path).toBe('/login'),
+		)
 	})
 })