Skip to content

Commit 8adeb30

Browse files
kentcdoddskentcdodds
committed
finish all tests
1 parent 7f3a506 commit 8adeb30

File tree

4 files changed

+273
-0
lines changed

4 files changed

+273
-0
lines changed

‎exercises/06.tic-tac-toe/01.solution.set-state-callback/board-game.test.ts

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
const { screen, fireEvent, waitFor } = dtl
3+
4+
await import('./index.tsx')
5+
6+
function getSquares() {
7+
return waitFor(() => {
8+
const squares = document.querySelectorAll('button.square')
9+
expect(squares).toHaveLength(9)
10+
return squares
11+
})
12+
}
13+
14+
await testStep('Initial board state', getSquares)
15+
16+
const statusElement = await testStep('Find status element', async () => {
17+
const status = await screen.findByText(/Next player: X/)
18+
expect(status).toBeInTheDocument()
19+
return status
20+
})
21+
22+
await testStep('Play a game', async () => {
23+
const squares = await getSquares()
24+
25+
// X plays
26+
fireEvent.click(squares[0])
27+
await waitFor(() => {
28+
expect(squares[0]).toHaveTextContent('X')
29+
})
30+
expect(statusElement).toHaveTextContent('Next player: O')
31+
32+
// O plays
33+
fireEvent.click(squares[4])
34+
await waitFor(() => {
35+
expect(squares[4]).toHaveTextContent('O')
36+
})
37+
expect(statusElement).toHaveTextContent('Next player: X')
38+
39+
// X plays
40+
fireEvent.click(squares[1])
41+
// O plays
42+
fireEvent.click(squares[5])
43+
// X plays and wins
44+
fireEvent.click(squares[2])
45+
46+
await waitFor(() => {
47+
expect(statusElement).toHaveTextContent('Winner: X')
48+
})
49+
})
50+
51+
await testStep('Restart game', async () => {
52+
const restartButton = await screen.findByRole('button', { name: /restart/i })
53+
fireEvent.click(restartButton)
54+
55+
await waitFor(async () => {
56+
const squares = await getSquares()
57+
expect(squares).toHaveLength(9)
58+
expect(statusElement).toHaveTextContent('Next player: X')
59+
})
60+
})
61+
62+
await testStep('Cannot play on occupied square', async () => {
63+
const squares = await getSquares()
64+
65+
fireEvent.click(squares[0])
66+
await waitFor(() => {
67+
expect(squares[0]).toHaveTextContent('X')
68+
})
69+
70+
fireEvent.click(squares[0])
71+
await waitFor(() => {
72+
expect(squares[0]).toHaveTextContent('X')
73+
expect(statusElement).toHaveTextContent('Next player: O')
74+
})
75+
})
76+
77+
await testStep('Game ends in a draw', async () => {
78+
const restartButton = await screen.findByRole('button', { name: /restart/i })
79+
fireEvent.click(restartButton)
80+
await new Promise(resolve => setTimeout(resolve, 10))
81+
82+
const squares = await getSquares()
83+
const moves = [0, 1, 2, 4, 3, 5, 7, 6, 8]
84+
85+
for (const move of moves) {
86+
fireEvent.click(squares[move])
87+
await new Promise(resolve => setTimeout(resolve, 10))
88+
}
89+
90+
await waitFor(() => {
91+
expect(statusElement).toHaveTextContent(`Cat's game`)
92+
})
93+
})

‎exercises/06.tic-tac-toe/02.problem.local-storage/README.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,8 @@ For keeping the squares up-to-date in `localStorage`, you'll want to use
1515

