finish tests for exercise 3

Author: kentcdodds

exercises/03.client-components/01.problem.loader/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/03.client-components/01.problem.loader/tests/solution.test.js

@@ -64,7 +64,6 @@ export function EditableText({ id, shipId, initialValue = '' }) {
 			: h(
 					'button',
 					{
-						'aria-label': 'Ship Name',
 						ref: buttonRef,
 						type: 'button',
 						style: {

exercises/03.client-components/01.problem.loader/ui/edit-text.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/03.client-components/01.solution.loader/tests/smoke.test.js

@@ -64,7 +64,6 @@ export function EditableText({ id, shipId, initialValue = '' }) {
 			: h(
 					'button',
 					{
-						'aria-label': 'Ship Name',
 						ref: buttonRef,
 						type: 'button',
 						style: {

exercises/03.client-components/01.solution.loader/tests/solution.test.js

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+import { searchShips } from '../db/ship-api.js'
+
+test('should display the home page and perform search', async ({ page }) => {
+	const {
+		ships: [ship],
+	} = await searchShips({ search: 'hopper' })
+	const newName = `${ship.name} 🚀`
+	await page.goto(`/${ship.id}`)
+
+	// Wait for the loading state to disappear
+	await page.waitForSelector('h2:has-text("Loading...")', { state: 'detached' })
+
+	// Ensure the ship name is visible
+	await expect(page.getByRole('heading', { name: ship.name })).toBeVisible()
+	// Find and click the edit button
+	await page.getByRole('button', { name: ship.name }).click()
+
+	// Check if the input is focused
+	await expect(page.getByRole('textbox', { name: 'Ship Name' })).toBeFocused()
+
+	// Change the value of the input
+	await page.getByRole('textbox', { name: 'Ship Name' }).fill(newName)
+
+	// Press Enter
+	await page.keyboard.press('Enter')
+
+	// Check if the button is back
+	await expect(page.getByRole('button', { name: newName })).toBeVisible()
+})

exercises/03.client-components/01.solution.loader/ui/edit-text.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/03.client-components/02.problem.module-resolution/tests/edit-text.test.js

@@ -64,7 +64,6 @@ export function EditableText({ id, shipId, initialValue = '' }) {
 			: h(
 					'button',
 					{
-						'aria-label': 'Ship Name',
 						ref: buttonRef,
 						type: 'button',
 						style: {