mockaton 10.6.8 → 11.0.0

package/Makefile

@@ -0,0 +1,33 @@
+start:
+	@node src/cli.js
+
+watch:
+	@node --watch src/cli.js
+
+
+test:
+	node --test 'src/**/*.test.js'
+
+test-docker:
+	docker run --rm -it \
+		-v "$$PWD":/app \
+		-w /app \
+		node:24 \
+		make test
+
+coverage:
+	node --test --experimental-test-coverage \
+		--test-reporter=spec --test-reporter-destination=stdout \
+		--test-reporter=lcov --test-reporter-destination=lcov.info \
+		'src/**/*.test.js'
+
+pixaton:
+	node --test --experimental-test-isolation=none \
+		--import=./pixaton-tests/_setup.js \
+		'pixaton-tests/**/*.test.js'
+
+outdated:
+	@npm outdated --parseable |\
+		awk -F: '{ printf "npm i %-30s ;# %s\n", $$4, $$2 }'
+
+.PHONY: *

package/README.md

@@ -10,33 +10,6 @@
 An HTTP mock server for simulating APIs with minimal setup
 — ideal for testing difficult to reproduce states.
 
-<br/>
-
-## Motivation
-
-**No API state should be too hard to test.**
-With Mockaton, developers can achieve correctness and speed.
-
-### Correctness
-- Enables testing of complex scenarios that would otherwise be skipped. e.g.,
-  - Triggering errors on third-party APIs. 
-  - Triggering errors on your project’s backend (if you are a frontend developer).
-- Allows for deterministic, comprehensive, and consistent state.
-  - Spot inadvertent regressions during development.
-  - Use it to set up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton).
-
-### Speed
-- Works around unstable dev backends while developing UIs.
-  - Spinning up development infrastructure.
-  - Syncing database states.
-- Prevents progress from being blocked by waiting for APIs.
-- Time travel. If you commit the mocks to your repo, 
-  you don’t have to downgrade backends for:
-  - checking out long-lived branches 
-  - bisecting bugs
-
-<br/>
-
 ## Overview
 With Mockaton, you don’t need to write code for wiring up your
 mocks. Instead, a given directory is scanned for filenames
@@ -118,6 +91,31 @@ checking ✅ **Save Mocks**, you can collect the responses that hit your backend
 They will be saved in your `config.mocksDir` following the filename convention.
 </details>
 
