mockaton 8.7.1 → 8.7.3
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 +11 -11
- package/package.json +1 -1
- package/src/Api.js +12 -8
- package/src/Dashboard.css +5 -0
- package/src/Dashboard.html +2 -2
- package/src/Dashboard.js +13 -7
package/README.md
CHANGED
|
@@ -5,27 +5,27 @@
|
|
|
5
5
|
|
|
6
6
|
## Mock your APIs, Enhance your Development Workflow
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
Mockaton is an HTTP mock server with the goal of making
|
|
9
|
+
your frontend development and testing easier—and a lot more fun.
|
|
10
10
|
|
|
11
|
-
With Mockaton you don’t need to write code for wiring your mocks.
|
|
12
|
-
place your mocks in a directory and
|
|
13
|
-
|
|
11
|
+
With Mockaton you don’t need to write code for wiring your mocks.
|
|
12
|
+
Instead, just place your mocks in a directory, and it will scan it
|
|
13
|
+
for filenames that follow a convention similar to the URL paths.
|
|
14
14
|
|
|
15
15
|
For example, for this route `/api/user/1234`, the mock filename would be:
|
|
16
16
|
```
|
|
17
17
|
my-mocks-dir/api/user/[user-id].GET.200.json
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
## Scrapping Mocks from you Backend
|
|
21
|
+
|
|
22
|
+
Mockaton can fallback to your real backend on routes you don’t have mocks for. That’s
|
|
23
|
+
done by typing your backend address in the **Fallback Backend** field. And if you
|
|
24
|
+
check **Save Mocks**, you can collect those responses that hit your backend.
|
|
25
|
+
Those mocks will be saved to your `config.mocksDir` following the filename convention.
|
|
25
26
|
|
|
26
27
|
|
|
27
28
|
## Multiple Mock Variants
|
|
28
|
-
Here’s how you can create multiple mocks for a particular route:
|
|
29
29
|
|
|
30
30
|
### Adding comments in filenames
|
|
31
31
|
Want to mock a locked-out user or an invalid login attempt? You
|
package/package.json
CHANGED
package/src/Api.js
CHANGED
|
@@ -15,12 +15,12 @@ import { sendOK, sendBadRequest, sendJSON, sendFile, sendUnprocessableContent }
|
|
|
15
15
|
|
|
16
16
|
export const apiGetRequests = new Map([
|
|
17
17
|
[API.dashboard, serveDashboard],
|
|
18
|
-
['/
|
|
19
|
-
['/
|
|
20
|
-
['/Dashboard.css', serveDashboardAsset],
|
|
21
|
-
['/
|
|
22
|
-
['/
|
|
23
|
-
['/mockaton-logo.svg', serveDashboardAsset],
|
|
18
|
+
[API.dashboard + '/ApiConstants.js', serveDashboardAsset],
|
|
19
|
+
[API.dashboard + '/Commander.js', serveDashboardAsset],
|
|
20
|
+
[API.dashboard + '/Dashboard.css', serveDashboardAsset],
|
|
21
|
+
[API.dashboard + '/Dashboard.js', serveDashboardAsset],
|
|
22
|
+
[API.dashboard + '/Filename.js', serveDashboardAsset],
|
|
23
|
+
[API.dashboard + '/mockaton-logo.svg', serveDashboardAsset],
|
|
24
24
|
[API.mocks, listMockBrokers],
|
|
25
25
|
[API.cookies, listCookies],
|
|
26
26
|
[API.comments, listComments],
|
|
@@ -43,8 +43,12 @@ export const apiPatchRequests = new Map([
|
|
|
43
43
|
|
|
44
44
|
/* === GET === */
|
|
45
45
|
|
|
46
|
-
function serveDashboard(_, response) {
|
|
47
|
-
|
|
46
|
+
function serveDashboard(_, response) {
|
|
47
|
+
sendFile(response, join(import.meta.dirname, 'Dashboard.html'))
|
|
48
|
+
}
|
|
49
|
+
function serveDashboardAsset(req, response) {
|
|
50
|
+
sendFile(response, join(import.meta.dirname, req.url.replace(API.dashboard, '')))
|
|
51
|
+
}
|
|
48
52
|
|
|
49
53
|
function listCookies(_, response) { sendJSON(response, cookie.list()) }
|
|
50
54
|
function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
|
package/src/Dashboard.css
CHANGED
package/src/Dashboard.html
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
<html lang="en-US">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
-
<link rel="stylesheet" href="/Dashboard.css">
|
|
5
|
+
<link rel="stylesheet" href="./mockaton/Dashboard.css">
|
|
6
6
|
<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
8
|
<meta name="description" content="Mock Server for developing UIs">
|
|
9
9
|
<title>Mockaton</title>
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
|
-
<script src="/Dashboard.js" type="module"></script>
|
|
12
|
+
<script src="./mockaton/Dashboard.js" type="module"></script>
|
|
13
13
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
|
|
14
14
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js" integrity="sha512-QXFMVAusM85vUYDaNgcYeU3rzSlc+bTV4JvkfJhjxSHlQEo+ig53BtnGkvFTiNJh8D+wv6uWAQ2vJaVmxe8d3w==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
|
|
15
15
|
</body>
|
package/src/Dashboard.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { parseFilename } from '
|
|
2
|
-
import { Commander } from '
|
|
3
|
-
import { DEFAULT_500_COMMENT } from '
|
|
1
|
+
import { parseFilename } from './Filename.js'
|
|
2
|
+
import { Commander } from './Commander.js'
|
|
3
|
+
import { DEFAULT_500_COMMENT } from './ApiConstants.js'
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
const Strings = {
|
|
@@ -16,13 +16,14 @@ const Strings = {
|
|
|
16
16
|
internal_server_error: 'Internal Server Error',
|
|
17
17
|
mock: 'Mock',
|
|
18
18
|
no_mocks_found: 'No mocks found',
|
|
19
|
+
pick: 'Pick…',
|
|
19
20
|
reset: 'Reset',
|
|
20
21
|
save_proxied: 'Save Mocks',
|
|
21
|
-
select_one: 'Select One',
|
|
22
22
|
static: 'Static'
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
const CSS = {
|
|
26
|
+
BulkSelector: 'BulkSelector',
|
|
26
27
|
DelayToggler: 'DelayToggler',
|
|
27
28
|
FallbackBackend: 'FallbackBackend',
|
|
28
29
|
Field: 'Field',
|
|
@@ -91,7 +92,7 @@ function Logo() {
|
|
|
91
92
|
return (
|
|
92
93
|
r('img', {
|
|
93
94
|
alt: Strings.title,
|
|
94
|
-
src: '/mockaton-logo.svg',
|
|
95
|
+
src: 'mockaton/mockaton-logo.svg',
|
|
95
96
|
width: 160
|
|
96
97
|
}))
|
|
97
98
|
}
|
|
@@ -115,19 +116,24 @@ function CookieSelector({ cookies }) {
|
|
|
115
116
|
}
|
|
116
117
|
|
|
117
118
|
function BulkSelector({ comments }) {
|
|
119
|
+
// UX wise this should be a menu instead of this `select`.
|
|
120
|
+
// But this way is easier to implement, with a few hacks.
|
|
118
121
|
function onChange() {
|
|
119
|
-
|
|
122
|
+
const value = this.value
|
|
123
|
+
this.value = Strings.pick // Hack
|
|
124
|
+
mockaton.bulkSelectByComment(value)
|
|
120
125
|
.then(init)
|
|
121
126
|
.catch(onError)
|
|
122
127
|
}
|
|
123
128
|
const disabled = !comments.length
|
|
124
129
|
const list = disabled
|
|
125
130
|
? []
|
|
126
|
-
: [Strings.
|
|
131
|
+
: [Strings.pick].concat(comments)
|
|
127
132
|
return (
|
|
128
133
|
r('label', { className: CSS.Field },
|
|
129
134
|
r('span', null, Strings.bulk_select_by_comment),
|
|
130
135
|
r('select', {
|
|
136
|
+
className: CSS.BulkSelector,
|
|
131
137
|
'data-qaid': 'BulkSelector',
|
|
132
138
|
autocomplete: 'off',
|
|
133
139
|
disabled,
|