mockaton 8.1.7 → 8.2.1

package/README.md

@@ -127,6 +127,7 @@ database, or pull data from a backend.
 Don’t call `response.end()`, just return a `string | Buffer | Uint8Array`.
 
 ```js
+
 export default function optionalName(request, response) {
   globalThis.myDatabase ??= { count: 0 }
   globalThis.myDatabase.count++
@@ -142,6 +143,19 @@ export default function optionalName(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 back the request body concatenated with another fixture.
+```js
+// api/color.POST.201.js
+
+import colors from './colors.json' with { type: 'json' }
+import { parseJSON } from 'mockaton' // body-parser alike
+
+export default async function concatColor(request, response) {
+  const newColor = await parseJSON(request)
+  return JSON.stringify(colors.concat(newColor))
+}
+```
+
 ---
 
 ## Mock File Name Convention

package/index.d.ts

@@ -42,8 +42,13 @@ export function Mockaton(options: Config): Server
 
 export const jsToJsonPlugin: Plugin
 
+
+// Utils
+
 export function jwtCookie(cookieName: string, payload: any): string
 
+export function parseJSON(request: IncomingMessage): Promise<any>
+
 
 export class Commander {
 	constructor(addr: string)

package/index.js

@@ -1,4 +1,6 @@
 export { Mockaton } from './src/Mockaton.js'
-export { jwtCookie } from './src/utils/jwt.js'
 export { Commander } from './src/Commander.js'
 export { jsToJsonPlugin } from './src/MockDispatcherPlugins.js'
+
+export { jwtCookie } from './src/utils/jwt.js'
+export { parseJSON } from './src/utils/http-request.js'

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.1.7",
+	"version": "8.2.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -11,10 +11,11 @@
 		"test": "node --test src/**.test.js",
 		"demo": "node _usage_example.js",
 		"demo:ts": "node --import=tsx _usage_example.js",
-		"demo:test-ui": "node --test --import=./ui-tests/_setup.js --experimental-test-isolation=none \"./ui-tests/**/*.test.js\""
+		"demo:test-ui": "node --test --import=./ui-tests/_setup.js --experimental-test-isolation=none \"./ui-tests/**/*.test.js\"",
+		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},
 	"optionalDependencies": {
-		"puppeteer": "23.7.1",
-		"pixaton": "0.1.0"
+		"pixaton": ">=1.0.1",
+		"puppeteer": ">=23.10.1"
 	}
 }

package/src/Api.js

@@ -10,7 +10,7 @@ import { DF, API } from './ApiConstants.js'
 import { parseJSON } from './utils/http-request.js'
 import { listFilesRecursively } from './utils/fs.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,6 +24,7 @@ export const apiGetRequests = new Map([
 	[API.mocks, listMockBrokers],
 	[API.cookies, listCookies],
 	[API.comments, listComments],
+	[API.fallback, getProxyFallback],
 	[API.cors, getIsCorsAllowed],
 	[API.static, listStaticFiles]
 ])
@@ -44,6 +45,7 @@ function serveDashboardAsset(req, response) { sendFile(response, join(import.met
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
 function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
+function getProxyFallback(_, response) { sendJSON(response, Config.proxyFallback) }
 function getIsCorsAllowed(_, response) { sendJSON(response, Config.corsAllowed) }
 
 
@@ -101,8 +103,13 @@ async function setRouteIsDelayed(req, response) {
 
 async function updateProxyFallback(req, response) {
 	try {
-		Config.proxyFallback = await parseJSON(req)
-		sendOK(response)
+		const fallback = await parseJSON(req)
+		if (fallback && !URL.canParse(fallback)) // TESTME
+			sendUnprocessableContent(response)
+		else {
+			Config.proxyFallback = fallback
+			sendOK(response)
+		}
 	}
 	catch (error) {
 		sendBadRequest(response, error)

package/src/Commander.js

@@ -37,6 +37,9 @@ export class Commander {
 		return this.#get(API.comments)
 	}
 
+	getProxyFallback() {
+		return this.#get(API.fallback)
+	}
 	setProxyFallback(proxyAddr) {
 		return this.#patch(API.fallback, proxyAddr)
 	}

package/src/Dashboard.css

@@ -1,14 +1,14 @@
 :root {
-	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0072d6;
-		--colorAccentAlt: #0e906c;
+		--colorAccent: #0081ef;
+		--colorAccentAlt: #009c71;
 		--colorBackground: #fff;
-		--colorHeaderBackground: #f4f4f4;
+		--colorHeaderBackground: #f7f7f7;
 		--colorComboBoxBackground: #fafafa;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorDisabled: #444;
@@ -23,8 +23,8 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		--color4xxBackground: #403630;
-		--colorAccent: #1f91ff;
-		--colorAccentAlt: #00E676;
+		--colorAccent: #2495ff;
+		--colorAccentAlt: #00bf64;
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
@@ -61,8 +61,8 @@ select {
 	background: var(--colorComboBoxBackground);
 	color: var(--colorText);
 	cursor: pointer;
-	border-radius: 4px;
 	outline: 0;
+	border-radius: 6px;
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
@@ -84,15 +84,16 @@ menu {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 20px 16px;
+	padding: 16px;
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
-	gap: 16px;
+	box-shadow: var(--boxShadow1);
+	gap: 12px;
 
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 85px;
+		margin-right: 18px;
 	}
 
 	label {
@@ -102,13 +103,23 @@ menu {
 			font-size: 11px;
 		}
 
+		input[type=url],
 		select {
+			height: 24px;
 			width: 150px;
-			padding: 4px;
+			padding: 4px 2px;
 			border-right: 3px solid transparent;
 			margin-top: 2px;
 			font-size: 11px;
 			background: var(--colorComboBoxHeaderBackground);
+			border-radius: 6px;
+		}
+
+		input[type=url] {
+			outline: 0;
+			padding: 0 6px;
+			box-shadow: var(--boxShadow1);
+			color: var(--colorText);
 		}
 	}
 
@@ -139,7 +150,7 @@ menu {
 main {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 64px;
+	margin-top: 56px;
 
 	> table {
 		border-collapse: collapse;
@@ -159,7 +170,7 @@ main {
 
 .PayloadViewer {
 	position: sticky;
-	top: 72px;
+	top: 62px;
 	width: 50%;
 	margin-left: 20px;
 
@@ -190,7 +201,7 @@ main {
 	display: inline-block;
 	width: 280px;
 	padding: 8px 6px;
-	border-radius: 0;
+	border-radius: 6px;
 	color: var(--colorAccent);
 	text-decoration: none;
 
@@ -209,7 +220,6 @@ main {
 	padding: 8px 1px;
 	border: 0;
 	border-left: 3px solid transparent;
-	border-radius: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
@@ -260,7 +270,7 @@ main {
 
 .InternalServerErrorToggler {
 	display: flex;
-	margin-left: 6px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {

package/src/Dashboard.js

@@ -12,6 +12,8 @@ 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_placeholder: 'Type Server Address',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	reset: 'Reset',
@@ -46,6 +48,7 @@ function init() {
 		mockaton.listCookies(),
 		mockaton.listComments(),
 		mockaton.getCorsAllowed(),
+		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
 		.then(App)
@@ -59,13 +62,14 @@ function App(apiResponses) {
 		.render(DevPanel(apiResponses))
 }
 
-function DevPanel([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
+function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddress, staticFiles]) {
 	return (
 		r('div', null,
 			r('menu', null,
 				r('img', { src: '/mockaton-logo.svg', width: 160, alt: Strings.title }),
 				r(CookieSelector, { list: cookies }),
 				r(BulkSelector, { comments }),
+				r(ProxyFallbackField, { fallbackAddress }),
 				r(CorsCheckbox, { corsAllowed }),
 				r(ResetButton)),
 			r('main', null,
@@ -124,6 +128,29 @@ function BulkSelector({ comments }) {
 }
 
 
+function ProxyFallbackField({ fallbackAddress = '' }) {
+	function onChange(event) {
+		const input = event.currentTarget
+		if (!input.validity.valid)
+			input.reportValidity()
+		else
+			mockaton.setProxyFallback(input.value)
+				.catch(console.error)
+	}
+
+	return (
+		r('label', null,
+			r('span', null, Strings.fallback_server),
+			r('input', {
+				type: 'url',
+				autocomplete: 'none',
+				placeholder: Strings.fallback_server_placeholder,
+				value: fallbackAddress,
+				onChange
+			})))
+}
+
+
 function CorsCheckbox({ corsAllowed }) {
 	function onChange(event) {
 		mockaton.setCorsAllowed(event.currentTarget.checked)
@@ -148,8 +175,7 @@ function ResetButton() {
 					.then(init)
 					.catch(console.error)
 			}
-		}, Strings.reset)
-	)
+		}, Strings.reset))
 }
 
 
@@ -272,7 +298,6 @@ function MockSelector({ broker }) {
 			.catch(console.error)
 	}
 
-
 	function className(defaultIsSelected, status) {
 		return cssClass(
 			CSS.MockSelector,

package/src/mockaton-logo.svg

@@ -2,7 +2,7 @@
 <svg version="1.1" viewBox="0 0 570 100" xmlns="http://www.w3.org/2000/svg">
 	<style>
 		:root { --color: #000000; }
-		@media (prefers-color-scheme: light) { :root { --color: #444 } }
+		@media (prefers-color-scheme: light) { :root { --color: #555 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
 		path { fill: var(--color) }
 	</style>

package/src/utils/http-response.js

@@ -17,12 +17,12 @@ export function sendJSON(response, payload) {
 	response.end(JSON.stringify(payload))
 }
 
-export function sendFile(response, file) {
-	if (!isFile(file))
+export function sendFile(response, filePath) {
+	if (!isFile(filePath))
 		sendNotFound(response)
 	else {
-		response.setHeader('Content-Type', mimeFor(file))
-		response.end(read(file))
+		response.setHeader('Content-Type', mimeFor(filePath))
+		response.end(read(filePath))
 	}
 }
 
@@ -64,6 +64,12 @@ export function sendNotFound(response) {
 	response.end()
 }
 
+export function sendUnprocessableContent(response, error) {
+	console.error(error)
+	response.statusCode = 422
+	response.end(error)
+}
+
 export function sendInternalServerError(response, error) {
 	console.error(error)
 	response.statusCode = 500

package/ui-tests/_setup.js

@@ -26,7 +26,12 @@ after(() => {
 
 export function testPixels(testFileName, options = {}) {
 	options.beforeSuite = async () => await mockaton.reset()
-	options.viewports ??= [{ width: 1024, height: 800 }]
+	options.viewports ??= [{
+		width: 1024,
+		height: 800,
+		deviceScaleFactor: 1.5 // for better screenshots
+	}]
 	options.colorSchemes ??= ['light', 'dark']
+	options.screenshotOptions ??= {}
 	_testPixels(page, testFileName, MOCKATON_ADDR + '/mockaton', 'body', options)
 }