1616
📜 If you need to learn a bit about the `localStorage` API, you can check out the
1717
[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
18+
19+
<callout-warning>
20+
🚨 Note this exercise depends on `localStorage` and so the tests could
21+
interfer with your work by changing the `localStorage` you're working with.
22+
</callout-warning>

‎exercises/06.tic-tac-toe/02.solution.local-storage/local-storage.test.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
const { screen, fireEvent, waitFor } = dtl
3+
4+
const localStorageKey = 'squares'
5+
const initialState = ['X', null, 'O', null, 'X', null, null, null, null]
6+
window.localStorage.setItem(localStorageKey, JSON.stringify(initialState))
7+
8+
// Dynamically import the game component
9+
await import('./index.tsx')
10+
11+
await testStep('Game initializes from localStorage', async () => {
12+
await waitFor(() => {
13+
const squares = document.querySelectorAll('button.square')
14+
expect(squares[0]).toHaveTextContent('X')
15+
expect(squares[2]).toHaveTextContent('O')
16+
expect(squares[4]).toHaveTextContent('X')
17+
})
18+
})
19+
20+
await testStep('Game updates localStorage after a move', async () => {
21+
// Make a move
22+
const squares = document.querySelectorAll('button.square')
23+
fireEvent.click(squares[1])
24+
25+
// Verify localStorage is updated
26+
await waitFor(() => {
27+
const storedState = JSON.parse(
28+
window.localStorage.getItem(localStorageKey) || '[]',
29+
)
30+
expect(storedState).toEqual([
31+
'X',
32+
'O',
33+
'O',
34+
null,
35+
'X',
36+
null,
37+
null,
38+
null,
39+
null,
40+
])
41+
})
42+
})
43+
44+
await testStep('Restart button clears localStorage', async () => {
45+
const restartButton = await screen.findByRole('button', { name: /restart/i })
46+
fireEvent.click(restartButton)
47+
48+
// Check if localStorage is cleared
49+
await waitFor(() => {
50+
const storedState = JSON.parse(
51+
window.localStorage.getItem(localStorageKey) || '[]',
52+
)
53+
expect(storedState).toEqual([
54+
null,
55+
null,
56+
null,
57+
null,
58+
null,
59+
null,
60+
null,
61+
null,
62+
null,
63+
])
64+
})
65+
66+
// Check if the board is reset
67+
const squares = document.querySelectorAll('button.square')
68+
expect(squares).toHaveLength(9)
69+
})

‎exercises/06.tic-tac-toe/03.solution.history/local-storage.test.ts

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2+
const { screen, fireEvent, waitFor } = dtl
3+
4+
const localStorageKey = 'tic-tac-toe'
5+
const initialState = {
6+
history: [['X', null, 'O', null, 'X', null, null, null, null]],
7+
currentStep: 0,
8+
}
9+
window.localStorage.setItem(localStorageKey, JSON.stringify(initialState))
10+
11+
// Dynamically import the game component
12+
await import('./index.tsx')
13+
14+
function getSquares() {
15+
return waitFor(() => {
16+
const squares = document.querySelectorAll('button.square')
17+
expect(squares).toHaveLength(9)
18+
return squares
19+
})
20+
}
21+
22+
await testStep('Game initializes from localStorage', async () => {
23+
await waitFor(async () => {
24+
const squares = await getSquares()
25+
expect(squares[0]).toHaveTextContent('X')
26+
expect(squares[2]).toHaveTextContent('O')
27+
expect(squares[4]).toHaveTextContent('X')
28+
})
29+
})
30+
31+
await testStep('Game updates localStorage after a move', async () => {
32+
// Make a move
33+
const squares = await getSquares()
34+
fireEvent.click(squares[1])
35+
36+
// Verify localStorage is updated
37+
await waitFor(() => {
38+
const storedState = JSON.parse(
39+
window.localStorage.getItem(localStorageKey) || '{}',
40+
)
41+
expect(storedState.history).toHaveLength(2)
42+
expect(storedState.currentStep).toBe(1)
43+
expect(storedState.history[1]).toEqual([
44+
'X',
45+
'O',
46+
'O',
47+
null,
48+
'X',
49+
null,
50+
null,
51+
null,
52+
null,
53+
])
54+
})
55+
})
56+
57+
await testStep('Adding another move', async () => {
58+
const squares = await getSquares()
59+
fireEvent.click(squares[5])
60+
await new Promise(resolve => setTimeout(resolve, 100))
61+
})
62+
63+
await testStep('Game history allows going back to previous moves', async () => {
64+
// Go back to the first move
65+
const moveButtons = screen.getAllByRole('button', { name: /Go to move/i })
66+
fireEvent.click(moveButtons[0])
67+
68+
// Verify the board state
69+
await waitFor(async () => {
70+
const squares = await getSquares()
71+
expect(squares[0]).toHaveTextContent('X')
72+
expect(squares[1]).toHaveTextContent('O')
73+
expect(squares[2]).toHaveTextContent('O')
74+
expect(squares[4]).toHaveTextContent('X')
75+
})
76+
77+
// Verify localStorage is updated
78+
const storedState = JSON.parse(
79+
window.localStorage.getItem(localStorageKey) || '{}',
80+
)
81+
expect(storedState.currentStep).toBe(1)
82+
})
83+
84+
await testStep('Restart button clears game history', async () => {
85+
const restartButton = await screen.findByRole('button', { name: /restart/i })
86+
fireEvent.click(restartButton)
87+
88+
// Check if localStorage is reset
89+
await waitFor(() => {
90+
const storedState = JSON.parse(
91+
window.localStorage.getItem(localStorageKey) || '{}',
92+
)
93+
expect(storedState).toEqual({
94+
history: [Array(9).fill(null)],
95+
currentStep: 0,
96+
})
97+
})
98+
99+
// Check if the board is reset
100+
const squares = await getSquares()
101+
squares.forEach(square => expect(square).toHaveTextContent(''))
102+
103+
// Check if move history is cleared
104+
const moveButtons = screen.queryAllByRole('button', { name: /Go to/i })
105+
expect(moveButtons).toHaveLength(1) // Only "Go to game start" should remain
106+
})

0 commit comments

Comments
 (0)