03/01: add solution code

Author: kettanaito

exercises/03.context/01.solution.custom-fixtures/README.mdx

@@ -1 +1,24 @@
 # Custom fixtures
+
+## Curiosities
+
+- `use` is _always async_! Await it.
+- Fixtures can be anything: values and functions.
+- Test context object _must_ be destructed (`test(n, ({ like, so }))`). Vitest (and Playwright) use the getters to know if you've referenced fixtures to initialize them lazily.
+
+## Important
+
+- Do NOT put values you use for input into fixtures.
+
+```ts
+test('...', ({ cart }) => {
+	// What is `cart`?? Why does it equal to `something` in this case? Idk.
+	expect(transform(cart)).toBe(something)
+})
+```
+
+This is a _bad_ idea. Your test isn't isolated and depends on the fixture. Besides, you don't see the input so you cannot reason about the expected output. Just don't do this.
+
+_Instead_, either create fixtures _inline_ in the test, or use helper fixtures to abstract complex creation logic (but still expose input control through arguments).
+
+- I think you can put a value into a fixture if it's a _domain-specific value_ that is _never going to change_. Otherwise, you're better off.

exercises/03.context/01.solution.custom-fixtures/package.json

@@ -7,6 +7,7 @@
     "build": "vite build"
   },
   "devDependencies": {
+    "@faker-js/faker": "^9.6.0",
     "vite": "^6.0.7",
     "vitest": "^3.0.5"
   }

exercises/03.context/01.solution.custom-fixtures/src/cart-utils.ts

@@ -0,0 +1,14 @@
+export type Cart = Array<CartItem>
+
+export interface CartItem {
+	id: string
+	name: string
+	price: number
+	quantity: number
+}
+
+export function getTotalPrice(cart: Cart): number {
+	return cart.reduce((total, item) => {
+		return total + item.price * item.quantity
+	}, 0)
+}

exercises/03.context/01.solution.custom-fixtures/src/example.test.ts

@@ -0,0 +1,11 @@
+import { test } from '../test-extend'
+import { getTotalPrice } from './cart-utils'
+
+test('returns the total price for the cart', ({ createMockCart }) => {
+	const cart = createMockCart([
+		{ price: 5, quantity: 10 },
+		{ price: 8, quantity: 4 },
+	])
+
+	expect(getTotalPrice(cart)).toBe(82)
+})

exercises/03.context/01.solution.custom-fixtures/test-extend.ts

@@ -0,0 +1,21 @@
+import { test as testBase } from 'vitest'
+import { faker } from '@faker-js/faker'
+import type { Cart, CartItem } from './src/cart-utils'
+
+interface Fixtures {
+	createMockCart: (items: Array<Partial<CartItem>>) => Cart
+}
+
+export const test = testBase.extend<Fixtures>({
+	async createMockCart({}, use) {
+		await use((items) => {
+			return items.map((item) => ({
+				id: faker.string.ulid(),
+				name: faker.commerce.productName(),
+				price: faker.number.int({ min: 1, max: 25 }),
+				quantity: faker.number.int({ min: 1, max: 10 }),
+				...item,
+			}))
+		})
+	},
+})

exercises/03.context/01.solution.custom-fixtures/tsconfig.test.json

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