metadata continuation

Author: AlemTuzlak

.gitignore

@@ -13,3 +13,4 @@ data.db
 # file as well, but since this is for a workshop
 # we're going to keep them around.
 # .env
+test-results

exercises/01.routing/01.problem.routing/README.mdx

@@ -18,7 +18,7 @@ and implement the following routes:
 - `Landing page layout` that wraps all the other routes (`./routes/_landing.tsx`).
 - `/` - The index route that renders the landing page (`./routes/_landing._index/route.tsx`).
 - `/about` - The about route that renders the `About` page (`./routes/_landing.about.tsx`).
-- `/products` - The products route that renders the `Products` page (`./routes/_landing.products.tsx`).
+- `/products` - The products route that renders the `Products` page (`./routes/_landing.products._index.tsx`).
 - `/products/:productId` - The product details route that renders the `ProductDetails` page (`./routes/_landing.products.$productId.tsx`).
 - `/contact` - The contact route that renders the `Contact` page (`./routes/_landing.contact.tsx`).
 - `/cart` - The cart route that renders the `Cart` page (`./routes/_landing.cart.tsx`).

exercises/01.routing/01.problem.routing/app/routes.ts

@@ -13,6 +13,7 @@ import {
 // - Home page ("/")
 // - About page ("/about")
 // - Contact page ("/contact")
+// 💰 Create a products route with children here!
 // - Products page ("/products")
 // - Product details page ("/products/:productId")
 // - Terms of Use page ("/terms-of-use")

exercises/01.routing/01.problem.routing/app/routes/_landing.products._index.tsx

@@ -0,0 +1,7 @@
+export default function ProductsPage() {
+	return (
+		<div className="min-h-screen bg-stone-50 dark:bg-gray-900">
+			Products page!
+		</div>
+	)
+}

exercises/01.routing/01.problem.routing/app/routes/_landing.products.tsx

@@ -1,7 +1,9 @@
-export default function ProductsPage() {
-	return (
-		<div className="min-h-screen bg-stone-50 dark:bg-gray-900">
-			Products page!
-		</div>
-	)
-}
+import { Outlet } from "react-router"
+
+export default function ProductsLandingPage() {
+  return (
+    <>
+      <Outlet />
+    </>
+  )
+}

exercises/01.routing/01.problem.routing/playwright.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
 	workers: process.env.CI ? 1 : undefined,
-	reporter: 'html',
+	reporter: [['html', { open: 'never' }]],
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',

exercises/01.routing/01.problem.routing/tests/e2e/routing.test.ts

@@ -5,22 +5,22 @@ test.describe('Routing E2E Tests', () => {
 		page,
 	}) => {
 		await page.goto('/')
-		await expect(page.getByRole('heading', { name: 'Step Into' })).toBeVisible()
+		await expect(page.getByText("Landing page!")).toBeVisible()
 	})
 
 	test('should navigate to about page and render correct content', async ({
 		page,
 	}) => {
 		await page.goto('/about')
-		await expect(page.getByRole('heading', { name: 'Our Story' })).toBeVisible()
+		await expect(page.getByText("About page!")).toBeVisible()
 	})
 
 	test('should navigate to contact page and render correct content', async ({
 		page,
 	}) => {
 		await page.goto('/contact')
 		await expect(
-			page.getByRole('heading', { name: 'Get in Touch' }),
+			page.getByText("Contact page!"),
 		).toBeVisible()
 	})
 
@@ -29,7 +29,7 @@ test.describe('Routing E2E Tests', () => {
 	}) => {
 		await page.goto('/products')
 		await expect(
-			page.getByRole('heading', { name: 'All Products' }),
+			page.getByText("Products page!"),
 		).toBeVisible()
 	})
 
@@ -38,7 +38,7 @@ test.describe('Routing E2E Tests', () => {
 	}) => {
 		await page.goto('/terms-of-service')
 		await expect(
-			page.getByRole('heading', { name: 'Terms of Service' }),
+			page.getByText("Terms of Service page!"),
 		).toBeVisible()
 	})
 
@@ -47,7 +47,7 @@ test.describe('Routing E2E Tests', () => {
 	}) => {
 		await page.goto('/terms-of-use')
 		await expect(
-			page.getByRole('heading', { name: 'Terms of Use' }),
+			page.getByText("Terms of Use page!"),
 		).toBeVisible()
 	})
 
@@ -56,7 +56,7 @@ test.describe('Routing E2E Tests', () => {
 	}) => {
 		await page.goto('/products/1')
 		await expect(
-			page.getByRole('heading', { name: 'Air Max Revolution' }),
+			page.getByText("Product Detail Page"),
 		).toBeVisible()
 	})
 })

exercises/01.routing/01.solution.routing/app/routes.ts

@@ -10,8 +10,10 @@ export default [
 		index('./routes/_landing._index/route.tsx'),
 		route('terms-of-use', './routes/_landing.terms-of-use.tsx'),
 		route('terms-of-service', './routes/_landing.terms-of-service.tsx'),
-		route('products', './routes/_landing.products.tsx'),
-		route('products/:productId', './routes/_landing.products.$productId.tsx'),
+		route('products', './routes/_landing.products.tsx', [
+			index('./routes/_landing.products._index.tsx'),
+			route(':productId', './routes/_landing.products.$productId.tsx'),
+		]),
 		route('contact', './routes/_landing.contact.tsx'),
 		route('about', './routes/_landing.about.tsx'),
 		route('cart', './routes/_landing.cart.tsx'),

exercises/01.routing/01.solution.routing/app/routes/_landing.products._index.tsx

@@ -0,0 +1,7 @@
+export default function ProductsPage() {
+	return (
+		<div className="min-h-screen bg-stone-50 dark:bg-gray-900">
+			Products page!
+		</div>
+	)
+}

exercises/01.routing/01.solution.routing/app/routes/_landing.products.tsx

@@ -1,7 +1,9 @@
-export default function ProductsPage() {
-	return (
-		<div className="min-h-screen bg-stone-50 dark:bg-gray-900">
-			Products page!
-		</div>
-	)
-}
+import { Outlet } from "react-router"
+
+export default function ProductsLandingPage() {
+  return (
+    <>
+      <Outlet />
+    </>
+  )
+}