woo, some great test improvements

epicshop/fix-watch.js

@@ -54,7 +54,7 @@ async function run() {
 		await $({
 			stdio: 'inherit',
 			cwd: workshopRoot,
-		})`node ./scripts/fix.js`
+		})`node ./epicshop/fix.js`
 	} catch (error) {
 		throw error
 	} finally {

exercises/04.code-splitting/01.problem.lazy/tests/code-split.test.js → exercises/04.code-splitting/01.problem.lazy/tests/code-split.test.ts

@@ -19,7 +19,10 @@ test('should load the globe and countries modules on demand', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 

exercises/04.code-splitting/01.solution.lazy/tests/code-split.test.js → exercises/04.code-splitting/01.solution.lazy/tests/code-split.test.ts

@@ -19,7 +19,10 @@ test('should load the globe and countries modules on demand', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 

exercises/04.code-splitting/02.problem.eager/tests/eager-loading.test.js → exercises/04.code-splitting/02.problem.eager/tests/eager-loading.test.ts

@@ -13,7 +13,10 @@ test('should load the globe and countries modules on hover', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 
@@ -41,7 +44,10 @@ test('should load the globe and countries modules on focus', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 

exercises/04.code-splitting/02.solution.eager/tests/eager-loading.test.js → exercises/04.code-splitting/02.solution.eager/tests/eager-loading.test.ts

@@ -13,7 +13,10 @@ test('should load the globe and countries modules on hover', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 
@@ -41,7 +44,10 @@ test('should load the globe and countries modules on focus', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 

exercises/04.code-splitting/03.problem.transition/tests/flash.test.js → exercises/04.code-splitting/03.problem.transition/tests/flash.test.ts

@@ -13,7 +13,10 @@ test('should not show a pending UI when the globe is ready', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 

exercises/04.code-splitting/03.solution.transition/tests/flash.test.js → exercises/04.code-splitting/03.solution.transition/tests/flash.test.ts

@@ -13,7 +13,10 @@ test('should not show a pending UI when the globe is ready', async ({
 	const jsRequests = await page.evaluate(() =>
 		performance
 			.getEntriesByType('resource')
-			.filter((entry) => entry.initiatorType === 'script')
+			.filter(
+				(entry) =>
+					(entry as PerformanceResourceTiming).initiatorType === 'script',
+			)
 			.map((entry) => entry.name),
 	)
 

exercises/05.calculations/01.problem.use-memo/tests/use-memo.test.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test'
+
+test('searchCities should not be called when clicking force rerender', async ({
+	page,
+}) => {
+	await page.route('**/cities/index.ts', async (route) => {
+		const response = await route.fetch()
+		let content = await response.text()
+		content = content.replace(
+			'export function searchCities',
+			'function searchCities',
+		)
+		const instrumentedCode = `
+// code below is added by the test:
+window.__epicshop = { clearSearchCitiesCalls: () => window.__epicshop.searchCitiesCalls = [] }
+window.__epicshop.clearSearchCitiesCalls()
+
+function searchCitiesInstrumented(...args) {
+	window.__epicshop.searchCitiesCalls.push(args)
+	return searchCities(...args)
+}
+
+export { searchCitiesInstrumented as searchCities }
+		`
+		content = `${content}\n\n${instrumentedCode}`
+
+		route.fulfill({ body: content, headers: response.headers() })
+	})
+	await page.goto('/')
+	await page.waitForLoadState('networkidle')
+
+	await page.evaluate(() => (window as any).__epicshop.clearSearchCitiesCalls())
+	await page.getByRole('button', { name: /force/i }).click()
+	const searchCitiesCalls: Array<Array<string>> = await page.evaluate(
+		() => (window as any).__epicshop.searchCitiesCalls,
+	)
+
+	expect(
+		searchCitiesCalls,
+		'🚨 searchCities was called when clicking force rerender. Because nothing changed in the user input when clicking that button, searchCities should not have been called. Wrap searchCities inside useMemo with the input as a dependency to fix this.',
+	).toHaveLength(0)
+})

exercises/05.calculations/01.solution.use-memo/tests/use-memo.test.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test'
+
+test('searchCities should not be called when clicking force rerender', async ({
+	page,
+}) => {
+	await page.route('**/cities/index.ts', async (route) => {
+		const response = await route.fetch()
+		let content = await response.text()
+		content = content.replace(
+			'export function searchCities',
+			'function searchCities',
+		)
+		const instrumentedCode = `
+// code below is added by the test:
+window.__epicshop = { clearSearchCitiesCalls: () => window.__epicshop.searchCitiesCalls = [] }
+window.__epicshop.clearSearchCitiesCalls()
+
+function searchCitiesInstrumented(...args) {
+	window.__epicshop.searchCitiesCalls.push(args)
+	return searchCities(...args)
+}
+
+export { searchCitiesInstrumented as searchCities }
+		`
+		content = `${content}\n\n${instrumentedCode}`
+
+		route.fulfill({ body: content, headers: response.headers() })
+	})
+	await page.goto('/')
+	await page.waitForLoadState('networkidle')
+
+	await page.evaluate(() => (window as any).__epicshop.clearSearchCitiesCalls())
+	await page.getByRole('button', { name: /force/i }).click()
+	const searchCitiesCalls: Array<Array<string>> = await page.evaluate(
+		() => (window as any).__epicshop.searchCitiesCalls,
+	)
+
+	expect(
+		searchCitiesCalls,
+		'🚨 searchCities was called when clicking force rerender. Because nothing changed in the user input when clicking that button, searchCities should not have been called. Wrap searchCities inside useMemo with the input as a dependency to fix this.',
+	).toHaveLength(0)
+})

exercises/06.rerenders/01.problem.memo/tests/memoized.test.ts

@@ -0,0 +1,99 @@
+import { test, expect } from '@playwright/test'
+
+test('Only ListItem should not rerender when clicking force rerender', async ({
+	page,
+}) => {
+	await page.route('/', async (route) => {
+		const request = route.request()
+		if (request.resourceType() !== 'document') return route.continue()
+		const response = await route.fetch()
+
+		let html = await response.text()
+		const scriptToInject = `
+			<script>
+				let internals
+
+				function enhanceExistingHook(existingHook) {
+					const originalInject = existingHook.inject
+
+					existingHook.inject = (injectedInternals) => {
+						internals = injectedInternals
+
+						// Returning a number as React expects a renderer ID
+						return originalInject?.call(existingHook, injectedInternals) ?? 1
+					}
+
+					return existingHook
+				}
+
+				function createMinimalHook() {
+					return {
+						renderers: [],
+						supportsFiber: true,
+						inject: (injectedInternals) => {
+							internals = injectedInternals
+							return 1 // Returning a number as React expects a renderer ID
+						},
+						onCommitFiberRoot: () => {},
+						onCommitFiberUnmount: () => {},
+					}
+				}
+
+				async function getComponentCalls(cb) {
+					const componentNames = []
+					if (!internals) {
+						throw new Error('🚨 React DevTools is not available')
+					}
+
+					internals.enableProfilerTimer = true
+					internals.enableProfilerCommitHooks = true
+					internals.injectProfilingHooks({
+						markComponentRenderStarted: (fiber) => {
+							componentNames.push(fiber.type.name || 'Anonymous')
+						},
+					})
+
+					await cb()
+
+					internals.enableProfilerTimer = false
+					internals.enableProfilerCommitHooks = false
+					internals.injectProfilingHooks(null)
+
+					return componentNames
+				}
+
+				window.getComponentCalls = getComponentCalls
+
+				if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+					window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = enhanceExistingHook(
+						window.__REACT_DEVTOOLS_GLOBAL_HOOK__,
+					)
+				} else {
+					window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = createMinimalHook()
+				}
+			</script>
+		`
+		html = html.replace('<head>', `<head>${scriptToInject}`)
+		route.fulfill({ body: html, headers: { 'content-type': 'text/html' } })
+	})
+
+	await page.goto('/')
+	await page.waitForLoadState('networkidle')
+
+	const calledComponents: Array<string> = await page.evaluate(() =>
+		(window as any).getComponentCalls(() => {
+			document.querySelector('button')?.click()
+		}),
+	)
+
+	expect(
+		calledComponents,
+		'🚨 The ListItem component was rendered when clicking force render. Use the `memo` utility from React on the ListItem component to prevent this.',
+	).not.toContain('ListItem')
+})
+
+declare global {
+	interface Window {
+		__REACT_DEVTOOLS_GLOBAL_HOOK__?: any
+	}
+}