P418:[{"_433":87,"_434":91,"_435":436},"app1","app2","diffPatch","diff --git a/package.json b/package.json\nindex f1851db..dd9d29c 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,6 +1,6 @@\n {\n \"type\": \"module\",\n- \"name\": \"exercises_03.best-practices_03.problem.network-mocking\",\n+ \"name\": \"exercises_03.best-practices_03.solution.network-mocking\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"test\": \"vitest\",\n@@ -16,9 +16,15 @@\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"@vitest/browser\": \"^3.2.0\",\n+ \"msw\": \"^2.7.3\",\n \"playwright\": \"^1.49.1\",\n \"tailwindcss\": \"^4.0.11\",\n \"vite\": \"^6.2.0\",\n \"vitest\": \"^3.2.0\"\n+ },\n+ \"msw\": {\n+ \"workerDirectory\": [\n+ \"public\"\n+ ]\n }\n }\ndiff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js\nnew file mode 100644\nindex 0000000..ec47a9a\n--- /dev/null\n+++ b/public/mockServiceWorker.js\n@@ -0,0 +1,307 @@\n+/* eslint-disable */\n+/* tslint:disable */\n+\n+/**\n+ * Mock Service Worker.\n+ * @see https://github.com/mswjs/msw\n+ * - Please do NOT modify this file.\n+ * - Please do NOT serve this file on production.\n+ */\n+\n+const PACKAGE_VERSION = '2.7.0'\n+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'\n+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')\n+const activeClientIds = new Set()\n+\n+self.addEventListener('install', function () {\n+ self.skipWaiting()\n+})\n+\n+self.addEventListener('activate', function (event) {\n+ event.waitUntil(self.clients.claim())\n+})\n+\n+self.addEventListener('message', async function (event) {\n+ const clientId = event.source.id\n+\n+ if (!clientId || !self.clients) {\n+ return\n+ }\n+\n+ const client = await self.clients.get(clientId)\n+\n+ if (!client) {\n+ return\n+ }\n+\n+ const allClients = await self.clients.matchAll({\n+ type: 'window',\n+ })\n+\n+ switch (event.data) {\n+ case 'KEEPALIVE_REQUEST': {\n+ sendToClient(client, {\n+ type: 'KEEPALIVE_RESPONSE',\n+ })\n+ break\n+ }\n+\n+ case 'INTEGRITY_CHECK_REQUEST': {\n+ sendToClient(client, {\n+ type: 'INTEGRITY_CHECK_RESPONSE',\n+ payload: {\n+ packageVersion: PACKAGE_VERSION,\n+ checksum: INTEGRITY_CHECKSUM,\n+ },\n+ })\n+ break\n+ }\n+\n+ case 'MOCK_ACTIVATE': {\n+ activeClientIds.add(clientId)\n+\n+ sendToClient(client, {\n+ type: 'MOCKING_ENABLED',\n+ payload: {\n+ client: {\n+ id: client.id,\n+ frameType: client.frameType,\n+ },\n+ },\n+ })\n+ break\n+ }\n+\n+ case 'MOCK_DEACTIVATE': {\n+ activeClientIds.delete(clientId)\n+ break\n+ }\n+\n+ case 'CLIENT_CLOSED': {\n+ activeClientIds.delete(clientId)\n+\n+ const remainingClients = allClients.filter((client) => {\n+ return client.id !== clientId\n+ })\n+\n+ // Unregister itself when there are no more clients\n+ if (remainingClients.length === 0) {\n+ self.registration.unregister()\n+ }\n+\n+ break\n+ }\n+ }\n+})\n+\n+self.addEventListener('fetch', function (event) {\n+ const { request } = event\n+\n+ // Bypass navigation requests.\n+ if (request.mode === 'navigate') {\n+ return\n+ }\n+\n+ // Opening the DevTools triggers the \"only-if-cached\" request\n+ // that cannot be handled by the worker. Bypass such requests.\n+ if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {\n+ return\n+ }\n+\n+ // Bypass all requests when there are no active clients.\n+ // Prevents the self-unregistered worked from handling requests\n+ // after it's been deleted (still remains active until the next reload).\n+ if (activeClientIds.size === 0) {\n+ return\n+ }\n+\n+ // Generate unique request ID.\n+ const requestId = crypto.randomUUID()\n+ event.respondWith(handleRequest(event, requestId))\n+})\n+\n+async function handleRequest(event, requestId) {\n+ const client = await resolveMainClient(event)\n+ const response = await getResponse(event, client, requestId)\n+\n+ // Send back the response clone for the \"response:*\" life-cycle events.\n+ // Ensure MSW is active and ready to handle the message, otherwise\n+ // this message will pend indefinitely.\n+ if (client && activeClientIds.has(client.id)) {\n+ ;(async function () {\n+ const responseClone = response.clone()\n+\n+ sendToClient(\n+ client,\n+ {\n+ type: 'RESPONSE',\n+ payload: {\n+ requestId,\n+ isMockedResponse: IS_MOCKED_RESPONSE in response,\n+ type: responseClone.type,\n+ status: responseClone.status,\n+ statusText: responseClone.statusText,\n+ body: responseClone.body,\n+ headers: Object.fromEntries(responseClone.headers.entries()),\n+ },\n+ },\n+ [responseClone.body],\n+ )\n+ })()\n+ }\n+\n+ return response\n+}\n+\n+// Resolve the main client for the given event.\n+// Client that issues a request doesn't necessarily equal the client\n+// that registered the worker. It's with the latter the worker should\n+// communicate with during the response resolving phase.\n+async function resolveMainClient(event) {\n+ const client = await self.clients.get(event.clientId)\n+\n+ if (activeClientIds.has(event.clientId)) {\n+ return client\n+ }\n+\n+ if (client?.frameType === 'top-level') {\n+ return client\n+ }\n+\n+ const allClients = await self.clients.matchAll({\n+ type: 'window',\n+ })\n+\n+ return allClients\n+ .filter((client) => {\n+ // Get only those clients that are currently visible.\n+ return client.visibilityState === 'visible'\n+ })\n+ .find((client) => {\n+ // Find the client ID that's recorded in the\n+ // set of clients that have registered the worker.\n+ return activeClientIds.has(client.id)\n+ })\n+}\n+\n+async function getResponse(event, client, requestId) {\n+ const { request } = event\n+\n+ // Clone the request because it might've been already used\n+ // (i.e. its body has been read and sent to the client).\n+ const requestClone = request.clone()\n+\n+ function passthrough() {\n+ // Cast the request headers to a new Headers instance\n+ // so the headers can be manipulated with.\n+ const headers = new Headers(requestClone.headers)\n+\n+ // Remove the \"accept\" header value that marked this request as passthrough.\n+ // This prevents request alteration and also keeps it compliant with the\n+ // user-defined CORS policies.\n+ const acceptHeader = headers.get('accept')\n+ if (acceptHeader) {\n+ const values = acceptHeader.split(',').map((value) => value.trim())\n+ const filteredValues = values.filter(\n+ (value) => value !== 'msw/passthrough',\n+ )\n+\n+ if (filteredValues.length > 0) {\n+ headers.set('accept', filteredValues.join(', '))\n+ } else {\n+ headers.delete('accept')\n+ }\n+ }\n+\n+ return fetch(requestClone, { headers })\n+ }\n+\n+ // Bypass mocking when the client is not active.\n+ if (!client) {\n+ return passthrough()\n+ }\n+\n+ // Bypass initial page load requests (i.e. static assets).\n+ // The absence of the immediate/parent client in the map of the active clients\n+ // means that MSW hasn't dispatched the \"MOCK_ACTIVATE\" event yet\n+ // and is not ready to handle requests.\n+ if (!activeClientIds.has(client.id)) {\n+ return passthrough()\n+ }\n+\n+ // Notify the client that a request has been intercepted.\n+ const requestBuffer = await request.arrayBuffer()\n+ const clientMessage = await sendToClient(\n+ client,\n+ {\n+ type: 'REQUEST',\n+ payload: {\n+ id: requestId,\n+ url: request.url,\n+ mode: request.mode,\n+ method: request.method,\n+ headers: Object.fromEntries(request.headers.entries()),\n+ cache: request.cache,\n+ credentials: request.credentials,\n+ destination: request.destination,\n+ integrity: request.integrity,\n+ redirect: request.redirect,\n+ referrer: request.referrer,\n+ referrerPolicy: request.referrerPolicy,\n+ body: requestBuffer,\n+ keepalive: request.keepalive,\n+ },\n+ },\n+ [requestBuffer],\n+ )\n+\n+ switch (clientMessage.type) {\n+ case 'MOCK_RESPONSE': {\n+ return respondWithMock(clientMessage.data)\n+ }\n+\n+ case 'PASSTHROUGH': {\n+ return passthrough()\n+ }\n+ }\n+\n+ return passthrough()\n+}\n+\n+function sendToClient(client, message, transferrables = []) {\n+ return new Promise((resolve, reject) => {\n+ const channel = new MessageChannel()\n+\n+ channel.port1.onmessage = (event) => {\n+ if (event.data && event.data.error) {\n+ return reject(event.data.error)\n+ }\n+\n+ resolve(event.data)\n+ }\n+\n+ client.postMessage(\n+ message,\n+ [channel.port2].concat(transferrables.filter(Boolean)),\n+ )\n+ })\n+}\n+\n+async function respondWithMock(response) {\n+ // Setting response status code to 0 is a no-op.\n+ // However, when responding with a \"Response.error()\", the produced Response\n+ // instance will have status code set to 0. Since it's not possible to create\n+ // a Response instance with status code 0, handle that use-case separately.\n+ if (response.status === 0) {\n+ return Response.error()\n+ }\n+\n+ const mockedResponse = new Response(response.body, response)\n+\n+ Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {\n+ value: true,\n+ enumerable: true,\n+ })\n+\n+ return mockedResponse\n+}\ndiff --git a/src/discount-code-form.browser.test.tsx b/src/discount-code-form.browser.test.tsx\nindex cd54a64..298285a 100644\n--- a/src/discount-code-form.browser.test.tsx\n+++ b/src/discount-code-form.browser.test.tsx\n@@ -1,11 +1,8 @@\n import { page } from '@vitest/browser/context'\n import { render } from 'vitest-browser-react'\n import { http, HttpResponse } from 'msw'\n-// 🐨 Import the `test` function from `test-extend`.\n-// This custom `test` function exposes the `worker` object\n-// you will use to access and use MSW in tests.\n-// 💰 import { test } from '../test-extend'\n-import { DiscountCodeForm } from './discount-code-form'\n+import { test } from '../test-extend'\n+import { DiscountCodeForm, type Discount } from './discount-code-form'\n \n test('applies a discount code', async () => {\n \trender()\n@@ -23,20 +20,21 @@ test('applies a discount code', async () => {\n \t\t.toBeVisible()\n })\n \n-test('displays a warning for legacy discount codes', async ({\n-\t// 🐨 Access the custom `worker` fixture you've prepared earlier.\n-}) => {\n-\t// 🐨 Call `worker.use()` and provide it a new request handler\n-\t// for the same POST https://api.example.com/discount/code request.\n-\t// In this handler, respond with a different mocked response that\n-\t// returns `isLegacy: true` in its JSON payload.\n-\t//\n-\t// Use the existing happy-path request handler from `src/mocks/handlers.ts`\n-\t// as a reference!\n-\t//\n-\t// 💰 worker.use()\n-\t// 💰 http.post(predicate, resolver)\n-\t// 💰 HttpResponse.json({ code, amount, isLegacy })\n+test('displays a warning for legacy discount codes', async ({ worker }) => {\n+\tworker.use(\n+\t\thttp.post(\n+\t\t\t'https://api.example.com/discount/code',\n+\t\t\tasync ({ request }) => {\n+\t\t\t\tconst code = await request.text()\n+\n+\t\t\t\treturn HttpResponse.json({\n+\t\t\t\t\tcode,\n+\t\t\t\t\tamount: 10,\n+\t\t\t\t\tisLegacy: true,\n+\t\t\t\t})\n+\t\t\t},\n+\t\t),\n+\t)\n \n \trender()\n \n@@ -48,27 +46,25 @@ test('displays a warning for legacy discount codes', async ({\n \t})\n \tawait applyDiscountButton.click()\n \n-\t// 🐨 Write an assertion that expects the text element\n-\t// with the applied discount code to be visible on the page.\n-\t// 💰 \"Discount: LEGA2000 (-10%)\"\n-\t// 💰 await expect.element(locator).toBeVisible()\n-\t//\n-\t// 🐨 Write another assertion that expected the warning\n-\t// to appear, notifying the user about the legacy discount code.\n-\t// 💰 await expect.element(locator).toHaveTextContent(content)\n-\t// 💰 page.getByRole('alert')\n-\t// 💰 '\"LEGA2000\" is a legacy code. Discount amount halved.'\n+\tawait expect\n+\t\t.element(page.getByText('Discount: LEGA2000 (-10%)'))\n+\t\t.toBeVisible()\n+\tawait expect\n+\t\t.element(page.getByRole('alert'))\n+\t\t.toHaveTextContent('\"LEGA2000\" is a legacy code. Discount amount halved.')\n })\n \n test('displays an error when fetching the discount fails', async ({\n-\t// 🐨 Access the `worker` fixture here.\n+\tworker,\n }) => {\n-\t// 🐨 Call `worker.use()` and describe another request handler.\n-\t// This time, respond with a mocked 500 response to simulate\n-\t// server error.\n-\t// 💰 worker.use(handler)\n-\t// 💰 http.post(predicate, resolver)\n-\t// 💰 new HttpResponse(null, { status: 500 })\n+\tworker.use(\n+\t\thttp.post(\n+\t\t\t'https://api.example.com/discount/code',\n+\t\t\t() => {\n+\t\t\t\treturn new HttpResponse(null, { status: 500 })\n+\t\t\t},\n+\t\t),\n+\t)\n \n \trender()\n \n@@ -80,9 +76,7 @@ test('displays an error when fetching the discount fails', async ({\n \t})\n \tawait applyDiscountButton.click()\n \n-\t// 🐨 Write an assertion that a notification is displayed,\n-\t// saying that applying the discount code has failed.\n-\t// 💰 await expect.element(locator).toHaveTextContent(content)\n-\t// 💰 page.getByRole('alert')\n-\t// 💰 'Failed to apply the discount code'\n+\tawait expect\n+\t\t.element(page.getByRole('alert'))\n+\t\t.toHaveTextContent('Failed to apply the discount code')\n })\ndiff --git a/src/main.tsx b/src/main.tsx\nindex c65b6ba..b5273ba 100644\n--- a/src/main.tsx\n+++ b/src/main.tsx\n@@ -3,8 +3,20 @@ import { createRoot } from 'react-dom/client'\n import './index.css'\n import { App } from './app.jsx'\n \n-createRoot(document.getElementById('root')!).render(\n+async function enableMocking() {\n+\tif (process.env.NODE_ENV === 'development') {\n+\t\tconst { worker } = await import('./mocks/browser.js')\n+\n+\t\tawait worker.start({\n+\t\t\tonUnhandledRequest: 'warn',\n+\t\t})\n+\t}\n+}\n+\n+enableMocking().then(() => {\n+\tcreateRoot(document.getElementById('root')!).render(\n \t\t\n \t\t\t\n \t\t,\n-)\n+\t)\n+})\ndiff --git a/src/mocks/browser.ts b/src/mocks/browser.ts\nnew file mode 100644\nindex 0000000..4dd03f0\n--- /dev/null\n+++ b/src/mocks/browser.ts\n@@ -0,0 +1,4 @@\n+import { setupWorker } from 'msw/browser'\n+import { handlers } from './handlers'\n+\n+export const worker = setupWorker(...handlers)\ndiff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts\nnew file mode 100644\nindex 0000000..9371671\n--- /dev/null\n+++ b/src/mocks/handlers.ts\n@@ -0,0 +1,16 @@\n+import { http, HttpResponse } from 'msw'\n+import type { Discount } from '../discount-code-form'\n+\n+export const handlers = [\n+\thttp.post(\n+\t\t'https://api.example.com/discount/code',\n+\t\tasync ({ request }) => {\n+\t\t\tconst code = await request.text()\n+\n+\t\t\treturn HttpResponse.json({\n+\t\t\t\tcode,\n+\t\t\t\tamount: 20,\n+\t\t\t})\n+\t\t},\n+\t),\n+]\ndiff --git a/tailwind.config.ts b/tailwind.config.ts\nindex 8633722..89a7688 100644\n--- a/tailwind.config.ts\n+++ b/tailwind.config.ts\n@@ -3,7 +3,17 @@ import type { Config } from 'tailwindcss'\n export default {\n \tcontent: ['./index.html', './src/**/*.{ts,tsx}'],\n \ttheme: {\n-\t\textend: {},\n+\t\textend: {\n+\t\t\tkeyframes: {\n+\t\t\t\t'slide-in': {\n+\t\t\t\t\t'0%': { transform: 'translateY(50%)' },\n+\t\t\t\t\t'100%': { transform: 'translateY(0)' },\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tanimation: {\n+\t\t\t\t'slide-in': 'slide-in .4s',\n+\t\t\t},\n+\t\t},\n \t},\n \tplugins: [],\n } satisfies Config\ndiff --git a/test-extend.ts b/test-extend.ts\nnew file mode 100644\nindex 0000000..47a6182\n--- /dev/null\n+++ b/test-extend.ts\n@@ -0,0 +1,21 @@\n+import { test as testBase } from 'vitest'\n+import { worker } from './src/mocks/browser'\n+\n+type TestContext = {\n+\tworker: typeof worker\n+}\n+\n+export const test = testBase.extend({\n+\tworker: [\n+\t\tasync ({}, use) => {\n+\t\t\tawait worker.start({\n+\t\t\t\tquiet: true,\n+\t\t\t\tonUnhandledRequest: 'error',\n+\t\t\t})\n+\t\t\tawait use(worker)\n+\t\t\tworker.resetHandlers()\n+\t\t\tworker.stop()\n+\t\t},\n+\t\t{ auto: true },\n+\t],\n+})\ndiff --git a/tsconfig.test.browser.json b/tsconfig.test.browser.json\nindex b8dbf34..c59f172 100644\n--- a/tsconfig.test.browser.json\n+++ b/tsconfig.test.browser.json\n@@ -3,7 +3,8 @@\n \t\"include\": [\n \t\t\"vitest.browser.setup.ts\",\n \t\t\"src/**/*\",\n-\t\t\"src/**/*.browser.test.ts*\"\n+\t\t\"src/**/*.browser.test.ts*\",\n+\t\t\"test-extend.ts\"\n \t],\n \t\"exclude\": [],\n \t\"compilerOptions\": {"]

package.json-15+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/mockServiceWorker.js-0+307App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.browser.test.tsx-67+61App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/main.tsx-8+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/browser.ts-0+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/handlers.ts-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tailwind.config.ts-7+17App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

test-extend.ts-0+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.test.browser.json-7+8App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-15+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/mockServiceWorker.js-0+307App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.browser.test.tsx-67+61App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/main.tsx-8+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/browser.ts-0+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/handlers.ts-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tailwind.config.ts-7+17App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

test-extend.ts-0+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.test.browser.json-7+8App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2