feat: article creation modal

2026-09-27 06:26:41 +02:00
1 parent a4734b2c91
commit c47d33eaa9
@@ -0,0 +1,361 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, ref } from 'vue'
+import { mount, flushPromises } from '@vue/test-utils'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import { ApiError, NetworkError, useApi } from '@/composables/useApi'
+import type { Article } from '@/composables/useArticles'
+import NewArticleModal from '../NewArticleModal.vue'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return {
+		...actual,
+		useApi: vi.fn(),
+	}
+})
+
+const TITLE = 'Choosing tiles for a small bathroom'
+const BODY = 'Small rooms show every grout line, so we start with the floor.'
+
+function articleFixture(): Article {
+	return {
+		id: 42,
+		title: TITLE,
+		body: BODY,
+		images: [],
+		is_online: false,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-01T00:00:00Z',
+	}
+}
+
+const Host = defineComponent({
+	components: { NewArticleModal },
+	emits: ['created'],
+	setup(_props, { emit }) {
+		const open = ref(true)
+		return { open, onCreated: (article: Article) => emit('created', article) }
+	},
+	template: `<NewArticleModal v-model:open="open" @created="onCreated" />`,
+})
+
+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 flushPromises()
+}
+
+let requestMock: ReturnType<typeof vi.fn>
+
+function mountModal() {
+	requestMock = vi.fn()
+	vi.mocked(useApi).mockReturnValue({
+		getMe: vi.fn(),
+		request: requestMock,
+	})
+	return mount(Host, {
+		attachTo: document.body,
+		global: { plugins: [uiPlugin] },
+	})
+}
+
+function titleInput() {
+	return document.body.querySelector<HTMLInputElement>(
+		'input[placeholder="e.g. Choosing tiles for a small bathroom"]',
+	)!
+}
+
+function bodyTextarea() {
+	return document.body.querySelector<HTMLTextAreaElement>(
+		'textarea[placeholder="Start writing. You\'ll continue in the editor."]',
+	)!
+}
+
+function dispatch(element: HTMLElement, type: string) {
+	element.dispatchEvent(new Event(type, { bubbles: true }))
+}
+
+async function fillTitle(value: string) {
+	const input = titleInput()
+	input.value = value
+	dispatch(input, 'input')
+	await flushPromises()
+}
+
+async function blurTitle() {
+	dispatch(titleInput(), 'blur')
+	await flushPromises()
+}
+
+async function fillBody(value: string) {
+	const textarea = bodyTextarea()
+	textarea.value = value
+	dispatch(textarea, 'input')
+	await flushPromises()
+}
+
+async function blurBody() {
+	dispatch(bodyTextarea(), 'blur')
+	await flushPromises()
+}
+
+async function fillValidForm() {
+	await fillTitle(TITLE)
+	await fillBody(BODY)
+}
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})
+
+describe('Opening the modal shows the Default state', () => {
+	it('renders empty, focused fields with the Default copy', async () => {
+		mountModal()
+		await flushPromises()
+
+		expect(document.body.textContent).toContain('New article')
+		expect(document.body.textContent).toContain(
+			"It's saved as a draft. Titles can't be changed later, so check it now.",
+		)
+
+		expect(titleInput().value).toBe('')
+		expect(document.activeElement).toBe(titleInput())
+		expect(document.body.textContent).toContain('0 / 200')
+		expect(document.body.textContent).toContain('3 to 200 characters.')
+
+		expect(bodyTextarea().value).toBe('')
+		expect(document.body.textContent).toContain(
+			'You can format it and add images in the editor.',
+		)
+
+		expect(findButton('Cancel')).toBeTruthy()
+		expect(findButton('Create draft')).toBeTruthy()
+		expect(requestMock).not.toHaveBeenCalled()
+	})
+})
+
+describe('Validation — a title under 3 characters on blur', () => {
+	it('shows the error in place of help and the counter in its error style', async () => {
+		mountModal()
+		await flushPromises()
+
+		await fillTitle('Ti')
+		await blurTitle()
+
+		expect(document.body.textContent).toContain('Use at least 3 characters.')
+		expect(document.body.textContent).not.toContain('3 to 200 characters.')
+		expect(document.body.textContent).toContain('2 / 200')
+		expect(requestMock).not.toHaveBeenCalled()
+	})
+})
+
+describe('Validation — an empty first paragraph on blur', () => {
+	it('shows the error once the field is left empty and blurred', async () => {
+		mountModal()
+		await flushPromises()
+
+		await fillTitle(TITLE)
+		await blurTitle()
+		await blurBody()
+
+		expect(document.body.textContent).toContain(
+			'Add a first paragraph. It can be a single sentence.',
+		)
+		expect(requestMock).not.toHaveBeenCalled()
+	})
+})
+
+describe('Validation — submitting with both fields invalid shows both errors and sends nothing', () => {
+	it('shows both errors and never sends the request', async () => {
+		mountModal()
+		await flushPromises()
+
+		await fillTitle('Ti')
+		await clickButton('Create draft')
+
+		expect(document.body.textContent).toContain('Use at least 3 characters.')
+		expect(document.body.textContent).toContain(
+			'Add a first paragraph. It can be a single sentence.',
+		)
+		expect(requestMock).not.toHaveBeenCalled()
+	})
+})
+
+describe('Submitting disables the form and cannot be dismissed', () => {
+	it('sends the request, disables the form and blocks Esc/backdrop dismissal', async () => {
+		let resolveRequest: ((article: Article) => void) | null = null
+		requestMock = vi.fn(
+			() =>
+				new Promise<Article>((resolve) => {
+					resolveRequest = resolve
+				}),
+		)
+		vi.mocked(useApi).mockReturnValue({ getMe: vi.fn(), request: requestMock })
+		const wrapper = mount(Host, {
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+		await flushPromises()
+
+		await fillValidForm()
+		await clickButton('Create draft')
+
+		expect(requestMock).toHaveBeenCalledWith(
+			'/v1/article/',
+			expect.objectContaining({
+				method: 'POST',
+				body: JSON.stringify({ title: TITLE, body: BODY }),
+			}),
+		)
+
+		expect(titleInput().disabled).toBe(true)
+		expect(bodyTextarea().disabled).toBe(true)
+		expect((findButton('Cancel') as HTMLButtonElement).disabled).toBe(true)
+		expect(findButton('Creating…')).toBeTruthy()
+
+		document.dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'Escape',
+				code: 'Escape',
+				keyCode: 27,
+				which: 27,
+				bubbles: true,
+				cancelable: true,
+			}),
+		)
+		await flushPromises()
+		expect(document.querySelector('[role="dialog"]')).toBeTruthy()
+
+		resolveRequest?.(articleFixture())
+		await flushPromises()
+		wrapper.unmount()
+	})
+})
+
+describe('A successful create closes the modal and hands off to the editor with a toast', () => {
+	it('closes the modal and emits created with the response body', async () => {
+		requestMock = vi.fn().mockResolvedValue(articleFixture())
+		vi.mocked(useApi).mockReturnValue({ getMe: vi.fn(), request: requestMock })
+		const wrapper = mount(Host, {
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+		await flushPromises()
+
+		await fillValidForm()
+		await clickButton('Create draft')
+		await flushPromises()
+
+		expect(wrapper.emitted('created')).toEqual([[articleFixture()]])
+		expect(document.querySelector('[role="dialog"]')).toBeFalsy()
+		wrapper.unmount()
+	})
+})
+
+describe("Title rejected — a 400 that got past this form's own check", () => {
+	it('keeps the values, shows the title error and the form alert', async () => {
+		requestMock = vi.fn().mockRejectedValue(new ApiError(400))
+		vi.mocked(useApi).mockReturnValue({ getMe: vi.fn(), request: requestMock })
+		const wrapper = mount(Host, {
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+		await flushPromises()
+
+		await fillValidForm()
+		await clickButton('Create draft')
+		await flushPromises()
+
+		expect(titleInput().value).toBe(TITLE)
+		expect(bodyTextarea().value).toBe(BODY)
+		expect(document.body.textContent).toContain('Check this title and try again.')
+		expect(document.body.textContent).toContain(
+			"Something in the form isn't valid. Check the highlighted fields.",
+		)
+		expect(document.body.textContent).not.toContain(
+			'Add a first paragraph. It can be a single sentence.',
+		)
+		expect(titleInput().disabled).toBe(false)
+		wrapper.unmount()
+	})
+})
+
+describe('Error — a 500 or a network failure keeps the text and offers to retry', () => {
+	it.each([
+		{ name: 'a 500 response', error: () => new ApiError(500) },
+		{ name: 'a network failure', error: () => new NetworkError() },
+	])('keeps the values and shows the generic alert for $name', async ({ error }) => {
+		requestMock = vi.fn().mockRejectedValue(error())
+		vi.mocked(useApi).mockReturnValue({ getMe: vi.fn(), request: requestMock })
+		const wrapper = mount(Host, {
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+		await flushPromises()
+
+		await fillValidForm()
+		await clickButton('Create draft')
+		await flushPromises()
+
+		expect(titleInput().value).toBe(TITLE)
+		expect(bodyTextarea().value).toBe(BODY)
+		expect(document.body.textContent).toContain(
+			"Couldn't create the article. Your text is still here. Try again in a moment.",
+		)
+		expect(document.body.textContent).not.toContain('Check this title and try again.')
+		expect(document.body.textContent).not.toContain(
+			'Add a first paragraph. It can be a single sentence.',
+		)
+		wrapper.unmount()
+	})
+})
+
+describe('Retrying after an Error succeeds', () => {
+	it('sends the same body again and hands off to the editor on success', async () => {
+		requestMock = vi.fn().mockRejectedValueOnce(new ApiError(500))
+		vi.mocked(useApi).mockReturnValue({ getMe: vi.fn(), request: requestMock })
+		const wrapper = mount(Host, {
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+		await flushPromises()
+
+		await fillValidForm()
+		await clickButton('Create draft')
+		await flushPromises()
+
+		requestMock.mockResolvedValueOnce(articleFixture())
+		await clickButton('Create draft')
+		await flushPromises()
+
+		expect(requestMock).toHaveBeenCalledTimes(2)
+		expect(requestMock).toHaveBeenNthCalledWith(
+			2,
+			'/v1/article/',
+			expect.objectContaining({
+				body: JSON.stringify({ title: TITLE, body: BODY }),
+			}),
+		)
+		expect(wrapper.emitted('created')).toEqual([[articleFixture()]])
+		expect(document.querySelector('[role="dialog"]')).toBeFalsy()
+		wrapper.unmount()
+	})
+})
+
+describe('Cancel discards the fields with no confirmation', () => {
+	it('closes the modal immediately without sending a request', async () => {
+		mountModal()
+		await flushPromises()
+
+		await fillValidForm()
+		await clickButton('Cancel')
+
+		expect(document.querySelector('[role="dialog"]')).toBeFalsy()
+		expect(requestMock).not.toHaveBeenCalled()
+	})
+})