fix tests and things

Author: kentcdodds

exercises/02.linking/01.problem.achors/tests/router.test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Hello World! should be rendered', async ({ page }) => {
+test('gratitext should be rendered', async ({ page }) => {
 	await page.goto('/')
 
-	const helloWorld = page.getByText(/hello world/i)
-	await expect(helloWorld).toBeVisible({ timeout: 500 })
+	const gratitext = page.getByRole('banner').getByText(/gratitext/)
+	await expect(gratitext).toBeVisible({ timeout: 500 })
 })
 
 test('About should be rendered', async ({ page }) => {

exercises/02.linking/01.solution.achors/tests/router.test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Hello World! should be rendered', async ({ page }) => {
+test('gratitext should be rendered', async ({ page }) => {
 	await page.goto('/')
 
-	const helloWorld = page.getByText(/hello world/i)
-	await expect(helloWorld).toBeVisible({ timeout: 500 })
+	const gratitext = page.getByRole('banner').getByText(/gratitext/)
+	await expect(gratitext).toBeVisible({ timeout: 500 })
 })
 
 test('About should be rendered', async ({ page }) => {

exercises/02.linking/02.problem.links/tests/router.test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Hello World! should be rendered', async ({ page }) => {
+test('gratitext should be rendered', async ({ page }) => {
 	await page.goto('/')
 
-	const helloWorld = page.getByText(/hello world/i)
-	await expect(helloWorld).toBeVisible({ timeout: 500 })
+	const gratitext = page.getByRole('banner').getByText(/gratitext/)
+	await expect(gratitext).toBeVisible({ timeout: 500 })
 })
 
 test('About should be rendered', async ({ page }) => {

exercises/02.linking/02.solution.links/tests/router.test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Hello World! should be rendered', async ({ page }) => {
+test('gratitext should be rendered', async ({ page }) => {
 	await page.goto('/')
 
-	const helloWorld = page.getByText(/hello world/i)
-	await expect(helloWorld).toBeVisible({ timeout: 500 })
+	const gratitext = page.getByRole('banner').getByText(/gratitext/)
+	await expect(gratitext).toBeVisible({ timeout: 500 })
 })
 
 test('About should be rendered', async ({ page }) => {

exercises/02.linking/03.problem.custom-link/tests/router.test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Hello World! should be rendered', async ({ page }) => {
+test('gratitext should be rendered', async ({ page }) => {
 	await page.goto('/')
 
-	const helloWorld = page.getByText(/hello world/i)
-	await expect(helloWorld).toBeVisible({ timeout: 500 })
+	const gratitext = page.getByRole('banner').getByText(/gratitext/)
+	await expect(gratitext).toBeVisible({ timeout: 500 })
 })
 
 test('About should be rendered', async ({ page }) => {

exercises/02.linking/03.solution.custom-link/tests/router.test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Hello World! should be rendered', async ({ page }) => {
+test('gratitext should be rendered', async ({ page }) => {
 	await page.goto('/')
 
-	const helloWorld = page.getByText(/hello world/i)
-	await expect(helloWorld).toBeVisible({ timeout: 500 })
+	const gratitext = page.getByRole('banner').getByText(/gratitext/)
+	await expect(gratitext).toBeVisible({ timeout: 500 })
 })
 
 test('About should be rendered', async ({ page }) => {

exercises/99.final/01.solution.final/src/routes.tsx

@@ -2,7 +2,6 @@ import {
 	createBrowserRouter,
 	createRoutesFromElements,
 	Route,
-	useRouteError,
 } from 'react-router'
 import { NotFoundRoute } from './routes/404.tsx'
 import { AppLayout } from './routes/app/layout.tsx'
@@ -15,6 +14,7 @@ import {
 	RecipientRoute,
 } from './routes/app/recipient.tsx'
 import { RecipientsRoute } from './routes/app/recipients.tsx'
+import { UnknownErrorBoundary } from './routes/error-boundary.tsx'
 import { SignupRoute } from './routes/signup.tsx'
 
 export const router = createBrowserRouter(
@@ -38,19 +38,3 @@ export const router = createBrowserRouter(
 		</Route>,
 	),
 )
-
-function UnknownErrorBoundary() {
-	const error = useRouteError()
-
-	return (
-		<div className="bg-danger-background text-danger-foreground mt-20 flex h-full flex-col items-center justify-center px-8 py-12">
-			<h1 className="text-2xl font-bold">Unknown error</h1>
-			<p className="text-danger-foreground/80 text-sm">
-				An unknown error occurred. Please try again later.
-			</p>
-			<pre className="text-danger-foreground/80 bg-danger-foreground/10 mt-4 max-h-[50vh] overflow-auto rounded-lg p-4 text-sm break-all whitespace-break-spaces">
-				{error instanceof Error ? error.message : 'Unknown error'}
-			</pre>
-		</div>
-	)
-}

exercises/99.final/01.solution.final/src/routes/error-boundary.tsx

@@ -0,0 +1,17 @@
+import { useRouteError } from 'react-router'
+
+export function UnknownErrorBoundary() {
+	const error = useRouteError()
+
+	return (
+		<div className="bg-danger-background text-danger-foreground mt-20 flex h-full flex-col items-center justify-center px-8 py-12">
+			<h1 className="text-2xl font-bold">Unknown error</h1>
+			<p className="text-danger-foreground/80 text-sm">
+				An unknown error occurred. Please try again later.
+			</p>
+			<pre className="text-danger-foreground/80 bg-danger-foreground/10 mt-4 max-h-[50vh] overflow-auto rounded-lg p-4 text-sm break-all whitespace-break-spaces">
+				{error instanceof Error ? error.message : 'Unknown error'}
+			</pre>
+		</div>
+	)
+}