Skip to content

Commit

Permalink
Upgrade storybook and msw (#3994)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshwooding
joshwooding authored Aug 16, 2024
1 parent dae73c6 commit b1d730d
Show file tree
Hide file tree
Showing 6 changed files with 601 additions and 613 deletions.
181 changes: 81 additions & 100 deletions docs/public/mockServiceWorker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
/* tslint:disable */

/**
* Mock Service Worker (1.2.1).
* Mock Service Worker.
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.
*/

const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
const PACKAGE_VERSION = '2.3.5'
const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()

self.addEventListener('install', function () {
Expand Down Expand Up @@ -47,7 +49,10 @@ self.addEventListener('message', async function (event) {
case 'INTEGRITY_CHECK_REQUEST': {
sendToClient(client, {
type: 'INTEGRITY_CHECK_RESPONSE',
payload: INTEGRITY_CHECKSUM,
payload: {
packageVersion: PACKAGE_VERSION,
checksum: INTEGRITY_CHECKSUM,
},
})
break
}
Expand Down Expand Up @@ -86,12 +91,6 @@ self.addEventListener('message', async function (event) {

self.addEventListener('fetch', function (event) {
const { request } = event
const accept = request.headers.get('accept') || ''

// Bypass server-sent events.
if (accept.includes('text/event-stream')) {
return
}

// Bypass navigation requests.
if (request.mode === 'navigate') {
Expand All @@ -112,29 +111,8 @@ self.addEventListener('fetch', function (event) {
}

// Generate unique request ID.
const requestId = Math.random().toString(16).slice(2)

event.respondWith(
handleRequest(event, requestId).catch((error) => {
if (error.name === 'NetworkError') {
console.warn(
'[MSW] Successfully emulated a network error for the "%s %s" request.',
request.method,
request.url,
)
return
}

// At this point, any exception indicates an issue with the original request/response.
console.error(
`\
[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
request.method,
request.url,
`${error.name}: ${error.message}`,
)
}),
)
const requestId = crypto.randomUUID()
event.respondWith(handleRequest(event, requestId))
})

async function handleRequest(event, requestId) {
Expand All @@ -146,21 +124,24 @@ async function handleRequest(event, requestId) {
// this message will pend indefinitely.
if (client && activeClientIds.has(client.id)) {
;(async function () {
const clonedResponse = response.clone()
sendToClient(client, {
type: 'RESPONSE',
payload: {
requestId,
type: clonedResponse.type,
ok: clonedResponse.ok,
status: clonedResponse.status,
statusText: clonedResponse.statusText,
body:
clonedResponse.body === null ? null : await clonedResponse.text(),
headers: Object.fromEntries(clonedResponse.headers.entries()),
redirected: clonedResponse.redirected,
const responseClone = response.clone()

sendToClient(
client,
{
type: 'RESPONSE',
payload: {
requestId,
isMockedResponse: IS_MOCKED_RESPONSE in response,
type: responseClone.type,
status: responseClone.status,
statusText: responseClone.statusText,
body: responseClone.body,
headers: Object.fromEntries(responseClone.headers.entries()),
},
},
})
[responseClone.body],
)
})()
}

Expand Down Expand Up @@ -196,20 +177,20 @@ async function resolveMainClient(event) {

async function getResponse(event, client, requestId) {
const { request } = event
const clonedRequest = request.clone()

// Clone the request because it might've been already used
// (i.e. its body has been read and sent to the client).
const requestClone = request.clone()

function passthrough() {
// Clone the request because it might've been already used
// (i.e. its body has been read and sent to the client).
const headers = Object.fromEntries(clonedRequest.headers.entries())
const headers = Object.fromEntries(requestClone.headers.entries())

// Remove MSW-specific request headers so the bypassed requests
// comply with the server's CORS preflight check.
// Operate with the headers as an object because request "Headers"
// are immutable.
delete headers['x-msw-bypass']
// Remove internal MSW request header so the passthrough request
// complies with any potential CORS preflight checks on the server.
// Some servers forbid unknown request headers.
delete headers['x-msw-intention']

return fetch(clonedRequest, { headers })
return fetch(requestClone, { headers })
}

// Bypass mocking when the client is not active.
Expand All @@ -225,57 +206,46 @@ async function getResponse(event, client, requestId) {
return passthrough()
}

// Bypass requests with the explicit bypass header.
// Such requests can be issued by "ctx.fetch()".
if (request.headers.get('x-msw-bypass') === 'true') {
return passthrough()
}

// Notify the client that a request has been intercepted.
const clientMessage = await sendToClient(client, {
type: 'REQUEST',
payload: {
id: requestId,
url: request.url,
method: request.method,
headers: Object.fromEntries(request.headers.entries()),
cache: request.cache,
mode: request.mode,
credentials: request.credentials,
destination: request.destination,
integrity: request.integrity,
redirect: request.redirect,
referrer: request.referrer,
referrerPolicy: request.referrerPolicy,
body: await request.text(),
bodyUsed: request.bodyUsed,
keepalive: request.keepalive,
const requestBuffer = await request.arrayBuffer()
const clientMessage = await sendToClient(
client,
{
type: 'REQUEST',
payload: {
id: requestId,
url: request.url,
mode: request.mode,
method: request.method,
headers: Object.fromEntries(request.headers.entries()),
cache: request.cache,
credentials: request.credentials,
destination: request.destination,
integrity: request.integrity,
redirect: request.redirect,
referrer: request.referrer,
referrerPolicy: request.referrerPolicy,
body: requestBuffer,
keepalive: request.keepalive,
},
},
})
[requestBuffer],
)

switch (clientMessage.type) {
case 'MOCK_RESPONSE': {
return respondWithMock(clientMessage.data)
}

case 'MOCK_NOT_FOUND': {
case 'PASSTHROUGH': {
return passthrough()
}

case 'NETWORK_ERROR': {
const { name, message } = clientMessage.data
const networkError = new Error(message)
networkError.name = name

// Rejecting a "respondWith" promise emulates a network error.
throw networkError
}
}

return passthrough()
}

function sendToClient(client, message) {
function sendToClient(client, message, transferrables = []) {
return new Promise((resolve, reject) => {
const channel = new MessageChannel()

Expand All @@ -287,17 +257,28 @@ function sendToClient(client, message) {
resolve(event.data)
}

client.postMessage(message, [channel.port2])
client.postMessage(
message,
[channel.port2].concat(transferrables.filter(Boolean)),
)
})
}

function sleep(timeMs) {
return new Promise((resolve) => {
setTimeout(resolve, timeMs)
async function respondWithMock(response) {
// Setting response status code to 0 is a no-op.
// However, when responding with a "Response.error()", the produced Response
// instance will have status code set to 0. Since it's not possible to create
// a Response instance with status code 0, handle that use-case separately.
if (response.status === 0) {
return Response.error()
}

const mockedResponse = new Response(response.body, response)

Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
value: true,
enumerable: true,
})
}

async function respondWithMock(response) {
await sleep(response.delay)
return new Response(response.body, response)
return mockedResponse
}
42 changes: 21 additions & 21 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,24 +58,24 @@
"@faker-js/faker": "^8.0.0",
"@fontsource/open-sans": "^4.5.13",
"@fontsource/pt-mono": "^5.0.12",
"@mswjs/data": "^0.14.0",
"@storybook/addon-a11y": "^8.2.4",
"@storybook/addon-actions": "^8.2.4",
"@storybook/addon-docs": "^8.2.4",
"@storybook/addon-essentials": "^8.2.4",
"@storybook/addon-interactions": "^8.2.4",
"@storybook/addon-links": "^8.2.4",
"@storybook/addon-mdx-gfm": "^8.2.4",
"@storybook/addon-storysource": "^8.2.4",
"@storybook/blocks": "^8.2.4",
"@storybook/components": "^8.2.4",
"@storybook/icons": "^1.2.9",
"@storybook/manager-api": "^8.2.4",
"@storybook/react": "^8.2.4",
"@storybook/react-vite": "^8.2.4",
"@storybook/test": "patch:@storybook/test@npm%3A8.2.4#~/.yarn/patches/@storybook-test-npm-8.2.4-0a53c854b7.patch",
"@storybook/theming": "^8.2.4",
"@storybook/types": "^8.2.4",
"@mswjs/data": "^0.16.1",
"@storybook/addon-a11y": "^8.2.9",
"@storybook/addon-actions": "^8.2.9",
"@storybook/addon-docs": "^8.2.9",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-mdx-gfm": "^8.2.9",
"@storybook/addon-storysource": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/components": "^8.2.9",
"@storybook/icons": "^1.2.10",
"@storybook/manager-api": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "patch:@storybook/test@npm%3A8.2.9#~/.yarn/patches/@storybook-test-npm-8.2.4-0a53c854b7.patch",
"@storybook/theming": "^8.2.9",
"@storybook/types": "^8.2.9",
"@tanstack/react-query": "^4.28.0",
"@testing-library/cypress": "^10.0.0",
"@testing-library/dom": "^10.0.0",
Expand All @@ -101,15 +101,15 @@
"dom-accessibility-api": "^0.7.0",
"mockdate": "^3.0.5",
"modular-scripts": "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch",
"msw": "^1.2.1",
"msw-storybook-addon": "^1.8.0",
"msw": "^2.3.5",
"msw-storybook-addon": "^2.0.3",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-docgen-typescript": "2.2.2",
"react-dom": "^18.3.1",
"rifm": "^0.12.0",
"sass": "^1.52.3",
"storybook": "^8.2.4",
"storybook": "^8.2.9",
"stylelint": "^16.0.0",
"typescript": "4.6.4",
"vite": "^4.4.9",
Expand Down
13 changes: 8 additions & 5 deletions packages/data-grid/stories/grid-serverSideData.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
QueryClientProvider,
useInfiniteQuery,
} from "@tanstack/react-query";
import { rest } from "msw";
import { http } from "msw";
import { useCallback } from "react";
import { Grid, GridColumn, RowSelectionCheckboxColumn } from "../src";
import { type Investor, db, investorKeyGetter } from "./dummyData";
Expand All @@ -16,9 +16,10 @@ export default {
parameters: {
msw: {
handlers: [
rest.get("/api/investors", (req, res, ctx) => {
const startParam = req.url.searchParams.get("start");
const limitParam = req.url.searchParams.get("limit");
http.get("/api/investors", ({ request }) => {
const url = new URL(request.url);
const startParam = url.searchParams.get("start");
const limitParam = url.searchParams.get("limit");
const start = startParam ? Number(startParam) : 0;
const limit = limitParam ? Number(limitParam) : 50;

Expand All @@ -27,7 +28,9 @@ export default {
take: limit,
});

return res(ctx.json(response));
return new Response(JSON.stringify(response), {
headers: { "Content-Type": "application/json" },
});
}),
],
},
Expand Down
11 changes: 7 additions & 4 deletions packages/data-grid/stories/grid-sortColumns.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
QueryClientProvider,
useQuery,
} from "@tanstack/react-query";
import { rest } from "msw";
import { http } from "msw";
import { useEffect, useState } from "react";
import {
type Investor,
Expand All @@ -22,8 +22,9 @@ export default {
parameters: {
msw: {
handlers: [
rest.get("/api/investors", (req, res, ctx) => {
const sortBy = req.url.searchParams.get("sort_by");
http.get("/api/investors", ({ request }) => {
const url = new URL(request.url);
const sortBy = url.searchParams.get("sort_by");

const orderBy =
sortBy
Expand All @@ -44,7 +45,9 @@ export default {
take: 50,
});

return res(ctx.json(response));
return new Response(JSON.stringify(response), {
headers: { "Content-Type": "application/json" },
});
}),
],
},
Expand Down
Loading

0 comments on commit b1d730d

Please sign in to comment.