02/04: add @msw/playwright setup

Author: kettanaito

exercises/02.setup/04.solution.api-mocking/README.mdx

@@ -1 +1,10 @@
 # API mocking
+
+1. Install `msw` and `@msw/playwright`.
+1. Create `test-extend.ts` and a `network` fixture there.
+1. Note: `createWorkerFixture()` _automatically_ comes with `auto: true`.
+
+## Materials
+
+- [`@msw/playwright`](https://github.com/mswjs/playwright)
+- [Mock Service Worker](https://mswjs.io)

exercises/02.setup/04.solution.api-mocking/e2e/example.test.ts

@@ -0,0 +1,10 @@
+import { http } from 'msw'
+import { test } from '../test-extend'
+
+test('...', async ({ network, page }) => {
+	network.use(http.get('/resource', () => {}))
+
+	await page.goto('/')
+
+	// ...
+})

exercises/02.setup/04.solution.api-mocking/package.json

@@ -1,3 +1,11 @@
 {
-  "name": "exercises_02.setup_04.solution.api-mocking"
+  "name": "exercises_02.setup_04.solution.api-mocking",
+  "scripts": {
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@msw/playwright": "^0.4.0",
+    "@playwright/test": "^1.53.1",
+    "msw": "^2.10.2"
+  }
 }

exercises/02.setup/04.solution.api-mocking/playwright.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+	projects: [
+		{
+			name: 'Chromium',
+			use: devices['Desktop Chrome'],
+		},
+	],
+	use: {
+		screenshot: 'only-on-failure',
+	},
+})

exercises/02.setup/04.solution.api-mocking/test-extend.ts

@@ -0,0 +1,10 @@
+import { test as testBase } from '@playwright/test'
+import { createNetworkFixture, type NetworkFixture } from '@msw/playwright'
+
+interface Fixtures {
+	network: NetworkFixture
+}
+
+export const test = testBase.extend<Fixtures>({
+	network: createNetworkFixture(),
+})

exercises/02.setup/04.solution.api-mocking/tsconfig.base.json

@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true,
+		"target": "es2022",
+		"module": "esnext",
+		"moduleResolution": "node",
+		"isolatedModules": true
+	}
+}

exercises/02.setup/04.solution.api-mocking/tsconfig.json

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

exercises/02.setup/04.solution.api-mocking/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+	"extends": "./tsconfig.base.json",
+	"include": ["./playwright.config.ts", "./e2e"]
+}