more progress

Author: kentcdodds

exercises/04.router/01.problem.router/tests/client-side-routing.test.js

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform client-side routing', async ({
+	page,
+}) => {
+	await page.goto('/')
+	let reloadCount = 0
+
+	// Listen for 'load' event which triggers on page reload
+	page.on('load', () => {
+		reloadCount++
+	})
+
+	// Wait for the page to load
+	await page.waitForSelector('a')
+
+	// Get the first link
+	const firstLink = await page.locator('a').first()
+
+	// Get the href attribute of the first link
+	const href = await firstLink.getAttribute('href')
+
+	// Click the first link
+	await firstLink.click()
+
+	// Wait for the URL to change
+	await page.waitForURL(`**${href}`)
+
+	// Verify the URL has updated
+	expect(page.url()).toContain(href)
+
+	// Verify no reloads occurred
+	expect(reloadCount).toBe(0)
+})

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

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform search', async ({ page }) => {
+	await page.goto('/')
+	await expect(page).toHaveTitle('Starship Deets')
+
+	// Check for the filter input
+	const filterInput = page.getByPlaceholder('filter ships')
+	await expect(filterInput).toBeVisible()
+
+	// Perform a search
+	await filterInput.fill('hopper')
+	await filterInput.press('Enter')
+
+	// Verify URL change with search params
+	await expect(page).toHaveURL('/?search=hopper')
+
+	// Verify filtered results
+	const shipLinks = page
+		.getByRole('list')
+		.first()
+		.getByRole('listitem')
+		.getByRole('link')
+	for (const link of await shipLinks.all()) {
+		await expect(link).toContainText('hopper', { ignoreCase: true })
+	}
+
+	// Find and click on a ship in the filtered list
+	const shipLink = shipLinks.first()
+	const shipName = await shipLink.textContent()
+	await shipLink.click()
+
+	// Verify URL change
+	await expect(page).toHaveURL(/\/[a-zA-Z0-9-]+/)
+
+	// Verify ship detail view
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

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

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform client-side routing', async ({
+	page,
+}) => {
+	await page.goto('/')
+	let reloadCount = 0
+
+	// Listen for 'load' event which triggers on page reload
+	page.on('load', () => {
+		reloadCount++
+	})
+
+	// Wait for the page to load
+	await page.waitForSelector('a')
+
+	// Get the first link
+	const firstLink = await page.locator('a').first()
+
+	// Get the href attribute of the first link
+	const href = await firstLink.getAttribute('href')
+
+	// Click the first link
+	await firstLink.click()
+
+	// Wait for the URL to change
+	await page.waitForURL(`**${href}`)
+
+	// Verify the URL has updated
+	expect(page.url()).toContain(href)
+
+	// Verify no reloads occurred
+	expect(reloadCount).toBe(0)
+})

