03: a bunch of fixes

Author: kettanaito

exercises/03.best-practices/03.problem.network-mocking/README.mdx

@@ -48,7 +48,7 @@ export const handlers = []
 
 ```ts filename=src/mocks/browser.ts
 import { setupWorker } from 'msw/browser'
-import { handlers } from './handlers.js'
+import { handlers } from './handlers'
 
 export const worker = setupWorker(...handlers)
 ```
@@ -96,7 +96,7 @@ import { test as testBase } from 'vitest'
 ```ts filename=test-extend.ts add=3
 import { test as testBase } from 'vitest'
 
-export const test = testBase.extend()
+export const test = testBase.extend({})
 ```
 
 > :owl: Calling `.extend()` allows you to put _custom properties_ you can then access on the `test()` function.
@@ -117,7 +117,7 @@ Right now, the `worker` property has an array of two elements: `fixture` and `op
 
 ```ts filename=test-extend.ts add=2,6-14
 import { test as testBase } from 'vitest'
-import { worker } from './src/mocks/browser.js'
+import { worker } from './src/mocks/browser'
 
 export const test = testBase.extend({
 	worker: [
@@ -144,7 +144,7 @@ await worker.start({
 })
 ```
 
-Here, you are starting the worker that enables request mocking in MSW. You are referencing the same `worker` object you've configured previously in `src/mocks/browser.js`.
+Here, you are starting the worker that enables request mocking in MSW. You are referencing the same `worker` object you've configured previously in `src/mocks/browser.ts`.
 
 ```ts nonumber
 await use(worker)
@@ -162,7 +162,7 @@ worker.resetHandlers()
 
 This line makes sure that any mocks you add in individual tests are _reset_ between them. This achieves scope isolation and prevents network overrides from leaking to irrelevant tests.
 
-```ts
+```ts nonumber
 worker.stop()
 ```
 

exercises/03.best-practices/03.problem.network-mocking/src/discount-code-form.browser.test.tsx

@@ -1,10 +1,10 @@
 import { page } from '@vitest/browser/context'
 import { render } from 'vitest-browser-react'
 import { http, HttpResponse } from 'msw'
-// 🐨 Import the `test` function from `test-extend.js`.
+// 🐨 Import the `test` function from `test-extend`.
 // This custom `test` function exposes the `worker` object
 // you will use to access and use MSW in tests.
-// 💰 import { test } from '../test-extend.js'
+// 💰 import { test } from '../test-extend'
 import { DiscountCodeForm } from './discount-code-form'
 
 test('applies a discount code', async () => {
@@ -50,6 +50,8 @@ test('displays a warning for legacy discount codes', async ({
 
 	// 🐨 Write an assertion that expects the text element
 	// with the applied discount code to be visible on the page.
+	// 💰 "Discount: LEGA2000 (-10%)"
+	// 💰 await expect.element(locator).toBeVisible()
 	//
 	// 🐨 Write another assertion that expected the warning
 	// to appear, notifying the user about the legacy discount code.

exercises/03.best-practices/03.solution.network-mocking/README.mdx

@@ -108,7 +108,7 @@ import { App } from './app.jsx'
 
 async function enableMocking() {
 	if (process.env.NODE_ENV === 'development') {
-		const { worker } = await import('./mocks/browser.js')
+		const { worker } = await import('./mocks/browser')
 		await worker.start()
 	}
 }
@@ -126,7 +126,7 @@ enableMocking().then(() => {
 
 This functions does a couple of things:
 
-1. Imports the `./mocks/browser.js` module _conditionally_ to enable MSW only in development;
+1. Imports the `./mocks/browser.ts` module _conditionally_ to enable MSW only in development;
 1. Calls `await worker.start()` to actually register and start the Service Worker.
 
 ## Related materials

exercises/03.best-practices/03.solution.network-mocking/src/discount-code-form.browser.test.tsx

@@ -1,7 +1,7 @@
 import { page } from '@vitest/browser/context'
 import { render } from 'vitest-browser-react'
 import { http, HttpResponse } from 'msw'
-import { test } from '../test-extend.js'
+import { test } from '../test-extend'
 import { DiscountCodeForm, type Discount } from './discount-code-form'
 
 test('applies a discount code', async () => {

exercises/03.best-practices/03.solution.network-mocking/src/mocks/browser.ts

@@ -1,4 +1,4 @@
 import { setupWorker } from 'msw/browser'
-import { handlers } from './handlers.js'
+import { handlers } from './handlers'
 
 export const worker = setupWorker(...handlers)

exercises/03.best-practices/03.solution.network-mocking/src/mocks/handlers.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import type { Discount } from '../discount-code-form.js'
+import type { Discount } from '../discount-code-form'
 
 export const handlers = [
 	http.post<never, string, Discount>(

exercises/03.best-practices/04.problem.element-presence/src/discount-code-form.browser.test.tsx

@@ -1,7 +1,7 @@
 import { page } from '@vitest/browser/context'
 import { render } from 'vitest-browser-react'
 import { http, HttpResponse } from 'msw'
-import { test } from '../test-extend.js'
+import { test } from '../test-extend'
 import { DiscountCodeForm, type Discount } from './discount-code-form'
 
 test('applies a discount code', async () => {

exercises/03.best-practices/04.problem.element-presence/src/mocks/browser.ts

@@ -1,4 +1,4 @@
 import { setupWorker } from 'msw/browser'
-import { handlers } from './handlers.js'
+import { handlers } from './handlers'
 
 export const worker = setupWorker(...handlers)

exercises/03.best-practices/04.solution.element-presence/src/discount-code-form.browser.test.tsx

@@ -1,7 +1,7 @@
 import { page } from '@vitest/browser/context'
 import { render } from 'vitest-browser-react'
 import { http, HttpResponse } from 'msw'
-import { test } from '../test-extend.js'
+import { test } from '../test-extend'
 import { DiscountCodeForm, type Discount } from './discount-code-form'
 
 test('applies a discount code', async () => {

exercises/03.best-practices/04.solution.element-presence/src/mocks/browser.ts

@@ -1,4 +1,4 @@
 import { setupWorker } from 'msw/browser'
-import { handlers } from './handlers.js'
+import { handlers } from './handlers'
 
 export const worker = setupWorker(...handlers)