add initial tests

Author: kentcdodds

epicshop/package-lock.json

@@ -1,8 +1,8 @@
 {
   "type": "module",
   "dependencies": {
-    "@epic-web/workshop-app": "^4.12.5",
-    "@epic-web/workshop-utils": "^4.12.5",
+    "@epic-web/workshop-app": "^4.13.3",
+    "@epic-web/workshop-utils": "^4.13.3",
     "chokidar": "^3.6.0",
     "execa": "^9.3.0",
     "fs-extra": "^11.2.0"

epicshop/package.json

@@ -7,6 +7,7 @@ import { createRoot } from 'react-dom/client'
 // an array of the state and a no-op function: () => {}
 // 🦺 note you may need to ignore some typescript errors here. We'll fix them later.
 // Feel free to make the `useState` a generic though!
+// ⚠️ don't forget to `export` your `useState` function so the tests can find it
 
 function Counter() {
 	const [count, setCount] = useState(0)

exercises/01.use-state/01.problem.initial-state/index.tsx

@@ -0,0 +1,18 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { screen, waitFor } from '@testing-library/dom'
+import { userEvent } from '@testing-library/user-event'
+
+await import('.')
+
+const button = 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(button)
+await testStep(
+	`The button text should still be 0 because our useState isn't working yet`,
+	() => waitFor(() => expect(button).to.have.text('0')),
+)

exercises/01.use-state/01.solution.initial-state/checkbox.test.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	const state = initialState
 	const setState = () => {}
 	return [state, setState] as const

exercises/01.use-state/01.solution.initial-state/index.tsx

@@ -0,0 +1,34 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+
+const { useState } = await import('./index.tsx')
+
+await testStep(
+	({ type }) =>
+		type === 'fail'
+			? 'Did you forget to export your `useState`? I need you to export it so I can test it.'
+			: 'useState is exported correctly',
+	() => expect(useState).to.be.a('function'),
+)
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const [state, setState] = useState(5)
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'useState is returning the initial state'
+			: 'useState is not returning the initial state',
+	() => {
+		expect(state).to.equal(5)
+	},
+)
+
+await testStep(
+	({ type }) =>
+		type === 'pass'
+			? 'useState is returning a function'
+			: 'useState is not returning a function',
+	() => {
+		expect(setState).to.be.a('function')
+	},
+)

exercises/01.use-state/01.solution.initial-state/state.test.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	// 🐨 change this to let
 	const state = initialState
 	// 🐨 update this to accept newState and assign state to that

exercises/01.use-state/02.problem.update-state/index.tsx

@@ -0,0 +1,18 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { screen, waitFor } from '@testing-library/dom'
+import { userEvent } from '@testing-library/user-event'
+
+await import('.')
+
+const button = 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(button)
+await testStep(
+	`The button text should still be 0 because our useState isn't working yet`,
+	() => waitFor(() => expect(button).to.have.text('0')),
+)

exercises/01.use-state/02.solution.update-state/checkbox.test.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	let state = initialState
 	const setState = (newState: State) => (state = newState)
 	return [state, setState] as const

exercises/01.use-state/02.solution.update-state/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	let state = initialState
 	// 🐨 update this function to call render after setting the state
 	const setState = (newState: State) => (state = newState)

exercises/01.use-state/03.problem.re-render/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	let state = initialState
 	const setState = (newState: State) => {
 		state = newState

exercises/01.use-state/03.solution.re-render/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 // 🐨 create state and setState variables here using let
 // 🦺 set their type to "any"
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	// 🐨 remove the "let" and "const" here so this function references the
 	// variables declared above
 	// 🐨 Next, change this so we only do these assignments if the state is undefined

exercises/01.use-state/04.problem.preserve-state/index.tsx

@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client'
 
 let state: any, setState: any
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	if (state === undefined) {
 		state = initialState
 		setState = (newState: State) => {

exercises/01.use-state/04.solution.preserve-state/index.tsx

@@ -9,7 +9,7 @@ import { createRoot } from 'react-dom/client'
 
 let state: any, setState: any
 
-function useState<State>(initialState: State) {
+export function useState<State>(initialState: State) {
 	// 🐨 change this to check whether the phase is INITIALIZATION
 	if (state === undefined) {
 		state = initialState