mockaton 8.2.5 → 8.2.7

package/README.md

@@ -1,6 +1,6 @@
 <img src="src/mockaton-logo.svg" alt="Mockaton Logo" width="210" style="margin-top: 30px"/>
 
-_Mockaton_ is a mock server for developing and testing frontends.
+_Mockaton_ is a mock server for improving the frontend development and testing experience.
 
 The mock filename convention is similar to the URL paths. For
 example, the following file will be served on `/api/user/1234`
@@ -8,9 +8,12 @@ example, the following file will be served on `/api/user/1234`
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
-By the way, [this browser
-extension](https://github.com/ericfortis/devtools-ext-tar-http-requests)
-can create a TAR of your XHR requests following that convention.
+By the way, [this browser extension](https://github.com/ericfortis/devtools-ext-tar-http-requests)
+can create a TAR of your requests following that convention.
+
+Nonetheless, you don’t need to mock everything. Indicate
+your backend address in `Config.proxyFallback`, and Mockaton
+will request from it routes you don’t have mocks for.
 
 ### Dashboard Example
 
@@ -33,7 +36,7 @@ import { resolve } from 'node:path'
 import { Mockaton } from 'mockaton'
 
 
-// The Config options are explained in a section below
+// See the Config section below for more options
 Mockaton({
   mocksDir: resolve('my-mocks-dir'),
   port: 2345
@@ -56,8 +59,7 @@ This demo uses the [sample-mocks/](./sample-mocks) directory of this repository.
 
 Experiment with the Dashboard:
 
-- Pick a mock variant from the Mock dropdown (we’ll discuss
-  them later)
+- Pick a mock variant from the Mock dropdown (we’ll discuss them later)
 - Toggle the 🕓 Clock button, which _Delays_ responses (e.g. for testing spinners)
 - Toggle the _500_ button, which sends and _Internal Server Error_ on that endpoint
 
@@ -122,10 +124,14 @@ export default [
 **Option B:** Function
 
 Think of this as an HTTP handler. You can read or write to a
-database, or pull data from a backend.
+database, or pull data from a backend. Also, you can modify the
+response object, e.g. for changing the status code and mime.
 
 Don’t call `response.end()`, just return a `string | Buffer | Uint8Array`.
 
+If you need to serve a static `.js` file, put it in your
+`Config.staticDir` without the mock filename convention.
+
 ```js
 export default function requestCounter(request, response) {
   globalThis.myDatabase ??= { count: 0 }
@@ -136,11 +142,8 @@ export default function requestCounter(request, response) {
 }
 ```
 
-If you need to serve a static `.js` file, put it in your
-`Config.staticDir` without the mock filename convention.
-
+This example will echo the request body concatenated with another fixture.
 ```js
-// This example will echo the request body concatenated with another fixture.
 // api/color.POST.201.js
 
 import colors from './colors.json' with { type: 'json' }

package/package.json

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

package/src/Dashboard.css

@@ -5,7 +5,7 @@
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0081ef;
+		--colorAccent: #0078e1;
 		--colorAccentAlt: #009c71;
 		--colorBackground: #fff;
 		--colorHeaderBackground: #f7f7f7;
@@ -13,7 +13,7 @@
 		--colorComboBoxHeaderBackground: #fff;
 		--colorDisabled: #444;
 		--colorHover: #dfefff;
-		--colorLabel: #666;
+		--colorLabel: #444;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
 		--colorSecondaryButtonBackground: #fafafa;
@@ -105,7 +105,7 @@ menu {
 
 		input[type=url],
 		select {
-			height: 24px;
+			height: 28px;
 			width: 150px;
 			padding: 4px 2px;
 			border-right: 3px solid transparent;
@@ -123,8 +123,9 @@ menu {
 		}
 	}
 
-	button {
+	.ResetButton {
 		padding: 4px 12px;
+		margin-bottom: 4px;
 		border: 1px solid var(--colorRed);
 		background: transparent;
 		color: var(--colorRed);
@@ -141,7 +142,7 @@ menu {
 	.CorsCheckbox {
 		display: flex;
 		align-items: center;
-		margin-bottom: 4px;
+		margin-bottom: 8px;
 		gap: 4px;
 	}
 }
@@ -150,7 +151,7 @@ menu {
 main {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 56px;
+	margin-top: 64px;
 
 	> table {
 		border-collapse: collapse;
@@ -333,6 +334,7 @@ main {
 	summary {
 		margin-bottom: 8px;
 		cursor: pointer;
+		font-weight: bold;
 	}
 
 	li {

package/src/Dashboard.js

@@ -12,7 +12,7 @@ const Strings = {
 	cookie_disabled_title: 'No cookies specified in Config.cookies',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
-	fallback_server: 'Fallback Server',
+	fallback_server: 'Fallback Backend',
 	fallback_server_placeholder: 'Type Server Address',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
@@ -22,6 +22,7 @@ const Strings = {
 }
 
 const CSS = {
+	ResetButton: 'ResetButton',
 	CorsCheckbox: 'CorsCheckbox',
 	DelayToggler: 'DelayToggler',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
@@ -42,6 +43,7 @@ const refPayloadViewerFileTitle = useRef()
 
 const mockaton = new Commander(window.location.origin)
 
+
 function init() {
 	Promise.all([
 		mockaton.listMocks(),
@@ -52,7 +54,7 @@ function init() {
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
 		.then(App)
-		.catch(console.error)
+		.catch(onError)
 }
 init()
 
@@ -86,7 +88,7 @@ function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddr
 function CookieSelector({ list }) {
 	function onChange() {
 		mockaton.selectCookie(this.value)
-			.catch(console.error)
+			.catch(onError)
 	}
 	const disabled = list.length <= 1
 	return (
@@ -107,7 +109,7 @@ function BulkSelector({ comments }) {
 	function onChange() {
 		mockaton.bulkSelectByComment(this.value)
 			.then(init)
-			.catch(console.error)
+			.catch(onError)
 	}
 	const disabled = !comments.length
 	const list = disabled
@@ -135,7 +137,7 @@ function ProxyFallbackField({ fallbackAddress = '' }) {
 			input.reportValidity()
 		else
 			mockaton.setProxyFallback(input.value)
-				.catch(console.error)
+				.catch(onError)
 	}
 
 	return (
@@ -154,7 +156,7 @@ function ProxyFallbackField({ fallbackAddress = '' }) {
 function CorsCheckbox({ corsAllowed }) {
 	function onChange(event) {
 		mockaton.setCorsAllowed(event.currentTarget.checked)
-			.catch(console.error)
+			.catch(onError)
 	}
 	return (
 		r('label', { className: CSS.CorsCheckbox },
@@ -170,10 +172,11 @@ function CorsCheckbox({ corsAllowed }) {
 function ResetButton() {
 	return (
 		r('button', {
+			className: CSS.ResetButton,
 			onClick() {
 				mockaton.reset()
 					.then(init)
-					.catch(console.error)
+					.catch(onError)
 			}
 		}, Strings.reset))
 }
@@ -240,7 +243,7 @@ function PreviewLink({ method, urlMask }) {
 			}))
 		}
 		catch (error) {
-			console.error(error)
+			onError(error)
 		}
 	}
 	return (
@@ -295,7 +298,7 @@ function MockSelector({ broker }) {
 				this.closest('tr').querySelector(`.${CSS.InternalServerErrorToggler}>[type=checkbox]`).checked = status === 500
 				this.className = className(this.value === this.options[0].value, status)
 			})
-			.catch(console.error)
+			.catch(onError)
 	}
 
 	function className(defaultIsSelected, status) {
@@ -331,7 +334,7 @@ function DelayRouteToggler({ broker }) {
 	function onChange(event) {
 		const { method, urlMask } = parseFilename(this.name)
 		mockaton.setRouteIsDelayed(method, urlMask, event.currentTarget.checked)
-			.catch(console.error)
+			.catch(onError)
 	}
 	return (
 		r('label', {
@@ -361,7 +364,7 @@ function InternalServerErrorToggler({ broker }) {
 			? broker.mocks.find(f => parseFilename(f).status === 500)
 			: broker.mocks[0])
 			.then(init)
-			.catch(console.error)
+			.catch(onError)
 	}
 	return (
 		r('label', {
@@ -380,6 +383,12 @@ function InternalServerErrorToggler({ broker }) {
 }
 
 
+function onError(error) {
+	if (error?.message === 'Failed to fetch')
+		alert('Looks like the Mockaton server is not running')
+	console.error(error)
+}
+
 
 /* === Utils === */
 function cssClass(...args) {

package/src/MockDispatcher.js

@@ -43,7 +43,7 @@ export async function dispatchMock(req, response) {
 			sendNotFound(response)
 		else if (error.code === 'ERR_UNKNOWN_FILE_EXTENSION') {
 			if (error.toString().includes('Unknown file extension ".ts'))
-				console.error('Looks like you need a TypeScript compiler')
+				console.error('\nLooks like you need a TypeScript compiler\n')
 			sendInternalServerError(response, error)
 		}
 		else