feat: image upload on articles

web/src/components/__tests__/ImageUploader.spec.ts

@@ -0,0 +1,397 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import ImageUploader from '../ImageUploader.vue'
+import * as imageUpload from '@/lib/imageUpload'
+
+vi.mock('@/lib/imageUpload', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/lib/imageUpload')>()
+	return {
+		...actual,
+		validateImageFile: vi.fn(actual.validateImageFile),
+	}
+})
+
+class FakeXMLHttpRequest {
+	static instances: FakeXMLHttpRequest[] = []
+
+	method = ''
+	url = ''
+	status = 0
+	responseText = ''
+	withCredentials = false
+	sentBody: FormData | null = null
+	aborted = false
+
+	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.aborted = true
+		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))
+	}
+
+	fireProgress(loaded: number, total: number) {
+		this.uploadListeners.progress?.({ loaded, total })
+	}
+
+	resolve(status: number, body: string) {
+		this.status = status
+		this.responseText = body
+		this.dispatch('load')
+	}
+
+	fail() {
+		this.dispatch('error')
+	}
+}
+
+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
+}
+
+const Host = defineComponent({
+	components: { ImageUploader },
+	props: {
+		articleId: { type: Number, required: true },
+		initialFile: { type: Object as () => File | null, default: null },
+	},
+	emits: ['uploaded', 'close'],
+	setup(_props, { emit }) {
+		const open = ref(false)
+		return {
+			open,
+			onUploaded: (location: string) => emit('uploaded', location),
+			onClose: () => emit('close'),
+		}
+	},
+	template: `<ImageUploader v-model:open="open" :article-id="articleId" :initial-file="initialFile" @uploaded="onUploaded" @close="onClose" />`,
+})
+
+function mountUploader(props: { articleId?: number; initialFile?: File | null } = {}) {
+	return mount(Host, {
+		props: { articleId: 12, initialFile: null, ...props },
+		global: { plugins: [uiPlugin] },
+		attachTo: document.body,
+	})
+}
+
+async function openModal(wrapper: ReturnType<typeof mountUploader>) {
+	;(wrapper.vm as unknown as { open: boolean }).open = true
+	await nextTick()
+	await nextTick()
+}
+
+function fileInput() {
+	return document.body.querySelector<HTMLInputElement>('[data-testid="image-file-input"]')!
+}
+
+function dropZone() {
+	return document.body.querySelector<HTMLElement>('[data-testid="image-dropzone"]')!
+}
+
+async function chooseFile(file: File) {
+	const input = fileInput()
+	Object.defineProperty(input, 'files', {
+		value: { 0: file, length: 1 },
+		configurable: true,
+	})
+	input.dispatchEvent(new Event('change'))
+	await nextTick()
+	await nextTick()
+}
+
+function findButton(text: string) {
+	return Array.from(document.body.querySelectorAll('button')).find(
+		(button) => button.textContent?.trim() === text,
+	)
+}
+
+async function clickButton(text: string) {
+	findButton(text)?.click()
+	await nextTick()
+	await nextTick()
+}
+
+const RealXMLHttpRequest = global.XMLHttpRequest
+
+beforeEach(() => {
+	FakeXMLHttpRequest.instances = []
+	global.XMLHttpRequest = FakeXMLHttpRequest as unknown as typeof XMLHttpRequest
+})
+
+afterEach(() => {
+	document.body.innerHTML = ''
+	global.XMLHttpRequest = RealXMLHttpRequest
+})
+
+describe('Opening the uploader from the toolbar image button shows the idle state', () => {
+	it('shows the idle copy and sends no request', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+
+		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)
+		wrapper.unmount()
+	})
+})
+
+describe('Dragging a file over the drop zone shows the dragging-over state', () => {
+	it('shows "Drop to upload"', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+
+		dropZone().dispatchEvent(new Event('dragover', { bubbles: true, cancelable: true }))
+		await nextTick()
+
+		expect(document.body.textContent).toContain('Drop to upload')
+		wrapper.unmount()
+	})
+})
+
+describe('Choosing a file the browser can reject never sends a request', () => {
+	it.each([
+		{
+			filename: 'plan.pdf',
+			contentType: 'application/pdf',
+			sizeMB: 1.2,
+			description: 'Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.',
+		},
+		{
+			filename: 'disguised.png',
+			contentType: 'application/pdf',
+			sizeMB: 1.2,
+			description: 'Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.',
+		},
+		{
+			filename: 'north-wall.tif',
+			contentType: 'image/png',
+			sizeMB: 14.2,
+			description: 'north-wall.tif is 14.2 MB. Images can be up to 10 MB.',
+		},
+	])(
+		'rejects $filename with the exact copy',
+		async ({ filename, contentType, sizeMB, description }) => {
+			const wrapper = mountUploader()
+			await openModal(wrapper)
+
+			await chooseFile(fileFixture(filename, contentType, sizeMB))
+
+			expect(FakeXMLHttpRequest.instances).toHaveLength(0)
+			expect(document.body.textContent).toContain(`"${filename}" can't be used`)
+			expect(document.body.textContent).toContain(description)
+			expect(findButton('Choose another file')).toBeTruthy()
+			expect(findButton('Cancel')).toBeTruthy()
+			wrapper.unmount()
+		},
+	)
+})
+
+describe('"Choose another file" from the rejected state returns to idle', () => {
+	it('shows the idle state again', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('plan.pdf', 'application/pdf', 1.2))
+
+		await clickButton('Choose another file')
+
+		expect(document.body.textContent).toContain('Drop an image here')
+		wrapper.unmount()
+	})
+})
+
+describe('A valid upload shows progress and its cancel action reads "Cancel upload"', () => {
+	it('sends the file and reports live progress', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+
+		await chooseFile(fileFixture('north-wall.jpg', 'image/jpeg', 3.9))
+
+		expect(FakeXMLHttpRequest.instances).toHaveLength(1)
+		const xhr = latestXHR()
+		expect(xhr.url).toBe('/v1/article/12/image')
+		expect(xhr.sentBody?.get('file')).toBeInstanceOf(File)
+		expect(document.body.textContent).toContain('north-wall.jpg 0%')
+		expect(document.body.textContent).toContain('Uploading 0.0 of 3.9 MB')
+		expect(findButton('Cancel upload')).toBeTruthy()
+
+		xhr.fireProgress(mib(2.4), mib(3.9))
+		await nextTick()
+
+		expect(document.body.textContent).toContain('north-wall.jpg 62%')
+		expect(document.body.textContent).toContain('Uploading 2.4 of 3.9 MB')
+		wrapper.unmount()
+	})
+})
+
+describe('Closing the dialog during an upload cancels it', () => {
+	it('aborts the in-flight XMLHttpRequest and closes the modal', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('north-wall.jpg', 'image/jpeg', 3.9))
+		const xhr = latestXHR()
+
+		await clickButton('Cancel upload')
+
+		expect(xhr.aborted).toBe(true)
+		expect(document.querySelector('[role="dialog"]')).toBeFalsy()
+		wrapper.unmount()
+	})
+})
+
+describe('A successful upload emits the location and auto-closes 600 ms later', () => {
+	it('shows "Image added" then closes', async () => {
+		vi.useFakeTimers()
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('north-wall.jpg', 'image/jpeg', 3.9))
+		const xhr = latestXHR()
+
+		xhr.resolve(201, JSON.stringify({ location: '/static/uploadedImages/north-wall.jpg' }))
+		await vi.advanceTimersByTimeAsync(0)
+
+		expect(wrapper.emitted('uploaded')).toEqual([['/static/uploadedImages/north-wall.jpg']])
+		expect(document.body.textContent).toContain('Image added')
+		expect(document.querySelector('[role="dialog"]')).toBeTruthy()
+
+		await vi.advanceTimersByTimeAsync(590)
+
+		expect(document.querySelector('[role="dialog"]')).toBeTruthy()
+
+		await vi.advanceTimersByTimeAsync(10)
+
+		expect(document.querySelector('[role="dialog"]')).toBeFalsy()
+		wrapper.unmount()
+		vi.useRealTimers()
+	})
+})
+
+describe('A server-side upload failure keeps the article unchanged and offers a retry', () => {
+	it.each([
+		{ name: 'a 500 response', trigger: (xhr: FakeXMLHttpRequest) => xhr.resolve(500, '') },
+		{ name: 'a network failure', trigger: (xhr: FakeXMLHttpRequest) => xhr.fail() },
+	])('shows the failed state for $name', async ({ trigger }) => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('north-wall.jpg', 'image/jpeg', 3.9))
+		const xhr = latestXHR()
+
+		trigger(xhr)
+		await flushPromises()
+
+		expect(document.body.textContent).toContain('Upload failed')
+		expect(document.body.textContent).toContain(
+			"The server didn't accept the file. Your article hasn't changed.",
+		)
+		expect(findButton('Try again')).toBeTruthy()
+		expect(wrapper.emitted('uploaded')).toBeFalsy()
+		wrapper.unmount()
+	})
+})
+
+describe('"Try again" re-attempts the upload with the same file', () => {
+	it('resends the same file under field "file"', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('north-wall.jpg', 'image/jpeg', 3.9))
+		latestXHR().resolve(500, '')
+		await flushPromises()
+
+		await clickButton('Try again')
+
+		expect(FakeXMLHttpRequest.instances).toHaveLength(2)
+		const xhr = latestXHR()
+		expect(xhr.url).toBe('/v1/article/12/image')
+		expect((xhr.sentBody?.get('file') as File).name).toBe('north-wall.jpg')
+		expect(document.body.textContent).toContain('north-wall.jpg 0%')
+		wrapper.unmount()
+	})
+})
+
+describe('A server 400 for a type the client should have caught shows the same rejected copy', () => {
+	it('shows the type-rejection copy', async () => {
+		vi.mocked(imageUpload.validateImageFile).mockReturnValueOnce({ ok: true })
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('notes.pdf', 'image/png', 1.2))
+		const xhr = latestXHR()
+
+		xhr.resolve(400, 'the file must be a PNG, JPEG, WEBP, or SVG image')
+		await flushPromises()
+
+		expect(document.body.textContent).toContain(`"notes.pdf" can't be used`)
+		expect(document.body.textContent).toContain(
+			'Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.',
+		)
+		expect(findButton('Choose another file')).toBeTruthy()
+		expect(wrapper.emitted('uploaded')).toBeFalsy()
+		wrapper.unmount()
+	})
+})
+
+describe('A server 400 for a size the client should have caught shows the size-named copy', () => {
+	it('shows the size-rejection copy computed from the file', async () => {
+		vi.mocked(imageUpload.validateImageFile).mockReturnValueOnce({ ok: true })
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(fileFixture('north-wall.tif', 'image/png', 14.2))
+		const xhr = latestXHR()
+
+		xhr.resolve(400, 'the file exceeds the maximum upload size')
+		await flushPromises()
+
+		expect(document.body.textContent).toContain(`"north-wall.tif" can't be used`)
+		expect(document.body.textContent).toContain(
+			'north-wall.tif is 14.2 MB. Images can be up to 10 MB.',
+		)
+		expect(findButton('Choose another file')).toBeTruthy()
+		expect(wrapper.emitted('uploaded')).toBeFalsy()
+		wrapper.unmount()
+	})
+})