Skip to content

Commit c384ab2

Browse files
committed
03/04: add problem and solution texts
1 parent 5d80eb5 commit c384ab2

25 files changed

+980
-4
lines changed
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Element presence
2+
3+
So far you've been finding and interacting with the elements that are either already present on the page or expected to eventually appear. But what about the cases when you need to check the opposite? That a certain UI element _did not_ render?
4+
5+
This is where you would normally reach out to an [inverse assertion](https://www.epicweb.dev/inverse-assertions) to get a predictable result and guard yourself from false-positive tests:
6+
7+
```ts
8+
const notificationVisiblePromise = vi.waitFor(() => {
9+
expect(notification).toBeVisible()
10+
})
11+
12+
// Instead of asserting that the element is not visible,
13+
// which may lead to false-positive results if it appears after a delay,
14+
// check that the element has never appeared instead.
15+
await expect(notificationVisiblePromise).rejects.toThrow()
16+
```
17+
18+
Or, alternatively, use the designated `waitForElementToBeRemoved()` utility from React Testing Library:
19+
20+
```ts
21+
await waitForElementToBeRemoved(notification)
22+
```
23+
24+
**However, there's a more convenient way to do this in Vitest!**
25+
26+
👨‍💼 In this exercise, you will utilize the retry-ability of Vitest's `expect.element()` function to assert that the discount code has been removed from the UI once you click the respective button. Go to the <InlineFile file="./src/discount-code-form.browser.test.tsx">`discount-code-form.browser.test.tsx`</InlineFile> test suite and follow the instructions to complete a new test case.
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
</html>
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"type": "module",
3+
"name": "exercises_03.best-practices_04.problem.element-presence",
4+
"scripts": {
5+
"dev": "vite",
6+
"test": "vitest"
7+
},
8+
"dependencies": {
9+
"react": "^19.0.0",
10+
"react-dom": "^19.0.0"
11+
},
12+
"devDependencies": {
13+
"@testing-library/dom": "^10.4.0",
14+
"@testing-library/react": "^16.1.0",
15+
"@types/node": "^22.10.6",
16+
"@types/react": "^19.0.6",
17+
"@types/react-dom": "^19.0.3",
18+
"@vitejs/plugin-react": "^4.3.4",
19+
"@vitest/browser": "^3.0.2",
20+
"autoprefixer": "^10.4.20",
21+
"msw": "^2.7.0",
22+
"playwright": "^1.49.1",
23+
"postcss": "^8.4.49",
24+
"tailwindcss": "^3.4.17",
25+
"vite": "^6.0.7",
26+
"vitest": "^3.0.2"
27+
},
28+
"msw": {
29+
"workerDirectory": [
30+
"public"
31+
]
32+
}
33+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}
Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
/* eslint-disable */
2+
/* tslint:disable */
3+
4+
/**
5+
* Mock Service Worker.
6+
* @see https://github.com/mswjs/msw
7+
* - Please do NOT modify this file.
8+
* - Please do NOT serve this file on production.
9+
*/
10+
11+
const PACKAGE_VERSION = '2.7.0'
12+
const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
13+
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
14+
const activeClientIds = new Set()
15+
16+
self.addEventListener('install', function () {
17+
self.skipWaiting()
18+
})
19+
20+
self.addEventListener('activate', function (event) {
21+
event.waitUntil(self.clients.claim())
22+
})
23+
24+
self.addEventListener('message', async function (event) {
25+
const clientId = event.source.id
26+
27+
if (!clientId || !self.clients) {
28+
return
29+
}
30+
31+
const client = await self.clients.get(clientId)
32+
33+
if (!client) {
34+
return
35+
}
36+
37+
const allClients = await self.clients.matchAll({
38+
type: 'window',
39+
})
40+
41+
switch (event.data) {
42+
case 'KEEPALIVE_REQUEST': {
43+
sendToClient(client, {
44+
type: 'KEEPALIVE_RESPONSE',
45+
})
46+
break
47+
}
48+
49+
case 'INTEGRITY_CHECK_REQUEST': {
50+
sendToClient(client, {
51+
type: 'INTEGRITY_CHECK_RESPONSE',
52+
payload: {
53+
packageVersion: PACKAGE_VERSION,
54+
checksum: INTEGRITY_CHECKSUM,
55+
},
56+
})
57+
break
58+
}
59+
60+
case 'MOCK_ACTIVATE': {
61+
activeClientIds.add(clientId)
62+
63+
sendToClient(client, {
64+
type: 'MOCKING_ENABLED',
65+
payload: {
66+
client: {
67+
id: client.id,
68+
frameType: client.frameType,
69+
},
70+
},
71+
})
72+
break
73+
}
74+
75+
case 'MOCK_DEACTIVATE': {
76+
activeClientIds.delete(clientId)
77+
break
78+
}
79+
80+
case 'CLIENT_CLOSED': {
81+
activeClientIds.delete(clientId)
82+
83+
const remainingClients = allClients.filter((client) => {
84+
return client.id !== clientId
85+
})
86+
87+
// Unregister itself when there are no more clients
88+
if (remainingClients.length === 0) {
89+
self.registration.unregister()
90+
}
91+
92+
break
93+
}
94+
}
95+
})
96+
97+
self.addEventListener('fetch', function (event) {
98+
const { request } = event
99+
100+
// Bypass navigation requests.
101+
if (request.mode === 'navigate') {
102+
return
103+
}
104+
105+
// Opening the DevTools triggers the "only-if-cached" request
106+
// that cannot be handled by the worker. Bypass such requests.
107+
if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
108+
return
109+
}
110+
111+
// Bypass all requests when there are no active clients.
112+
// Prevents the self-unregistered worked from handling requests
113+
// after it's been deleted (still remains active until the next reload).
114+
if (activeClientIds.size === 0) {
115+
return
116+
}
117+
118+
// Generate unique request ID.
119+
const requestId = crypto.randomUUID()
120+
event.respondWith(handleRequest(event, requestId))
121+
})
122+
123+
async function handleRequest(event, requestId) {
124+
const client = await resolveMainClient(event)
125+
const response = await getResponse(event, client, requestId)
126+
127+
// Send back the response clone for the "response:*" life-cycle events.
128+
// Ensure MSW is active and ready to handle the message, otherwise
129+
// this message will pend indefinitely.
130+
if (client && activeClientIds.has(client.id)) {
131+
;(async function () {
132+
const responseClone = response.clone()
133+
134+
sendToClient(
135+
client,
136+
{
137+
type: 'RESPONSE',
138+
payload: {
139+
requestId,
140+
isMockedResponse: IS_MOCKED_RESPONSE in response,
141+
type: responseClone.type,
142+
status: responseClone.status,
143+
statusText: responseClone.statusText,
144+
body: responseClone.body,
145+
headers: Object.fromEntries(responseClone.headers.entries()),
146+
},
147+
},
148+
[responseClone.body],
149+
)
150+
})()
151+
}
152+
153+
return response
154+
}
155+
156+
// Resolve the main client for the given event.
157+
// Client that issues a request doesn't necessarily equal the client
158+
// that registered the worker. It's with the latter the worker should
159+
// communicate with during the response resolving phase.
160+
async function resolveMainClient(event) {
161+
const client = await self.clients.get(event.clientId)
162+
163+
if (activeClientIds.has(event.clientId)) {
164+
return client
165+
}
166+
167+
if (client?.frameType === 'top-level') {
168+
return client
169+
}
170+
171+
const allClients = await self.clients.matchAll({
172+
type: 'window',
173+
})
174+
175+
return allClients
176+
.filter((client) => {
177+
// Get only those clients that are currently visible.
178+
return client.visibilityState === 'visible'
179+
})
180+
.find((client) => {
181+
// Find the client ID that's recorded in the
182+
// set of clients that have registered the worker.
183+
return activeClientIds.has(client.id)
184+
})
185+
}
186+
187+
async function getResponse(event, client, requestId) {
188+
const { request } = event
189+
190+
// Clone the request because it might've been already used
191+
// (i.e. its body has been read and sent to the client).
192+
const requestClone = request.clone()
193+
194+
function passthrough() {
195+
// Cast the request headers to a new Headers instance
196+
// so the headers can be manipulated with.
197+
const headers = new Headers(requestClone.headers)
198+
199+
// Remove the "accept" header value that marked this request as passthrough.
200+
// This prevents request alteration and also keeps it compliant with the
201+
// user-defined CORS policies.
202+
const acceptHeader = headers.get('accept')
203+
if (acceptHeader) {
204+
const values = acceptHeader.split(',').map((value) => value.trim())
205+
const filteredValues = values.filter(
206+
(value) => value !== 'msw/passthrough',
207+
)
208+
209+
if (filteredValues.length > 0) {
210+
headers.set('accept', filteredValues.join(', '))
211+
} else {
212+
headers.delete('accept')
213+
}
214+
}
215+
216+
return fetch(requestClone, { headers })
217+
}
218+
219+
// Bypass mocking when the client is not active.
220+
if (!client) {
221+
return passthrough()
222+
}
223+
224+
// Bypass initial page load requests (i.e. static assets).
225+
// The absence of the immediate/parent client in the map of the active clients
226+
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
227+
// and is not ready to handle requests.
228+
if (!activeClientIds.has(client.id)) {
229+
return passthrough()
230+
}
231+
232+
// Notify the client that a request has been intercepted.
233+
const requestBuffer = await request.arrayBuffer()
234+
const clientMessage = await sendToClient(
235+
client,
236+
{
237+
type: 'REQUEST',
238+
payload: {
239+
id: requestId,
240+
url: request.url,
241+
mode: request.mode,
242+
method: request.method,
243+
headers: Object.fromEntries(request.headers.entries()),
244+
cache: request.cache,
245+
credentials: request.credentials,
246+
destination: request.destination,
247+
integrity: request.integrity,
248+
redirect: request.redirect,
249+
referrer: request.referrer,
250+
referrerPolicy: request.referrerPolicy,
251+
body: requestBuffer,
252+
keepalive: request.keepalive,
253+
},
254+
},
255+
[requestBuffer],
256+
)
257+
258+
switch (clientMessage.type) {
259+
case 'MOCK_RESPONSE': {
260+
return respondWithMock(clientMessage.data)
261+
}
262+
263+
case 'PASSTHROUGH': {
264+
return passthrough()
265+
}
266+
}
267+
268+
return passthrough()
269+
}
270+
271+
function sendToClient(client, message, transferrables = []) {
272+
return new Promise((resolve, reject) => {
273+
const channel = new MessageChannel()
274+
275+
channel.port1.onmessage = (event) => {
276+
if (event.data && event.data.error) {
277+
return reject(event.data.error)
278+
}
279+
280+
resolve(event.data)
281+
}
282+
283+
client.postMessage(
284+
message,
285+
[channel.port2].concat(transferrables.filter(Boolean)),
286+
)
287+
})
288+
}
289+
290+
async function respondWithMock(response) {
291+
// Setting response status code to 0 is a no-op.
292+
// However, when responding with a "Response.error()", the produced Response
293+
// instance will have status code set to 0. Since it's not possible to create
294+
// a Response instance with status code 0, handle that use-case separately.
295+
if (response.status === 0) {
296+
return Response.error()
297+
}
298+
299+
const mockedResponse = new Response(response.body, response)
300+
301+
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
302+
value: true,
303+
enumerable: true,
304+
})
305+
306+
return mockedResponse
307+
}
Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)