add last tests

Author: kentcdodds

exercises/03.use-effect/01.problem.callback/README.mdx

@@ -6,7 +6,7 @@
 
 ```tsx
 useEffect(() => {
-	console.log('consider yourself effective!')
+	console.info('consider yourself effective!')
 })
 ```
 

exercises/03.use-effect/01.problem.callback/index.tsx

@@ -31,6 +31,7 @@ export function useState<State>(initialState: State) {
 
 // 🐨 create a useEffect function here that accepts an "EffectCallback" callback,
 // and adds the callback to the effects array at the index "hookIndex++"
+// 🚨 make sure to export this function so I can test it
 
 function Counter() {
 	const [count, setCount] = useState(0)
@@ -40,7 +41,7 @@ function Counter() {
 	const toggle = () => setEnabled(!enabled)
 
 	useEffect(() => {
-		console.log('consider yourself effective!')
+		console.info('consider yourself effective!')
 	})
 
 	return (

exercises/03.use-effect/01.solution.callback/counter.test.tsx

@@ -0,0 +1,47 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { screen, waitFor } from '@testing-library/dom'
+import { userEvent } from '@testing-library/user-event'
+
+const originalConsoleInfo = console.info
+
+function info(...args: Array<any>) {
+	info.calls.push(args)
+	return originalConsoleInfo(...args)
+}
+info.calls = [] as Array<Array<any>>
+
+console.info = info
+
+await import('.')
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'The effect callback was called on the initial render'
+			: 'The effect callback was not called on the initial render. Did you call it after rendering and using flushSync?',
+	() => {
+		expect(info.calls.length).to.equal(1)
+	},
+)
+
+const counterButton = await testStep(
+	({ type }) =>
+		type === 'fail'
+			? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
+			: 'Found the counter button that starts at 0',
+	() => screen.findByRole('button', { name: /0/i }),
+)
+await userEvent.click(counterButton)
+await testStep(`The button text should be 1 after clicking`, () =>
+	waitFor(() => expect(counterButton).to.have.text('1')),
+)
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'The effect callback was called after the initial render'
+			: 'The effect callback was not called after the initial render. Did you call it after rendering and using flushSync?',
+	() => {
+		expect(info.calls.length).to.equal(2)
+	},
+)

exercises/03.use-effect/01.solution.callback/effect.test.tsx

@@ -0,0 +1,21 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+
+const { useEffect } = await import('./index.tsx')
+
+await testStep(
+	({ type }) =>
+		type === 'fail'
+			? 'Did you forget to export your `useEffect`? I need you to export it so I can test it.'
+			: 'useEffect is exported correctly',
+	() => expect(useEffect).to.be.a('function'),
+)
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'useEffect is returning undefined'
+			: 'useEffect is not returning undefined',
+	() => {
+		expect(useEffect(() => {})).to.be.undefined
+	},
+)

exercises/03.use-effect/01.solution.callback/index.tsx

@@ -39,7 +39,7 @@ function Counter() {
 	const toggle = () => setEnabled(!enabled)
 
 	useEffect(() => {
-		console.log('consider yourself effective!')
+		console.info('consider yourself effective!')
 	})
 
 	return (

exercises/03.use-effect/02.problem.dependencies/README.mdx

@@ -7,9 +7,9 @@
 ```tsx
 useEffect(() => {
 	if (enabled) {
-		console.log('consider yourself effective!')
+		console.info('consider yourself effective!')
 	} else {
-		console.log('consider yourself ineffective!')
+		console.info('consider yourself ineffective!')
 	}
 }, [enabled])
 ```

exercises/03.use-effect/02.problem.dependencies/index.tsx

@@ -43,9 +43,9 @@ function Counter() {
 
 	useEffect(() => {
 		if (enabled) {
-			console.log('consider yourself effective!')
+			console.info('consider yourself effective!')
 		} else {
-			console.log('consider yourself ineffective!')
+			console.info('consider yourself ineffective!')
 		}
 		// @ts-expect-error 💣 delete this comment
 	}, [enabled])

exercises/03.use-effect/02.solution.dependencies/counter.test.tsx

@@ -0,0 +1,66 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { screen, waitFor } from '@testing-library/dom'
+import { userEvent } from '@testing-library/user-event'
+
+const originalConsoleInfo = console.info
+
+function info(...args: Array<any>) {
+	info.calls.push(args)
+	return originalConsoleInfo(...args)
+}
+info.calls = [] as Array<Array<any>>
+
+console.info = info
+
+await import('.')
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'The effect callback was called on the initial render'
+			: 'The effect callback was not called on the initial render. Did you call it after rendering and using flushSync?',
+	() => {
+		expect(info.calls.length).to.equal(1)
+	},
+)
+
+const counterButton = await testStep(
+	({ type }) =>
+		type === 'fail'
+			? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
+			: 'Found the counter button that starts at 0',
+	() => screen.findByRole('button', { name: /0/i }),
+)
+await userEvent.click(counterButton)
+await testStep(`The button text should be 1 after clicking`, () =>
+	waitFor(() => expect(counterButton).to.have.text('1')),
+)
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'The effect callback was not called when dependencies are unchanged'
+			: 'The effect callback was called when dependencies are unchanged. Did you remember to not call it when the dependencies are unchanged?',
+	() => {
+		expect(info.calls.length).to.equal(1)
+	},
+)
+
+const disableButton = await testStep(
+	({ type }) =>
+		type === 'fail'
+			? 'Could not find the disable button. It should start with the text "disable". Did you forget to return the initial state from your useState?'
+			: 'Found the disable button that starts with "disable" text',
+	() => screen.findByRole('button', { name: /Disable/i }),
+)
+await userEvent.click(disableButton)
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'The effect callback was called when dependencies change'
+			: 'The effect callback was not called when dependencies change. Did you remember to call it when the dependencies change?',
+	() => {
+		expect(info.calls.length).to.equal(2)
+	},
+)

exercises/03.use-effect/02.solution.dependencies/index.tsx

@@ -42,9 +42,9 @@ function Counter() {
 
 	useEffect(() => {
 		if (enabled) {
-			console.log('consider yourself effective!')
+			console.info('consider yourself effective!')
 		} else {
-			console.log('consider yourself ineffective!')
+			console.info('consider yourself ineffective!')
 		}
 	}, [enabled])