mockaton 12.7.1 → 13.0.0

package/README.md

@@ -10,20 +10,6 @@ for testing difficult to reproduce backend states.
 
 ## [Documentation ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog)
 
-## Overview
-With Mockaton, you don’t need to write code for wiring up your
-mocks. Instead, a given directory is scanned for filenames
-following a convention similar to the URLs.
-
-For example, for [/api/company/123](#), the filename could be:
-
-<pre>
-<code>my-mocks-dir/<b>api/company</b>/[id].GET.200.json</code>
-</pre>
-
-
-## Dashboard
-
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.light.gold.png">
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
@@ -34,9 +20,8 @@ For example, for [/api/company/123](#), the filename could be:
 
 
 ## Quick Start (Docker)
-This will spin up Mockaton with the sample directories
-included in this repo mounted on the container. Mentioned dirs are: [mockaton-mocks/](./mockaton-mocks)
-and [mockaton-static-mocks/](./mockaton-static-mocks).
+This will spin up Mockaton with the sample directory
+included in this repo mounted on the container. Mentioned dir is: [mockaton-mocks/](./mockaton-mocks).
 
 ```sh
 git clone https://github.com/ericfortis/mockaton.git --depth 1
@@ -49,3 +34,54 @@ Test it:
 ```shell
 curl localhost:2020/api/user
 ```
+
+
+## Overview
+With Mockaton, you don’t need to write code for wiring up your
+mocks. Instead, a given directory is scanned for filenames
+following a convention similar to the URLs.
+
+For example, for [/api/company/123](#), the file could be:
+
+<code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.json</code>
+```json
+{
+  "name": "Acme, Inc."
+}
+```
+
+Or, you can write it in TypeScript (it will be sent as JSON).
+
+<code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.ts</code>
+```ts
+export default {
+  name: 'Acme, Inc.'
+}
+```
+
+Similarly, you can handle logic with [Functional Mocks](https://mockaton.com/functional-mocks):
+
+<code>my_mocks_dir/<b>api/company/[companyId]/user/[userId]</b>.GET.200.ts</code>
+```ts
+import { IncomingMessage, OutgoingMessage } from 'node:http'
+import { parseSplats } from 'mockaton'
+
+export default async function (req: IncomingMessage, response: OutgoingMessage) {
+  const { companyId, userId } = parseSplats(req.url, import.meta.filename)
+  const foo = await getFoo()
+  return JSON.stringify({
+    foo,
+    companyId,
+    userId,
+    name: 'Acme, Inc.'
+  })
+}
+```
+
+## Browser Extension
+[Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
+
+
+## API
+Programmatic [Control API](https://mockaton.com/api).
+

package/index.d.ts

@@ -11,7 +11,6 @@ export type Plugin = (
 
 export interface Config {
 	mocksDir?: string
-	staticDir?: string
 	ignore?: RegExp
 	watcherEnabled?: boolean
 	watcherDebounceMs?: number
@@ -74,7 +73,8 @@ export type ClientMockBroker = {
 	mocks: string[]
 	file: string
 	status: number
-	auto500: boolean
+	isStatic: boolean
+	autoStatus: number
 	delayed: boolean
 	proxied: boolean
 }
@@ -84,19 +84,8 @@ export type ClientBrokersByMethod = {
 	}
 }
 
-export type ClientStaticBroker = {
-	route: string
-	delayed: boolean
-	status: number
-}
-export type ClientStaticBrokers = {
-	[route: string]: ClientStaticBroker
-}
-
-
 export interface State {
 	brokersByMethod: ClientBrokersByMethod
-	staticBrokers: ClientStaticBrokers
 
 	cookies: [label: string, selected: boolean][]
 	comments: string[]

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "12.7.1",
+	"version": "13.0.0",
 	"exports": {
 		".": {
 			"import": "./index.js",
@@ -17,18 +17,13 @@
 	"license": "MIT",
 	"homepage": "https://mockaton.com",
 	"repository": "https://github.com/ericfortis/mockaton",
-	"keywords": [
-		"mock-server",
-		"rest-api",
-		"mock",
-		"api",
-		"testing"
-	],
+	"keywords": ["mock-server"],
 	"bin": {
 		"mockaton": "src/server/cli.js"
 	},
 	"scripts": {
-		"start": "make start"
+		"start": "make start",
+		"test": "make test"
 	},
 	"engines": {
 		"node": ">=22.18 <23 || >=23.6"

package/src/client/ApiCommander.js

@@ -40,7 +40,9 @@ export class Commander {
 
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
-	toggle500 = (method, urlMask) => this.#patch(API.toggle500, [method, urlMask])
+	toggleStatus = (status, method, urlMask) => this.#patch(API.toggleStatus, [status, method, urlMask])
+
+	// TODO change Status or Toggle404?
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
 	setRouteIsProxied = (method, urlMask, proxied) => this.#patch(API.proxied, [method, urlMask, proxied])
@@ -49,19 +51,13 @@ export class Commander {
 	setRouteIsDelayed = (method, urlMask, delayed) => this.#patch(API.delay, [method, urlMask, delayed])
 
 
-	setStaticRouteStatus = (urlMask, status) => this.#patch(API.staticStatus, [urlMask, status])
-
-	setStaticRouteIsDelayed = (urlMask, delayed) => this.#patch(API.delayStatic, [urlMask, delayed])
-
-
-
 	/** @returns {JsonPromise<State>} */
 	getState = () => fetch(this.addr + API.state)
-	
-	
-	/** 
+
+
+	/**
 	 * SSE - Streams an incremental version when a mock is added, deleted, or renamed
-	 * @returns {Promise<Response>} 
+	 * @returns {Promise<Response>}
 	 */
 	getSyncVersion = () => fetch(this.addr + API.syncVersion)
 }

package/src/client/ApiConstants.js

@@ -4,13 +4,11 @@ const MOUNT = '/mockaton'
 
 export const API = {
 	dashboard: MOUNT,
-
 	bulkSelect: MOUNT + '/bulk-select-by-comment',
 	collectProxied: MOUNT + '/collect-proxied',
 	cookies: MOUNT + '/cookies',
 	cors: MOUNT + '/cors',
 	delay: MOUNT + '/delay',
-	delayStatic: MOUNT + '/delay-static',
 	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
 	globalDelayJitter: MOUNT + '/global-delay-jitter',
@@ -18,10 +16,9 @@ export const API = {
 	reset: MOUNT + '/reset',
 	select: MOUNT + '/select',
 	state: MOUNT + '/state',
-	staticStatus: MOUNT + '/static-status',
 	syncVersion: MOUNT + '/sync-version',
 	throws: MOUNT + '/throws',
-	toggle500: MOUNT + '/toggle500',
+	toggleStatus: MOUNT + '/toggle-status',
 	watchHotReload: MOUNT + '/watch-hot-reload',
 	watchMocks: MOUNT + '/watch-mocks',
 }

package/src/client/Filename.js

@@ -19,29 +19,29 @@ export function includesComment(file, search) {
 	return extractComments(file).some(c => c.includes(search))
 }
 
-
-export function validateFilename(file) {
+export function parseFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
-	if (tokens.length < 4)
-		return 'Invalid Filename Convention'
 
-	const { status, method } = parseFilename(file)
-	if (!responseStatusIsValid(status))
-		return `Invalid HTTP Response Status: "${status}"`
-
-	if (!METHODS.includes(method))
-		return `Unrecognized HTTP Method: "${method}"`
-}
+	const followsConvention = tokens.length > 3
+		&& responseStatusIsValid(Number(tokens.at(-2)))
+		&& METHODS.includes(tokens.at(-3))
+	const isStatic = !followsConvention
 
-
-export function parseFilename(file) {
-	const tokens = file.replace(reComments, '').split('.')
-	return {
-		ext: tokens.pop(),
-		status: Number(tokens.pop()),
-		method: tokens.pop(),
-		urlMask: '/' + removeTrailingSlash(tokens.join('.'))
-	}
+	return isStatic
+		? {
+			isStatic,
+			ext: tokens.pop() || '',
+			status: 200,
+			method: 'GET',
+			urlMask: '/' + file
+		}
+		: {
+			isStatic,
+			ext: tokens.pop(),
+			status: Number(tokens.pop()),
+			method: tokens.pop(),
+			urlMask: '/' + removeTrailingSlash(tokens.join('.'))
+		}
 }
 
 export function removeTrailingSlash(url = '') {
@@ -61,9 +61,9 @@ function responseStatusIsValid(status) {
 		&& status <= 599
 }
 
-export function makeMockFilename(url, method, status, ext) {
+export function makeMockFilename(url, method, status, ext, comment = '') {
 	const urlMask = replaceIds(removeTrailingSlash(url))
-	return [urlMask, method, status, ext].join('.')
+	return [urlMask + comment, method, status, ext].join('.')
 }
 
 const reUuidV4 = /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/gi

package/src/client/app-header.js

@@ -1,6 +1,6 @@
 import { createElement as r, t, defineClassNames } from './dom-utils.js'
+import { Logo, HelpIcon } from './graphics.js'
 import { store } from './app-store.js'
-import { Logo, HelpIcon } from './app-icons.js'
 
 import CSS from './app.css' with { type: 'css' }
 defineClassNames(CSS)
@@ -47,8 +47,8 @@ function GlobalDelayField() {
 				step: 100,
 				autocomplete: 'none',
 				value: store.delay,
-				onChange,
-				onWheel: [onWheel, { passive: true }]
+				onWheel: [onWheel, { passive: true }],
+				onChange
 			})))
 }
 
@@ -73,13 +73,13 @@ function GlobalDelayJitterField() {
 			r('span', null, t`Max Jitter %`),
 			r('input', {
 				type: 'number',
+				autocomplete: 'none',
 				min: 0,
 				max: 300,
 				step: 10,
-				autocomplete: 'none',
 				value: (store.delayJitter * 100).toFixed(0),
-				onChange,
-				onWheel: [onWheel, { passive: true }]
+				onWheel: [onWheel, { passive: true }],
+				onChange
 			})))
 }
 

package/src/client/app-payload-viewer.js

@@ -7,25 +7,29 @@ import CSS from './app.css' with { type: 'css' }
 defineClassNames(CSS)
 
 
-const payloadViewerTitleRef = {}
-const payloadViewerCodeRef = {}
+const titleRef = {}
+const codeRef = {}
 
 export function PayloadViewer() {
 	return (
 		r('div', { className: CSS.PayloadViewer },
 
 			r('div', { className: CSS.SubToolbar },
-				r('h2', { ref: payloadViewerTitleRef },
+				r('h2', { ref: titleRef },
 					!store.hasChosenLink && t`Preview`)),
 
 			r('pre', null,
-				r('code', { ref: payloadViewerCodeRef },
+				r('code', { ref: codeRef },
 					!store.hasChosenLink && t`Click a link to preview it`))))
 }
 
 
 function PayloadViewerTitle(file, statusText) {
-	const { method, status, ext } = parseFilename(file)
+	const { method, status, ext, isStatic } = parseFilename(file)
+
+	if (isStatic)
+		return r('span', null, file)
+
 	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
 	return (
 		r('span', null,
@@ -66,8 +70,8 @@ export async function previewMock() {
 	previewMock.controller = new AbortController
 
 	const spinnerTimer = setTimeout(() => {
-		payloadViewerTitleRef.elem.replaceChildren(t`Fetching…`)
-		payloadViewerCodeRef.elem.replaceChildren(PayloadViewerProgressBar())
+		titleRef.elem.replaceChildren(t`Fetching…`)
+		codeRef.elem.replaceChildren(PayloadViewerProgressBar())
 	}, SPINNER_DELAY)
 
 	try {
@@ -83,7 +87,7 @@ export async function previewMock() {
 	catch (error) {
 		clearTimeout(spinnerTimer)
 		store.onError(error)
-		payloadViewerCodeRef.elem.replaceChildren()
+		codeRef.elem.replaceChildren()
 	}
 }
 
@@ -91,30 +95,53 @@ export async function previewMock() {
 async function updatePayloadViewer(proxied, file, response) {
 	const mime = response.headers.get('content-type') || ''
 
-	payloadViewerTitleRef.elem.replaceChildren(proxied
+	titleRef.elem.replaceChildren(proxied
 		? PayloadViewerTitleWhenProxied(response)
 		: PayloadViewerTitle(file, response.statusText))
 
-	if (mime.startsWith('image/')) // Naively assumes GET 200
-		payloadViewerCodeRef.elem.replaceChildren(r('img', {
+	// All branches naively assume GET 200
+	if (mime.startsWith('image/'))
+		codeRef.elem.replaceChildren(r('img', {
 			src: URL.createObjectURL(await response.blob())
 		}))
-	else {
-		const body = await response.text() || t`/* Empty Response Body */`
-		if (mime === 'application/json')
-			payloadViewerCodeRef.elem.replaceChildren(SyntaxJSON(body))
-		else if (isXML(mime))
-			payloadViewerCodeRef.elem.replaceChildren(SyntaxXML(body))
-		else
-			payloadViewerCodeRef.elem.textContent = body
-	}
-}
 
-function isXML(mime) {
-	return ['text/html', 'text/xml', 'application/xml'].some(m => mime.includes(m))
-		|| /application\/.*\+xml/.test(mime)
-}
+	else if (mime.startsWith('video/'))
+		codeRef.elem.replaceChildren(r('video', {
+			src: store.chosenLink.urlMask,
+			controls: true
+		}))
+
+	else if (mime.startsWith('audio/'))
+		codeRef.elem.replaceChildren(r('audio', {
+			src: store.chosenLink.urlMask,
+			controls: true
+		}))
 
+	else if (['text/html', 'application/pdf'].includes(mime))
+		codeRef.elem.replaceChildren(r('iframe', {
+			src: store.chosenLink.urlMask // using a blob is would need to allow inline styles etc in CSP
+		}))
+
+	else if (mime === 'application/json')
+		codeRef.elem.replaceChildren(SyntaxJSON(await bodyAsText()))
+
+	else if (['text/xml', 'application/xml'].includes(mime))
+		codeRef.elem.replaceChildren(SyntaxXML(await bodyAsText()))
+
+	else if (mime.startsWith('text/'))
+		codeRef.elem.textContent = await bodyAsText()
+
+	else
+		codeRef.elem.replaceChildren(r('a', {
+			href: URL.createObjectURL(await response.blob()),
+			download: store.chosenLink.urlMask
+		}, t`Download`))
+
+
+	function bodyAsText() {
+		return response.text() || t`/* Empty Response Body */`
+	}
+}
 
 
 function SyntaxJSON(json) {

package/src/client/app-store.js

@@ -12,7 +12,6 @@ export const store = {
 	renderRow(method, urlMask) {},
 
 	brokersByMethod: /** @type ClientBrokersByMethod */ {},
-	staticBrokers: /** @type ClientStaticBrokers */ {},
 
 	cookies: [],
 	comments: [],
@@ -148,19 +147,6 @@ export const store = {
 		return r
 	},
 
-	staticBrokersAsRows() {
-		const rows = Object.values(store.staticBrokers)
-			.map(b => new StaticBrokerRowModel(b))
-			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
-		const urlMasksDittoed = dittoSplitPaths(rows.map(r => r.urlMask))
-		rows.forEach((r, i) => {
-			r.setUrlMaskDittoed(urlMasksDittoed[i])
-			r.setIsNew(!store._dittoCache.has(r.key))
-			store._dittoCache.set(r.key, urlMasksDittoed[i])
-		})
-		return rows
-	},
-
 	previewLink(method, urlMask) {
 		store.setChosenLink(method, urlMask)
 		store.renderRow(method, urlMask)
@@ -175,8 +161,8 @@ export const store = {
 		})
 	},
 
-	toggle500(method, urlMask) {
-		store._request(() => api.toggle500(method, urlMask), async response => {
+	toggleStatus(status, method, urlMask) {
+		store._request(() => api.toggleStatus(status, method, urlMask), async response => {
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
@@ -195,18 +181,6 @@ export const store = {
 		store._request(() => api.setRouteIsDelayed(method, urlMask, checked), async response => {
 			store.setBroker(await response.json())
 		})
-	},
-
-	setDelayedStatic(route, checked) {
-		store._request(() => api.setStaticRouteIsDelayed(route, checked), () => {
-			store.staticBrokers[route].delayed = checked
-		})
-	},
-
-	setStaticRouteStatus(route, status) {
-		store._request(() => api.setStaticRouteStatus(route, status), () => {
-			store.staticBrokers[route].status = status
-		})
 	}
 }
 
@@ -303,28 +277,25 @@ export class BrokerRowModel {
 	}
 
 	get status() { return this.#broker.status }
-	get auto500() { return this.#broker.auto500 }
+	get autoStatus() { return this.#broker.autoStatus }
+	get isStatic() { return this.#broker.isStatic }
 	get delayed() { return this.#broker.delayed }
-	get proxied() { return this.#canProxy && this.#broker.proxied }
+	get proxied() { return this.#broker.proxied && this.#canProxy }
 	get selectedFile() { return this.#broker.file }
-	get selectedIdx() {
-		return this.opts.findIndex(([, , selected]) => selected)
-	}
-	get selectedFileIs4xx() {
-		return this.status >= 400 && this.status < 500
-	}
+	get selectedIdx() { return this.opts.findIndex(([, , selected]) => selected) }
+	get selectedFileIs4xx() { return this.status >= 400 && this.status < 500 }
 
 	#makeOptions() {
 		const opts = this.#broker.mocks.map(f => [
 			f,
 			this.#optionLabelFor(f),
-			!this.auto500 && !this.proxied && f === this.selectedFile
+			!this.autoStatus && !this.proxied && f === this.selectedFile
 		])
 
-		if (this.auto500)
+		if (this.autoStatus)
 			opts.push([
-				'__AUTO_500__',
-				t`Auto500`,
+				'__AUTO_STATUS__',
+				this.autoStatus === 404 ? t`Auto404` : t`Auto500`,
 				true
 			])
 		else if (this.proxied)
@@ -346,27 +317,3 @@ export class BrokerRowModel {
 		].filter(Boolean).join(' ')
 	}
 }
-
-
-class StaticBrokerRowModel {
-	isNew = false
-	key = ''
-	method = 'GET'
-	urlMaskDittoed = ['', '']
-	#broker = /** @type ClientStaticBroker */ {}
-
-	/** @param {ClientStaticBroker} broker */
-	constructor(broker) {
-		this.#broker = broker
-		this.key = 'sbrm' + '::' + this.method + '::' + broker.route
-	}
-	setUrlMaskDittoed(urlMaskDittoed) {
-		this.urlMaskDittoed = urlMaskDittoed
-	}
-	setIsNew(isNew) {
-		this.isNew = isNew
-	}
-	get urlMask() { return this.#broker.route }
-	get delayed() { return this.#broker.delayed }
-	get status() { return this.#broker.status }
-}

package/src/client/app-store.test.js

@@ -31,7 +31,7 @@ test('dittoSplitPaths', () => {
 test('BrokerRowModel', () => {
 	test('has Auto500 when is autogenerated 500', () => {
 		const broker = {
-			auto500: true,
+			autoStatus: 500,
 			file: 'api/user.GET.200.json',
 			mocks: ['api/user.GET.200.json']
 		}
@@ -43,6 +43,20 @@ test('BrokerRowModel', () => {
 		])
 	})
 
+	test('has Auto 404 when is autogenerated 404', () => {
+		const broker = {
+			autoStatus: 404,
+			file: 'index.html',
+			mocks: ['index.html']
+		}
+		const row = new BrokerRowModel(broker, false)
+		const opts = row.opts.map(([, n, selected]) => [n, selected])
+		deepEqual(opts, [
+			['200 html', false],
+			[t`Auto404`, true],
+		])
+	})
+
 	test('filename has extension except when empty or unknown', () => {
 		const broker = {
 			file: `api/user0.GET.200.empty`,