feat: image upload on articles

2026-09-28 02:28:20 +02:00
1 parent d4fcfb2bba
commit 938263cd6a
@@ -0,0 +1,257 @@
+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'
+
+class FakeXMLHttpRequest {
+	static instances: FakeXMLHttpRequest[] = []
+
+	method = ''
+	url = ''
+	status = 0
+	responseText = ''
+	withCredentials = false
+	sentBody: FormData | null = null
+
+	private listeners: Record<string, Array<(event?: unknown) => void>> = {}
+	private uploadListeners: Record<string, (event: { loaded: number; total: number }) => void> = {}
+
+	upload = {
+		addEventListener: (
+			type: string,
+			cb: (event: { loaded: number; total: number }) => void,
+		) => {
+			this.uploadListeners[type] = cb
+		},
+	}
+
+	constructor() {
+		FakeXMLHttpRequest.instances.push(this)
+	}
+
+	open(method: string, url: string) {
+		this.method = method
+		this.url = url
+	}
+
+	send(body: FormData) {
+		this.sentBody = body
+	}
+
+	abort() {
+		this.dispatch('abort')
+	}
+
+	addEventListener(type: string, cb: (event?: unknown) => void) {
+		this.listeners[type] = this.listeners[type] || []
+		this.listeners[type].push(cb)
+	}
+
+	dispatch(type: string, event?: unknown) {
+		;(this.listeners[type] || []).forEach((cb) => cb(event))
+	}
+
+	resolve(status: number, body: string) {
+		this.status = status
+		this.responseText = body
+		this.dispatch('load')
+	}
+}
+
+function latestXHR() {
+	return FakeXMLHttpRequest.instances[FakeXMLHttpRequest.instances.length - 1]
+}
+
+function mib(value: number) {
+	return Math.round(value * 1024 * 1024)
+}
+
+function fileFixture(name: string, type: string, sizeMB: number) {
+	const file = new File(['x'], name, { type })
+	Object.defineProperty(file, 'size', { value: mib(sizeMB), configurable: true })
+	return file
+}
+
+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: '<p>a</p>',
+		images: [],
+		is_online: false,
+		created_at: '2026-03-12T09:14:00Z',
+		updated_at: FIXED_NOW,
+		...overrides,
+	}
+}
+
+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(
+	handlers: Record<string, () => Response | Promise<Response>>,
+	path = '/article/12/edit',
+) {
+	setActivePinia(createPinia())
+	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 findButton(text: string) {
+	return Array.from(document.body.querySelectorAll('button')).find(
+		(button) => button.textContent?.trim() === text,
+	)
+}
+
+function toolbarImageButton(wrapper: Awaited<ReturnType<typeof mount>>) {
+	return wrapper.findAll('button').find((button) => button.text() === 'Image')
+}
+
+const RealXMLHttpRequest = global.XMLHttpRequest
+
+beforeEach(() => {
+	FakeXMLHttpRequest.instances = []
+	global.XMLHttpRequest = FakeXMLHttpRequest as unknown as typeof XMLHttpRequest
+})
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	sessionStorage.clear()
+	global.XMLHttpRequest = RealXMLHttpRequest
+	await router.push('/login')
+})
+
+describe("Opening the uploader from the toolbar's image button shows the idle state", () => {
+	it('opens ImageUploader idle and sends no request', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+
+		await toolbarImageButton(wrapper)?.trigger('click')
+		await flushPromises()
+
+		expect(document.body.textContent).toContain('Add an image')
+		expect(document.body.textContent).toContain('Drop an image here')
+		expect(document.body.textContent).toContain('PNG, JPEG, WEBP, SVG · max 10 MB')
+		expect(findButton('Choose file')).toBeTruthy()
+		expect(findButton('Cancel')).toBeTruthy()
+		expect(FakeXMLHttpRequest.instances).toHaveLength(0)
+	})
+})
+
+describe('Dropping a valid file onto the editor opens the uploader already uploading it', () => {
+	it('opens uploading, not idle, and sends the file', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+
+		const file = fileFixture('before.png', 'image/png', 3.9)
+		const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+		Object.defineProperty(dropEvent, 'dataTransfer', {
+			value: { files: { 0: file, length: 1 } },
+		})
+		wrapper.findComponent(ArticleEditor).element.dispatchEvent(dropEvent)
+		await flushPromises()
+
+		expect(document.body.textContent).toContain('Add an image')
+		expect(document.body.textContent).not.toContain('Drop an image here')
+		expect(FakeXMLHttpRequest.instances).toHaveLength(1)
+		expect(latestXHR().url).toBe('/v1/article/12/image')
+		expect((latestXHR().sentBody?.get('file') as File).name).toBe('before.png')
+	})
+})
+
+describe('A successful upload inserts the image at the cursor and marks the draft dirty', () => {
+	it('inserts the image, marks the draft dirty and toasts', async () => {
+		const wrapper = await mountEditor({
+			'GET /v1/article/12': () => mockResponse(200, articleFixture()),
+		})
+
+		await toolbarImageButton(wrapper)?.trigger('click')
+		await flushPromises()
+
+		const fileInput = document.body.querySelector<HTMLInputElement>('input[type="file"]')!
+		const file = fileFixture('north-wall.jpg', 'image/jpeg', 3.9)
+		Object.defineProperty(fileInput, 'files', {
+			value: { 0: file, length: 1 },
+			configurable: true,
+		})
+		fileInput.dispatchEvent(new Event('change'))
+		await flushPromises()
+
+		expect(FakeXMLHttpRequest.instances).toHaveLength(1)
+		latestXHR().resolve(
+			201,
+			JSON.stringify({ location: '/static/uploadedImages/north-wall.jpg' }),
+		)
+		await flushPromises()
+
+		const insertedBody = wrapper.findComponent(ArticleEditor).props('modelValue')
+		expect(insertedBody).toContain('/static/uploadedImages/north-wall.jpg')
+		expect(insertedBody).toContain('<img src="/static/uploadedImages/north-wall.jpg" alt="">')
+		expect(wrapper.text()).toContain('Unsaved changes')
+		expect((saveButton(wrapper).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.',
+		})
+	})
+})