feat: media picker and image removal

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

@@ -0,0 +1,191 @@
+import { afterEach, 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'
+import { fixture } from './mediaTestKit'
+
+const FIXED_NOW = '2026-09-26T11:02:00Z'
+
+const BODY_WITH_TWO_IMAGES =
+	'<p>Intro</p><img src="/media/north-wall.jpg" alt="" data-image-id="1"><img src="/media/logo-renew.svg" alt="" data-image-id="4">'
+
+function mockResponse(status: number, body: unknown = null) {
+	return {
+		ok: status >= 200 && status < 300,
+		status,
+		headers: { get: () => null },
+		json: async () => body,
+	} as unknown as Response
+}
+
+function articleFixture(body = BODY_WITH_TWO_IMAGES): Article {
+	return {
+		id: 12,
+		title: 'How we price a bathroom renovation',
+		body,
+		is_online: false,
+		created_at: '2026-03-12T09:14:00Z',
+		updated_at: FIXED_NOW,
+	}
+}
+
+function libraryPage() {
+	const items = fixture().map((item) =>
+		item.id === 2 ? { ...item, url: '/static/uploadedImages/2.webp' } : item,
+	)
+	return { items, next_cursor: 'c24', counts: { all: 48, unused: 2, duplicates: 2 } }
+}
+
+let toastAdd: ReturnType<typeof vi.fn>
+
+vi.mock('@nuxt/ui/composables', () => ({
+	useOverlay: () => ({ create: vi.fn() }),
+	useToast: () => ({ add: toastAdd }),
+}))
+
+let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
+
+async function mountEditor(body = BODY_WITH_TWO_IMAGES) {
+	setActivePinia(createPinia())
+	toastAdd = vi.fn()
+	const session = useSessionStore()
+	session.session = { verified: true, username: 'marta' }
+	session.status = 'ready'
+	global.fetch = vi.fn(async (url: string) => {
+		if (url === '/v1/article/12') {
+			return mockResponse(200, articleFixture(body))
+		}
+		if (url === '/v1/media/?limit=24') {
+			return mockResponse(200, libraryPage())
+		}
+		throw new Error(`Unexpected fetch call: ${url}`)
+	}) as unknown as typeof fetch
+	await router.push('/article/12/edit')
+	const wrapper = mount(RootComponent, {
+		attachTo: document.body,
+		global: { plugins: [router, uiPlugin] },
+	})
+	currentWrapper = wrapper
+	await flushPromises()
+	return wrapper
+}
+
+function findButton(text: string) {
+	return Array.from(document.body.querySelectorAll('button')).find(
+		(button) => button.textContent?.trim() === text,
+	)
+}
+
+async function openPicker(wrapper: Awaited<ReturnType<typeof mount>>) {
+	await wrapper
+		.findAll('button')
+		.find((button) => button.text() === 'Image')
+		?.trigger('click')
+	await flushPromises()
+}
+
+function tile(filename: string) {
+	return Array.from(document.body.querySelectorAll<HTMLButtonElement>('[data-picker-tile]')).find(
+		(element) => element.getAttribute('aria-label')?.startsWith(`${filename},`),
+	)!
+}
+
+function taggedIds() {
+	return Array.from(document.body.querySelectorAll<HTMLElement>('[data-picker-tile]'))
+		.filter((element) => element.textContent?.includes('In this article'))
+		.map((element) => element.getAttribute('data-image-id'))
+}
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	document.body.innerHTML = ''
+	await router.push('/login')
+})
+
+describe('An image is in this article when its node is in the current content', () => {
+	it('tags images 1 and 4 and no other when the dialog opens', async () => {
+		const wrapper = await mountEditor()
+
+		await openPicker(wrapper)
+
+		expect(taggedIds()).toEqual(['1', '4'])
+	})
+
+	it('counts an insertion that has not been saved yet', async () => {
+		const wrapper = await mountEditor('<p>Intro</p>')
+		wrapper.findComponent(ArticleEditor).vm.insertImage('/static/uploadedImages/2.webp', '', 2)
+		await flushPromises()
+
+		await openPicker(wrapper)
+
+		expect(taggedIds()).toEqual(['2'])
+	})
+
+	it('no longer tags an image that was removed from the body', async () => {
+		const wrapper = await mountEditor()
+		wrapper.findComponent(ArticleEditor).vm.removeImage(1)
+		await flushPromises()
+
+		await openPicker(wrapper)
+
+		expect(taggedIds()).toEqual(['4'])
+	})
+})
+
+describe('Insert puts the chosen image in the body with its alt text', () => {
+	it('inserts it at the cursor, marks the draft dirty, toasts and closes the dialog', async () => {
+		const wrapper = await mountEditor('<p>Intro</p>')
+		await openPicker(wrapper)
+		tile('kitchen-after.webp').click()
+		await flushPromises()
+		const alt = document.body.querySelector<HTMLInputElement>(
+			'input[placeholder="e.g. North wall of the kitchen before plastering"]',
+		)!
+		alt.value = 'A kitchen with new oak worktops and white tiles'
+		alt.dispatchEvent(new Event('input', { bubbles: true }))
+		await flushPromises()
+
+		findButton('Insert image')?.click()
+		await flushPromises()
+
+		const body = wrapper.findComponent(ArticleEditor).props('modelValue')
+		expect(body).toContain(
+			'<img src="/static/uploadedImages/2.webp" alt="A kitchen with new oak worktops and white tiles" data-image-id="2">',
+		)
+		expect(wrapper.text()).toContain('Unsaved changes')
+		expect(
+			(wrapper.find('[data-testid="save-button"]').element as HTMLButtonElement).disabled,
+		).toBe(false)
+		expect(toastAdd).toHaveBeenCalledWith({
+			color: 'success',
+			icon: 'i-lucide-circle-check',
+			title: 'Image added',
+			description: 'Save to keep it in the article.',
+		})
+		expect(document.body.querySelector('[role="dialog"]')).toBeNull()
+		const methods = vi
+			.mocked(global.fetch)
+			.mock.calls.map(([, init]) => (init as RequestInit | undefined)?.method)
+		expect(methods.every((method) => method === undefined)).toBe(true)
+	})
+
+	it('leaves the content and the draft alone when the dialog is cancelled', async () => {
+		const wrapper = await mountEditor('<p>Intro</p>')
+		await openPicker(wrapper)
+		tile('kitchen-after.webp').click()
+		await flushPromises()
+
+		findButton('Cancel')?.click()
+		await flushPromises()
+
+		expect(wrapper.findComponent(ArticleEditor).props('modelValue')).not.toContain('<img')
+		expect(wrapper.text()).not.toContain('Unsaved changes')
+		expect(toastAdd).not.toHaveBeenCalled()
+	})
+})