add invalid credentials basic auth test case

Author: kettanaito

exercises/02.authentication/01.solution.basic/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/01.solution.basic/tests/e2e/authentication.test.ts

@@ -12,3 +12,18 @@ test('authenticates using a email and password', async ({ navigate, page }) => {
 
 	await expect(page.getByText(user.name!)).toBeVisible()
 })
+
+test('displays an error message when authenticating with invalid credentials', async ({
+	navigate,
+	page,
+}) => {
+	await navigate('/login')
+
+	await page.getByLabel('Username').fill('non_existing_user')
+	await page.getByLabel('Password').fill('non_existing_password')
+	await page.getByRole('button', { name: 'Log in' }).click()
+
+	await expect(
+		page.getByRole('alert').getByText('Invalid username or password'),
+	).toBeVisible()
+})

exercises/03.databases/04.problem.test-data/README.mdx

@@ -1,5 +1,7 @@
 # Test data
 
+- How to efficiently create and tear down test data.
+
 ## Your task
 
 👨‍💼 In this one, your goal is to test that your app displays the list of user's notes. For that, the authenticated user must have some notes to display! The `user` we are creating via the `authenticate` function right now has no notes and you have to change that fact for this test case to pass.