+<br/>
+
+## Motivation
+
+**No API state should be too hard to test.**
+With Mockaton, developers can achieve correctness and speed.
+
+### Correctness
+- Enables testing of complex scenarios that would otherwise be skipped. e.g.,
+  - Triggering errors on third-party APIs.
+  - Triggering errors on your project’s backend (if you are a frontend developer).
+- Allows for deterministic, comprehensive, and consistent state.
+  - Spot inadvertent regressions during development.
+  - Use it to set up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton).
+
+### Speed
+- Works around unstable dev backends while developing UIs.
+  - Spinning up development infrastructure.
+  - Syncing database states.
+- Prevents progress from being blocked by waiting for APIs.
+- Time travel. If you commit the mocks to your repo,
+  you don’t have to downgrade backends for:
+  - checking out long-lived branches
+  - bisecting bugs
+
 
 <br/>
 

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Server, IncomingMessage, OutgoingMessage } from 'node:http';
+import { Server, IncomingMessage, OutgoingMessage } from 'node:http'
 
 type Plugin = (
 	filePath: string,
@@ -16,7 +16,7 @@ interface Config {
 
 	host?: string,
 	port?: number
-	
+
 	logLevel?: 'normal' | 'verbose' | 'quiet'
 
 	delay?: number
@@ -37,8 +37,8 @@ interface Config {
 	corsExposedHeaders?: string[]
 	corsCredentials?: boolean
 	corsMaxAge?: number
-	
-	
+
+
 	plugins?: [filenameTester: RegExp, plugin: Plugin][]
 
 	onReady?: (address: string) => void
@@ -64,11 +64,11 @@ export type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>
 
 export type ClientMockBroker = {
 	mocks: string[]
-	currentMock: {
-		file: string
-		delayed: boolean
-		proxied: boolean
-	}
+	file: string
+	status: number
+	auto500: boolean
+	delayed: boolean
+	proxied: boolean
 }
 export type ClientBrokersByMethod = {
 	[method: string]: {
@@ -89,14 +89,14 @@ export type ClientStaticBrokers = {
 export interface State {
 	brokersByMethod: ClientBrokersByMethod
 	staticBrokers: ClientStaticBrokers
-	
-	cookies: [label:string, selected:boolean][] 
+
+	cookies: [label: string, selected: boolean][]
 	comments: string[]
-	
+
 	delay: number
-	
+
 	collectProxied: boolean
 	proxyFallback: string
-	
+
 	corsAllowed?: boolean
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.6.8",
+	"version": "11.0.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -18,12 +18,7 @@
 		"mockaton": "src/cli.js"
 	},
 	"scripts": {
-		"test": "node --test 'src/**/*.test.js'",
-		"coverage": "node --test --test-reporter=lcov --test-reporter-destination=lcov.info --experimental-test-coverage 'src/**/*.test.js'",
-		"start": "node src/cli.js",
-		"watch": "node --watch src/cli.js",
-		"pixaton": "node --test --import=./pixaton-tests/_setup.js --experimental-test-isolation=none 'pixaton-tests/**/*.test.js'",
-		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %s ;# %s\\n\", $4, $2 }'"
+		"start": "make start"
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",

package/src/Api.js

@@ -12,17 +12,21 @@ import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
 import { DashboardHtml, CSP } from './DashboardHtml.js'
-import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile, sendHTML } from './utils/http-response.js'
+import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_FOR_SYNC_VERSION } from './ApiConstants.js'
 
 
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
 	...[
+		'Logo.svg',
 		'Dashboard.css',
+		'ApiCommander.js',
+		'ApiConstants.js',
 		'Dashboard.js',
-		'ApiConstants.js', 'ApiCommander.js', 'Filename.js', 'DashboardStore.js', 'DashboardDom.js',
-		'Logo.svg'
+		'DashboardDom.js',
+		'DashboardStore.js',
+		'Filename.js'
 	].map(f => [API.dashboard + '/' + f, serveStatic(f)]),
 
 	[API.state, getState],
@@ -57,6 +61,7 @@ function serveStatic(f) {
 	return (_, response) => sendFile(response, join(import.meta.dirname, f))
 }
 
+
 function getState(_, response) {
 	sendJSON(response, {
 		cookies: cookie.list(),
@@ -74,12 +79,14 @@ function getState(_, response) {
 	})
 }
 
+
 function longPollClientSyncVersion(req, response) {
-	if (uiSyncVersion.version !== Number(req.headers[DF.syncVersion])) {
+	if (uiSyncVersion.version !== Number(req.headers[HEADER_FOR_SYNC_VERSION])) {
 		// e.g., tab was hidden while new mocks were added or removed
 		sendJSON(response, uiSyncVersion.version)
 		return
 	}
+
 	function onAddOrRemoveMock() {
 		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
 		sendJSON(response, uiSyncVersion.version)
@@ -102,127 +109,139 @@ function reinitialize(_, response) {
 	sendOK(response)
 }
 
+
 async function selectCookie(req, response) {
-	const error = cookie.setCurrent(await parseJSON(req))
+	const label = await parseJSON(req)
+
+	const error = cookie.setCurrent(label)
 	if (error)
 		sendUnprocessableContent(response, error?.message || error)
 	else
 		sendJSON(response, cookie.list())
 }
 
+
 async function selectMock(req, response) {
 	const file = await parseJSON(req)
+
 	const broker = mockBrokersCollection.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
 	else {
 		broker.selectFile(file)
-		sendJSON(response, broker.currentMock)
+		sendJSON(response, broker)
 	}
 }
 
+
 async function toggle500(req, response) {
-	const body = await parseJSON(req)
-	const broker = mockBrokersCollection.brokerByRoute(
-		body[DF.routeMethod],
-		body[DF.routeUrlMask])
+	const [method, urlMask] = await parseJSON(req)
+
+	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${method} ${urlMask}`)
 	else {
 		broker.toggle500()
-		sendJSON(response, broker.currentMock)
+		sendJSON(response, broker)
 	}
 }
 
+
 async function setRouteIsDelayed(req, response) {
-	const body = await parseJSON(req)
-	const delayed = body[DF.delayed]
-	const broker = mockBrokersCollection.brokerByRoute(
-		body[DF.routeMethod],
-		body[DF.routeUrlMask])
+	const [method, urlMask, delayed] = await parseJSON(req)
 
+	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${method} ${urlMask}`)
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected boolean for "delayed"`)
 	else {
 		broker.setDelayed(delayed)
-		sendOK(response)
+		sendJSON(response, broker)
 	}
 }
 
+
 async function setRouteIsProxied(req, response) {
-	const body = await parseJSON(req)
-	const proxied = body[DF.proxied]
-	const broker = mockBrokersCollection.brokerByRoute(
-		body[DF.routeMethod],
-		body[DF.routeUrlMask])
+	const [method, urlMask, proxied] = await parseJSON(req)
 
+	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${method} ${urlMask}`)
 	else if (typeof proxied !== 'boolean')
 		sendUnprocessableContent(response, `Expected boolean for "proxied"`)
 	else if (proxied && !config.proxyFallback)
 		sendUnprocessableContent(response, `There’s no proxy fallback`)
 	else {
 		broker.setProxied(proxied)
-		sendOK(response)
+		sendJSON(response, broker)
 	}
 }
 
+
 async function updateProxyFallback(req, response) {
 	const fallback = await parseJSON(req)
-	if (!ConfigValidator.proxyFallback(fallback)) {
+
+	if (!ConfigValidator.proxyFallback(fallback))
 		sendUnprocessableContent(response, `Invalid Proxy Fallback URL`)
-		return
+	else {
+		config.proxyFallback = fallback
+		sendOK(response)
 	}
-	config.proxyFallback = fallback
-	sendOK(response)
 }
 
+
 async function setCollectProxied(req, response) {
 	const collectProxied = await parseJSON(req)
-	if (!ConfigValidator.collectProxied(collectProxied)) {
+
+	if (!ConfigValidator.collectProxied(collectProxied))
 		sendUnprocessableContent(response, `Expected a boolean for "collectProxied"`)
-		return
+	else {
+		config.collectProxied = collectProxied
+		sendOK(response)
 	}
-	config.collectProxied = collectProxied
-	sendOK(response)
 }
 
+
 async function bulkUpdateBrokersByCommentTag(req, response) {
-	mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))
+	const comment = await parseJSON(req)
+
+	mockBrokersCollection.setMocksMatchingComment(comment)
 	sendOK(response)
 }
 
+
 async function setCorsAllowed(req, response) {
 	const corsAllowed = await parseJSON(req)
-	if (!ConfigValidator.corsAllowed(corsAllowed)) {
+
+	if (!ConfigValidator.corsAllowed(corsAllowed))
 		sendUnprocessableContent(response, `Expected boolean for "corsAllowed"`)
-		return
+	else {
+		config.corsAllowed = corsAllowed
+		sendOK(response)
 	}
-	config.corsAllowed = corsAllowed
-	sendOK(response)
 }
 
+
 async function setGlobalDelay(req, response) {
 	const delay = await parseJSON(req)
-	if (!ConfigValidator.delay(delay)) {
+
+	if (!ConfigValidator.delay(delay))
 		sendUnprocessableContent(response, `Expected non-negative integer for "delay"`)
-		return
+	else {
+		config.delay = delay
+		sendOK(response)
 	}
-	config.delay = delay
-	sendOK(response)
 }
 
 
+
 async function setStaticRouteStatusCode(req, response) {
-	const body = await parseJSON(req)
-	const status = Number(body[DF.statusCode])
-	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
+	const [urlMask, status] = await parseJSON(req)
 
+	const broker = staticCollection.brokerByRoute(urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Static route does not exist: ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Static route does not exist: ${urlMask}`)
 	else if (!(status === 200 || status === 404))
 		sendUnprocessableContent(response, `Expected 200 or 404 status code`)
 	else {
@@ -233,12 +252,11 @@ async function setStaticRouteStatusCode(req, response) {
 
 
 async function setStaticRouteIsDelayed(req, response) {
-	const body = await parseJSON(req)
-	const delayed = body[DF.delayed]
-	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
+	const [urlMask, delayed] = await parseJSON(req)
 
+	const broker = staticCollection.brokerByRoute(urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Static route does not exist: ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Static route does not exist: ${urlMask}`)
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected boolean for "delayed"`)
 	else {

package/src/ApiCommander.js

@@ -1,4 +1,4 @@
-import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
+import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_FOR_SYNC_VERSION } from './ApiConstants.js'
 
 
 /** Client for controlling Mockaton via its HTTP API */
@@ -9,27 +9,27 @@ export class Commander {
 		this.#addr = addr
 	}
 
-	#patch = (api, body) => {
-		return fetch(this.#addr + api, {
+	#patch = (api, body) =>
+		fetch(this.#addr + api, {
 			method: 'PATCH',
 			body: JSON.stringify(body)
 		})
-	}
 
 	/** @returns {JsonPromise<State>} */
-	getState = () => {
-		return fetch(this.#addr + API.state)
-	}
+	getState = () =>
+		fetch(this.#addr + API.state)
 
 	/** @returns {JsonPromise<number>} */
-	getSyncVersion = (currentSyncVersion, abortSignal) => {
-		return fetch(this.#addr + API.syncVersion, {
-			signal: AbortSignal.any([abortSignal, AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)]),
+	getSyncVersion = (currSyncVer, abortSignal) =>
+		fetch(this.#addr + API.syncVersion, {
+			signal: AbortSignal.any([
+				abortSignal,
+				AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
+			]),
 			headers: {
-				[DF.syncVersion]: currentSyncVersion
+				[HEADER_FOR_SYNC_VERSION]: currSyncVer
 			}
 		})
-	}
 
 
 	reset() {
@@ -40,45 +40,28 @@ export class Commander {
 		return this.#patch(API.select, file)
 	}
 
-	toggle500(routeMethod, routeUrlMask) {
-		return this.#patch(API.toggle500, {
-			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask
-		})
+	toggle500(method, urlMask) {
+		return this.#patch(API.toggle500, [method, urlMask])
 	}
 
 	bulkSelectByComment(comment) {
 		return this.#patch(API.bulkSelect, comment)
 	}
 
-	setRouteIsDelayed(routeMethod, routeUrlMask, delayed) {
-		return this.#patch(API.delay, {
-			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.delayed]: delayed
-		})
+	setRouteIsDelayed(method, urlMask, delayed) {
+		return this.#patch(API.delay, [method, urlMask, delayed])
 	}
 
-	setStaticRouteIsDelayed(routeUrlMask, delayed) {
-		return this.#patch(API.delayStatic, {
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.delayed]: delayed
-		})
+	setStaticRouteIsDelayed(urlMask, delayed) {
+		return this.#patch(API.delayStatic, [urlMask, delayed])
 	}
 
-	setStaticRouteStatus(routeUrlMask, status) {
-		return this.#patch(API.staticStatus, {
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.statusCode]: status
-		})
+	setStaticRouteStatus(urlMask, status) {
+		return this.#patch(API.staticStatus, [urlMask, status])
 	}
 
-	setRouteIsProxied(routeMethod, routeUrlMask, proxied) {
-		return this.#patch(API.proxied, {
-			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.proxied]: proxied
-		})
+	setRouteIsProxied(method, urlMask, proxied) {
+		return this.#patch(API.proxied, [method, urlMask, proxied])
 	}
 
 	selectCookie(cookieKey) {

package/src/ApiConstants.js

@@ -19,21 +19,9 @@ export const API = {
 	toggle500: MOUNT + '/toggle500'
 }
 
-export const DF = { // Dashboard Fields (XHR)
-	routeMethod: 'route_method',
-	routeUrlMask: 'route_url_mask',
-	delayed: 'delayed',
-	proxied: 'proxied',
-	statusCode: 'status_code',
-	syncVersion: 'last_received_sync_version'
-}
+export const HEADER_FOR_502 = 'Mockaton502'
+export const HEADER_FOR_SYNC_VERSION = 'sync_version'
 
-// TODO @ThinkAbout these affecting partial matches when bulk-selecting
-// e.g. 'ton' would match 
-export const AUTO_500_COMMENT = '(Mockaton 500)'
 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

@@ -369,6 +369,19 @@ table {
 	> tr:first-child > th {
 		border-top: 0;
 	}
+
+	tr.animIn {
+		opacity: 0;
+		transform: scaleY(0);
+		animation: _kfAnimIn 180ms ease-in-out forwards;
+	}
+}
+
+@keyframes _kfAnimIn {
+	to {
+		opacity: 1;
+		transform: scaleY(1);
+	}
 }
 
 .Method {
@@ -544,11 +557,22 @@ table {
 			}
 		}
 
+		&:disabled + span {
+			cursor: not-allowed;
+			opacity: 0.7;
+		}
 		&:checked + span {
 			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);
 		}
+		&:not(:checked):enabled:hover + span {
+			border-color: var(--colorRed);
+			color: var(--colorRed);
+		}
+		&:enabled:active + span {
+			cursor: grabbing;
+		}
 	}
 
 	> span {
@@ -558,14 +582,6 @@ table {
 		font-weight: bold;
 		color: var(--colorSecondaryAction);
 		border-radius: var(--radius);
-
-		&:hover {
-			border-color: var(--colorRed);
-			color: var(--colorRed);
-		}
-		&:active {
-			cursor: grabbing;
-		}
 	}
 }