feat: register T0

2026-09-26 02:48:16 +02:00
1 parent a5873f8886
commit 3c3f7c6194
@@ -0,0 +1,299 @@
+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 ResultPanel from '@/components/ResultPanel.vue'
+import RegisterView from '../RegisterView.vue'
+
+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()
+	})
+}
+
+let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
+
+async function mountRegister(handlers: Record<string, () => Response | Promise<Response>> = {}) {
+	setActivePinia(createPinia())
+	const fetchMock = fetchRouter(handlers)
+	global.fetch = fetchMock as unknown as typeof fetch
+	await router.push('/register')
+	const wrapper = mount(RegisterView, {
+		attachTo: document.body,
+		global: {
+			plugins: [router, uiPlugin],
+		},
+	})
+	currentWrapper = wrapper
+	await flushPromises()
+	return { wrapper, fetchMock }
+}
+
+function usernameInput(wrapper: Awaited<ReturnType<typeof mountRegister>>) {
+	return wrapper.find('input[placeholder="e.g. marta"]')
+}
+
+function emailInput(wrapper: Awaited<ReturnType<typeof mountRegister>>) {
+	return wrapper.find('input[placeholder="you@example.com"]')
+}
+
+function passwordInput(wrapper: Awaited<ReturnType<typeof mountRegister>>) {
+	return wrapper.find('input[autocomplete="new-password"]')
+}
+
+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')
+}
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	await router.push('/login')
+})
+
+describe('Default — a fresh, empty form', () => {
+	it('renders the empty state', async () => {
+		const { wrapper } = await mountRegister()
+
+		expect(wrapper.find('h1').text()).toBe('Create the owner account')
+		expect(wrapper.text()).toContain(
+			"This creates the single admin account for this site. Once it's verified, registration closes.",
+		)
+
+		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(wrapper.text()).toContain('At least 8 characters')
+
+		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)
+		expect(footerLink.text()).toBe('Log in')
+	})
+})
+
+describe('Validation errors — checked on blur and on submit', () => {
+	it('shows the three errors and never calls the register endpoint', async () => {
+		const register = vi.fn(() => mockResponse(200))
+		const { wrapper } = await mountRegister({
+			'POST /v1/auth/register': register,
+		})
+
+		await usernameInput(wrapper).setValue('ma')
+		await usernameInput(wrapper).trigger('blur')
+
+		await emailInput(wrapper).setValue('marta@renew')
+		await emailInput(wrapper).trigger('blur')
+
+		await passwordInput(wrapper).setValue('lime')
+		await passwordInput(wrapper).trigger('blur')
+
+		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.')
+
+		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.')
+	})
+})
+
+describe('Filled, valid — every rule is met', () => {
+	it('shows no errors and a green checklist item', async () => {
+		const { wrapper } = await mountRegister()
+
+		await fillValidForm(wrapper)
+
+		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.text()).toContain('5 / 20')
+		expect(wrapper.text()).not.toContain('Use 3 to 20 characters.')
+		expect(wrapper.text()).toContain(
+			"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()).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')
+
+		const submitButton = wrapper.find('button[type="submit"]')
+		expect(submitButton.text()).toBe('Create account')
+		expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
+	})
+})
+
+describe('Submitting — fields and button are disabled while the request is in flight', () => {
+	it('disables the fields and shows the loading label', async () => {
+		let resolveRegister: (() => void) | null = null
+		const { wrapper } = await mountRegister({
+			'POST /v1/auth/register': () =>
+				new Promise((resolve) => {
+					resolveRegister = () => resolve(mockResponse(200))
+				}),
+		})
+
+		await fillValidForm(wrapper)
+		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)
+
+		const submitButton = wrapper.find('button[type="submit"]')
+		expect(submitButton.text()).toBe('Creating account…')
+		expect((submitButton.element as HTMLButtonElement).disabled).toBe(true)
+
+		resolveRegister?.()
+		await flushPromises()
+	})
+})
+
+describe('Registration closed — the form is replaced by a ResultPanel', () => {
+	it('shows the panel and navigates to /login when activated', async () => {
+		const { wrapper, fetchMock } = await mountRegister({
+			'POST /v1/auth/register': () => mockResponse(403),
+		})
+
+		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(wrapper.find('form').exists()).toBe(false)
+		expect(wrapper.text()).toContain('This site already has an owner')
+		expect(wrapper.text()).toContain('Log in instead.')
+		expect(wrapper.text()).not.toContain('Already set up?')
+		expect(document.title).toBe('This site already has an owner · RenewCMS')
+
+		const resultPanel = wrapper.findComponent(ResultPanel)
+		expect(resultPanel.props('tone')).toBe('info')
+		expect(resultPanel.props('icon')).toBe('i-lucide-user-x')
+
+		const action = wrapper.find('button')
+		expect(action.text()).toBe('Go to log in')
+		await action.trigger('click')
+
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/login'))
+	})
+})
+
+describe('Server or network error — the form is kept and re-enabled', () => {
+	it.each([
+		{ name: 'a 500 response', handler: () => mockResponse(500) },
+		{
+			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,
+		})
+
+		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(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).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)
+	})
+})
+
+describe('A successful registration goes straight to the pending page', () => {
+	it('navigates directly to /register/pending on submit resolution', async () => {
+		const { wrapper, fetchMock } = await mountRegister({
+			'POST /v1/auth/register': () => mockResponse(200),
+			'GET /v1/auth/me': () => mockResponse(200, { is_verified: false }),
+		})
+
+		await fillValidForm(wrapper)
+		await wrapper.find('form').trigger('submit')
+
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register/pending'))
+
+		expect(fetchMock).toHaveBeenCalledWith(
+			'/v1/auth/register',
+			expect.objectContaining({
+				method: 'POST',
+				body: JSON.stringify({
+					username: 'marta',
+					email: 'marta@renew.example',
+					password: 'limewash2026',
+				}),
+			}),
+		)
+	})
+})