mockaton 3.0.0 → 4.0.0

package/README.md

@@ -44,17 +44,16 @@ node my-mockaton.js
 ## Config Options
 ```ts
 interface Config {
-	mocksDir: string
-	staticDir?: string
-	host?: string, // defaults to 'localhost'
-	port?: number // defaults to 0, which means auto-assigned
-	delay?: number // defaults to 1200 (ms)
-  open?: (dashboardUrl: string) => void // pass a noop to prevent opening the dashboard
-	cookies?: object
-	proxyFallback?: string // e.g. http://localhost:9999 Target for relaying routes without mocks
-	allowedExt?: RegExp // /\.(json|txt|md|js)$/ Just for excluding temporary editor files (e.g. JetBrains appends a ~)
-	generate500?: boolean // autogenerates an Internal Server Error empty mock for routes that have no 500
-	extraHeaders?: []
+  mocksDir: string
+  staticDir?: string
+  host?: string, // defaults to 'localhost'
+  port?: number // defaults to 0, which means auto-assigned
+  delay?: number // defaults to 1200 (ms)
+  onReady?: (dashboardUrl: string) => void // defaults to openInBrowser. pass a noop to prevent opening the dashboard
+  cookies?: object
+  proxyFallback?: string // e.g. http://localhost:9999 Target for relaying routes without mocks
+  allowedExt?: RegExp // /\.(json|txt|md|js)$/ Just for excluding temporary editor files (e.g. JetBrains appends a ~)
+  extraHeaders?: []
 }
 ```
 

package/Tests.js

@@ -11,7 +11,7 @@ import { writeFileSync, mkdtempSync, mkdirSync } from 'node:fs'
 import { Route } from './src/Route.js'
 import { mimeFor } from './src/utils/mime.js'
 import { Mockaton } from './src/Mockaton.js'
-import { API, DF } from './src/ApiConstants.js'
+import { API, DF, DEFAULT_500_COMMENT } from './src/ApiConstants.js'
 
 
 const tmpDir = mkdtempSync(tmpdir()) + '/'
@@ -106,12 +106,11 @@ writeStatic('another-entry/index.html', '<h1>Another</h1>')
 const server = Mockaton({
 	mocksDir: tmpDir,
 	staticDir: staticTmpDir,
-	open: () => {},
+	onReady: () => {},
 	cookies: {
 		userA: 'CookieA',
 		userB: 'CookieB'
 	},
-	generate500: true,
 	extraHeaders: ['Server', 'MockatonTester']
 })
 server.on('listening', runTests)
