05/01: add exercise texts

Author: kettanaito

exercises/04.performance/01.problem.profiling-slow-tests/README.mdx

@@ -0,0 +1,64 @@
+# Profiling slow tests
+
+There are numerous factors that can contribute to the performance of your test suite: the number of tests, the amount of test setup, the speed of the tested code itself. But no matter the factors, you have to know _how_ to spot a slow test and _what_ to do to improve it.
+
+When it comes to dissecting any performance degradation, a gut feeling or a guess what might be making your software slow simply won't cut it. You need to know for a fact how that degradation manifests and where it stems from. Only then can you design an appropriate plan to fix it for good.
+
+## Profiling
+
+_Profiling_ is an essential process in analyzing code performance. Your tests are still code—the code you're testing wrapped in your test framework. Profiling it will come down to measuring critical points of the test's execution and analyzing the resulting report to see which areas consume most time/CPU/RAM/etc.
+
+You employ all sorts of tools to help you with profiling. From the built-in "Profiler" in your browser's DevTools to CPU and heap maps and even native profiling instruments in your test framework.
+
+But it all starts from a slow test (or a few). In our case, we have a `rows.test.ts` test suite that's unusually slow:
+
+```txt nonumber nocopy highlight=4,9
+npx vitest run
+
+ ✓ src/rows.test.ts (1 test) 563ms
+   ✓ retrieves all the rows  562ms
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+   Start at  10:57:37
+   Duration  1.10s (transform 18ms, setup 0ms, collect 13ms, tests 563ms, environment 0ms, prepare 34ms)
+```
+
+## Your task
+
+👨‍💼 Your mission this time is to _profile_ the slow test's performance and _identify_ the area that costs it most time. There are a few ways to do that in Vitest, but today you will be using the [`vitest-profiler`](https://github.com/kettanaito/vitest-profiler) plugin to help you out! Follow Kody to get it installed and configured in your project.
+
+🐨 Install `vitest-profiler` as a dependency in your project:
+
+```sh nonumber
+npm install vitest-profiler --save-dev
+```
+
+🐨 Import the `vitestProfiler` function from `vitest-profiler/plugin` and add its call to the `plugins` array of your <InlineFile file="vitest.config.ts" />:
+
+```ts filename=vitest.config.ts add=2,5
+import { defineConfig } from 'vitest/config'
+import { vitestProfiler } from 'vitest-profiler/plugin'
+
+export default defineConfig({
+	plugins: [vitestProfiler()],
+	test: {
+		globals: true,
+	},
+})
+```
+
+🐨 Finally, head to <InlineFile file="package.json" /> and add a new script called `test:profile`. In that script, call the `vitest-profiler` CLI like this:
+
+```json filename=package.json add=4
+{
+	"scripts": {
+		"test": "vitest",
+		"test:profile": "vitest-profiler npm test"
+	}
+}
+```
+
+> Notice that you are passing the test command `npm test` as the argument to the `vitest-profiler` CLI. It will use that command to run the tests the same way you normally do.
+
+Alright, this has you equipped with the profiler! What's left is to run `npm run test:profile` and analyze the results. Feel free to refer to the [`vitest-profiler` README](https://github.com/kettanaito/vitest-profiler) for more details on how to read the profiling report.

exercises/04.performance/01.problem.profiling-slow-tests/package.json

@@ -0,0 +1,14 @@
+{
+  "type": "module",
+  "name": "exercises_04.performance_01.problem.profiling-slow-tests",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest --no-cache",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^6.2.6",
+    "vitest": "^3.1.1",
+    "vitest-profiler": "^0.1.8"
+  }
+}

exercises/04.performance/01.problem.profiling-slow-tests/src/rows.test.ts

@@ -0,0 +1,7 @@
+import { expensiveCompute } from './utils'
+
+test('retrieves all the rows', function myTest() {
+	const rows = expensiveCompute()
+	expect(rows).toBeInstanceOf(Array)
+	expect(rows).toHaveLength(100_000_000)
+})

exercises/04.performance/01.problem.profiling-slow-tests/src/utils.ts

@@ -0,0 +1,9 @@
+export function expensiveCompute() {
+	const rows = []
+
+	for (let i = 0; i < 100_000_000; i++) {
+		rows.push(i)
+	}
+
+	return rows
+}

exercises/04.performance/01.problem.profiling-slow-tests/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"
+	}
+}

exercises/04.performance/01.problem.profiling-slow-tests/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
+	}
+}

exercises/04.performance/01.problem.profiling-slow-tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.test.json" }
+	]
+}

exercises/04.performance/01.problem.profiling-slow-tests/tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"lib": ["ES2023"]
+	},
+	"include": ["vitest.config.ts"]
+}

exercises/04.performance/01.problem.profiling-slow-tests/tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+	"extends": "./tsconfig.app.json",
+	"include": ["src/**/*", "src/**/*.test.ts*"],
+	"exclude": [],
+	"compilerOptions": {
+		"types": ["vitest/globals"]
+	}
+}

exercises/04.performance/01.problem.profiling-slow-tests/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	test: {
+		globals: true,
+	},
+})