add awesome tests for exercise 4

Author: kentcdodds

exercises/04.router/01.problem.router/tests/smoke.test.js

@@ -17,10 +17,7 @@ test('should display the home page and perform search', async ({ page }) => {
 	const shipList = page.getByRole('list').first()
 
 	// Wait for the list to be filtered down to two items
-	await expect(async () => {
-		const items = await shipList.getByRole('listitem').all()
-		expect(items.length).toBe(2)
-	}).toPass()
+	await expect(shipList.getByRole('listitem')).toHaveCount(2)
 
 	// Verify filtered results
 	const shipLinks = page

exercises/04.router/01.solution.router/tests/smoke.test.js

@@ -17,10 +17,7 @@ test('should display the home page and perform search', async ({ page }) => {
 	const shipList = page.getByRole('list').first()
 
 	// Wait for the list to be filtered down to two items
-	await expect(async () => {
-		const items = await shipList.getByRole('listitem').all()
-		expect(items.length).toBe(2)
-	}).toPass()
+	await expect(shipList.getByRole('listitem')).toHaveCount(2)
 
 	// Verify filtered results
 	const shipLinks = page

exercises/04.router/02.problem.pending-ui/tests/pending-ui.test.js

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+import { searchShips } from '../db/ship-api.js'
+
+test('should display pending UI when performing a search and selecting a ship', async ({
+	page,
+}) => {
+	const {
+		ships: [firstShip],
+	} = await searchShips({ search: '' })
+	await page.goto(`/${firstShip.id}`)
+
+	await page.waitForSelector('li a:has-text("... loading")', {
+		state: 'detached',
+	})
+
+	// simulate a slow network for the /rsc endpoint so we force the pending UI to show up
+	await page.route('/rsc/*', async route => {
+		await new Promise(resolve => setTimeout(resolve, 400))
+		await route.continue()
+	})
+
+	const searchInput = page.getByRole('searchbox', { name: /ships/i })
+	await searchInput.fill('s')
+
+	await expect(page.getByRole('list').first()).toHaveCSS('opacity', '0.6')
+
+	await expect(page.getByRole('list').first()).toHaveCSS('opacity', '1')
+
+	const firstShipLink = page.locator('li a').first()
+	const shipName = await firstShipLink.textContent()
+	await firstShipLink.click()
+
+	await expect(page.locator('.details')).toHaveCSS('opacity', '0.6')
+
+	await expect(page.locator('.details')).toHaveCSS('opacity', '1')
+
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

exercises/04.router/02.problem.pending-ui/tests/smoke.test.js

@@ -17,10 +17,7 @@ test('should display the home page and perform search', async ({ page }) => {
 	const shipList = page.getByRole('list').first()
 
 	// Wait for the list to be filtered down to two items
-	await expect(async () => {
-		const items = await shipList.getByRole('listitem').all()
-		expect(items.length).toBe(2)
-	}).toPass()
+	await expect(shipList.getByRole('listitem')).toHaveCount(2)
 
 	// Verify filtered results
 	const shipLinks = page

exercises/04.router/02.problem.pending-ui/tests/solution.test.js

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+import { searchShips } from '../db/ship-api.js'
+
+test('should display pending UI when performing a search and selecting a ship', async ({
+	page,
+}) => {
+	const {
+		ships: [firstShip],
+	} = await searchShips({ search: '' })
+	await page.goto(`/${firstShip.id}`)
+
+	await page.waitForSelector('li a:has-text("... loading")', {
+		state: 'detached',
+	})
+
+	// simulate a slow network for the /rsc endpoint so we force the pending UI to show up
+	await page.route('/rsc/*', async route => {
+		await new Promise(resolve => setTimeout(resolve, 400))
+		await route.continue()
+	})
+
+	const searchInput = page.getByRole('searchbox', { name: /ships/i })
+	await searchInput.fill('s')
+
+	await expect(page.getByRole('list').first()).toHaveCSS('opacity', '0.6')
+
+	await expect(page.getByRole('list').first()).toHaveCSS('opacity', '1')
+
+	const firstShipLink = page.locator('li a').first()
+	const shipName = await firstShipLink.textContent()
+	await firstShipLink.click()
+
+	await expect(page.locator('.details')).toHaveCSS('opacity', '0.6')
+
+	await expect(page.locator('.details')).toHaveCSS('opacity', '1')
+
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

exercises/04.router/02.solution.pending-ui/tests/pending-ui.test.js

@@ -17,10 +17,7 @@ test('should display the home page and perform search', async ({ page }) => {
 	const shipList = page.getByRole('list').first()
 
 	// Wait for the list to be filtered down to two items
-	await expect(async () => {
-		const items = await shipList.getByRole('listitem').all()
-		expect(items.length).toBe(2)
-	}).toPass()
+	await expect(shipList.getByRole('listitem')).toHaveCount(2)
 
 	// Verify filtered results
 	const shipLinks = page

exercises/04.router/02.solution.pending-ui/tests/smoke.test.js

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+
+test('should not update URL for out-of-order responses', async ({ page }) => {
+	await page.goto('/')
+
+	// Simulate varying network delays
+	await page.route('/rsc/*', async route => {
+		const url = route.request().url()
+		if (url.includes('search=st')) {
+			await new Promise(resolve => setTimeout(resolve, 2000)) // Longer delay for 'st'
+		}
+		await route.continue()
+	})
+
+	const searchInput = page.getByRole('searchbox', { name: /ships/i })
+
+	// Perform rapid searches
+	await searchInput.fill('s')
+	await searchInput.fill('st')
+	await searchInput.fill('sta')
+
+	// Wait for the last search to complete
+	await page.waitForURL('**/*?search=sta')
+
+	// Wait for all in-flight requests to finish
+	await page.waitForLoadState('networkidle')
+
+	// Check that the URL ends with 'sta', not 'st'
+	expect(page.url()).toMatch(/search=sta$/)
+})

exercises/04.router/02.solution.pending-ui/tests/solution.test.js

@@ -17,10 +17,7 @@ test('should display the home page and perform search', async ({ page }) => {
 	const shipList = page.getByRole('list').first()
 
 	// Wait for the list to be filtered down to two items
-	await expect(async () => {
-		const items = await shipList.getByRole('listitem').all()
-		expect(items.length).toBe(2)
-	}).toPass()
+	await expect(shipList.getByRole('listitem')).toHaveCount(2)
 
 	// Verify filtered results
 	const shipLinks = page