01/03: add exercise texts

kettanaito · kettanaito · commit 30fd7056da79 · 2025-04-22T14:37:43.000+02:00
diff --git a/exercises/01.setup/01.problem.vscode-extension/package.json b/exercises/01.setup/01.problem.vscode-extension/package.json
@@ -2,9 +2,7 @@
   "type": "module",
   "name": "exercises_01.setup_01.problem.vscode-extension",
   "scripts": {
-    "dev": "vite",
-    "test": "vitest",
-    "build": "vite build"
+    "test": "vitest"
   },
   "devDependencies": {
     "vite": "^6.2.6",
diff --git a/exercises/01.setup/01.solution.vscode-extension/package.json b/exercises/01.setup/01.solution.vscode-extension/package.json
@@ -2,9 +2,7 @@
   "type": "module",
   "name": "exercises_01.setup_01.solution.vscode-extension",
   "scripts": {
-    "dev": "vite",
-    "test": "vitest",
-    "build": "vite build"
+    "test": "vitest"
   },
   "devDependencies": {
     "vite": "^6.2.6",
diff --git a/exercises/01.setup/02.problem.multiple-workspaces/package.json b/exercises/01.setup/02.problem.multiple-workspaces/package.json
@@ -2,8 +2,7 @@
   "type": "module",
   "name": "exercises_01.setup_02.problem.multiple-workspaces",
   "scripts": {
-    "test": "vitest",
-    "build": "vite build"
+    "test": "vitest"
   },
   "devDependencies": {
     "vitest": "^3.1.1"
diff --git a/exercises/01.setup/02.solution.multiple-workspaces/package.json b/exercises/01.setup/02.solution.multiple-workspaces/package.json
@@ -2,11 +2,9 @@
   "type": "module",
   "name": "exercises_01.setup_02.solution.multiple-workspaces",
   "scripts": {
-    "dev": "vite",
     "test": "vitest",
     "test:unit": "vitest --project unit",
-    "test:edge": "vitest --project edge",
-    "build": "vite build"
+    "test:edge": "vitest --project edge"
   },
   "devDependencies": {
     "@edge-runtime/types": "^4.0.0",
diff --git a/exercises/01.setup/03.problem.code-coverage/README.mdx b/exercises/01.setup/03.problem.code-coverage/README.mdx
@@ -0,0 +1,24 @@
+# Code coverage
+
+Code coverage can be a useful metric if done right. I find code coverage more of a guide to tell you about the state of your test suite than a barred threshold one must pass and never, ever lower. It can point to the areas you haven't covered with tests but you are still the one to decide the appropriate strategy to address that.
+
+<callout-info>You can learn more about code coverage, its dangers, and where you would use it in my article called :scroll: [Making Sense of Code Coverage](https://www.epicweb.dev/making-use-of-code-coverage).</callout-info>
+
+Vitest, like many other testing frameworks, allows you to enable and configure code coverage for any type of tests. It supports two coverage providers:
+
+- [`v8`](https://v8.dev/blog/javascript-code-coverage) (_default_)
+- [`istanbul`](https://istanbul.js.org/)
+
+## Your task
+
+👨‍💼 In this one, you will enable code coverage in <InlineFile file="vitest.config.ts" />, inspect its report, and see if it hints you at any missing test cases you might add.
+
+🐨 Start from installing `@vitest/coverage-v8` to use as a coverage provider.
+
+```
+npm i @vitest/coverage-v8 --save-dev
+```
+
+🐨 Next, head to <InlineFile file="vitest.config.ts" /> and adjust the configuration to enable code coverage and use the newly installed provider.
+
+🐨 Run tests via `npm test` and see the generated code coverage report. Explore it to spot any weak or missing spots in the current test suites. Optionally, add the missing tests.
diff --git a/exercises/01.setup/03.problem.code-coverage/package.json b/exercises/01.setup/03.problem.code-coverage/package.json
@@ -0,0 +1,12 @@
+{
+  "type": "module",
+  "name": "exercises_01.setup_03.problem.code-coverage",
+  "scripts": {
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@vitest/ui": "^3.1.1",
+    "vite": "^6.2.6",
+    "vitest": "^3.1.1"
+  }
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/src/fn.test.ts b/exercises/01.setup/03.problem.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')
+})
diff --git a/exercises/01.setup/03.problem.code-coverage/src/fn.ts b/exercises/01.setup/03.problem.code-coverage/src/fn.ts
@@ -0,0 +1,7 @@
+export function fn(input: number) {
+	if (input > 10) {
+		return 'great'
+	}
+
+	return 'okay'
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/tsconfig.app.json b/exercises/01.setup/03.problem.code-coverage/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.base.json",
+	"include": ["src/**/*"],
+	"exclude": ["src/**/*.test.ts*"],
+	"compilerOptions": {
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"jsx": "react-jsx"
+	}
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/tsconfig.base.json b/exercises/01.setup/03.problem.code-coverage/tsconfig.base.json
@@ -0,0 +1,23 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"useDefineForClassFields": true,
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"verbatimModuleSyntax": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	}
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/tsconfig.json b/exercises/01.setup/03.problem.code-coverage/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.test.json" }
+	]
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/tsconfig.node.json b/exercises/01.setup/03.problem.code-coverage/tsconfig.node.json
@@ -0,0 +1,7 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"lib": ["ES2023"]
+	},
+	"include": ["vitest.config.ts"]
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/tsconfig.test.json b/exercises/01.setup/03.problem.code-coverage/tsconfig.test.json
@@ -0,0 +1,8 @@
+{
+	"extends": "./tsconfig.app.json",
+	"include": ["src/**/*", "src/**/*.test.ts*"],
+	"exclude": [],
+	"compilerOptions": {
+		"types": ["vitest/globals"]
+	}
+}
diff --git a/exercises/01.setup/03.problem.code-coverage/vitest.config.ts b/exercises/01.setup/03.problem.code-coverage/vitest.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	test: {
+		globals: true,
+		// 🐨 Add a `coverage` property and assign it an empty object for now.
+		// 💰 coverage: {}
+		//
+		// 🐨 Inside `coverage`, set the `enabled` property to `true.
+		// 💰 coverage: { enabled: true }
+		//
+		// 🐨 Add the `include` property and define a pattern for
+		// the source files to be used during the coverage analyzis.
+		// 💰 coverage: { include: ['src/**/*.ts'] }
+		//
+		// 🐨 Finally, add the `reporter` property and use the "html" reporter.
+		// 💰 coverage: { reporter: ['html'] }
+	},
+})
diff --git a/exercises/01.setup/03.solution.code-coverage/README.mdx b/exercises/01.setup/03.solution.code-coverage/README.mdx
@@ -1,15 +1,123 @@
 # 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.
+Since I've got `@vitest/coverage-v8` installed, I will go straight to `vitest.config.ts` and set `test.coverage` option to `true`.
 
-Then, to preview the coverage:
+```ts file=vitest.config.ts add=6-8
+import { defineConfig } from 'vitest/config'
 
-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.
+export default defineConfig({
+	test: {
+		globals: true,
+		coverage: {
+			enabled: true,
+		},
+	},
+})
+```
+
+Setting this option will tell Vitest to collect code coverage during test runs.
+
+Next, I will configure the `test.coverage.include` option to have more accurate reports by specifying where are the source files to check the coverage against:
+
+```ts file=vitest.config.ts add=8
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	test: {
+		globals: true,
+		coverage: {
+			enabled: true,
+			include: ['src/**/*.ts'],
+		},
+	},
+})
+```
+
+<callout-success>Providing explicit `test.coverage.include` also makes Vitest _faster_ as it now knows where to look up the source files.</callout-success>
+
+And, finally, I would like for the coverage report to be emitted as HTML I can nicely browse and navigate. To do that, I will set the `test.coverage.reporter` to use an `'html'` reporter:
+
+```ts file=vitest.config.ts add=9
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	test: {
+		globals: true,
+		coverage: {
+			enabled: true,
+			include: ['src/**/*.ts'],
+			reporter: ['html'],
+		},
+	},
+})
+```
+
+## View coverage report
+
+There are multiple coverage reporters you can use to generate the coverage report, including at the same time. That is mostly so you can provide that report to other tooling to analyze.
+
+In my case, I've chosen the `'html'` reporter, which means that Vitest will emit the coverage report in the `./coverage` directory, containing a whole mini application for me to navigate and view the report.
+
+```
+/coverage
+	index.html
+	base.css
+	sorter.js
+	...
+```
+
+But I can push it a step further. I can preview that report in the [Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui).
+
+First, I will install the `@vitest/ui` package:
+
+```
+npm install @vitest/ui --save-dev
+```
+
+And now I can preview the HTML coverage report by running Vitest in the UI mode, which means either providing the `--ui` option to the Vitest CLI or setting the `test.ui` option to `true` in `vitest.config.ts`.
+
+Once I run Vitest in the UI mode, I can go to the "Coverage" tab and preview the coverage report for my test run straight in the UI:
+
+![A screenshot of the Vitest UI with the cursor hovering over the "Coverage" tab on the top left.](/assets/01-03-vitest-ui-coverage-tab.png)
+
+> You can find the coverage tab on the top left of the Vitest UI, in the panel next to the logo. Clicking on that tab opens the Coverage preview.
+
+![A screenshot of the Vitest UI with the Coverage tab open. In the middle, a table of source files previews the code coverage report. A single entry "fn.ts" is yellow. The code coverage for that module is 66.66%.](/assets/01-03-coverage-report.png)
+
+> The main view of the Coverage preview lists the report for the entire test run. You can see the summary of the report here and also the scores for individual modules in your source code.
+
+![A screenshot of the Vitest UI with the "fn.ts" module open. It shows the source code of that module with some of its lines being green and some red.](/assets/01-03-coverage-file.png)
+
+> Clicking on a module opens its source preview where the lines of code are marked with green and red for covered and uncovered blocks of the code, respectively.
+
+This visual report gives me a clear indication that my present tests aren't handling the `return 'okay'` scenario of the `fn()`. Let's fix that!
+
+## Missing test
+
+I can add the missing test case to `src/fn.test.ts` and rerun the test to get the updated coverage report.
+
+```ts file=src/fn.test.ts add=7-10
+import { fn } from './fn'
+
+test('returns "great" if given a number greater than 10', () => {
+	expect(fn(42)).toBe('great')
+})
+
+test('returns "okay" if given a number less than 10', () => {
+	expect(fn(1)).toBe('okay')
+	expect(fn(9)).toBe('okay')
+})
+```
+
+![A screenshot of the Vitest UI showcasing the coverage report. The single "fn.ts" line in the report is green. The code coverage for that module is 100%.](/assets/01-03-coverage-100-01.png)
+
+![A screenshot of the Vitest UI showcasing the source code for the "fn" function all being green, indicating that all blocks in this function have been covered by tests.](/assets/01-03-coverage-100-02.png)
+
+With these changes, my `fn()` function is 100% covered by tests! :tada:
+
+## Dangers of code coverage
+
+<callout-warning>Please bear in mind that code coverage is a metric that has to be handled with thought and care. Use it to guide your testing strategy and find weak spots in your test suite. _Never use it as a threshold to approve or deny changes to your application_. This may sound useful at first, but it will inevitably lead to frustration and that metric being gamed, destroying its value.</callout-warning>
 
 ## Related materials
 
diff --git a/exercises/01.setup/03.solution.code-coverage/package.json b/exercises/01.setup/03.solution.code-coverage/package.json
@@ -2,9 +2,7 @@
   "type": "module",
   "name": "exercises_01.setup_03.solution.code-coverage",
   "scripts": {
-    "dev": "vite",
-    "test": "vitest",
-    "build": "vite build"
+    "test": "vitest"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^3.1.1",
diff --git a/exercises/01.setup/03.solution.code-coverage/src/fn.test.ts b/exercises/01.setup/03.solution.code-coverage/src/fn.test.ts
@@ -3,3 +3,8 @@ import { fn } from './fn'
 test('returns "great" if given a number greater than 10', () => {
 	expect(fn(42)).toBe('great')
 })
+
+test('returns "okay" if given a number less than 10', () => {
+	expect(fn(1)).toBe('okay')
+	expect(fn(9)).toBe('okay')
+})
diff --git a/exercises/01.setup/FINISHED.mdx b/exercises/01.setup/FINISHED.mdx
@@ -1 +1,3 @@
 # Setup
+
+Great job! :tada: Take a rest and let's continue.
diff --git a/exercises/02.context/FINISHED.mdx b/exercises/02.context/FINISHED.mdx
@@ -1 +1,3 @@
 # Context
+
+Great job! :tada: Take a rest and let's continue.
diff --git a/exercises/03.assertions/FINISHED.mdx b/exercises/03.assertions/FINISHED.mdx
@@ -1 +1,3 @@
 # Assertions
+
+Great job! :tada: Take a rest and let's continue.
diff --git a/exercises/04.performance/FINISHED.mdx b/exercises/04.performance/FINISHED.mdx
@@ -1 +1,3 @@
 # Performance
+
+Great job! :tada: Take a rest and let's continue.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/assets/01-03-coverage-100-01.png b/public/assets/01-03-coverage-100-01.png
diff --git a/public/assets/01-03-coverage-100-02.png b/public/assets/01-03-coverage-100-02.png
diff --git a/public/assets/01-03-coverage-file.png b/public/assets/01-03-coverage-file.png
diff --git a/public/assets/01-03-coverage-report.png b/public/assets/01-03-coverage-report.png
diff --git a/public/assets/01-03-vitest-ui-coverage-tab.png b/public/assets/01-03-vitest-ui-coverage-tab.png
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,6 +16,9 @@
     {
       "path": "exercises/01.setup/02.solution.multiple-workspaces"
     },
+    {
+      "path": "exercises/01.setup/03.problem.code-coverage"
+    },
     {
       "path": "exercises/01.setup/03.solution.code-coverage"
     },
