mockaton 8.11.4 → 8.11.6

package/README.md

@@ -3,26 +3,35 @@
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 ![NPM Version](https://img.shields.io/npm/l/mockaton)
 
-HTTP mock server for developing and testing frontends.
-
-## Convention over Code
 
 With Mockaton you don’t need to write code for wiring mocks. Instead, it scans a
-given directory for mock filenames following a convention similar to the URLs.
+given directory for filenames following a convention similar to the URLs.
 
-For example, for <code>/<b>api/user</b>/1234</code> the mock filename would be:
+For example, for <code>/<b>api/user</b>/1234</code> the filename would be:
 <pre>
 <code>my-mocks-dir/<b>api/user</b>/[user-id].GET.200.json</code>
 </pre>
 
-## Multiple Mock Variants
-You can have different mocks for a particular route by adding
-comments and/or using different status codes.
 
+On the dashboard you can select a mock variant for a particular route, delaying responses,
+and triggering an autogenerated `500` (Internal Server Error), among other features.
+
+Nonetheless, there’s a programmatic API, which is handy
+for setting up tests. See **Commander&nbsp;API** section.
+
+<picture>
+  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp840x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp840x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp840x800.light.gold.png">
+</picture>
+
+
+## Multiple Mock Variants
+Each route can have different mocks. There’s two options for doing that:
 
-### Adding comments in filenames
-Comments are anything within parentheses, including them. They
-are ignored for URL purposes, so you can add as many as you want.
+### Adding comments to the filename
+Comments are anything within parentheses,
+including them. A filename can have many comments.
 
 <pre>
 api/login<b>(locked out user)</b>.POST.423.json
@@ -31,18 +40,19 @@ api/login<b>(invalid login attempt)</b>.POST.401.json
 
 ### Different response status code
 For instance, using a `4xx` or `5xx` status code for triggering error
-responses. Or `2xx` such as `204` (No Content) for testing collections without records.
+responses. Or a `2xx` such as `204` (No Content) for testing empty collections.
 
 <pre>
-api/videos.GET.<b>204</b>.json
+api/videos(empty list).GET.<b>204</b>.json
 api/videos.GET.<b>403</b>.json
-api/videos.GET.<b>500</b>.empty
+api/videos.GET.<b>500</b>.txt
 </pre>
 
 
+
 ## Fallback to your Backend
-Mockaton can fallback to your real backend on routes you don’t have
-mocks for, or on routes that have the ☁️ **Cloud Checkbox** checked.
+No need to mock everything. Mockaton can request from your backend the routes
+you don’t have mocks for, or routes that have the ☁️ **Cloud Checkbox** checked.
 
 
 ### Scrapping Mocks from your Backend
@@ -51,23 +61,11 @@ They will be saved on your `config.mocksDir` following the filename convention.
 
 
 
-## Dashboard
-On the dashboard you can select a mock variant for a particular route, delaying responses,
-and triggering an autogenerated `500` (Internal Server Error), among other features.
-
-Nonetheless, there’s a programmatic API see
-**Commander&nbsp;API** below, which is handy setting up tests.
-
-<picture>
-  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp830x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
-</picture>
-
-
-
 ## Basic Usage
+Mockaton is a Node.js program with no build or runtime NPM dependencies.
+
 `tsx` is only needed if you want to write mocks in TypeScript.
+
 ```sh
 npm install mockaton tsx --save-dev
 ```
@@ -91,7 +89,7 @@ node --import=tsx my-mockaton.js
 
 ## Demo App (Vite)
 
-This is a minimal React + Vite + Mockaton app. It’s mainly a list of
+This is a minimal React + Vite + Mockaton app. It’s a list of
 colors, which contains all of their possible states. For example,
 permutations for out-of-stock, new-arrival, and discontinued.
 
@@ -282,7 +280,7 @@ documenting the URL contract.
 api/video<b>?limit=[limit]</b>.GET.200.json
 </pre>
 
-Speaking of which, on Windows filenames containing "?" are [not
+On Windows filenames containing "?" are [not
 permitted](https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file), but since that’s part of the query string it’s ignored anyway.
 
 
@@ -369,10 +367,11 @@ Mockaton’s predefined list. For that, you can add it to <code>config.extraMime
 Files under `config.staticDir` don’t use the filename convention.
 They take precedence over the `GET` mocks in `config.mocksDir`.
 For example, if you have two files for `GET /foo/bar.jpg`
-```
-my-static-dir/foo/bar.jpg
-my-mocks-dir/foo/bar.jpg.GET.200.jpg // Unreacheable
-```
+
+<pre>
+my-static-dir<b>/foo/bar.jpg</b>
+ my-mocks-dir<b>/foo/bar.jpg</b>.GET.200.jpg // Unreacheable
+</pre>
 
 
 ### `cookies?: { [label: string]: string }`

package/package.json

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

package/src/ApiConstants.js

@@ -30,3 +30,5 @@ export const DEFAULT_MOCK_COMMENT = '(default)'
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'
 
 export const LONG_POLL_SERVER_TIMEOUT = 8_000
+
+export const HEADER_FOR_502 = 'mockaton502'

package/src/Dashboard.css

@@ -1,6 +1,6 @@
 :root {
 	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-	--radius: 28px;
+	--radius: 6px;
 	--radiusSmall: 4px;
 }
 
@@ -17,7 +17,7 @@
 		--colorSecondaryAction: #555;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
-		--colorLabel: #555;
+		--colorLabel: #444;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
 		--colorText: #000;
@@ -89,7 +89,7 @@ select {
 	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
 	background-color: var(--colorComboBoxBackground);
 	background-size: 16px;
-	background-position: 98% center;
+	background-position: 100% center;
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
@@ -103,6 +103,10 @@ select {
 	}
 }
 
+.red {
+	color: var(--colorRed);
+}
+
 .Header {
 	position: fixed;
 	z-index: 100;
@@ -115,12 +119,12 @@ select {
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
-	gap: 6px;
+	gap: 10px;
 
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 20px;
+		margin-right: 22px;
 	}
 
 	.Field {
@@ -129,7 +133,6 @@ select {
 		span {
 			display: flex;
 			align-items: center;
-			margin-left: 6px;
 			color: var(--colorLabel);
 			font-size: 11px;
 			gap: 4px;
@@ -149,9 +152,9 @@ select {
 		select {
 			width: 100%;
 			height: 28px;
-			padding: 4px 12px;
+			padding: 4px 8px;
 			border-right: 3px solid transparent;
-			margin-top: 3px;
+			margin-top: 4px;
 			color: var(--colorText);
 			font-size: 11px;
 			box-shadow: var(--boxShadow1);
@@ -164,7 +167,7 @@ select {
 		}
 
 		&.GlobalDelayField {
-			width: 88px;
+			width: 84px;
 
 			input[type=number] {
 				padding-right: 0;
@@ -181,7 +184,7 @@ select {
 
 		&.FallbackBackend {
 			position: relative;
-			width: 212px;
+			width: 210px;
 
 			.SaveProxiedCheckbox {
 				position: absolute;
@@ -194,10 +197,6 @@ select {
 				font-size: 11px;
 				gap: 4px;
 
-				span {
-					margin-left: 0;
-				}
-
 				input:disabled + span {
 					opacity: 0.8;
 				}
@@ -243,7 +242,7 @@ select {
 		}
 
 		tr {
-			border-top: 1px solid transparent;
+			border-top: 2px solid transparent;
 		}
 	}
 
@@ -282,10 +281,10 @@ select {
 
 .PreviewLink {
 	position: relative;
-	left: -10px;
+	left: -6px;
 	display: inline-block;
-	width: 282px;
-	padding: 8px 11px;
+	width: 272px;
+	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
@@ -302,14 +301,14 @@ select {
 .MockSelector {
 	width: 260px;
 	height: 30px;
-	padding-right: 11px;
-	padding-left: 17px;
+	padding-right: 5px;
+	padding-left: 16px;
 	border: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	background-position: 5px center;
+	background-position: 2px center;
 
 	&.nonDefault {
 		font-weight: bold;
@@ -319,7 +318,7 @@ select {
 		background: var(--color4xxBackground);
 	}
 	&:disabled {
-		padding-right: 10px;
+		padding-right: 4px;
 		appearance: none;
 		background: transparent;
 		cursor: default;
@@ -368,8 +367,8 @@ select {
 	}
 
 	> svg {
-		width: 20px;
-		height: 20px;
+		width: 18px;
+		height: 18px;
 		stroke-width: 2.5px;
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
@@ -377,7 +376,7 @@ select {
 }
 
 .ProxyToggler {
-	padding: 1px 4px;
+	padding: 1px 3px;
 	background: var(--colorSecondaryButtonBackground);
 	border-radius: var(--radiusSmall);
 
@@ -425,7 +424,7 @@ select {
 
 .InternalServerErrorToggler {
 	display: flex;
-	margin-left: 6px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {
@@ -445,7 +444,7 @@ select {
 	}
 
 	> span {
-		padding: 5px 4px;
+		padding: 4px;
 		font-size: 10px;
 		font-weight: bold;
 		color: var(--colorSecondaryAction);

package/src/Dashboard.js

@@ -1,4 +1,4 @@
-import { DEFAULT_500_COMMENT } from './ApiConstants.js'
+import { DEFAULT_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
 import { parseFilename } from './Filename.js'
 import { Commander } from './Commander.js'
 
@@ -20,6 +20,7 @@ const Strings = {
 	delay_ms: 'Delay (ms)',
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback Backend',
+	fallback_server_error: '⛔ Fallback Backend Error',
 	fallback_server_placeholder: 'Type Server Address',
 	got: 'Got',
 	internal_server_error: 'Internal Server Error',
@@ -51,6 +52,7 @@ const CSS = {
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
 
+	red: 'red',
 	empty: 'empty',
 	chosen: 'chosen',
 	status4xx: 'status4xx',
@@ -425,10 +427,12 @@ function PayloadViewerTitle({ file, status, statusText }) {
 			r('abbr', { title: statusText }, status),
 			'.' + ext))
 }
-function PayloadViewerTitleWhenProxied({ mime, status, statusText }) {
+function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad }) {
 	return (
 		r('span', null,
-			Strings.got + ' ',
+			gatewayIsBad
+				? r('span', { className: CSS.red }, Strings.fallback_server_error + ' ')
+				: r('span', null, Strings.got + ' '),
 			r('abbr', { title: statusText }, status),
 			' ' + mime))
 }
@@ -452,7 +456,8 @@ async function updatePayloadViewer(method, urlMask, response) {
 		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
 			status: response.status,
 			statusText: response.statusText,
-			mime
+			mime,
+			gatewayIsBad: response.headers.get(HEADER_FOR_502)
 		}))
 	else
 		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitle({

package/src/ProxyRelay.js

@@ -3,19 +3,30 @@ import { randomUUID } from 'node:crypto'
 
 import { config } from './config.js'
 import { extFor } from './utils/mime.js'
-import { readBody } from './utils/http-request.js'
 import { write, isFile } from './utils/fs.js'
 import { makeMockFilename } from './Filename.js'
+import { readBody, BodyReaderError } from './utils/http-request.js'
+import { sendUnprocessableContent, sendBadGateway } from './utils/http-response.js'
 
 
 export async function proxy(req, response, delay) {
-	const proxyResponse = await fetch(config.proxyFallback + req.url, {
-		method: req.method,
-		headers: req.headers,
-		body: req.method === 'GET' || req.method === 'HEAD'
-			? undefined
-			: await readBody(req)
-	})
+	let proxyResponse
+	try {
+		proxyResponse = await fetch(config.proxyFallback + req.url, {
+			method: req.method,
+			headers: req.headers,
+			body: req.method === 'GET' || req.method === 'HEAD'
+				? undefined
+				: await readBody(req)
+		})
+	}
+	catch (error) { // TESTME
+		if (error instanceof BodyReaderError)
+			sendUnprocessableContent(response, error.name)
+		else
+			sendBadGateway(response, error)
+		return
+	}
 
 	const headers = Object.fromEntries(proxyResponse.headers)
 	headers['set-cookie'] = proxyResponse.headers.getSetCookie() // parses multiple into an array

package/src/utils/http-response.js

@@ -1,5 +1,6 @@
 import { readFileSync } from 'node:fs'
 import { mimeFor } from './mime.js'
+import { HEADER_FOR_502 } from '../ApiConstants.js'
 
 
 export function sendOK(response) {
@@ -42,3 +43,10 @@ export function sendInternalServerError(response, error) {
 	response.statusCode = 500
 	response.end()
 }
+
+export function sendBadGateway(response, error) {
+	console.error('Fallback Proxy Error:', error.cause.message)
+	response.statusCode = 502
+	response.setHeader(HEADER_FOR_502, 1)
+	response.end()
+}