03/01: adjust the alert role assertion

Author: kettanaito

exercises/03.best-practices/01.solution.network-mocking/README.mdx

@@ -4,4 +4,10 @@ Problem: performing requests to an actual server makes your test dependent on th
 
 Mocking APIs is a part of the _setup_ so it makes sense we start from it. It unblocks proper testing in the future exercises.
 
-1. How to use MSW in Vitest Browser Mode. What integration you need and how to access the `worker` in test.
+## Steps
+
+1. Install `msw`.
+1. Init the worker script.
+1. Create `/mocks/handlers.ts` with happy-path handlers, and `/mocks/browser.ts` with the worker.
+1. Create a custom _test context_ in the `test-extend.ts` file. Don't forget about `auto` to enable MSW even when it's not referenced in the test! (to rely on happy path handlers)
+1. Write the test cases for the discount form component.

exercises/03.best-practices/01.solution.network-mocking/src/discount-code-form.browser.test.tsx

@@ -50,17 +50,8 @@ test('displays a warning for legacy discount codes', async ({ worker }) => {
 		.element(page.getByText('Discount: LEGA2000 (-10%)'))
 		.toBeVisible()
 	await expect
-		.element(
-			page.getByText('"LEGA2000" is a legacy code. Discount amount halfed.'),
-			/**
-			 * @todo @fixme Use the role-based selector when the Vitest bug is fixed.
-			 * @see https://github.com/vitest-dev/vitest/issues/7327
-			 */
-			// page.getByRole('alert', {
-			// 	name: '"LEGA2000" is a legacy code. Discount amount halfed.',
-			// }),
-		)
-		.toBeVisible()
+		.element(page.getByRole('alert'))
+		.toHaveTextContent('"LEGA2000" is a legacy code. Discount amount halfed.')
 })
 
 test('displays an error when fetching the discount code', async ({
@@ -83,9 +74,6 @@ test('displays an error when fetching the discount code', async ({
 	await userEvent.click(submitButton)
 
 	await expect
-		.element(
-			page.getByText('Failed to apply the discount code'),
-			// page.getByRole('alert', { name: 'Failed to apply the discount code' }),
-		)
-		.toBeVisible()
+		.element(page.getByRole('alert'))
+		.toHaveTextContent('Failed to apply the discount code')
 })

exercises/03.best-practices/01.solution.network-mocking/src/discount-code-form.tsx

@@ -104,7 +104,7 @@ export function DiscountCodeForm() {
 	return (
 		<section className="w-96 rounded-lg border bg-white p-10">
 			{state.submitting ? (
-				<p>
+				<p aria-hidden>
 					<span className="inline-block animate-spin font-bold">{'◡'}</span>
 				</p>
 			) : state.discount ? (

exercises/03.best-practices/02.solution.accessibility-selectors/README.mdx

@@ -15,3 +15,7 @@ Best practices:
 
 - Avoid `.getByTestId()`
 - Prefer `.getByLabelText()` vs `.getByPlaceholder()`
+
+Resources:
+
+- https://github.com/AriPerkkio/extend-to-be-announced for asserting `alert` and other live elements that get announced.