Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tapico/tapico-msw-webarchive
An utility to drive requests handlers through a `.har` web-archive file
https://github.com/tapico/tapico-msw-webarchive
mock msw
Last synced: 1 day ago
JSON representation
An utility to drive requests handlers through a `.har` web-archive file
- Host: GitHub
- URL: https://github.com/tapico/tapico-msw-webarchive
- Owner: Tapico
- License: mit
- Created: 2020-09-08T18:21:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T16:06:32.000Z (9 months ago)
- Last Synced: 2024-04-14T02:34:52.474Z (9 months ago)
- Topics: mock, msw
- Language: TypeScript
- Homepage:
- Size: 749 KB
- Stars: 81
- Watchers: 4
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @tapico/msw-webarchive
A utility to drive requests handlers through a `.har` web-archive file for the
[Mock Service Worker](https://github.com/mswjs/msw) library. This utility allows you to mock server
handlers by using `.har` web-archive file which can be created by using applications like Charles,
ProxyMan or the Chrome Developer Tools.
## Why you use this?
We have been using it during the development of web-applications, while the backend API endpoints
weren't available yet or when we want to reproduce a problem of a customer. This way we can request
the customer to send us a .har web-archive file and let this file drive the network requests to our
back-end, this has greatly eased reproducing problems reported.
## Getting started
To use this library you need to have a HAR (`*.har`) file generated from the network traffic of your
application. Follow the instructions below to learn how to do that.
### Install
```bash
npm install @tapico/msw-webarchive --save-dev
```
### Install Mock Service Worker
Follow the [Installation instructions][msw-install] from the Mock Service Worker documentation.
### Create a HAR file
#### Chrome
- Open the DevTools in Chrome (Option + Command + I /
Shift + CTRL + J).
- Go to the "_Network_" tab in the DevTools.
- Click on the downward-facing arrow icon to "_Export HAR_".
- Save the HAR archive on your disk.
#### Firefox
- Open the DevTools in Firefox (Option + Command + I /
Shift + CTRL + I).
- Go to the "_Network_" tab in the DevTools.
- Click on the cog icon on the left of the top bar.
- Click "_Save All As HAR_" option in the dropdown menu.
- Save the HAR archive on your disk.
### Generate request handlers
```js
import { setupWorker } from 'msw'
import { setRequestHandlersByWebarchive } from '@tapico/msw-webarchive'
import * as traffic from './example.har'
const worker = setupWorker()
setRequestHandlersByWebarchive(worker, traffic)
worker.start()
```
## Options
### `quiet: boolean`
- Default: `false`
Disables the logging of debugging messages of the library.
```js
setRequestHandlersByWebarchive(worker, har, {
quiet: true,
})
```
### `strictQueryString: boolean`
- Default: `true`
Stricly match a request URL query parameters during request URL matching. When set to `false`,
request URL query parameters are ignored during matching.
```js
setRequestHandlersByWebarchive(worker, har, {
strictQueryString: false,
})
```
### `resolveCrossOrigins: (origin: string) => string`
- Default: `undefined`
Override the `Access-Control-Allow-Origin` response header whenever it's present.
```js
setRequestHandlersByWebarchive(worker, har, {
resolveCrossOrigins(origin) {
return '*'
},
})
```
### `domainMappings: Record`
- Default: `undefined`
Allow mapping the domains in your har file to something else. This may be useful if you are making
relative requests against the origin (eg. `fetch('/hello')`), you may want to use a domainMapping
configuration like:
```js
setRequestHandlersByWebarchive(worker, har, {
domainMappings: {
'http://example.com': 'http://localhost',
},
})
```
### `responseDelay: 'real' | 'none' | ResponseDelayFunction`
- Default: `real`
Controls the mock response delay behavior.
- __real__: Responses will be delayed based on the `time` property in the HAR
- __none__: Responses will not be delayed
- __ResponseDelayFunction__: Responses will be delayed by the value returned by the function
- Signature: `(timeDelay: number, requestContext: Request) => number`
- Parameters:
- `timeDelay`: the value of the `time` property in the HAR, or 0 if there is no `time` property
- `requestContext`: the [request](https://developer.mozilla.org/en-US/docs/Web/API/Request) intercepted by Mock Service Worker
- Return value:
- The amount of time that the response should be delayed, in milliseconds. The response will not be delayed if a value <= 0 is returned
```js
setRequestHandlersByWebarchive(worker, har, {
responseDelay: 'none'
})
```
```js
setRequestHandlersByWebarchive(worker, har, {
responseDelay: (timeDelay: number, requestContext: Request) => {
if (requestContext.url === 'http://example.com') {
return timeDelay * 2
}
return 0
}
})
```
[msw-install]: https://mswjs.io/docs/getting-started/install