exercises/04.router/01.solution.router/tests/client-side-routing.test.js

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform search', async ({ page }) => {
+	await page.goto('/')
+	await expect(page).toHaveTitle('Starship Deets')
+
+	// Check for the filter input
+	const filterInput = page.getByPlaceholder('filter ships')
+	await expect(filterInput).toBeVisible()
+
+	// Perform a search
+	await filterInput.fill('hopper')
+	await filterInput.press('Enter')
+
+	// Verify URL change with search params
+	await expect(page).toHaveURL('/?search=hopper')
+
+	// Verify filtered results
+	const shipLinks = page
+		.getByRole('list')
+		.first()
+		.getByRole('listitem')
+		.getByRole('link')
+	for (const link of await shipLinks.all()) {
+		await expect(link).toContainText('hopper', { ignoreCase: true })
+	}
+
+	// Find and click on a ship in the filtered list
+	const shipLink = shipLinks.first()
+	const shipName = await shipLink.textContent()
+	await shipLink.click()
+
+	// Verify URL change
+	await expect(page).toHaveURL(/\/[a-zA-Z0-9-]+/)
+
+	// Verify ship detail view
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

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

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform search', async ({ page }) => {
+	await page.goto('/')
+	await expect(page).toHaveTitle('Starship Deets')
+
+	// Check for the filter input
+	const filterInput = page.getByPlaceholder('filter ships')
+	await expect(filterInput).toBeVisible()
+
+	// Perform a search
+	await filterInput.fill('hopper')
+	await filterInput.press('Enter')
+
+	// Verify URL change with search params
+	await expect(page).toHaveURL('/?search=hopper')
+
+	// Verify filtered results
+	const shipLinks = page
+		.getByRole('list')
+		.first()
+		.getByRole('listitem')
+		.getByRole('link')
+	for (const link of await shipLinks.all()) {
+		await expect(link).toContainText('hopper', { ignoreCase: true })
+	}
+
+	// Find and click on a ship in the filtered list
+	const shipLink = shipLinks.first()
+	const shipName = await shipLink.textContent()
+	await shipLink.click()
+
+	// Verify URL change
+	await expect(page).toHaveURL(/\/[a-zA-Z0-9-]+/)
+
+	// Verify ship detail view
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

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

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform search', async ({ page }) => {
+	await page.goto('/')
+	await expect(page).toHaveTitle('Starship Deets')
+
+	// Check for the filter input
+	const filterInput = page.getByPlaceholder('filter ships')
+	await expect(filterInput).toBeVisible()
+
+	// Perform a search
+	await filterInput.fill('hopper')
+	await filterInput.press('Enter')
+
+	// Verify URL change with search params
+	await expect(page).toHaveURL('/?search=hopper')
+
+	// Verify filtered results
+	const shipLinks = page
+		.getByRole('list')
+		.first()
+		.getByRole('listitem')
+		.getByRole('link')
+	for (const link of await shipLinks.all()) {
+		await expect(link).toContainText('hopper', { ignoreCase: true })
+	}
+
+	// Find and click on a ship in the filtered list
+	const shipLink = shipLinks.first()
+	const shipName = await shipLink.textContent()
+	await shipLink.click()
+
+	// Verify URL change
+	await expect(page).toHaveURL(/\/[a-zA-Z0-9-]+/)
+
+	// Verify ship detail view
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

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

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform search', async ({ page }) => {
+	await page.goto('/')
+	await expect(page).toHaveTitle('Starship Deets')
+
+	// Check for the filter input
+	const filterInput = page.getByPlaceholder('filter ships')
+	await expect(filterInput).toBeVisible()
+
+	// Perform a search
+	await filterInput.fill('hopper')
+	await filterInput.press('Enter')
+
+	// Verify URL change with search params
+	await expect(page).toHaveURL('/?search=hopper')
+
+	// Verify filtered results
+	const shipLinks = page
+		.getByRole('list')
+		.first()
+		.getByRole('listitem')
+		.getByRole('link')
+	for (const link of await shipLinks.all()) {
+		await expect(link).toContainText('hopper', { ignoreCase: true })
+	}
+
+	// Find and click on a ship in the filtered list
+	const shipLink = shipLinks.first()
+	const shipName = await shipLink.textContent()
+	await shipLink.click()
+
+	// Verify URL change
+	await expect(page).toHaveURL(/\/[a-zA-Z0-9-]+/)
+
+	// Verify ship detail view
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})

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

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('should display the home page and perform search', async ({ page }) => {
+	await page.goto('/')
+	await expect(page).toHaveTitle('Starship Deets')
+
+	// Check for the filter input
+	const filterInput = page.getByPlaceholder('filter ships')
+	await expect(filterInput).toBeVisible()
+
+	// Perform a search
+	await filterInput.fill('hopper')
+	await filterInput.press('Enter')
+
+	// Verify URL change with search params
+	await expect(page).toHaveURL('/?search=hopper')
+
+	// Verify filtered results
+	const shipLinks = page
+		.getByRole('list')
+		.first()
+		.getByRole('listitem')
+		.getByRole('link')
+	for (const link of await shipLinks.all()) {
+		await expect(link).toContainText('hopper', { ignoreCase: true })
+	}
+
+	// Find and click on a ship in the filtered list
+	const shipLink = shipLinks.first()
+	const shipName = await shipLink.textContent()
+	await shipLink.click()
+
+	// Verify URL change
+	await expect(page).toHaveURL(/\/[a-zA-Z0-9-]+/)
+
+	// Verify ship detail view
+	const shipTitle = page.getByRole('heading', { level: 2 })
+	await expect(shipTitle).toHaveText(shipName)
+})