mockaton 2.2.0 → 2.3.1

package/README.md

@@ -1,7 +1,7 @@
 # Mockaton 
 _Mockaton_ is a mock server for developing and testing frontends.
 
-It scans `Config.mocksDir` for files following a specific
+It scans a given directory for files following a specific
 file name convention, which is similar to the URL paths. For
 example, the following file will be served for `/api/user/1234`
 ```
@@ -13,60 +13,16 @@ extension](https://github.com/ericfortis/devtools-ext-tar-http-requests) can
 be used for downloading a TAR of your XHR requests following that convention.
 
 
-### Mock Variants
-Each route can have many mocks, which could either be:
-- Different response __status code__. 
-  - e.g. for testing error responses. 
-- __Comment__ on the filename, which is anything within parentheses.
-  - e.g. `api/user(my-comment).POST.201.json`
-
-Those alternatives can be manually selected in the dashboard
-UI, or programmatically, for instance, for setting up tests.
-
-The first file in **alphabetical order** becomes the default mock.
-
-### Optionally, you can write mocks in JavaScript
-An Object, Array, or String is sent as JSON.
-
-`api/foo.GET.200.js`
-```js
-export default [
-  { id: 0 }
-]
-```
-
-Or, export default a function. There, you
-can override the response status and the default JSON content
-type. But don’t call `response.end()`, just return a string.
-```js
-export default function (req, response) {
-  return JSON.stringify({ a: 1 })
-}
-```
-
-
-### Proxying Routes
-`Config.proxyFallback` lets you specify a target
-server for serving routes you don’t have mocks for.
-
-
 ## Getting Started
 The best way to learn _Mockaton_ is by checking out this repo and
 exploring its [sample-mocks/](./sample-mocks) directory. Then, run
 [`./_usage_example.js`](./_usage_example.js) and you’ll see this dashboard:
 
-<img src="./README-dashboard.png" style="max-width:890px"/>
-
-
-## Delay 🕓
-The clock icon next to the mock selector is a checkbox for delaying a
-particular response. They are handy for testing spinners.
 
-The delay is globally configurable via `Config.delay = 1200` (milliseconds).
+<img src="./README-dashboard.png" style="max-width:820px"/>
 
----
 
-## Basic Usage (see [_usage_example.js](./_usage_example.js))
+## Basic Usage
 ```
 npm install mockaton
 ```
@@ -101,8 +57,54 @@ interface Config {
   extraHeaders?: []
 }
 ```
+
 ---
 
+## Mock Variants
+Each route can have many mocks, which could either be:
+- Different response __status code__. 
+  - e.g. for testing error responses. 
+- __Comment__ on the filename, which is anything within parentheses.
+  - e.g. `api/user(my-comment).POST.201.json`
+
+Those alternatives can be manually selected in the dashboard
+UI, or programmatically, for instance, for setting up tests.
+
+The first file in **alphabetical order** becomes the default mock.
+
+## You can write JSON mocks in JavaScript
+An Object, Array, or String is sent as JSON.
+
+`api/foo.GET.200.js`
+```js
+export default [
+  { id: 0 }
+]
+```
+
+Or, export default a function. There, you
+can override the response status and the default JSON content
+type. But don’t call `response.end()`, just return a string.
+```js
+export default function (req, response) {
+  return JSON.stringify({ a: 1 })
+}
+```
+
+
+## Proxying Routes
+`Config.proxyFallback` lets you specify a target
+server for serving routes you don’t have mocks for.
+
+
+
+## Delay 🕓
+The clock icon next to the mock selector is a checkbox for delaying a
+particular response. They are handy for testing spinners.
+
+The delay is globally configurable via `Config.delay = 1200` (milliseconds).
+
+
 ## File Name Convention
 
 
@@ -125,7 +127,7 @@ Comments are anything within parentheses, including them.
 They are ignored for URL purposes, so they have no effect
 on the URL mask. For example, these two are for `/api/foo`
 <pre>
