Skip to content

Commit c78f3c5

Browse files
committed
chore: set msw for storybook
1 parent 044d829 commit c78f3c5

File tree

6 files changed

+319
-15
lines changed

6 files changed

+319
-15
lines changed

packages/lib/.storybook/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ const config: StorybookConfig = {
2828

2929
// public added for msw: https://github.com/mswjs/msw-storybook-addon?tab=readme-ov-file#start-storybook
3030
// '../storybook/public'
31-
staticDirs: ['../storybook/assets'],
31+
staticDirs: ['../storybook/assets', '../storybook/public'],
3232

3333
viteFinal(config) {
3434
return mergeConfig(config, {
35-
define: generateEnvironmentVariables(),
35+
define: generateEnvironmentVariables(process.env.NODE_ENV),
3636
resolve: {
3737
alias: [
3838
{

packages/lib/.storybook/preview.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import './main.css';
22
import { Preview } from '@storybook/preact';
33
import { DEFAULT_COUNTRY_CODE, DEFAULT_SHOPPER_LOCALE, DEFAULT_AMOUNT_VALUE, SHOPPER_LOCALES } from '../storybook/config/commonConfig';
4-
//import { initialize as initializeMSW, mswLoader } from 'msw-storybook-addon';
4+
import { initialize, mswLoader } from 'msw-storybook-addon';
55

6-
// from the docs: https://github.com/mswjs/msw-storybook-addon
7-
// initializeMSW({
8-
// onUnhandledRequest: 'bypass'
9-
// });
6+
const isDev = process.env.NODE_ENV === 'development';
7+
if (isDev) {
8+
initialize({ onUnhandledRequest: 'bypass' });
9+
}
10+
const loaders = isDev ? { loaders: [mswLoader] } : {};
1011

1112
const preview: Preview = {
1213
argTypes: {
@@ -33,8 +34,8 @@ const preview: Preview = {
3334
shopperLocale: DEFAULT_SHOPPER_LOCALE,
3435
amount: DEFAULT_AMOUNT_VALUE,
3536
showPayButton: true
36-
}
37-
//loaders: [mswLoader]
37+
},
38+
...loaders
3839
};
3940

4041
export default preview;

packages/lib/config/environment-variables.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { loadEnv } from 'vite';
33
import * as path from 'path';
44

55
function generateEnvironmentVariables(buildType = 'development', bundleType = 'esm') {
6-
const env = loadEnv(buildType, path.resolve('../../', '.env'), '');
6+
const env = loadEnv(buildType, path.resolve('../../'), '');
77

88
return {
99
'process.env.CLIENT_ENV': JSON.stringify(env.CLIENT_ENV),
1010
'process.env.CLIENT_KEY': JSON.stringify(env.CLIENT_KEY),
1111
'process.env.BUNDLE_TYPE': JSON.stringify(bundleType),
12-
'process.env.NODE_ENV': JSON.stringify(buildType),
12+
'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV ?? buildType),
1313
'process.env.VERSION': JSON.stringify(packageJson.version),
1414
'process.env.__SF_ENV__': JSON.stringify(env.SF_ENV || 'build')
1515
};

packages/lib/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,8 @@
123123
"jest-fixed-jsdom": "^0.0.9",
124124
"jest-mock-extended": "3.0.7",
125125
"lint-staged": "15.3.0",
126-
"msw": "^2.6.4",
127-
"msw-storybook-addon": "^2.0.4",
126+
"msw": "2.7.1",
127+
"msw-storybook-addon": "2.0.4",
128128
"postcss": "8.4.49",
129129
"rollup": "4.29.1",
130130
"rollup-plugin-dts": "6.1.1",
@@ -161,4 +161,4 @@
161161
"storybook/public"
162162
]
163163
}
164-
}
164+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
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(value => value !== 'msw/passthrough');
206+
207+
if (filteredValues.length > 0) {
208+
headers.set('accept', filteredValues.join(', '));
209+
} else {
210+
headers.delete('accept');
211+
}
212+
}
213+
214+
return fetch(requestClone, { headers });
215+
}
216+
217+
// Bypass mocking when the client is not active.
218+
if (!client) {
219+
return passthrough();
220+
}
221+
222+
// Bypass initial page load requests (i.e. static assets).
223+
// The absence of the immediate/parent client in the map of the active clients
224+
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
225+
// and is not ready to handle requests.
226+
if (!activeClientIds.has(client.id)) {
227+
return passthrough();
228+
}
229+
230+
// Notify the client that a request has been intercepted.
231+
const requestBuffer = await request.arrayBuffer();
232+
const clientMessage = await sendToClient(
233+
client,
234+
{
235+
type: 'REQUEST',
236+
payload: {
237+
id: requestId,
238+
url: request.url,
239+
mode: request.mode,
240+
method: request.method,
241+
headers: Object.fromEntries(request.headers.entries()),
242+
cache: request.cache,
243+
credentials: request.credentials,
244+
destination: request.destination,
245+
integrity: request.integrity,
246+
redirect: request.redirect,
247+
referrer: request.referrer,
248+
referrerPolicy: request.referrerPolicy,
249+
body: requestBuffer,
250+
keepalive: request.keepalive
251+
}
252+
},
253+
[requestBuffer]
254+
);
255+
256+
switch (clientMessage.type) {
257+
case 'MOCK_RESPONSE': {
258+
return respondWithMock(clientMessage.data);
259+
}
260+
261+
case 'PASSTHROUGH': {
262+
return passthrough();
263+
}
264+
}
265+
266+
return passthrough();
267+
}
268+
269+
function sendToClient(client, message, transferrables = []) {
270+
return new Promise((resolve, reject) => {
271+
const channel = new MessageChannel();
272+
273+
channel.port1.onmessage = event => {
274+
if (event.data && event.data.error) {
275+
return reject(event.data.error);
276+
}
277+
278+
resolve(event.data);
279+
};
280+
281+
client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
282+
});
283+
}
284+
285+
async function respondWithMock(response) {
286+
// Setting response status code to 0 is a no-op.
287+
// However, when responding with a "Response.error()", the produced Response
288+
// instance will have status code set to 0. Since it's not possible to create
289+
// a Response instance with status code 0, handle that use-case separately.
290+
if (response.status === 0) {
291+
return Response.error();
292+
}
293+
294+
const mockedResponse = new Response(response.body, response);
295+
296+
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
297+
value: true,
298+
enumerable: true
299+
});
300+
301+
return mockedResponse;
302+
}

packages/lib/storybook/stories/Checkout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export const Checkout = ({ children, checkoutConfig }: ICheckout) => {
1919
.then(checkout => {
2020
setAdyenCheckout(checkout);
2121
})
22-
.catch(() => {
22+
.catch(e => {
23+
console.error(e);
2324
setErrorMessage('Initialize checkout failed.');
2425
});
2526
}, [checkoutConfig]);

0 commit comments

Comments
 (0)