RenewCMS/web/src/views/__tests__/LoginView.spec.ts

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('Validation errors — specific username messages', () => {
	it.each([
		['marta@example.com', 'Use your username, not your email address.'],
		['a'.repeat(21), 'Use 20 characters or fewer.'],
	])('explains why %s is rejected without calling the API', async (value, message) => {
		const login = vi.fn(() => mockResponse(200))
		const wrapper = await mountLogin('/login', {
			'POST /v1/auth/login': login,
		})

		await wrapper.find('input[placeholder="Your username"]').setValue(value)
		await wrapper.find('form').trigger('submit')
		await flushPromises()

		expect(login).not.toHaveBeenCalled()
		expect(wrapper.text()).toContain(message)
	})
})

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)

		const fields = () => [
			wrapper.find('input[placeholder="Your username"]')
				.element as HTMLInputElement,
			wrapper.find('input[autocomplete="current-password"]')
				.element as HTMLInputElement,
		]
		expect(fields().map((field) => field.disabled)).toEqual([true, 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)
		expect(fields().map((field) => field.disabled)).toEqual([false, 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),
			)
		},
	)
})