-api/foo<b>(my comment)</b>.GET.200.json<b>(foo)</b>
+api/foo<b>(my comment)</b>.GET.200.json<b>(bar)</b>
 api/foo.GET.200.json
 </pre>
 
@@ -143,10 +145,10 @@ but since that’s part of the query string, it’s ignored anyway.
 
 
 
-### Default (index-like) file
-For the default route of a directory, omit the name (just use
-the extension). For example, the following files will be routed
-to `api/foo` because comments and the query string are ignored.
+### Default (index-like) route
+For the default route of a directory, omit the mock filename name
+(<b>just use the extension</b>). For example, the following files will be
+routed to `api/foo` because comments and the query string are ignored.
 ```text
 api/foo/.GET.200.json
 api/foo/?bar=[bar].GET.200.json
@@ -160,7 +162,7 @@ The selected cookie is sent in every response in the `Set-Cookie` header.
 import { jwtCookie } from 'mockaton'
 
 Config.cookies = {
-  'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
+  'My Admin User':  'my-cookie=1;Path=/;SameSite=strict',
   'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
   'My JWT': jwtCookie('my-cookie', {
     email: 'john.doe@example.com',
@@ -175,15 +177,14 @@ words, it’s useful if you only care about its payload.
 
 
 ## `Config.extraHeaders`
-They are applied last, right before ending the response. In
-other words, they can overwrite the `Content-Type`. They are
-not tuples, the header name goes in even-numbered indices.
+They are applied last, right before ending the response. In other words, they
+can overwrite the `Content-Type`. The header name goes in even indices.
 
 ```js
 Config.extraHeaders = [
   'Server', 'Mockaton',
-  'Set-Cookie', 'another-cookie=FOO;Path=/;SameSite=strict',
-  'Set-Cookie', 'another-cookie=BAR;Path=/;SameSite=strict'
+  'Set-Cookie', 'foo=FOO;Path=/;SameSite=strict',
+  'Set-Cookie', 'bar=BAR;Path=/;SameSite=strict'
 ]
 ```
 
@@ -223,7 +224,7 @@ fetch(addr + '/mockaton/bulk-select-by-comment', {
 ### Reset
 Re-Initialize the collection and its states (selected mocks and cookies, delays, etc.).
 ```js
