Skip to content

Commit 7f3a506

Browse files
kentcdoddskentcdodds
committed
finish tests for 04 and 05
1 parent 609ee76 commit 7f3a506

File tree

13 files changed

+364
-18
lines changed

13 files changed

+364
-18
lines changed

‎exercises/04.dom/01.solution.ref/tilt.test.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
3+
import './index.tsx'
4+
5+
await testStep('VanillaTilt is initialized', async () => {
6+
await dtl.waitFor(() => {
7+
const tiltElement = document.querySelector('.tilt-root')
8+
expect(tiltElement).toHaveProperty('vanillaTilt')
9+
})
10+
})

‎exercises/04.dom/01.solution.ref/toggle.test.ts

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
const { screen, fireEvent } = dtl
3+
4+
import './index.tsx'
5+
6+
const toggleButton = await testStep(
7+
'The user can see the toggle visibility button',
8+
async () => {
9+
const result = await screen.findByRole('button', {
10+
name: /toggle visibility/i,
11+
})
12+
expect(result).toBeInTheDocument()
13+
return result
14+
},
15+
)
16+
17+
await testStep('The Tilt component is initially visible', async () => {
18+
return dtl.waitFor(() => {
19+
const result = document.querySelector('.tilt-root')
20+
expect(result).toBeInTheDocument()
21+
return result
22+
})
23+
})
24+
25+
const countButton = await testStep(
26+
'The count button is visible inside the Tilt component',
27+
async () => {
28+
const result = await screen.findByRole('button', { name: /0/i })
29+
expect(result).toBeInTheDocument()
30+
return result
31+
},
32+
)
33+
34+
await testStep('The user can increment the count', async () => {
35+
fireEvent.click(countButton)
36+
const updatedButton = await screen.findByRole('button', { name: /1/i })
37+
expect(updatedButton).toBeInTheDocument()
38+
})
39+
40+
await testStep(
41+
'The user can toggle the Tilt component visibility',
42+
async () => {
43+
fireEvent.click(toggleButton)
44+
await dtl.waitFor(() => {
45+
expect(document.querySelector('.tilt-root')).not.toBeInTheDocument()
46+
})
47+
48+
fireEvent.click(toggleButton)
49+
const visibleTiltElement = await dtl.waitFor(() => {
50+
const result = document.querySelector('.tilt-root')
51+
expect(result).toBeInTheDocument()
52+
return result
53+
})
54+
expect(visibleTiltElement).toBeInTheDocument()
55+
},
56+
)

