01/03: add solution code

Author: kettanaito

.gitignore

@@ -13,6 +13,7 @@ data.db
 __screenshots__
 *.sqlite
 test-profiles
+coverage
 
 # in a real app you'd want to not commit the .env
 # file as well, but since this is for a workshop

exercises/01.setup/03.solution.code-coverage/README.mdx

@@ -1 +1,18 @@
 # Code coverage
+
+1. Install `@vitest/coverage-v8`.
+1. Set `test.coverage.enabled` to `true`.
+1. List explicit values in `test.coverage.include` to make Vitest faster.
+
+Then, to preview the coverage:
+
+1. Install `@vitest/ui`.
+1. Run Vitest in the UI mode: `npx vitest --ui` (or set `test.ui` to `true`).
+1. Make sure to include `html` in the `test.coverage.reporters` list (you can still use other reporters).
+1. In the UI, go to the "Coverage" tab. See the coverage.
+
+## Related materials
+
+- [**Making sense of code coverage**](https://www.epicweb.dev/making-use-of-code-coverage)
+- [Coverage in Vitest](https://main.vitest.dev/guide/coverage.html)
+- [Vitest UI](https://main.vitest.dev/guide/ui.html)

exercises/01.setup/03.solution.code-coverage/package.json

@@ -7,6 +7,8 @@
     "build": "vite build"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
     "vite": "^6.0.7",
     "vitest": "^3.0.5"
   }

exercises/01.setup/03.solution.code-coverage/src/fn.test.ts

@@ -0,0 +1,5 @@
+import { fn } from './fn'
+
+test('returns "great" if given a number greater than 10', () => {
+	expect(fn(42)).toBe('great')
+})

exercises/01.setup/03.solution.code-coverage/src/fn.ts

@@ -0,0 +1,7 @@
+export function fn(input: number) {
+	if (input > 10) {
+		return 'great'
+	}
+
+	return 'okay'
+}

exercises/01.setup/03.solution.code-coverage/vitest.config.ts

@@ -1,10 +1,12 @@
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
-	server: {
-		port: process.env.PORT ? Number(process.env.PORT) : undefined,
-	},
 	test: {
 		globals: true,
+		coverage: {
+			enabled: true,
+			include: ['src/**/*.ts'],
+			reporter: ['html'],
+		},
 	},
 })