-fetch(add + '/mockaton/reset', {
+fetch(addr + '/mockaton/reset', {
   method: 'PATCH'
 })
 ```

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "2.2.0",
+	"version": "2.3.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/sample-mocks/api/user/links.GET.200.js

@@ -3,6 +3,7 @@
 
 export default function (req, response) {
 	return JSON.stringify([
-		{ id: 0 }
+		'http://example.com/foo',
+		'http://example.com/bar',
 	])
 }

package/src/Api.js

@@ -9,7 +9,7 @@ import { Config } from './Config.js'
 import { DF, API } from './ApiConstants.js'
 import { parseJSON } from './utils/http-request.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
-import { sendOK, sendBadRequest, sendJSON, sendFile } from './utils/http-response.js'
+import { sendOK, sendBadRequest, sendJSON, sendFile, sendUnprocessableContent } from './utils/http-response.js'
 
 
 export const apiGetRequests = new Map([
@@ -24,11 +24,11 @@ export const apiGetRequests = new Map([
 ])
 
 export const apiPatchRequests = new Map([
-	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
 	[API.edit, updateBroker],
 	[API.reset, reinitialize],
 	[API.cookies, selectCookie],
-	[API.fallback, updateProxyFallback]
+	[API.fallback, updateProxyFallback],
+	[API.bulkSelect, bulkUpdateBrokersByCommentTag]
 ])
 
 function serveDashboard(_, response) {
@@ -48,6 +48,11 @@ function listMockBrokers(_, response) {
 }
 
 
+function reinitialize(_, response) {
+	mockBrokersCollection.init()
+	sendOK(response)
+}
+
 async function selectCookie(req, response) {
 	try {
 		cookie.setCurrent(await parseJSON(req))
@@ -59,15 +64,14 @@ async function selectCookie(req, response) {
 	}
 }
 
-function reinitialize(_, response) {
-	mockBrokersCollection.init()
-	sendOK(response)
-}
-
 async function updateBroker(req, response) {
 	try {
 		const body = await parseJSON(req)
 		const broker = mockBrokersCollection.getBrokerByFilename(body[DF.file])
+		if (!broker) {
+			sendUnprocessableContent(response)
+			return
+		}
 		if (DF.delayed in body)
 			broker.updateDelay(body[DF.delayed])
 		broker.updateFile(body[DF.file])
@@ -79,9 +83,9 @@ async function updateBroker(req, response) {
 	}
 }
 
-async function bulkUpdateBrokersByCommentTag(req, response) {
+async function updateProxyFallback(req, response) {
 	try {
-		mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))
+		Config.proxyFallback = await parseJSON(req)
 		sendOK(response)
 	}
 	catch (error) {
@@ -90,9 +94,9 @@ async function bulkUpdateBrokersByCommentTag(req, response) {
 	}
 }
 
-async function updateProxyFallback(req, response) {
+async function bulkUpdateBrokersByCommentTag(req, response) {
 	try {
-		Config.proxyFallback = await parseJSON(req)
+		mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))
 		sendOK(response)
 	}
 	catch (error) {

package/src/Config.js

@@ -26,7 +26,7 @@ export function setup(options) {
 		delay: ms => Number.isInteger(ms) && ms > 0,
 		cookies: is(Object),
 		skipOpen: is(Boolean),
-		proxyFallback: is(String),
+		proxyFallback: optional(URL.canParse),
 		allowedExt: is(RegExp),
 		generate500: is(Boolean),
 		extraHeaders: Array.isArray

package/src/Dashboard.css

@@ -14,23 +14,13 @@ body {
 	padding: 16px;
 }
 * {
+	padding: 0;
 	border: 0;
 	margin: 0;
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 }
 
-h1 {
-	padding: 12px 0;
-	margin: 0;
-	font-size: 2rem;
-}
-
-
-select {
-	padding: 3px 0;
-	border: 1px solid #444;
-}
 
 fieldset {
 	width: 120px;
@@ -47,15 +37,6 @@ fieldset {
 	}
 }
 
-.CookieSelector {
-	display: flex;
-	align-items: center;
-	margin-left: 20px;
-
-	select {
-		margin-left: 5px;
-	}
-}
 
 main {
 	display: flex;
@@ -72,14 +53,39 @@ main {
 	}
 }
 
-.TitleWrap {
+menu {
 	display: flex;
-	align-items: center;
+	margin-bottom: 12px;
+	gap: 14px;
+	align-items: flex-end;
+
+	h1 {
+		margin: 0;
+		margin-right: 14px;
+		font-size: 2rem;
+	}
+
+	label {
+		span {
+			display: block;
+			color: #555;
+			font-size: .85rem;
+		}
+
+		select {
+			width: 143px;
+			padding: 3px 0;
+			border: 1px solid #bbb;
+			margin-top: 1px;
+			cursor: pointer;
+			border-radius: 4px;
+			font-size: 0.9rem;
+		}
+	}
 
 	button {
-		padding: 3px 12px;
+		padding: 4px 12px;
 		border: 1px solid var(--colorRed);
-		margin-left: 20px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
@@ -132,18 +138,11 @@ main {
 	}
 }
 
-.BulkSelectSection {
-	margin: 20px 0;
-}
-
-.BulkSelectSection select {
-	margin-top: 5px;
-}
-
 .MockSelector {
 	width: 300px;
 	padding: 8px 1px;
 	border: 0;
+	border-radius: 4px;
 	background: #eee;
 	text-align: right;
 	direction: rtl;

package/src/Dashboard.js

@@ -16,14 +16,11 @@ const Strings = {
 }
 
 const CSS = {
-	BulkSelectSection: 'BulkSelectSection',
-	CookieSelector: 'CookieSelector',
 	DelayCheckbox: 'DelayCheckbox',
 	Documentation: 'Documentation',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
-	TitleWrap: 'TitleWrap',
 
 	bold: 'bold',
 	chosen: 'chosen',
@@ -57,13 +54,11 @@ function DevPanel(brokersByMethod, cookies, comments) {
 	document.title = Strings.title
 	return (
 		r('div', null,
-			r('div', { className: CSS.TitleWrap },
+			r('menu', null,
 				r('h1', null, Strings.title),
-				r(ResetButton),
-				r(CookieSelector, { list: cookies })),
-			r('div', { className: CSS.BulkSelectSection },
-				r('h2', null, Strings.bulk_select_by_comment),
-				r(BulkSelector, { comments })),
+				r(CookieSelector, { list: cookies }),
+				r(BulkSelector, { comments }),
+				r(ResetButton)),
 			r('main', null,
 				r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
 					r(SectionByMethod, { method, brokers }))),
@@ -88,8 +83,8 @@ function ResetButton() {
 
 function CookieSelector({ list }) {
 	return (
-		r('label', { className: CSS.CookieSelector },
-			Strings.cookie,
+		r('label', null,
+			r('span', null, Strings.cookie),
 			r('select', {
 				autocomplete: 'off',
 				disabled: list.length <= 1,
@@ -111,21 +106,23 @@ function CookieSelector({ list }) {
 
 function BulkSelector({ comments }) {
 	return (
-		r('select', {
-			autocomplete: 'off',
-			disabled: comments.length <= 1,
-			onChange() {
-				fetch(API.bulkSelect, {
-					method: 'PATCH',
-					body: JSON.stringify(this.value)
-				})
-					.then(init)
-					.catch(console.error)
-			}
-		}, [Strings.select_one].concat(comments).map(item =>
-			r('option', {
-				value: item
-			}, item))))
+		r('label', null,
+			r('span', null, Strings.bulk_select_by_comment),
+			r('select', {
+				autocomplete: 'off',
+				disabled: comments.length <= 1,
+				onChange() {
+					fetch(API.bulkSelect, {
+						method: 'PATCH',
+						body: JSON.stringify(this.value)
+					})
+						.then(init)
+						.catch(console.error)
+				}
+			}, [Strings.select_one].concat(comments).map(item =>
+				r('option', {
+					value: item
+				}, item)))))
 }
 
 

package/src/MockDispatcher.js

@@ -36,8 +36,8 @@ export async function dispatchMock(req, response) {
 			response.setHeader('content-type', mimeFor('.json'))
 			const jsExport = await importDefault(file)
 			mockText = typeof jsExport === 'function'
-				? jsExport(req, response)
-				: JSON.stringify(jsExport)
+				? await jsExport(req, response)
+				: JSON.stringify(jsExport, null, 2)
 		}
 		else {
 			response.setHeader('content-type', mimeFor(file))

package/src/mockBrokersCollection.js

@@ -54,7 +54,8 @@ export const getAll = () => collection
 
 export const getBrokerByFilename = file => {
 	const { method, urlMask } = Route.parseFilename(file)
-	return collection[method][urlMask]
+	if (collection[method])
+		return collection[method][urlMask]
 }
 
 // Searching the routes in reverse order so dynamic params (e.g.

package/src/utils/http-response.js

@@ -54,6 +54,11 @@ export function sendNotFound(response) {
 	response.end()
 }
 
+export function sendUnprocessableContent(response) {
+	response.statusCode = 422
+	response.end()
+}
+
 export function sendInternalServerError(response) {
 	response.statusCode = 500
 	response.end()