@@ -129,8 +128,8 @@ async function runTests() {
 		JSON.stringify({ comment: 2 }))
 
 	await testAutogenerates500(
-		'/api/company-e/123?limit=9',
-		'api/company-e/[id]?limit=[limit].GET.500.txt')
+		'/api/alternative',
+		`api/alternative${DEFAULT_500_COMMENT}.GET.500.txt`)
 
 	await testPreservesExiting500(
 		'/api',
@@ -148,6 +147,7 @@ async function runTests() {
 	await testExtractsAllComments([
 		'(comment-1)',
 		'(comment-2)',
+		DEFAULT_500_COMMENT,
 		'(this is the actual comment)',
 		'(another comment)'
 	])
@@ -248,7 +248,7 @@ async function testAutogenerates500(url, file) {
 	})
 	const res = await request(url)
 	const body = await res.text()
-	await describe('autogenerated 500', () => {
+	await describe('autogenerated in-memory 500', () => {
 		it('body is empty', () => equal(body, ''))
 		it('status is: 500', () => equal(res.status, 500))
 	})

package/index.d.ts

@@ -6,11 +6,10 @@ interface Config {
 	host?: string,
 	port?: number
 	delay?: number
-	open?: (address: string) => void
+	onReady?: (address: string) => void
 	cookies?: object
 	proxyFallback?: string
 	allowedExt?: RegExp
-	generate500?: boolean,
 	extraHeaders?: [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": "3.0.0",
+	"version": "4.0.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/ApiConstants.js

@@ -14,3 +14,5 @@ export const DF = { // Dashboard Fields (XHR)
 	delayed: 'delayed',
 	file: 'file'
 }
+
+export const DEFAULT_500_COMMENT = '(Mockaton Temp 500)'

package/src/Config.js

@@ -8,11 +8,10 @@ export const Config = {
 	host: '127.0.0.1',
 	port: 0, // auto-assigned
 	delay: 1200, // milliseconds
-	open: openInBrowser,
 	cookies: {}, // defaults to the first kv
+	onReady: openInBrowser,
 	proxyFallback: '', // e.g. http://localhost:9999
 	allowedExt: /\.(json|txt|md|js)$/, // Just for excluding temporary editor files (e.g. JetBrains appends a ~)
-	generate500: false,
 	extraHeaders: []
 }
 
@@ -24,11 +23,10 @@ export function setup(options) {
 		host: is(String),
 		port: port => Number.isInteger(port) && port >= 0 && port < 2 ** 16,
 		delay: ms => Number.isInteger(ms) && ms > 0,
-		open: is(Function),
 		cookies: is(Object),
+		onReady: is(Function),
 		proxyFallback: optional(URL.canParse),
 		allowedExt: is(RegExp),
-		generate500: is(Boolean),
 		extraHeaders: Array.isArray
 	})
 }

package/src/Dashboard.css

@@ -8,7 +8,7 @@
 }
 html, body {
 	margin: 0;
-	font-size: 13px;
+	font-size: 12px;
 }
 body {
 	padding: 16px;
@@ -50,36 +50,40 @@ main {
 			padding-bottom: 2px;
 			text-align: left;
 		}
+
+		tr {
+			border-bottom: 2px solid transparent;
+		}
 	}
 }
 
 menu {
 	display: flex;
+	align-items: flex-end;
 	margin-bottom: 12px;
 	gap: 14px;
-	align-items: flex-end;
 
 	h1 {
 		margin: 0;
-		margin-right: 14px;
-		font-size: 2rem;
+		margin-right: 12px;
+		font-size: 26px;
 	}
 
 	label {
 		span {
 			display: block;
 			color: #555;
-			font-size: .85rem;
+			font-size: 11px;
 		}
 
 		select {
-			width: 143px;
+			width: 144px;
 			padding: 3px 0;
 			border: 1px solid #bbb;
 			margin-top: 1px;
 			cursor: pointer;
 			border-radius: 4px;
-			font-size: 0.9rem;
+			font-size: 11px;
 		}
 	}
 
@@ -105,6 +109,8 @@ menu {
 	margin-left: 16px;
 
 	pre {
+		tab-size: 2;
+
 		&:not(:empty) {
 			overflow: auto;
 			max-height: calc(100vh - 160px);
@@ -147,6 +153,7 @@ menu {
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
+	font-size: 12px;
 
 	&:disabled {
 		background: transparent;
@@ -160,14 +167,11 @@ menu {
 	&.status4xx {
 		background: var(--colorLightOrange);
 	}
-	&.status5xx {
-		background: var(--colorLightRed);
-	}
 }
 
-.DelayCheckbox {
+.DelayToggler {
 	display: flex;
-	margin-left: 6px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {
@@ -189,7 +193,36 @@ menu {
 		background: white;
 
 		&:hover {
-			background: #ddd
+			background: #bce5ff;
+			fill: #00318b;
+		}
+	}
+}
+
+.InternalServerErrorToggler {
+	display: flex;
+	margin-left: 6px;
+	cursor: pointer;
+
+	> input {
+		display: none;
+
+		&:checked ~ span {
+			color: white;
+			background: var(--colorRed);
+		}
+	}
+
+	> span {
+		padding: 4px;
+		font-size: 10px;
+		color: #333;
+		border-radius: 2px;
+		background: white;
+
+		&:hover {
+			background: var(--colorLightRed);
+			color: var(--colorRed);
 		}
 	}
 }

package/src/Dashboard.js

@@ -1,5 +1,5 @@
 import { Route } from '../Route.js'
-import { API, DF } from '../ApiConstants.js'
+import { API, DF, DEFAULT_500_COMMENT } from '../ApiConstants.js'
 
 
 const Strings = {
@@ -9,6 +9,7 @@ const Strings = {
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
 	fetching: '⌚ Fetching…',
+	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	reset: 'Reset',
 	select_one: 'Select One',
@@ -16,7 +17,8 @@ const Strings = {
 }
 
 const CSS = {
-	DelayCheckbox: 'DelayCheckbox',
+	DelayToggler: 'DelayToggler',
+	InternalServerErrorToggler: 'InternalServerErrorToggler',
 	Documentation: 'Documentation',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
@@ -25,7 +27,6 @@ const CSS = {
 	bold: 'bold',
 	chosen: 'chosen',
 	status4xx: 'status4xx',
-	status5xx: 'status5xx'
 }
 
 const r = createElement
@@ -136,8 +137,10 @@ function SectionByMethod({ method, brokers }) {
 				.map(([urlMask, broker]) =>
 					r('tr', null,
 						r('td', null, r(PreviewLink, { method, urlMask, documentation: broker.documentation })),
-						r('td', null, r(MockSelector, { items: broker.mocks, selected: broker.currentMock.file })),
-						r('td', null, r(DelayToggler, { name: broker.currentMock.file, checked: Boolean(broker.currentMock.delay) }))))))
+						r('td', null, r(MockSelector, { broker })),
+						r('td', null, r(DelayToggler, { broker })),
+						r('td', null, r(InternalServerErrorToggler, { broker }))
+					))))
 }
 
 function PreviewLink({ method, urlMask, documentation }) {
@@ -173,19 +176,27 @@ function PreviewLink({ method, urlMask, documentation }) {
 		}, urlMask))
 }
 
-function MockSelector({ items, selected }) {
+function MockSelector({ broker }) {
 	const className = (defaultIsSelected, status) => cssClass(
 		CSS.MockSelector,
 		!defaultIsSelected && CSS.bold,
-		status >= 400 && status < 500 && CSS.status4xx,
-		status >= 500 && CSS.status5xx)
+		status >= 400 && status < 500 && CSS.status4xx)
+
+	const items = broker.mocks
+	const selected = broker.currentMock.file
+
+	const { status } = Route.parseFilename(selected)
+	const files = items.filter(item =>
+		status === 500 ||
+		!item.includes(DEFAULT_500_COMMENT))
+
 	return (
 		r('select', {
-			className: className(selected === items[0], Route.parseFilename(selected).status),
+			className: className(selected === files[0], status),
 			autocomplete: 'off',
-			disabled: items.length <= 1,
+			disabled: files.length <= 1,
 			onChange() {
-				const status = Route.parseFilename(this.value).status
+				const { status } = Route.parseFilename(this.value)
 				this.style.fontWeight = this.value === this.options[0].value // default is selected
 					? 'normal'
 					: 'bold'
@@ -194,20 +205,22 @@ function MockSelector({ items, selected }) {
 					body: JSON.stringify({ [DF.file]: this.value })
 				}).then(() => {
 					this.closest('tr').querySelector('a').click()
-					this.className = className(this.value === this.options[0].value, this.value === status)
+					this.closest('tr').querySelector(`.${CSS.InternalServerErrorToggler}>[type=checkbox]`).checked = status === 500
+					this.className = className(this.value === this.options[0].value, status)
 				})
 			}
-		}, items.map(item =>
-			r('option', {
-				value: item,
-				selected: item === selected
-			}, item))))
+		}, files.map(file => r('option', {
+			value: file,
+			selected: file === selected
+		}, file))))
 }
 
