Skip to content

Commit 529810a

Browse files
committed
02/06: add multiple workspaces exercise
1 parent 5923d41 commit 529810a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+293
-9
lines changed

exercises/02.vitest-browser-mode/03.solution.use-playwright/README.mdx renamed to exercises/02.vitest-browser-mode/03.solution.playwright/README.mdx

Lines changed: 3 additions & 1 deletion

exercises/02.vitest-browser-mode/03.solution.use-playwright/package.json renamed to exercises/02.vitest-browser-mode/03.solution.playwright/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"type": "module",
3-
"name": "exercises_02.vitest-browser-mode_03.solution.use-playwright",
3+
"name": "exercises_02.vitest-browser-mode_03.solution.playwright",
44
"scripts": {
55
"dev": "vite",
66
"test": "vitest"

exercises/02.vitest-browser-mode/04.solution.use-dom-assertions/README.mdx renamed to exercises/02.vitest-browser-mode/04.solution.dom-assertions/README.mdx

Lines changed: 3 additions & 1 deletion

exercises/02.vitest-browser-mode/04.solution.use-dom-assertions/package.json renamed to exercises/02.vitest-browser-mode/04.solution.dom-assertions/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"type": "module",
3-
"name": "exercises_02.vitest-browser-mode_04.solution.use-dom-assertions",
3+
"name": "exercises_02.vitest-browser-mode_04.solution.dom-assertions",
44
"scripts": {
55
"dev": "vite",
66
"test": "vitest"

exercises/02.vitest-browser-mode/05.solution.include-shared-assets/README.mdx renamed to exercises/02.vitest-browser-mode/05.solution.shared-assets/README.mdx

Lines changed: 1 addition & 1 deletion

exercises/02.vitest-browser-mode/05.solution.include-shared-assets/package.json renamed to exercises/02.vitest-browser-mode/05.solution.shared-assets/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"type": "module",
3-
"name": "exercises_02.vitest-browser-mode_05.solution.include-shared-assets",
3+
"name": "exercises_02.vitest-browser-mode_05.solution.shared-assets",
44
"scripts": {
55
"dev": "vite",
66
"test": "vitest"
Lines changed: 7 additions & 0 deletions
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>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"type": "module",
3+
"name": "exercises_02.vitest-browser-mode_06.solution.multiple-workspaces",
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+
"@testing-library/dom": "^10.4.0",
14+
"@testing-library/react": "^16.1.0",
15+
"@types/react": "^19.0.6",
16+
"@types/react-dom": "^19.0.3",
17+
"@vitejs/plugin-react": "^4.3.4",
18+
"@vitest/browser": "^3.0.0-beta.4",
19+
"autoprefixer": "^10.4.20",
20+
"playwright": "^1.49.1",
21+
"postcss": "^8.4.49",
22+
"tailwindcss": "^3.4.17",
23+
"vite": "^6.0.7",
24+
"vitest": "^3.0.0-beta.4"
25+
}
26+
}
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+
}
Lines changed: 1 addition & 0 deletions
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from 'react'
2+
import { FilePreview } from './file-preview.jsx'
3+
4+
export function App() {
5+
const [file, setFile] = useState<File>()
6+
7+
return (
8+
<div>
9+
{file ? (
10+
<div className="flex flex-col items-center">
11+
<FilePreview file={file} />
12+
<button
13+
className="mt-10 rounded-full bg-slate-800 px-6 py-2 text-sm font-bold text-white hover:bg-slate-600"
14+
onClick={() => setFile(undefined)}
15+
>
16+
Preview another file
17+
</button>
18+
</div>
19+
) : (
20+
<div className="rounded-md border border-slate-200 bg-white p-4 shadow-lg shadow-slate-200">
21+
<input
22+
type="file"
23+
name="file"
24+
required
25+
className="text-sm font-medium"
26+
onChange={(event) => {
27+
const [selectedFile] = event.currentTarget.files || []
28+
29+
if (selectedFile) {
30+
setFile(selectedFile)
31+
}
32+
}}
33+
/>
34+
</div>
35+
)}
36+
</div>
37+
)
38+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { it, expect } from 'vitest'
2+
import { page } from '@vitest/browser/context'
3+
import { render } from 'vitest-browser-react'
4+
import { FilePreview } from './file-preview.tsx'
5+
6+
it('displays the preview card', async () => {
7+
render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
8+
9+
await expect.element(page.getByText('file.txt')).toBeVisible()
10+
await expect.element(page.getByText('hello world')).toBeVisible()
11+
})
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useEffect, useState } from 'react'
2+
3+
export function FilePreview({ file }: { file: File }) {
4+
const [previewText, setPreviewText] = useState<string>()
5+
6+
useEffect(() => {
7+
file.text().then(setPreviewText)
8+
}, [file])
9+
10+
return (
11+
<div>
12+
<div className="w-full max-w-2xl overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg shadow-slate-200">
13+
<p className="border-b border-slate-200 bg-slate-50 px-4 py-2 font-bold text-slate-600">
14+
{file.name}
15+
</p>
16+
<pre className="max-h-[28ch] overflow-scroll p-4">{previewText}</pre>
17+
</div>
18+
</div>
19+
)
20+
}
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+
}
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+
)
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { Config } from 'tailwindcss'
2+
3+
export default {
4+
content: ['./index.html', './src/**/*.{ts,tsx}'],
5+
theme: {
6+
extend: {},
7+
},
8+
plugins: [],
9+
} satisfies Config
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.base.json",
3+
"compilerOptions": {
4+
"target": "ES2020",
5+
"module": "ESNext"
6+
},
7+
"include": ["src"],
8+
"exclude": ["**/*.test.ts*"]
9+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"useDefineForClassFields": true,
4+
"skipLibCheck": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
7+
/* Bundler mode */
8+
"moduleResolution": "bundler",
9+
"allowImportingTsExtensions": true,
10+
"isolatedModules": true,
11+
"moduleDetection": "force",
12+
"noEmit": true,
13+
"jsx": "react-jsx",
14+
"verbatimModuleSyntax": true,
15+
16+
/* Linting */
17+
"strict": true,
18+
"noUnusedLocals": true,
19+
"noUnusedParameters": true,
20+
"noFallthroughCasesInSwitch": true,
21+
"noUncheckedSideEffectImports": true
22+
}
23+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"files": [],
3+
"references": [
4+
{ "path": "./tsconfig.app.json" },
5+
{ "path": "./tsconfig.node.json" },
6+
{ "path": "./tsconfig.test.json" }
7+
]
8+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2022",
4+
"lib": ["ES2023"],
5+
"module": "ESNext",
6+
"skipLibCheck": true,
7+
8+
/* Bundler mode */
9+
"moduleResolution": "bundler",
10+
"allowImportingTsExtensions": true,
11+
"isolatedModules": true,
12+
"moduleDetection": "force",
13+
"noEmit": true,
14+
15+
/* Linting */
16+
"strict": true,
17+
"noUnusedLocals": true,
18+
"noUnusedParameters": true,
19+
"noFallthroughCasesInSwitch": true,
20+
"noUncheckedSideEffectImports": true
21+
},
22+
"include": ["vite.config.ts", "vitest.browser.setup.ts"]
23+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.base.json",
3+
"include": ["vite.config.ts", "**/*.test.ts*"],
4+
"compilerOptions": {
5+
"target": "esnext",
6+
"module": "preserve",
7+
"types": ["@vitest/browser/providers/playwright"]
8+
}
9+
}
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/// <reference types="vitest" />
2+
import { defineConfig } from 'vite'
3+
import react from '@vitejs/plugin-react'
4+
5+
export default defineConfig({
6+
plugins: [react()],
7+
test: {
8+
workspace: [
9+
{
10+
extends: true,
11+
test: {
12+
name: 'unit',
13+
include: ['**/*.test.ts'],
14+
},
15+
},
16+
{
17+
extends: true,
18+
test: {
19+
name: 'browser',
20+
browser: {
21+
enabled: true,
22+
provider: 'playwright',
23+
instances: [
24+
{
25+
browser: 'chromium',
26+
setupFiles: ['./vitest.browser.setup.ts'],
27+
},
28+
],
29+
},
30+
},
31+
},
32+
],
33+
},
34+
})
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference path="./src/vite-env.d.ts" />
2+
import './src/index.css'

tsconfig.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,16 @@
2323
"path": "exercises/02.vitest-browser-mode/02.solution.migrate-the-test"
2424
},
2525
{
26-
"path": "exercises/02.vitest-browser-mode/03.solution.use-playwright"
26+
"path": "exercises/02.vitest-browser-mode/03.solution.playwright"
2727
},
2828
{
29-
"path": "exercises/02.vitest-browser-mode/04.solution.use-dom-assertions"
29+
"path": "exercises/02.vitest-browser-mode/04.solution.dom-assertions"
3030
},
3131
{
32-
"path": "exercises/02.vitest-browser-mode/05.solution.include-shared-assets"
32+
"path": "exercises/02.vitest-browser-mode/05.solution.shared-assets"
33+
},
34+
{
35+
"path": "exercises/02.vitest-browser-mode/06.solution.multiple-workspaces"
3336
}
3437
]
3538
}

0 commit comments

Comments
 (0)