Skip to content

Commit 48e1eee

Browse files
kettanaitokettanaito
committed
04/02: add solution
1 parent e0d8e15 commit 48e1eee

21 files changed

+324
-7
lines changed

‎exercises/04.debugging/02.solution.debugger/.vscode/launch.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node-terminal",
6+
"name": "Run Vitest Browser",
7+
"request": "launch",
8+
"command": "npm test -- --inspect-brk --browser --no-file-parallelism",
9+
"env": {
10+
"DEBUG": "true"
11+
}
12+
},
13+
{
14+
"type": "chrome",
15+
"request": "attach",
16+
"name": "Attach to Vitest Browser",
17+
"port": 9229
18+
}
19+
],
20+
"compounds": [
21+
{
22+
"name": "Debug Vitest Browser",
23+
"configurations": ["Attach to Vitest Browser", "Run Vitest Browser"],
24+
"stopAll": true
25+
}
26+
]
27+
}

‎exercises/04.debugging/02.solution.debugger/README.mdx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Debugger
22

3-
1. Create a Visual Studio Code config.
4-
1. Showcase how to run Vitest with `--inspect`/`--inspect-brk` flag (and the difference between them).
5-
1. Showcase how to attach a debugger to the running browser.
3+
1. Explain why a usual debugger won't cut it (two different threads: node and browser).
4+
1. Create a Visual Studio Code `launch` config.
5+
1. Showcase how to run Vitest from the launch task.
6+
7+
## Steps
8+
9+
1. Create `.vscode/launch.json`.
10+
1. Modify `vite.config.ts` to set `headless` based on the `process.env.DEBUG` variable. We want to see the browser while debugging, but we don't need to while running the tests normally.
11+
1. Complete the instructions in the test suite (set a debugger).
12+
1. Run the tests via the "Debug Vitest Browser" command in the IDE.

‎exercises/04.debugging/02.solution.debugger/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
</html>

‎exercises/04.debugging/02.solution.debugger/package.json

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,25 @@
11
{
22
"type": "module",
3-
"name": "exercises_04.debugging_02.solution.debugger"
3+
"name": "exercises_04.debugging_02.solution.debugger",
4+
"scripts": {
5+
"dev": "vite",
6+
"test": "vitest"
7+
},
8+
"dependencies": {
9+
"react": "^19.0.0",
10+
"react-dom": "^19.0.0"
11+
},
12+
"devDependencies": {
13+
"@types/node": "^22.10.6",
14+
"@types/react": "^19.0.6",
15+
"@types/react-dom": "^19.0.3",
16+
"@vitejs/plugin-react": "^4.3.4",
17+
"@vitest/browser": "^3.0.4",
18+
"autoprefixer": "^10.4.20",
19+
"playwright": "^1.49.1",
20+
"postcss": "^8.4.49",
21+
"tailwindcss": "^3.4.17",
22+
"vite": "^6.0.7",
23+
"vitest": "^3.0.4"
24+
}
425
}

‎exercises/04.debugging/02.solution.debugger/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎exercises/04.debugging/02.solution.debugger/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎exercises/04.debugging/02.solution.debugger/src/app.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { TicTacToe } from './tic-tac-toe.js'
2+
3+
export function App() {
4+
return <TicTacToe />
5+
}

‎exercises/04.debugging/02.solution.debugger/src/debug.browser.test.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { page } from '@vitest/browser/context'
2+
import { render } from 'vitest-browser-react'
3+
import { TicTacToe } from './tic-tac-toe.js'
4+
5+
test('places cross marks in a horizontal line', async () => {
6+
render(<TicTacToe />)
7+
8+
await page.getByRole('button', { name: 'left middle' }).click()
9+
await page.getByRole('button', { name: 'middle', exact: true }).click()
10+
await page.getByRole('button', { name: 'right middle' }).click()
11+
12+
// 🐨 Set a breakpoint after the test has interacted with the component.
13+
// 💰 Use your IDE instead of modifying the test file.
14+
15+
const squares = page.getByRole('button').elements().slice(3, 6)
16+
expect(squares.map((element) => element.textContent)).toEqual(['✗', '✗', '✗'])
17+
})

‎exercises/04.debugging/02.solution.debugger/src/index.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
2+
3+
@tailwind base;
4+
@tailwind components;
5+
@tailwind utilities;
6+
7+
html {
8+
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9+
10+
font-family:
11+
'DM Sans',
12+
system-ui,
13+
-apple-system,
14+
BlinkMacSystemFont,
15+
'Segoe UI',
16+
Roboto,
17+
Oxygen,
18+
Ubuntu,
19+
Cantarell,
20+
'Open Sans',
21+
'Helvetica Neue',
22+
sans-serif;
23+
font-style: normal;
24+
font-optical-sizing: auto;
25+
}

‎exercises/04.debugging/02.solution.debugger/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import './index.css'
4+
import { App } from './app.jsx'
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
)

0 commit comments

Comments
 (0)