mockaton 8.2.18 → 8.2.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ extension](https://github.com/ericfortis/devtools-ext-tar-http-requests)
|
|
|
18
18
|
can create a TAR of your requests following that convention.
|
|
19
19
|
|
|
20
20
|
Nonetheless, you don’t need to mock all your APIs. Mockaton can request from your backend
|
|
21
|
-
the routes you don’t have mocks for. That’s done with `
|
|
21
|
+
the routes you don’t have mocks for. That’s done with `config.proxyFallback = 'http://mybackend'`
|
|
22
22
|
|
|
23
23
|
## Multiple Mock Variants
|
|
24
24
|
Each route can have many mocks, which could either be:
|
|
@@ -30,8 +30,8 @@ Each route can have many mocks, which could either be:
|
|
|
30
30
|
## Dashboard UI
|
|
31
31
|
|
|
32
32
|
In the dashboard, you can select a mock variant for a particular
|
|
33
|
-
route
|
|
34
|
-
|
|
33
|
+
route, among other options. But there’s also a programmatic API,
|
|
34
|
+
which is handy for setting up tests (see **Commander API** below).
|
|
35
35
|
|
|
36
36
|
<picture>
|
|
37
37
|
<source media="(prefers-color-scheme: light)" srcset="./README-dashboard-light.png">
|
|
@@ -100,7 +100,7 @@ allows for checking out long-lived branches with old API contracts.
|
|
|
100
100
|
### Deterministic Standalone Demo Server
|
|
101
101
|
Perhaps you need to demo your app, but the ideal flow is too complex to
|
|
102
102
|
simulate from the actual backend. In this case, compile your frontend app and
|
|
103
|
-
put its built assets in `
|
|
103
|
+
put its built assets in `config.staticDir`. Then, from the Mockaton dashboard
|
|
104
104
|
you can "Bulk Select" mocks to simulate the complete states you want to demo.
|
|
105
105
|
For bulk-selecting, you just need to add a comment to the mock
|
|
106
106
|
filename, such as `(demo-part1)`, `(demo-part2)`.
|
|
@@ -108,8 +108,8 @@ filename, such as `(demo-part1)`, `(demo-part2)`.
|
|
|
108
108
|
|
|
109
109
|
## Motivation
|
|
110
110
|
- Avoids spinning up and maintaining hefty backends when developing UIs.
|
|
111
|
-
- For a deterministic and
|
|
112
|
-
|
|
111
|
+
- For a deterministic, comprehensive, and consistent backend state. For example, having
|
|
112
|
+
a collection with all the possible state variants helps for spotting inadvertent bugs.
|
|
113
113
|
- Sometimes, frontend progress is blocked waiting for some backend API. Similarly,
|
|
114
114
|
it’s often delayed due to missing data or inconvenient contracts. Therefore,
|
|
115
115
|
many meetings can be saved by prototyping frontend features with mocks, and
|
|
@@ -146,7 +146,8 @@ export default [{ foo: 'bar' }]
|
|
|
146
146
|
Return a `string | Buffer | Uint8Array`, but don’t call `response.end()`
|
|
147
147
|
|
|
148
148
|
```js
|
|
149
|
-
export default (request, response) =>
|
|
149
|
+
export default (request, response) =>
|
|
150
|
+
JSON.stringify({ foo: 'bar' })
|
|
150
151
|
```
|
|
151
152
|
|
|
152
153
|
Think of these functions as HTTP handlers, so you can
|
|
@@ -191,7 +192,7 @@ export default function listColors() {
|
|
|
191
192
|
---
|
|
192
193
|
|
|
193
194
|
If you are wondering, what if I need to serve a static `.js`?
|
|
194
|
-
Put it in your `
|
|
195
|
+
Put it in your `config.staticDir` without the mock filename convention.
|
|
195
196
|
|
|
196
197
|
---
|
|
197
198
|
|
|
@@ -238,13 +239,13 @@ permitted](https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file)
|
|
|
238
239
|
For instance, if you have `api/foo/bar` and
|
|
239
240
|
`api/foo`. For the latter you have two options:
|
|
240
241
|
|
|
241
|
-
**Option A.**
|
|
242
|
+
**Option A.**
|
|
242
243
|
```
|
|
243
|
-
api/foo/
|
|
244
244
|
api/foo.GET.200.json
|
|
245
|
+
api/foo/bar.GET.200.json
|
|
245
246
|
```
|
|
246
247
|
|
|
247
|
-
**Option B.** Omit the filename
|
|
248
|
+
**Option B.** Omit the filename.
|
|
248
249
|
```text
|
|
249
250
|
api/foo/.GET.200.json
|
|
250
251
|
```
|
|
@@ -269,12 +270,12 @@ Defaults to `/(\.DS_Store|~)$/`
|
|
|
269
270
|
|
|
270
271
|
### `delay?: number` 🕓
|
|
271
272
|
The clock icon next to the mock selector is a checkbox for delaying a particular
|
|
272
|
-
response. The delay is globally configurable via `
|
|
273
|
+
response. The delay is globally configurable via `config.delay = 1200` (milliseconds).
|
|
273
274
|
|
|
274
275
|
|
|
275
276
|
### `proxyFallback?: string`
|
|
276
277
|
Lets you specify a target server for serving routes you don’t have mocks for.
|
|
277
|
-
For example, `
|
|
278
|
+
For example, `config.proxyFallback = 'http://example.com'`
|
|
278
279
|
|
|
279
280
|
|
|
280
281
|
### `staticDir?: string`
|
|
@@ -282,8 +283,8 @@ For example, `Config.proxyFallback = 'http://example.com:8080'`
|
|
|
282
283
|
- Use Case 2: For a standalone demo server. For example,
|
|
283
284
|
build your frontend bundle, and serve it from Mockaton.
|
|
284
285
|
|
|
285
|
-
Files under `
|
|
286
|
-
They take precedence over the `GET` mocks in `
|
|
286
|
+
Files under `config.staticDir` don’t use the filename convention.
|
|
287
|
+
They take precedence over the `GET` mocks in `config.mocksDir`.
|
|
287
288
|
For example, if you have two files for `GET /foo/bar.jpg`
|
|
288
289
|
```
|
|
289
290
|
my-static-dir/foo/bar.jpg
|
|
@@ -292,18 +293,11 @@ my-mocks-dir/foo/bar.jpg.GET.200.jpg // Unreacheable
|
|
|
292
293
|
|
|
293
294
|
|
|
294
295
|
### `cookies?: { [label: string]: string }`
|
|
295
|
-
The selected cookie is sent in every response in the `Set-Cookie` header.
|
|
296
|
-
The key is just a label used for selecting a particular cookie in the
|
|
297
|
-
dashboard. In the dashboard, only one cookie can be selected. If you need more
|
|
298
|
-
cookies you can inject additional cookies globally in `Config.extraHeaders`.
|
|
299
|
-
|
|
300
|
-
By the way, there’s a `jwtCookie` helper, which has a hardcoded header and
|
|
301
|
-
signature. In other words, it’s useful if you only care about its payload.
|
|
302
296
|
|
|
303
297
|
```js
|
|
304
298
|
import { jwtCookie } from 'mockaton'
|
|
305
299
|
|
|
306
|
-
|
|
300
|
+
config.cookies = {
|
|
307
301
|
'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
|
|
308
302
|
'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
|
|
309
303
|
'My JWT': jwtCookie('my-cookie', {
|
|
@@ -312,13 +306,21 @@ Config.cookies = {
|
|
|
312
306
|
})
|
|
313
307
|
}
|
|
314
308
|
```
|
|
309
|
+
The selected cookie is sent in every response in a `Set-Cookie` header.
|
|
310
|
+
|
|
311
|
+
By the way, the `jwtCookie` helper has a hardcoded header and signature.
|
|
312
|
+
In other words, it’s useful only if you care about the payload.
|
|
313
|
+
|
|
314
|
+
If you need to send more than one cookie,
|
|
315
|
+
inject them globally in `config.extraHeaders`.
|
|
316
|
+
|
|
315
317
|
|
|
316
318
|
|
|
317
319
|
### `extraHeaders?: string[]`
|
|
318
320
|
Note it’s a unidimensional array. The header name goes at even indices.
|
|
319
321
|
|
|
320
322
|
```js
|
|
321
|
-
|
|
323
|
+
config.extraHeaders = [
|
|
322
324
|
'Server', 'Mockaton',
|
|
323
325
|
'Set-Cookie', 'foo=FOO;Path=/;SameSite=strict',
|
|
324
326
|
'Set-Cookie', 'bar=BAR;Path=/;SameSite=strict'
|
|
@@ -328,7 +330,7 @@ Config.extraHeaders = [
|
|
|
328
330
|
|
|
329
331
|
### `extraMimes?: { [fileExt: string]: string }`
|
|
330
332
|
```js
|
|
331
|
-
|
|
333
|
+
config.extraMimes = {
|
|
332
334
|
jpe: 'application/jpeg'
|
|
333
335
|
}
|
|
334
336
|
```
|
|
@@ -360,7 +362,7 @@ import { parse } from 'yaml'
|
|
|
360
362
|
import { readFileSync } from 'node:js'
|
|
361
363
|
import { jsToJsonPlugin } from 'mockaton'
|
|
362
364
|
|
|
363
|
-
|
|
365
|
+
config.plugins = [
|
|
364
366
|
[/\.(js|ts)$/, jsToJsonPlugin], // Default
|
|
365
367
|
[/\.yml$/, yamlToJsonPlugin],
|
|
366
368
|
[/foo\.GET\.200\.txt$/, capitalizePlugin], // e.g. GET /api/foo would be capitalized
|
|
@@ -384,14 +386,14 @@ function capitalizePlugin(filePath) {
|
|
|
384
386
|
|
|
385
387
|
|
|
386
388
|
### `corsAllowed?: boolean`
|
|
387
|
-
Defaults to `corsAllowed = false`. When `
|
|
389
|
+
Defaults to `corsAllowed = false`. When `config.corsAllowed === true`, these are the default options:
|
|
388
390
|
```js
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
391
|
+
config.corsOrigins = ['*']
|
|
392
|
+
config.corsMethods = ['GET', 'PUT', 'DELETE', 'POST', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT']
|
|
393
|
+
config.corsHeaders = ['content-type']
|
|
394
|
+
config.corsCredentials = true
|
|
395
|
+
config.corsMaxAge = 0 // seconds to cache the preflight req
|
|
396
|
+
config.corsExposedHeaders = [] // headers you need to access in client-side JS
|
|
395
397
|
```
|
|
396
398
|
|
|
397
399
|
|
|
@@ -400,12 +402,12 @@ This defaults to trying to open the dashboard in your default browser in macOS a
|
|
|
400
402
|
Windows. For a more cross-platform utility, you could `npm install open` and pass it.
|
|
401
403
|
```js
|
|
402
404
|
import open from 'open'
|
|
403
|
-
|
|
405
|
+
config.onReady = open
|
|
404
406
|
```
|
|
405
407
|
|
|
406
408
|
If you don’t want to open a browser, pass a noop:
|
|
407
409
|
```js
|
|
408
|
-
|
|
410
|
+
config.onReady = () => {}
|
|
409
411
|
```
|
|
410
412
|
|
|
411
413
|
|
|
@@ -439,7 +441,7 @@ await mockaton.setRouteIsDelayed('GET', '/api/foo', true)
|
|
|
439
441
|
```
|
|
440
442
|
|
|
441
443
|
### Select a cookie
|
|
442
|
-
In `
|
|
444
|
+
In `config.cookies`, each key is the label used for selecting it.
|
|
443
445
|
```js
|
|
444
446
|
await mockaton.selectCookie('My Normal User')
|
|
445
447
|
```
|
|
@@ -453,7 +455,7 @@ Pass an empty string to disable it.
|
|
|
453
455
|
### Reset
|
|
454
456
|
Re-initialize the collection. So if you added or removed mocks they will
|
|
455
457
|
be considered. The selected mocks, cookies, and delays go back to default,
|
|
456
|
-
but `
|
|
458
|
+
but `config.proxyFallback` and `config.corsAllowed` are not affected.
|
|
457
459
|
```js
|
|
458
460
|
await mockaton.reset()
|
|
459
461
|
```
|
package/package.json
CHANGED