02/04: add solution and assets

Author: kettanaito

exercises/02.vitest-browser-mode/01.problem.installation-and-setup/README.mdx

@@ -6,15 +6,15 @@ It's time to take the first step forward Vitest Browser Mode! In this one, you a
 
 As the first order of business, I'm going to uninstall the packages I won't be needing anymore:
 
-```sh
+```sh nonumber
 npm uninstall jsdom @testing-library/react
 ```
 
 > 🦉 I am uninstalling React Testing Library because I won't be using it directly for my in-browser tests. **That doesn't mean its API and practices are gone!** Instead, I will continue using them through the Vitest and Playwright APIs that are inspired by RTL and promote its best practices.
 
 Now I can install the dependencies required for the Browser Mode in Vitest:
 
-```sh
+```sh nonumber
 npm i -D @vitest/browser vitest-browser-react
 ```
 

exercises/02.vitest-browser-mode/02.solution.migrate-the-test/README.mdx

@@ -69,7 +69,7 @@ Finally, it's time to adjust the assertions around the elements rendered by our
 
 This is how they looked like before:
 
-```tsx filename=file-preview.test.tsx
+```tsx filename=file-preview.test.tsx nonumber
 expect(page.getByText('file.txt')).toBeTruthy()
 expect(page.getByText('hello world')).toBeTruthy()
 ```
@@ -78,7 +78,7 @@ There's a few things to change here.
 
 Now that I know that `page.getBy*` functions return _locators_, they will always be truthy and so the `.toBeTruthhy()` assertion makes little sense here. It wasn't written from the user's perspective, to begin with, and it would be best to use a more fitting matcher like `.toBeVisible()`:
 
-```tsx filename=file-preview.test.tsx
+```tsx filename=file-preview.test.tsx nonumber
 expect(page.getByText('file.txt')).toBeVisible()
 //                                 ^^^^^^^^^^^^^
 expect(page.getByText('hello world')).toBeVisible()
@@ -87,7 +87,7 @@ expect(page.getByText('hello world')).toBeVisible()
 
 On its own, this is enough. But there's one more thing that can make these assertions stellar. I can use `expect.element()` instead of `expect()` to have a built-in retry for resolving the given locators:
 
-```tsx filename=file-preview.test.tsx
+```tsx filename=file-preview.test.tsx nonumber
 await expect.element(page.getByText('file.txt')).toBeVisible()
 //           ^^^^^^^
 await expect.element(page.getByText('hello world')).toBeVisible()
@@ -102,7 +102,7 @@ This reads as "_I eventually expect an element with text 'hello world' to be vis
 
 Now that I've updated the test suite, I can see it passing once I run `npm test`:
 
-```
+```txt nonumber nocopy
  chromium  Browser runner started at http://localhost:63315/
 
  ✓  chromium  src/file-preview.test.tsx (1 test) 60ms

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

@@ -11,13 +11,13 @@ Problem: Using the default `preview` provider in Vitest is great to try things o
 
 Let's start from installing `playwright`:
 
-```sh
+```sh nonumber
 npm i -D playwright
 ```
 
 Playwright needs browser executables to be present on your machine to run. In this workshop, I am using Chromium as my browser of choice, so I can install just that particular browser by running the following command:
 
-```sh
+```sh nonumber
 npx playwright install --with-dewps chromium
 ```
 

exercises/02.vitest-browser-mode/04.problem.shared-assets/README.mdx

@@ -0,0 +1,25 @@
+# Shared assets
+
+Our Vitest is configured and running, but if you take a closer look at the tested component on the page, it seems kind of off:
+
+![A screenshot of the Vitest UI showing the file preview component missing the styles](/assets/02-04-problem.png)
+
+Well, that's because it has no styles! The CSS file that contains the styles for this component is imported all the way in `main.tsx`, which isn't rendered as a part of this test:
+
+```tsx filename=file-preview.test.tsx nonumber
+render(<FilePreview file={...} />)
+```
+
+That's quite an oversight. Styling is important, not only to see the UI as the user would see it, but also because improper styles can lead to inaccessible elements in the DOM.
+
+I think this is a great problem for you to fix!
+
+👨‍💼 In this exercise, you will create a custom browser setup file that will run as a global setup for all component tests.
+
+First, create a <InlineFile file="vitest.browser.setup.ts">`vitest.browser.setup.ts`</InlineFile> file. In that file, import any assets you wish to apply to _all tests_ (e.g. CSS).
+
+> 🦉 To make Vite process the browser setup file like it does the rest of the app, include the following type reference at the top of the setup file: `/// <reference path="./src/vite-env.d.ts" />`.
+
+Lastly, provide the path to the setup file in <InlineFile file="vite.config.ts">`vite.config.ts`</InlineFile> as the `setupFiles` value of a conrete browser instance (follow the instructions in the configuration file for more details).
+
+Once you have it ready, run the tests again to see the `<FilePreview />` component reclaim its striking visuals ✨.

exercises/02.vitest-browser-mode/04.problem.shared-assets/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite App</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

exercises/02.vitest-browser-mode/04.problem.shared-assets/package.json

@@ -0,0 +1,26 @@
+{
+  "type": "module",
+  "name": "exercises_02.vitest-browser-mode_04.problem.shared-assets",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.0-beta.4",
+    "autoprefixer": "^10.4.20",
+    "playwright": "^1.49.1",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.0-beta.4"
+  }
+}

exercises/02.vitest-browser-mode/04.problem.shared-assets/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

exercises/02.vitest-browser-mode/04.problem.shared-assets/public/vite.svg

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { FilePreview } from './file-preview.jsx'
+
+export function App() {
+	const [file, setFile] = useState<File>()
+
+	return (
+		<div>
+			{file ? (
+				<div className="flex flex-col items-center">
+					<FilePreview file={file} />
+					<button
+						className="mt-10 rounded-full bg-slate-800 px-6 py-2 text-sm font-bold text-white hover:bg-slate-600"
+						onClick={() => setFile(undefined)}
+					>
+						Preview another file
+					</button>
+				</div>
+			) : (
+				<div className="rounded-md border border-slate-200 bg-white p-4 shadow-lg shadow-slate-200">
+					<input
+						type="file"
+						name="file"
+						required
+						className="text-sm font-medium"
+						onChange={(event) => {
+							const [selectedFile] = event.currentTarget.files || []
+
+							if (selectedFile) {
+								setFile(selectedFile)
+							}
+						}}
+					/>
+				</div>
+			)}
+		</div>
+	)
+}

exercises/02.vitest-browser-mode/04.problem.shared-assets/src/app.tsx

@@ -0,0 +1,10 @@
+import { page } from '@vitest/browser/context'
+import { render } from 'vitest-browser-react'
+import { FilePreview } from './file-preview.tsx'
+
+test('displays the preview card', async () => {
+	render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
+
+	await expect.element(page.getByText('file.txt')).toBeTruthy()
+	await expect.element(page.getByText('hello world')).toBeTruthy()
+})