Skip to content

Commit 54b3169

Browse files
kentcdoddskentcdodds
committed
add more tests
1 parent 6c2e301 commit 54b3169

File tree

9 files changed

+233
-9
lines changed

9 files changed

+233
-9
lines changed

‎exercises/01.use-state/02.solution.update-state/checkbox.test.tsx renamed to ‎exercises/01.use-state/01.solution.initial-state/counter.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { userEvent } from '@testing-library/user-event'
44

55
await import('.')
66

7-
const button = await testStep(
7+
const counterButton = await testStep(
88
({ type }) =>
99
type === 'fail'
1010
? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
1111
: 'Found the counter button that starts at 0',
1212
() => screen.findByRole('button', { name: /0/i }),
1313
)
14-
await userEvent.click(button)
14+
await userEvent.click(counterButton)
1515
await testStep(
16-
`The button text should still be 0 because our useState isn't working yet`,
17-
() => waitFor(() => expect(button).to.have.text('0')),
16+
`The button text should still be 0 after clicking because our useState isn't working yet`,
17+
() => waitFor(() => expect(counterButton).to.have.text('0')),
1818
)

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
import { screen, waitFor } from '@testing-library/dom'
3+
import { userEvent } from '@testing-library/user-event'
4+
5+
await import('.')
6+
7+
const counterButton = await testStep(
8+
({ type }) =>
9+
type === 'fail'
10+
? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
11+
: 'Found the counter button that starts at 0',
12+
() => screen.findByRole('button', { name: /0/i }),
13+
)
14+
await userEvent.click(counterButton)
15+
await testStep(
16+
`The button text should still be 0 after clicking because our useState isn't working yet`,
17+
() => waitFor(() => expect(counterButton).to.have.text('0')),
18+
)

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
3+
const { useState } = await import('./index.tsx')
4+
5+
await testStep(
6+
({ type }) =>
7+
type === 'fail'
8+
? 'Did you forget to export your `useState`? I need you to export it so I can test it.'
9+
: 'useState is exported correctly',
10+
() => expect(useState).to.be.a('function'),
11+
)
12+
13+
// eslint-disable-next-line react-hooks/rules-of-hooks
14+
const [state, setState] = useState(5)
15+
16+
await testStep(
17+
({ type }) =>
18+
type === 'pass'
19+
? 'useState is returning the initial state'
20+
: 'useState is not returning the initial state',
21+
() => {
22+
expect(state).to.equal(5)
23+
},
24+
)
25+
26+
await testStep(
27+
({ type }) =>
28+
type === 'pass'
29+
? 'useState is returning a function'
30+
: 'useState is not returning a function',
31+
() => {
32+
expect(setState).to.be.a('function')
33+
},
34+
)
35+
36+
await testStep(
37+
'There are no testable changes in this exercise step from the previous one. Keep going!',
38+
() => {},
39+
)

‎exercises/01.use-state/03.solution.re-render/counter.test.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
import { screen, waitFor } from '@testing-library/dom'
3+
import { userEvent } from '@testing-library/user-event'
4+
5+
await import('.')
6+
7+
const counterButton = await testStep(
8+
({ type }) =>
9+
type === 'fail'
10+
? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
11+
: 'Found the counter button that starts at 0',
12+
() => screen.findByRole('button', { name: /0/i }),
13+
)
14+
await userEvent.click(counterButton)
15+
await testStep(
16+
`The button text should still be 0 after clicking because our useState isn't working yet`,
17+
() => waitFor(() => expect(counterButton).to.have.text('0')),
18+
)

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
3+
const { useState } = await import('./index.tsx')
4+
5+
await testStep(
6+
({ type }) =>
7+
type === 'fail'
8+
? 'Did you forget to export your `useState`? I need you to export it so I can test it.'
9+
: 'useState is exported correctly',
10+
() => expect(useState).to.be.a('function'),
11+
)
12+
13+
// eslint-disable-next-line react-hooks/rules-of-hooks
14+
const [state, setState] = useState(5)
15+
16+
await testStep(
17+
({ type }) =>
18+
type === 'pass'
19+
? 'useState is returning the initial state'
20+
: 'useState is not returning the initial state',
21+
() => {
22+
expect(state).to.equal(5)
23+
},
24+
)
25+
26+
await testStep(
27+
({ type }) =>
28+
type === 'pass'
29+
? 'useState is returning a function'
30+
: 'useState is not returning a function',
31+
() => {
32+
expect(setState).to.be.a('function')
33+
},
34+
)
35+
36+
await testStep(
37+
'There are no still testable changes in this exercise step from the previous one. Keep going!',
38+
() => {},
39+
)

‎exercises/01.use-state/01.solution.initial-state/checkbox.test.tsx renamed to ‎exercises/01.use-state/04.solution.preserve-state/counter.test.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import { userEvent } from '@testing-library/user-event'
44

55
await import('.')
66

7-
const button = await testStep(
7+
const counterButton = await testStep(
88
({ type }) =>
99
type === 'fail'
1010
? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
1111
: 'Found the counter button that starts at 0',
1212
() => screen.findByRole('button', { name: /0/i }),
1313
)
14-
await userEvent.click(button)
15-
await testStep(
16-
`The button text should still be 0 because our useState isn't working yet`,
17-
() => waitFor(() => expect(button).to.have.text('0')),
14+
await userEvent.click(counterButton)
15+
await testStep(`The button text should be 1 after clicking`, () =>
16+
waitFor(() => expect(counterButton).to.have.text('1')),
1817
)

‎exercises/01.use-state/04.solution.preserve-state/state.test.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
3+
const { useState } = await import('./index.tsx')
4+
5+
await testStep(
6+
({ type }) =>
7+
type === 'fail'
8+
? 'Did you forget to export your `useState`? I need you to export it so I can test it.'
9+
: 'useState is exported correctly',
10+
() => expect(useState).to.be.a('function'),
11+
)
12+
13+
// eslint-disable-next-line react-hooks/rules-of-hooks
14+
const [state, setState] = useState(5)
15+
16+
await testStep(
17+
({ type }) =>
18+
type === 'pass'
19+
? 'useState is returning the initial state'
20+
: 'useState is not returning the initial state',
21+
() => {
22+
expect(state).to.equal(5)
23+
},
24+
)
25+
26+
await testStep(
27+
({ type }) =>
28+
type === 'pass'
29+
? 'useState is returning a function'
30+
: 'useState is not returning a function',
31+
() => {
32+
expect(setState).to.be.a('function')
33+
},
34+
)
35+
36+
await testStep(
37+
'There are no still testable changes in this exercise step from the previous one. Keep going!',
38+
() => {},
39+
)

‎exercises/02.multiple-hooks/01.solution.phase/counter.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
import { screen, waitFor } from '@testing-library/dom'
3+
import { userEvent } from '@testing-library/user-event'
4+
5+
await import('.')
6+
7+
const counterButton = await testStep(
8+
({ type }) =>
9+
type === 'fail'
10+
? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
11+
: 'Found the counter button that starts at 0',
12+
() => screen.findByRole('button', { name: /0/i }),
13+
)
14+
await userEvent.click(counterButton)
15+
await testStep(
16+
({ type }) =>
17+
type === 'pass'
18+
? `The button text should be 1 after clicking.`
19+
: `The button text should be 1 after clicking, but it's not. This is most likely because the second useState call is getting the value from the first one so "enabled" is set to "0". Add the phase tracking.`,
20+
() => waitFor(() => expect(counterButton).to.have.text('1')),
21+
)

‎exercises/02.multiple-hooks/02.solution.hook-id/counter.test.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { expect, testStep } from '@epic-web/workshop-utils/test'
2+
import { screen, waitFor } from '@testing-library/dom'
3+
import { userEvent } from '@testing-library/user-event'
4+
5+
await import('.')
6+
7+
const counterButton = await testStep(
8+
({ type }) =>
9+
type === 'fail'
10+
? 'Could not find the counter button. It should start at 0. Did you forget to return the initial state from your useState?'
11+
: 'Found the counter button that starts at 0',
12+
() => screen.findByRole('button', { name: /0/i }),
13+
)
14+
await userEvent.click(counterButton)
15+
await testStep(
16+
({ type }) =>
17+
type === 'pass'
18+
? `The button text should be 1 after clicking.`
19+
: `The button text should be 1 after clicking, but it's not. This is most likely because the second useState call is getting the value from the first one so "enabled" is set to "0". Add the phase tracking.`,
20+
() => waitFor(() => expect(counterButton).to.have.text('1')),
21+
)
22+
const disableButton = await testStep(
23+
({ type }) =>
24+
type === 'fail'
25+
? 'Could not find the disable button. It should start with the text "disable". Did you forget to return the initial state from your useState?'
26+
: 'Found the disable button that starts with "disable" text',
27+
() => screen.findByRole('button', { name: /Disable/i }),
28+
)
29+
await userEvent.click(disableButton)
30+
await testStep(
31+
({ type }) =>
32+
type === 'pass'
33+
? `The counter should be disabled after clicking the disable button.`
34+
: `The counter should be disabled after clicking the disable button, but it's not. Did you properly set the id for each useState call?`,
35+
() => waitFor(() => expect(counterButton).to.have.attribute('disabled')),
36+
)
37+
await testStep(
38+
({ type }) =>
39+
type === 'pass'
40+
? `The button text should be "enable" after clicking the disable button.`
41+
: `The button text should be "enable" after clicking the disable button, but it's not. Did you properly set the id for each useState call?`,
42+
() => waitFor(() => expect(disableButton).to.have.text('Enable')),
43+
)
44+
45+
await testStep(
46+
({ type }) =>
47+
type === 'pass'
48+
? `The counter should keep its text content even when disabled.`
49+
: `The counter should keep its text content even when disabled, but it's not. Did you properly set the id for each useState call?`,
50+
() => waitFor(() => expect(counterButton).to.have.text('1')),
51+
)

0 commit comments

Comments
 (0)