feat: register T0

web/visual/states.ts

@@ -38,6 +38,31 @@ function loginWith(response: ApiMock, path = '/login'): Omit<VisualState, 'steps
 	}
 }
 
+async function fillRegister(page: Page, username: string, email: string, password: string) {
+	await page.getByPlaceholder('e.g. marta').fill(username)
+	await page.getByPlaceholder('e.g. marta').blur()
+	await page.getByPlaceholder('you@example.com').fill(email)
+	await page.getByPlaceholder('you@example.com').blur()
+	await page.locator('input[autocomplete="new-password"]').fill(password)
+	await page.locator('input[autocomplete="new-password"]').blur()
+}
+
+function registerWith(response: ApiMock): Omit<VisualState, 'steps'> {
+	return {
+		path: '/register',
+		api: {
+			'POST /v1/auth/register': response,
+		},
+	}
+}
+
+function submitRegister(username: string, email: string, password: string) {
+	return async (page: Page) => {
+		await fillRegister(page, username, email, password)
+		await page.getByRole('button', { name: 'Create account', exact: true }).click()
+	}
+}
+
 export const visualStates: Record<string, Record<string, VisualState>> = {
 	'log-in': {
 		Default: { path: '/login', api: { 'GET /v1/auth/registration': registrationClosed } },
@@ -74,4 +99,32 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 			steps: submitLogin('marta', 'limewash2026'),
 		},
 	},
+	register: {
+		Default: { path: '/register' },
+		'Validation errors': {
+			path: '/register',
+			steps: async (page) => {
+				await fillRegister(page, 'ma', 'marta@renew', 'lime')
+			},
+		},
+		'Filled, valid': {
+			path: '/register',
+			steps: async (page) => {
+				await fillRegister(page, 'marta', 'marta@renew.example', 'limewash2026')
+				await page.getByRole('button', { name: 'Show password' }).click()
+			},
+		},
+		Submitting: {
+			...registerWith({ status: 200, hang: true }),
+			steps: submitRegister('marta', 'marta@renew.example', 'limewash2026'),
+		},
+		'Registration closed (403)': {
+			...registerWith({ status: 403 }),
+			steps: submitRegister('marta', 'marta@renew.example', 'limewash2026'),
+		},
+		'Server error': {
+			...registerWith({ status: 500 }),
+			steps: submitRegister('marta', 'marta@renew.example', 'limewash2026'),
+		},
+	},
 }