finish in-browser tests

exercises/02.context/01.problem.memo-context/index.tsx

@@ -12,7 +12,7 @@ function useFooter() {
 	return context
 }
 
-const Footer = memo(function Footer() {
+const Footer = memo(function FooterImpl() {
 	const { color, name } = useFooter()
 	return (
 		<footer style={{ color }}>

exercises/02.context/01.solution.memo-context/index.tsx

@@ -12,7 +12,7 @@ function useFooter() {
 	return context
 }
 
-const Footer = memo(function Footer() {
+const Footer = memo(function FooterImpl() {
 	const { color, name } = useFooter()
 	return (
 		<footer style={{ color }}>

exercises/02.context/01.solution.memo-context/memo-context.test.ts

@@ -0,0 +1,57 @@
+import { getComponentCalls } from '#shared/get-component-calls'
+import { testStep, expect, dtl } from '@epic-web/workshop-utils/test'
+
+const { screen, fireEvent } = dtl
+
+await import('./index.tsx')
+
+await testStep(
+	'changing the app counter should not re-render the Footer component',
+	async () => {
+		// Find the app count button
+		const appCountButton = await screen.findByRole('button', {
+			name: /the app count is/i,
+		})
+
+		// Get the component calls when clicking the app count button
+		const componentNames = await getComponentCalls(async () => {
+			fireEvent.click(appCountButton)
+			// Give components time to render
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		expect(componentNames).toEqual(['App', 'FooterSetters', 'Main'])
+	},
+)
+
+await testStep('changing footer color should re-render Footer', async () => {
+	// Find the color button
+	const colorButton = await screen.findByRole('button', { name: /blue/i })
+
+	// Get the component calls when changing the color
+	const componentNames = await getComponentCalls(async () => {
+		fireEvent.click(colorButton)
+		// Give components time to render
+		await new Promise((resolve) => setTimeout(resolve, 10))
+	})
+
+	expect(componentNames).toEqual(
+		expect.arrayContaining(['App', 'FooterSetters', 'Main', 'FooterImpl']),
+	)
+})
+
+await testStep('changing footer name should re-render Footer', async () => {
+	// Find the name input
+	const nameInput = await screen.findByLabelText(/name/i)
+
+	// Get the component calls when changing the name
+	const componentNames = await getComponentCalls(async () => {
+		fireEvent.change(nameInput, { target: { value: 'New Name' } })
+		// Give components time to render
+		await new Promise((resolve) => setTimeout(resolve, 10))
+	})
+
+	expect(componentNames).toEqual(
+		expect.arrayContaining(['App', 'FooterSetters', 'Main', 'FooterImpl']),
+	)
+})

exercises/02.context/02.problem.provider-component/index.tsx

@@ -18,7 +18,7 @@ function useFooter() {
 	return context
 }
 
-const Footer = memo(function Footer() {
+const Footer = memo(function FooterImpl() {
 	const { color, name } = useFooter()
 	return (
 		<footer style={{ color }}>

exercises/02.context/02.solution.provider-component/index.tsx

@@ -24,7 +24,7 @@ function useFooter() {
 	return context
 }
 
-const Footer = memo(function Footer() {
+const Footer = memo(function FooterImpl() {
 	const { color, name } = useFooter()
 	return (
 		<footer style={{ color }}>

exercises/02.context/02.solution.provider-component/provider.test.ts

@@ -0,0 +1,63 @@
+import { getComponentCalls } from '#shared/get-component-calls'
+import { testStep, expect, dtl } from '@epic-web/workshop-utils/test'
+
+const { screen, fireEvent } = dtl
+
+await import('./index.tsx')
+
+await testStep(
+	'changing the app counter should not re-render the Footer component',
+	async () => {
+		const appCountButton = await screen.findByRole('button', {
+			name: /the app count is/i,
+		})
+
+		const componentNames = await getComponentCalls(async () => {
+			fireEvent.click(appCountButton)
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		expect(componentNames).toEqual([
+			'App',
+			'FooterProvider',
+			'FooterSetters',
+			'Main',
+		])
+	},
+)
+
+await testStep(
+	'changing footer color should not re-render App or Main',
+	async () => {
+		const colorButton = await screen.findByRole('button', { name: /blue/i })
+
+		const componentNames = await getComponentCalls(async () => {
+			fireEvent.click(colorButton)
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		expect(componentNames).toEqual(
+			expect.arrayContaining(['FooterSetters', 'FooterImpl', 'FooterProvider']),
+		)
+		expect(componentNames).not.toContain('App')
+		expect(componentNames).not.toContain('Main')
+	},
+)
+
+await testStep(
+	'changing footer name should not re-render App or Main',
+	async () => {
+		const nameInput = await screen.findByLabelText(/name/i)
+
+		const componentNames = await getComponentCalls(async () => {
+			fireEvent.change(nameInput, { target: { value: 'New Name' } })
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		expect(componentNames).toEqual(
+			expect.arrayContaining(['FooterSetters', 'FooterImpl', 'FooterProvider']),
+		)
+		expect(componentNames).not.toContain('App')
+		expect(componentNames).not.toContain('Main')
+	},
+)

exercises/02.context/03.problem.split-context/index.tsx

@@ -39,7 +39,7 @@ function useFooter() {
 
 // 🐨 create a useFooterDispatch function similar to the hook above
 
-const Footer = memo(function Footer() {
+const Footer = memo(function FooterImpl() {
 	// 🐨 update this to useFooterState
 	const { color, name } = useFooter()
 	return (

exercises/02.context/03.solution.split-context/index.tsx

@@ -42,7 +42,7 @@ function useFooterDispatch() {
 	return context
 }
 
-const Footer = memo(function Footer() {
+const Footer = memo(function FooterImpl() {
 	const { color, name } = useFooterState()
 	return (
 		<footer style={{ color }}>
@@ -62,7 +62,7 @@ function Main({ footer }: { footer: React.ReactNode }) {
 	)
 }
 
-const FooterSetters = memo(function FooterSetters() {
+const FooterSetters = memo(function FooterImplSetters() {
 	const { setColor, setName } = useFooterDispatch()
 	return (
 		<>

exercises/02.context/03.solution.split-context/split.test.ts

@@ -0,0 +1,56 @@
+import { getComponentCalls } from '#shared/get-component-calls'
+import { testStep, expect, dtl } from '@epic-web/workshop-utils/test'
+
+const { screen, fireEvent } = dtl
+
+await import('./index.tsx')
+
+await testStep(
+	'FooterSetters should not re-render when footer state changes',
+	async () => {
+		const colorButton = await screen.findByRole('button', { name: /blue/i })
+
+		const componentNames = await getComponentCalls(async () => {
+			fireEvent.click(colorButton)
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		expect(componentNames).toContain('FooterImpl')
+		expect(componentNames).not.toContain('FooterSetters')
+	},
+)
+
+await testStep(
+	'FooterSetters should not re-render when footer name changes',
+	async () => {
+		const nameInput = await screen.findByLabelText(/name/i)
+
+		const componentNames = await getComponentCalls(async () => {
+			fireEvent.change(nameInput, { target: { value: 'New Name' } })
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		expect(componentNames).toContain('FooterImpl')
+		expect(componentNames).not.toContain('FooterSetters')
+	},
+)
+
+await testStep(
+	'FooterSetters should render only once during initial render',
+	async () => {
+		const componentNames = await getComponentCalls(async () => {
+			// Force a re-render of the entire app
+			const appCountButton = await screen.findByRole('button', {
+				name: /the app count is/i,
+			})
+			fireEvent.click(appCountButton)
+			await new Promise((resolve) => setTimeout(resolve, 10))
+		})
+
+		const footerSettersCount = componentNames.filter(
+			(name) => name === 'FooterSetters',
+		).length
+
+		expect(footerSettersCount).toBe(0)
+	},
+)

exercises/03.concurrent-rendering/01.solution.deferred/concurrent.test.ts

@@ -0,0 +1,8 @@
+import { testStep } from '@epic-web/workshop-utils/test'
+
+await testStep(
+	`There is no real test for this because it's basically impossible to test. (Consider that an invitation to try if you want!)`,
+	async () => {
+		await import('./index.tsx')
+	},
+)