-function DelayToggler({ name, checked }) {
+function DelayToggler({ broker }) {
+	const name = broker.currentMock.file
+	const checked = Boolean(broker.currentMock.delay)
 	return (
 		r('label', {
-				className: CSS.DelayCheckbox,
+				className: CSS.DelayToggler,
 				title: Strings.delay
 			},
 			r('input', {
@@ -234,6 +247,36 @@ function TimerIcon() {
 			r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
 }
 
+function InternalServerErrorToggler({ broker }) {
+	const items = broker.mocks
+	const name = broker.currentMock.file
+	const checked = Route.parseFilename(broker.currentMock.file).status === 500
+	return (
+		r('label', {
+				className: CSS.InternalServerErrorToggler,
+				title: Strings.internal_server_error
+			},
+			r('input', {
+				type: 'checkbox',
+				autocomplete: 'off',
+				name,
+				checked,
+				onChange(event) {
+					fetch(API.edit, {
+						method: 'PATCH',
+						body: JSON.stringify({
+							[DF.file]: event.currentTarget.checked
+								? items.find(f => f.includes(DEFAULT_500_COMMENT))
+								: items[0]
+						})
+					}).then(init)
+				}
+			}),
+			r('span', null, '500')
+		)
+	)
+}
+
 
 
 /* === Utils === */

package/src/MockBroker.js

@@ -1,13 +1,14 @@
 import { join } from 'node:path'
-import { existsSync, lstatSync, writeFileSync } from 'node:fs'
+import { existsSync, lstatSync } from 'node:fs'
 
 import { Route } from './Route.js'
 import { Config } from './Config.js'
+import { DEFAULT_500_COMMENT } from './ApiConstants.js'
 
 
 // MockBroker is a state for a particular route. It knows the available
 // mock files that can be served for the route, the currently selected
-// file, and its delay. Also, knows if the route has documentation (md).
+// file, and its delay. Also, knows if the route has documentation (md)
 export class MockBroker {
 	#route
 
@@ -40,7 +41,8 @@ export class MockBroker {
 
 	get file() { return this.currentMock.file }
 	get delay() { return this.currentMock.delay }
-	get status() { return Route.parseFilename(this.currentMock.file).status }
+	get status() { return Route.parseFilename(this.file).status }
+	get isTemp500() { return Route.hasInParentheses(this.file, DEFAULT_500_COMMENT) }
 
 	updateFile(filename) {
 		this.currentMock.file = filename
@@ -67,7 +69,7 @@ export class MockBroker {
 
 	ensureItHas500() {
 		if (!this.#has500())
-			this.#write500()
+			this.#registerTemp500()
 	}
 
 	#has500() {
@@ -75,14 +77,14 @@ export class MockBroker {
 			Route.parseFilename(mock).status === 500)
 	}
 
-	#write500() {
+	#registerTemp500() {
 		const { urlMask, method } = Route.parseFilename(this.mocks[0])
 		let mask = urlMask
 		const t = join(Config.mocksDir, urlMask)
 		if (existsSync(t) && lstatSync(t).isDirectory())
 			mask = urlMask + '/'
-		const file = `${mask}.${method}.500.txt`
-		writeFileSync(join(Config.mocksDir, file), '')
+		mask = mask.replace(/^\//, '') // remove initial slash
+		const file = `${mask}${DEFAULT_500_COMMENT}.${method}.500.txt`
 		this.register(file)
 	}
 }

package/src/MockDispatcher.js

@@ -1,13 +1,12 @@
 import { join } from 'node:path'
 import { readFileSync } from 'node:fs'
 
-import { DF } from './ApiConstants.js'
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
 import { Config } from './Config.js'
 import { mimeFor } from './utils/mime.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
-import { parseJSON, JsonBodyParserError } from './utils/http-request.js'
+import { JsonBodyParserError } from './utils/http-request.js'
 import { sendInternalServerError, sendNotFound, sendFile, sendBadRequest } from './utils/http-response.js'
 
 
@@ -33,20 +32,17 @@ export async function dispatchMock(req, response) {
 
 		let mockText
 		if (file.endsWith('.js')) {
-			response.setHeader('content-type', mimeFor('.json'))
-			const jsExport = await importDefault(file)
-			mockText = typeof jsExport === 'function'
-				? await jsExport(req, response)
-				: JSON.stringify(jsExport, null, 2)
+			response.setHeader('Content-Type', mimeFor('.json'))
+			mockText = await jsMockText(file, req, response)
 		}
 		else {
-			response.setHeader('content-type', mimeFor(file))
-			mockText = readMock(file)
+			response.setHeader('Content-Type', mimeFor(file))
+			mockText = broker.isTemp500 ? '' : readMock(file)
 		}
 		
 		if (cookie.getCurrent())
-			response.setHeader('set-cookie', cookie.getCurrent())
-		
+			response.setHeader('Set-Cookie', cookie.getCurrent())
+
 		response.writeHead(status, Config.extraHeaders)
 		setTimeout(() => response.end(mockText), delay)
 	}
@@ -61,6 +57,13 @@ export async function dispatchMock(req, response) {
 	}
 }
 
+async function jsMockText(file, req, response) {
+	const jsExport = await importDefault(file)
+	return typeof jsExport === 'function'
+		? await jsExport(req, response)
+		: JSON.stringify(jsExport, null, 2)
+}
+
 function readMock(file) {
 	return readFileSync(join(Config.mocksDir, file), 'utf8')
 }

package/src/Mockaton.js

@@ -1,4 +1,3 @@
-import { exec } from 'node:child_process'
 import { createServer } from 'node:http'
 
 import { API } from './ApiConstants.js'
@@ -37,6 +36,6 @@ export function Mockaton(options) {
 			if (error)
 				console.error(error)
 			else
-				Config.open(url + API.dashboard)
+				Config.onReady(url + API.dashboard)
 		})
 }

package/src/mockBrokersCollection.js

@@ -40,8 +40,7 @@ export function init() {
 			collection[method][urlMask].register(file)
 	}
 
-	if (Config.generate500)
-		forEachBroker(broker => broker.ensureItHas500())
+	forEachBroker(broker => broker.ensureItHas500())
 }
 
 function forEachBroker(fn) {
@@ -49,7 +48,6 @@ function forEachBroker(fn) {
 		Object.values(brokers).forEach(fn)
 }
 
-
 export const getAll = () => collection
 
 export const getBrokerByFilename = file => {
@@ -72,7 +70,6 @@ export function getBrokerForUrl(method, url) {
 			return brokers[i]
 }
 
-
 export function extractAllComments() {
 	const comments = new Set()
 	forEachBroker(broker => {

package/src/utils/http-response.js

@@ -1,4 +1,4 @@
-import fs, { readFileSync } from 'node:fs'
+import fs, { existsSync, readFileSync } from 'node:fs'
 import { mimeFor } from './mime.js'
 
 
@@ -12,8 +12,12 @@ export function sendJSON(response, payload) {
 }
 
 export function sendFile(response, file) {
-	response.setHeader('content-type', mimeFor(file))
-	response.end(readFileSync(file))
+	if (!existsSync(file))
+		sendNotFound(response)
+	else {
+		response.setHeader('content-type', mimeFor(file))
+		response.end(readFileSync(file))
+	}	
 }
 
 export async function sendPartialContent(response, range, file) {