‎exercises/04.dom/02.problem.deps/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,10 @@ function App() {
7070
onChange={event => {
7171
const formData = new FormData(event.currentTarget)
7272
setOptions({
73-
max: formData.get('max') as any,
74-
speed: formData.get('speed') as any,
73+
max: Number(formData.get('max')),
74+
speed: Number(formData.get('speed')),
7575
glare: formData.get('glare') === 'on',
76-
maxGlare: formData.get('maxGlare') as any,
76+
maxGlare: Number(formData.get('maxGlare')),
7777
})
7878
}}
7979
>

‎exercises/04.dom/02.solution.deps/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@ function App() {
6161
onChange={event => {
6262
const formData = new FormData(event.currentTarget)
6363
setOptions({
64-
max: formData.get('max') as any,
65-
speed: formData.get('speed') as any,
64+
max: Number(formData.get('max')),
65+
speed: Number(formData.get('speed')),
6666
glare: formData.get('glare') === 'on',
67-
maxGlare: formData.get('maxGlare') as any,
67+
maxGlare: Number(formData.get('maxGlare')),
6868
})
6969
}}
7070
>

‎exercises/04.dom/02.solution.deps/tilt.test.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
import type VanillaTilt from 'vanilla-tilt'
3+
const { screen, fireEvent, waitFor } = dtl
4+
5+
interface HTMLVanillaTiltElement extends HTMLDivElement {
6+
vanillaTilt?: VanillaTilt
7+
}
8+
9+
import './index.tsx'
10+
11+
const tiltElement = await testStep('Initialize tilt element', async () => {
12+
const result = await waitFor(() => {
13+
const element = document.querySelector('.tilt-root')
14+
expect(element).toBeInTheDocument()
15+
return element
16+
})
17+
await waitFor(() => {
18+
expect(result).toHaveProperty('vanillaTilt')
19+
})
20+
return result as HTMLVanillaTiltElement
21+
})
22+
23+
await testStep('Find count button', async () => {
24+
const button = await screen.findByRole('button', { name: /0/i })
25+
expect(button).toBeInTheDocument()
26+
return button as HTMLButtonElement
27+
})
28+
29+
const maxInput = await testStep('Find max input', async () => {
30+
const input = (await screen.findByLabelText('Max:')) as HTMLInputElement
31+
expect(input).toBeInTheDocument()
32+
return input as HTMLInputElement
33+
})
34+
35+
await testStep('Tilt effect resets when options change', async () => {
36+
const initialVanillaTilt = tiltElement.vanillaTilt
37+
fireEvent.change(maxInput, { target: { value: '30' } })
38+
await waitFor(() => {
39+
expect(tiltElement.vanillaTilt).not.toBe(initialVanillaTilt)
40+
})
41+
})
42+
43+
await testStep('Tilt effect uses updated options', async () => {
44+
const newMax = 35
45+
fireEvent.change(maxInput, { target: { value: newMax.toString() } })
46+
await waitFor(() => {
47+
// @ts-expect-error this is not exposed
48+
expect(tiltElement.vanillaTilt?.settings.max).toBe(newMax)
49+
})
50+
})

‎exercises/04.dom/02.solution.deps/toggle.test.ts

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
const { screen, fireEvent } = dtl
3+
4+
import './index.tsx'
5+
6+
const toggleButton = await testStep(
7+
'The user can see the toggle visibility button',
8+
async () => {
9+
const result = await screen.findByRole('button', {
10+
name: /toggle visibility/i,
11+
})
12+
expect(result).toBeInTheDocument()
13+
return result
14+
},
15+
)
16+
17+
await testStep('The Tilt component is initially visible', async () => {
18+
return dtl.waitFor(() => {
19+
const result = document.querySelector('.tilt-root')
20+
expect(result).toBeInTheDocument()
21+
return result
22+
})
23+
})
24+
25+
const countButton = await testStep(
26+
'The count button is visible inside the Tilt component',
27+
async () => {
28+
const result = await screen.findByRole('button', { name: /0/i })
29+
expect(result).toBeInTheDocument()
30+
return result
31+
},
32+
)
33+
34+
await testStep('The user can increment the count', async () => {
35+
fireEvent.click(countButton)
36+
const updatedButton = await screen.findByRole('button', { name: /1/i })
37+
expect(updatedButton).toBeInTheDocument()
38+
})
39+
40+
await testStep(
41+
'The user can toggle the Tilt component visibility',
42+
async () => {
43+
fireEvent.click(toggleButton)
44+
await dtl.waitFor(() => {
45+
expect(document.querySelector('.tilt-root')).not.toBeInTheDocument()
46+
})
47+
48+
fireEvent.click(toggleButton)
49+
const visibleTiltElement = await dtl.waitFor(() => {
50+
const result = document.querySelector('.tilt-root')
51+
expect(result).toBeInTheDocument()
52+
return result
53+
})
54+
expect(visibleTiltElement).toBeInTheDocument()
55+
},
56+
)

‎exercises/04.dom/03.problem.primitives/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ function App() {
6363
onChange={event => {
6464
const formData = new FormData(event.currentTarget)
6565
setOptions({
66-
max: formData.get('max') as any,
67-
speed: formData.get('speed') as any,
66+
max: Number(formData.get('max')),
67+
speed: Number(formData.get('speed')),
6868
glare: formData.get('glare') === 'on',
69-
maxGlare: formData.get('maxGlare') as any,
69+
maxGlare: Number(formData.get('maxGlare')),
7070
})
7171
}}
7272
>

‎exercises/04.dom/03.solution.primitives/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ function App() {
6060
onChange={event => {
6161
const formData = new FormData(event.currentTarget)
6262
setOptions({
63-
max: formData.get('max') as any,
64-
speed: formData.get('speed') as any,
63+
max: Number(formData.get('max')),
64+
speed: Number(formData.get('speed')),
6565
glare: formData.get('glare') === 'on',
66-
maxGlare: formData.get('maxGlare') as any,
66+
maxGlare: Number(formData.get('maxGlare')),
6767
})
6868
}}
6969
>

‎exercises/04.dom/03.solution.primitives/tilt.test.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
import type VanillaTilt from 'vanilla-tilt'
3+
const { screen, fireEvent, waitFor } = dtl
4+
5+
interface HTMLVanillaTiltElement extends HTMLDivElement {
6+
vanillaTilt?: VanillaTilt
7+
}
8+
9+
import './index.tsx'
10+
11+
const tiltElement = await testStep('Initialize tilt element', async () => {
12+
const result = await waitFor(() => {
13+
const element = document.querySelector('.tilt-root')
14+
expect(element).toBeInTheDocument()
15+
return element
16+
})
17+
await waitFor(() => {
18+
expect(result).toHaveProperty('vanillaTilt')
19+
})
20+
return result as HTMLVanillaTiltElement
21+
})
22+
23+
const countButton = await testStep('Find count button', async () => {
24+
const button = await screen.findByRole('button', { name: /0/i })
25+
expect(button).toBeInTheDocument()
26+
return button as HTMLButtonElement
27+
})
28+
29+
const maxInput = await testStep('Find max input', async () => {
30+
const input = (await screen.findByLabelText('Max:')) as HTMLInputElement
31+
expect(input).toBeInTheDocument()
32+
return input as HTMLInputElement
33+
})
34+
35+
await testStep('Tilt effect persists after count increment', async () => {
36+
const initialVanillaTilt = tiltElement.vanillaTilt
37+
fireEvent.click(countButton)
38+
await screen.findByRole('button', { name: /1/i })
39+
expect(tiltElement.vanillaTilt, 'vanilla tilt was reinitialized').toBe(
40+
initialVanillaTilt,
41+
)
42+
})
43+
44+
await testStep('Tilt effect resets when options change', async () => {
45+
const initialVanillaTilt = tiltElement.vanillaTilt
46+
fireEvent.change(maxInput, { target: { value: '30' } })
47+
await waitFor(() => {
48+
expect(tiltElement.vanillaTilt).not.toBe(initialVanillaTilt)
49+
})
50+
})
51+
52+
await testStep('Tilt effect uses updated options', async () => {
53+
const newMax = 35
54+
fireEvent.change(maxInput, { target: { value: newMax.toString() } })
55+
await waitFor(() => {
56+
// @ts-expect-error this is not exposed
57+
expect(tiltElement.vanillaTilt?.settings.max).toBe(newMax)
58+
})
59+
})

‎exercises/04.dom/03.solution.primitives/toggle.test.ts

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
const { screen, fireEvent } = dtl
3+
4+
import './index.tsx'
5+
6+
const toggleButton = await testStep(
7+
'The user can see the toggle visibility button',
8+
async () => {
9+
const result = await screen.findByRole('button', {
10+
name: /toggle visibility/i,
11+
})
12+
expect(result).toBeInTheDocument()
13+
return result
14+
},
15+
)
16+
17+
await testStep('The Tilt component is initially visible', async () => {
18+
return dtl.waitFor(() => {
19+
const result = document.querySelector('.tilt-root')
20+
expect(result).toBeInTheDocument()
21+
return result
22+
})
23+
})
24+
25+
const countButton = await testStep(
26+
'The count button is visible inside the Tilt component',
27+
async () => {
28+
const result = await screen.findByRole('button', { name: /0/i })
29+
expect(result).toBeInTheDocument()
30+
return result
31+
},
32+
)
33+
34+
await testStep('The user can increment the count', async () => {
35+
fireEvent.click(countButton)
36+
const updatedButton = await screen.findByRole('button', { name: /1/i })
37+
expect(updatedButton).toBeInTheDocument()
38+
})
39+
40+
await testStep(
41+
'The user can toggle the Tilt component visibility',
42+
async () => {
43+
fireEvent.click(toggleButton)
44+
await dtl.waitFor(() => {
45+
expect(document.querySelector('.tilt-root')).not.toBeInTheDocument()
46+
})
47+
48+
fireEvent.click(toggleButton)
49+
const visibleTiltElement = await dtl.waitFor(() => {
50+
const result = document.querySelector('.tilt-root')
51+
expect(result).toBeInTheDocument()
52+
return result
53+
})
54+
expect(visibleTiltElement).toBeInTheDocument()
55+
},
56+
)

‎exercises/05.unique-ids/01.problem.use-id/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ function App() {
7474
onChange={event => {
7575
const formData = new FormData(event.currentTarget)
7676
setOptions({
77-
max: formData.get('max') as any,
78-
speed: formData.get('speed') as any,
77+
max: Number(formData.get('max')),
78+
speed: Number(formData.get('speed')),
7979
glare: formData.get('glare') === 'on',
80-
maxGlare: formData.get('maxGlare') as any,
80+
maxGlare: Number(formData.get('maxGlare')),
8181
})
8282
}}
8383
>

‎exercises/05.unique-ids/01.solution.use-id/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,10 @@ function App() {
7272
onChange={event => {
7373
const formData = new FormData(event.currentTarget)
7474
setOptions({
75-
max: formData.get('max') as any,
76-
speed: formData.get('speed') as any,
75+
max: Number(formData.get('max')),
76+
speed: Number(formData.get('speed')),
7777
glare: formData.get('glare') === 'on',
78-
maxGlare: formData.get('maxGlare') as any,
78+
maxGlare: Number(formData.get('maxGlare')),
7979
})
8080
}}
8181
>

0 commit comments

Comments
 (0)