feat: login page T0

2026-09-25 20:15:29 +02:00
1 parent 12faab7f92
commit 001f9f4774
@@ -0,0 +1,306 @@
+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 LoginView from '../LoginView.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 mountLogin(
+	path: string,
+	handlers: Record<string, () => Response | Promise<Response>>,
+) {
+	setActivePinia(createPinia())
+	global.fetch = fetchRouter({
+		'GET /v1/auth/registration': () => mockResponse(200, { open: false }),
+		...handlers,
+	}) as unknown as typeof fetch
+	await router.push(path)
+	const wrapper = mount(LoginView, {
+		attachTo: document.body,
+		global: {
+			plugins: [router, uiPlugin],
+		},
+	})
+	currentWrapper = wrapper
+	await flushPromises()
+	return wrapper
+}
+
+async function fillAndSubmit(
+	wrapper: Awaited<ReturnType<typeof mountLogin>>,
+	username: string,
+	password: string,
+) {
+	await wrapper.find('input[placeholder="Your username"]').setValue(username)
+	await wrapper.find('input[autocomplete="current-password"]').setValue(password)
+	await wrapper.find('form').trigger('submit')
+	await flushPromises()
+}
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	await router.push('/login')
+})
+
+describe('Default — registration is closed', () => {
+	it('renders the default state with no create-account footer link', async () => {
+		const wrapper = await mountLogin('/login', {
+			'GET /v1/auth/registration': () => mockResponse(200, { open: false }),
+		})
+
+		expect(wrapper.find('h1').text()).toBe('Log in')
+		expect(wrapper.text()).toContain('Welcome back. Log in to manage your articles.')
+
+		const usernameInput = wrapper.find('input[placeholder="Your username"]')
+		expect((usernameInput.element as HTMLInputElement).value).toBe('')
+
+		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		expect((passwordInput.element as HTMLInputElement).value).toBe('')
+
+		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
+		expect(wrapper.text()).not.toContain('Create the owner account')
+	})
+})
+
+describe('Fresh install — registration is open', () => {
+	it('renders the same fields plus the create-account footer link', async () => {
+		const wrapper = await mountLogin('/login', {
+			'GET /v1/auth/registration': () => mockResponse(200, { open: true }),
+		})
+
+		expect(wrapper.find('h1').text()).toBe('Log in')
+		expect(wrapper.text()).toContain('First time here?')
+		expect(wrapper.text()).toContain('Create the owner account')
+	})
+})
+
+describe('Validation errors — nothing is sent for a short username and an empty password', () => {
+	it('shows both field errors and never calls the login endpoint', async () => {
+		const login = vi.fn(() => mockResponse(200))
+		const wrapper = await mountLogin('/login', {
+			'POST /v1/auth/login': login,
+		})
+
+		await wrapper.find('input[placeholder="Your username"]').setValue('ma')
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+
+		expect(login).not.toHaveBeenCalled()
+		expect(wrapper.text()).toContain('Use at least 3 characters.')
+		expect(wrapper.text()).toContain('Enter your password.')
+	})
+})
+
+describe('Submitting — fields and button are disabled while the request is in flight', () => {
+	it('disables the fields and shows the loading label', async () => {
+		let resolveLogin: (() => void) | null = null
+		const wrapper = await mountLogin('/login', {
+			'POST /v1/auth/login': () =>
+				new Promise((resolve) => {
+					resolveLogin = () => resolve(mockResponse(200))
+				}),
+		})
+
+		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
+		await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+
+		expect(
+			(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
+				.disabled,
+		).toBe(true)
+		expect(
+			(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
+				.disabled,
+		).toBe(true)
+		const submitButton = wrapper.find('button[type="submit"]')
+		expect(submitButton.text()).toBe('Logging in…')
+		expect((submitButton.element as HTMLButtonElement).disabled).toBe(true)
+
+		resolveLogin?.()
+		await flushPromises()
+	})
+})
+
+describe('Wrong credentials — the password is cleared and focused', () => {
+	it('shows the mismatch alert, keeps the username, clears and focuses the password', async () => {
+		const wrapper = await mountLogin('/login', {
+			'POST /v1/auth/login': () => mockResponse(403),
+		})
+
+		await fillAndSubmit(wrapper, 'marta', 'wrong-password')
+
+		expect(wrapper.text()).toContain("That username and password don't match")
+		expect(wrapper.text()).toContain('Check both and try again. Passwords are case-sensitive.')
+
+		const usernameInput = wrapper.find('input[placeholder="Your username"]')
+		expect((usernameInput.element as HTMLInputElement).value).toBe('marta')
+
+		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		expect((passwordInput.element as HTMLInputElement).value).toBe('')
+		expect(passwordInput.element).toBe(document.activeElement)
+
+		const submitButton = wrapper.find('button[type="submit"]')
+		expect(submitButton.text()).toBe('Log in')
+		expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
+	})
+})
+
+describe('Too many attempts — the button is disabled with a live countdown', () => {
+	it('counts down from the Retry-After value and re-enables at zero', async () => {
+		vi.useFakeTimers()
+		const wrapper = await mountLogin('/login', {
+			'POST /v1/auth/login': () => mockResponse(429, null, { 'Retry-After': '42' }),
+		})
+
+		await fillAndSubmit(wrapper, 'marta', 'limewash')
+
+		expect(wrapper.text()).toContain('Too many attempts')
+		expect(wrapper.text()).toContain('For your security, wait a moment before trying again.')
+
+		expect(
+			(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement).value,
+		).toBe('marta')
+		expect(
+			(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
+				.value,
+		).toBe('limewash')
+
+		const button = wrapper.find('button[type="submit"]')
+		expect(button.text()).toBe('Try again in 0:42')
+		expect((button.element as HTMLButtonElement).disabled).toBe(true)
+
+		await vi.advanceTimersByTimeAsync(42000)
+		await flushPromises()
+
+		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
+		expect((wrapper.find('button[type="submit"]').element as HTMLButtonElement).disabled).toBe(
+			false,
+		)
+		vi.useRealTimers()
+	})
+})
+
+describe('Session expired — redirected from a 401 elsewhere', () => {
+	it('shows the session-expired alert and focuses the password field', async () => {
+		const wrapper = await mountLogin('/login?redirect=/article/12/edit&reason=expired', {})
+
+		expect(wrapper.text()).toContain('Your session expired')
+		expect(wrapper.text()).toContain(
+			'Log in again to pick up where you left off. Unsaved changes are kept on this device.',
+		)
+
+		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		expect(passwordInput.element).toBe(document.activeElement)
+		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
+	})
+})
+
+describe('Password changed — arrived from a successful reset', () => {
+	it('shows the success alert and the untouched fields', async () => {
+		const wrapper = await mountLogin('/login?reason=password-changed', {})
+
+		expect(wrapper.text()).toContain('Password changed')
+		expect(wrapper.text()).toContain('Log in with your new password.')
+
+		const usernameInput = wrapper.find('input[placeholder="Your username"]')
+		expect((usernameInput.element as HTMLInputElement).value).toBe('')
+		expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
+	})
+})
+
+describe('Server or network error — the fields keep their values', () => {
+	it.each([
+		{ name: 'a 500 response', password: 'limewash2026', handler: () => mockResponse(500) },
+		{
+			name: 'a network failure',
+			password: 'limewash2026',
+			handler: () => Promise.reject(new TypeError('Failed to fetch')),
+		},
+		{
+			name: 'a 400 response under the server minimum',
+			password: 'short1',
+			handler: () => mockResponse(400),
+		},
+	])(
+		'shows the network/server error alert and keeps the fields for $name',
+		async ({ password, handler }) => {
+			const login = vi.fn(handler)
+			const wrapper = await mountLogin('/login', {
+				'POST /v1/auth/login': login,
+			})
+
+			await fillAndSubmit(wrapper, 'marta', password)
+
+			expect(login).toHaveBeenCalled()
+			expect(wrapper.text()).toContain("Couldn't reach RenewCMS")
+			expect(wrapper.text()).toContain('Check your connection and try again.')
+
+			expect(
+				(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
+					.value,
+			).toBe('marta')
+			expect(
+				(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
+					.value,
+			).toBe(password)
+
+			const submitButton = wrapper.find('button[type="submit"]')
+			expect(submitButton.text()).toBe('Log in')
+			expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
+		},
+	)
+})
+
+describe('A successful log in navigates to the right destination', () => {
+	it.each([
+		{ path: '/login', verified: true, destination: '/home' },
+		{ path: '/login', verified: false, destination: '/register/pending' },
+		{
+			path: '/login?redirect=/article/12/edit',
+			verified: true,
+			destination: '/article/12/edit',
+		},
+	])(
+		'navigates to $destination for path $path and verified $verified',
+		async ({ path, verified, destination }) => {
+			const wrapper = await mountLogin(path, {
+				'POST /v1/auth/login': () => mockResponse(200),
+				'GET /v1/auth/me': () => mockResponse(200, { is_verified: verified }),
+			})
+
+			await fillAndSubmit(wrapper, 'marta', 'limewash2026')
+
+			await vi.waitFor(() => expect(router.currentRoute.value.path).toBe(destination))
+		},
+	)
+})