mockaton 8.13.1 → 8.14.0

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.13.1",
+	"version": "8.14.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -5,11 +5,11 @@
 
 import { join } from 'node:path'
 import { cookie } from './cookie.js'
-import { uiSyncVersion } from './Watcher.js'
 import { parseJSON } from './utils/http-request.js'
-import { listFilesRecursively } from './utils/fs.js'
+import { uiSyncVersion } from './Watcher.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
-import { config, isFileAllowed, ConfigValidator } from './config.js'
+import { config, ConfigValidator } from './config.js'
+import { getStaticFilesCollection, findStaticBrokerByRoute } from './StaticDispatcher.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile } from './utils/http-response.js'
 
@@ -47,7 +47,9 @@ export const apiPatchRequests = new Map([
 	[API.fallback, updateProxyFallback],
 	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
 	[API.globalDelay, setGlobalDelay],
-	[API.collectProxied, setCollectProxied]
+	[API.collectProxied, setCollectProxied],
+	[API.delayStatic, setStaticRouteIsDelayed],
+	[API.notFoundStatic, setStaticRouteIsNotFound]
 ])
 
 
@@ -64,18 +66,13 @@ function serveDashboardAsset(f) {
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
+function listStaticFiles(req, response) { sendJSON(response, getStaticFilesCollection()) }
 function getGlobalDelay(_, response) { sendJSON(response, config.delay) }
 function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
 function getProxyFallback(_, response) { sendJSON(response, config.proxyFallback) }
 function getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed) }
 function getCollectProxied(_, response) { sendJSON(response, config.collectProxied) }
 
-function listStaticFiles(req, response) {
-	sendJSON(response, config.staticDir
-		? listFilesRecursively(config.staticDir).filter(isFileAllowed)
-		: [])
-}
-
 function longPollClientSyncVersion(req, response) {
 	if (uiSyncVersion.version !== Number(req.headers[DF.syncVersion])) {
 		// e.g., tab was hidden while new mocks were added or removed
@@ -134,7 +131,7 @@ async function setRouteIsDelayed(req, response) {
 		body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
 	else {
@@ -151,7 +148,7 @@ async function setRouteIsProxied(req, response) { // TESTME
 		body[DF.routeUrlMask])
 
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
 	else if (typeof proxied !== 'boolean')
 		sendUnprocessableContent(response, `Expected a boolean for "proxied"`)
 	else if (proxied && !config.proxyFallback)
@@ -198,3 +195,36 @@ async function setGlobalDelay(req, response) { // TESTME
 	config.delay = parseInt(await parseJSON(req), 10)
 	sendOK(response)
 }
+
+
+async function setStaticRouteIsNotFound(req, response) {
+	const body = await parseJSON(req)
+	const shouldBeNotFound = body[DF.shouldBeNotFound]
+	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
+
+	if (!broker) // TESTME
+		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)
+	else if (typeof shouldBeNotFound !== 'boolean')
+		sendUnprocessableContent(response, `Expected a boolean for "not found"`) // TESTME
+	else {
+		broker.updateNotFound(body[DF.shouldBeNotFound])
+		sendOK(response)
+	}
+}
+
+
+async function setStaticRouteIsDelayed(req, response) {
+	const body = await parseJSON(req)
+	const shouldBeNotFound = body[DF.delayed]
+	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
+
+	if (!broker) // TESTME
+		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)
+	else if (typeof shouldBeNotFound !== 'boolean')
+		sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
+	else {
+		broker.updateDelayed(body[DF.delayed])
+		sendOK(response)
+	}
+}
+

package/src/ApiConstants.js

@@ -7,9 +7,11 @@ export const API = {
 	cookies: MOUNT + '/cookies',
 	cors: MOUNT + '/cors',
 	delay: MOUNT + '/delay',
+	delayStatic: MOUNT + '/delay-static',
 	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
 	mocks: MOUNT + '/mocks',
+	notFoundStatic: MOUNT + '/not-found-static',
 	proxied: MOUNT + '/proxied',
 	reset: MOUNT + '/reset',
 	select: MOUNT + '/select',
@@ -22,6 +24,7 @@ export const DF = { // Dashboard Fields (XHR)
 	routeUrlMask: 'route_url_mask',
 	delayed: 'delayed',
 	proxied: 'proxied',
+	shouldBeNotFound: 'should_be_not_found',
 	syncVersion: 'last_received_sync_version'
 }
 

package/src/Commander.js

@@ -37,6 +37,20 @@ export class Commander {
 		})
 	}
 
+	setStaticRouteIsDelayed(routeUrlMask, delayed) {
+		return this.#patch(API.delayStatic, {
+			[DF.routeUrlMask]: routeUrlMask,
+			[DF.delayed]: delayed
+		})
+	}
+
+	setStaticRouteIs404(routeUrlMask, shouldBeNotFound) {
+		return this.#patch(API.notFoundStatic, {
+			[DF.routeUrlMask]: routeUrlMask,
+			[DF.shouldBeNotFound]: shouldBeNotFound
+		})
+	}
+
 	setRouteIsProxied(routeMethod, routeUrlMask, proxied) {
 		return this.#patch(API.proxied, {
 			[DF.routeMethod]: routeMethod,

package/src/Dashboard.css

@@ -230,26 +230,26 @@ select {
 	display: flex;
 }
 
+table {
+	border-collapse: collapse;
+
+	th {
+		padding-top: 20px;
+		padding-bottom: 2px;
+		padding-left: 99px;
+		text-align: left;
+	}
+
+	tr {
+		border-top: 2px solid transparent;
+	}
+}
 
 .MockList {
 	display: flex;
 	align-items: flex-start;
 	margin-top: 64px;
 
-	> table {
-		border-collapse: collapse;
-
-		th {
-			padding-top: 20px;
-			padding-bottom: 2px;
-			text-align: left;
-		}
-
-		tr {
-			border-top: 2px solid transparent;
-		}
-	}
-
 	&.empty {
 		margin-top: 80px;
 	}
@@ -340,7 +340,6 @@ select {
 .DelayToggler,
 .ProxyToggler {
 	display: flex;
-	margin-left: 8px;
 
 	> input {
 		appearance: none;
@@ -361,6 +360,7 @@ select {
 }
 
 .DelayToggler {
+	margin-left: 8px;
 	> input {
 		&:checked ~ svg {
 			fill: var(--colorAccent);
@@ -437,6 +437,7 @@ select {
 .InternalServerErrorToggler {
 	display: flex;
 	margin-left: 8px;
+	margin-right: 12px;
 	cursor: pointer;
 
 	> input {
@@ -498,24 +499,11 @@ select {
 }
 
 .StaticFilesList {
-	margin-top: 20px;
-
-	h2 {
-		margin-bottom: 8px;
-	}
-
-	ul {
-		position: relative;
-		left: -6px;
-	}
-
-	li {
-		list-style: none;
-	}
+	margin-top: 8px;
 
 	a {
 		display: inline-block;
-		padding: 6px;
+		padding: 6px 0;
 		border-radius: var(--radius);
 		color: var(--colorAccent);
 		text-decoration: none;

package/src/Dashboard.js

@@ -26,6 +26,7 @@ const Strings = {
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
+	not_found: 'Not Found',
 	pick_comment: 'Pick Comment…',
 	proxied: 'Proxied',
 	proxy_toggler: 'Proxy Toggler',
@@ -264,14 +265,15 @@ function SectionByMethod({ method, brokers, canProxy }) {
 	const urlMasksDittoed = dittoSplitPaths(urlMasks)
 	return (
 		r('tbody', null,
-			r('th', null, method),
+			r('th', { colspan: 4 }, method),
 			brokersSorted.map(([urlMask, broker], i) =>
 				r('tr', { 'data-method': method, 'data-urlMask': urlMask },
-					r('td', null, r(PreviewLink, { method, urlMask, urlMaskDittoed: urlMasksDittoed[i] })),
-					r('td', null, r(MockSelector, { broker })),
-					r('td', null, r(InternalServerErrorToggler, { broker })),
+					r('td', null, r(ProxyToggler, { broker, disabled: !canProxy })),
 					r('td', null, r(DelayRouteToggler, { broker })),
-					r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
+					r('td', null, r(InternalServerErrorToggler, { broker })),
+					r('td', null, r(PreviewLink, { method, urlMask, urlMaskDittoed: urlMasksDittoed[i] })),
+					r('td', null, r(MockSelector, { broker }))
+				))))
 }
 
 function PreviewLink({ method, urlMask, urlMaskDittoed }) {
@@ -399,6 +401,84 @@ function ProxyToggler({ broker, disabled }) {
 }
 
 
+
+/** # StaticFilesList */
+
+function StaticFilesList({ staticFiles }) {
+	if (!Object.keys(staticFiles).length)
+		return null
+	const paths = dittoSplitPaths(Object.keys(staticFiles)).map(([ditto, tail]) => ditto
+		? [r('span', null, ditto), tail]
+		: tail)
+	return (
+		r('table', { className: CSS.StaticFilesList },
+			r('tbody', null,
+				r('th', { colspan: 4 }, Strings.static_get),
+				Object.values(staticFiles).map((broker, i) =>
+					r('tr', null,
+						r('td', null, r(ProxyStaticToggler, {})),
+						r('td', null, r(DelayStaticRouteToggler, { broker })),
+						r('td', null, r(NotFoundToggler, { broker })),
+						r('td', null, r('a', { href: broker.file, target: '_blank' }, paths[i]))
+					)))))
+}
+
+
+function DelayStaticRouteToggler({ broker }) {
+	function onChange() {
+		mockaton.setStaticRouteIsDelayed(broker.file, this.checked)
+			.catch(onError)
+	}
+	return (
+		r('label', {
+				className: CSS.DelayToggler,
+				title: Strings.delay
+			},
+			r('input', {
+				type: 'checkbox',
+				checked: broker.delayed,
+				onChange
+			}),
+			TimerIcon()))
+}
+
+function NotFoundToggler({ broker }) {
+	function onChange() {
+		mockaton.setStaticRouteIs404(broker.file, this.checked)
+			.catch(onError)
+	}
+	return (
+		r('label', {
+				className: CSS.InternalServerErrorToggler, // TODO rename
+				title: Strings.not_found
+			},
+			r('input', {
+				type: 'checkbox',
+				checked: broker.should404,
+				onChange
+			}),
+			r('span', null, '404')))
+}
+
+
+// TODO
+function ProxyStaticToggler({}) {
+	function onChange() {
+	}
+	return (
+		r('label', {
+				style: { visibility: 'hidden' },
+				className: CSS.ProxyToggler,
+				title: Strings.proxy_toggler
+			},
+			r('input', {
+				type: 'checkbox',
+				disabled: true,
+				onChange
+			}),
+			r(CloudIcon)))
+}
+
 /** # Payload Preview */
 
 const payloadViewerTitleRef = useRef()
@@ -496,29 +576,6 @@ function mockSelectorFor(method, urlMask) {
 }
 
 
-/** # StaticFilesList */
-
-function StaticFilesList({ staticFiles }) {
-	if (!staticFiles.length)
-		return null
-	const paths = dittoSplitPaths(staticFiles).map(([ditto, tail]) => ditto
-		? [r('span', null, ditto), tail]
-		: tail)
-	return (
-		r('section', {
-				open: true,
-				className: CSS.StaticFilesList
-			},
-			r('h2', null, Strings.static_get),
-			r('ul', null, staticFiles.map((f, i) =>
-				r('li', null,
-					r('a', {
-						href: f,
-						target: '_blank'
-					}, paths[i]))))))
-}
-
-
 /** # Misc */
 
 function onError(error) {
@@ -626,39 +683,32 @@ function useRef() {
 
 
 /**
- * This is for styling the repeated paths with a faint style.
- * It splits each path into [dittoPrefix, tail], where dittoPrefix is
- * the longest previously-seen common directory prefix.
+ * Think of this as a way of printing a directory tree in which
+ * the repeated folder paths are kept but styled differently.
+ * @param {string[]} paths - sorted
  */
 function dittoSplitPaths(paths) {
-	const result = []
-	for (let i = 0; i < paths.length; i++) {
-		const path = paths[i]
-		const currParts = path.split('/')
-
-		let dittoParts = []
-		for (let j = 0; j < i; j++) {
-			const prevParts = paths[j].split('/')
-
-			let k = 0
-			while (
-				k < currParts.length &&
-				k < prevParts.length &&
-				currParts[k] === prevParts[k])
-				k++
-
-			if (k > dittoParts.length)
-				dittoParts = currParts.slice(0, k)
-		}
-
-		if (!dittoParts.length)
-			result.push(['', path])
+	const result = [['', paths[0]]]
+	const pathsInParts = paths.map(p => p.split('/').filter(Boolean))
+
+	for (let i = 1; i < paths.length; i++) {
+		const prevParts = pathsInParts[i - 1]
+		const currParts = pathsInParts[i]
+
+		let j = 0
+		while (
+			j < currParts.length &&
+			j < prevParts.length &&
+			currParts[j] === prevParts[j])
+			j++
+
+		if (!j) // no common dirs
+			result.push(['', paths[i]])
 		else {
-			const ditto = dittoParts.join('/') + '/'
-			result.push([ditto, path.slice(ditto.length)])
+			const ditto = '/' + currParts.slice(0, j).join('/') + '/'
+			result.push([ditto, paths[i].slice(ditto.length)])
 		}
 	}
-
 	return result
 }
 
@@ -669,7 +719,9 @@ function dittoSplitPaths(paths) {
 		'/api/user/friends',
 		'/api/vid',
 		'/api/video/id',
-		'/api/video/stats'
+		'/api/video/stats',
+		'/v2/foo',
+		'/v2/foo/bar'
 	]
 	const expected = [
 		['', '/api/user'],
@@ -677,7 +729,9 @@ function dittoSplitPaths(paths) {
 		['/api/user/', 'friends'],
 		['/api/', 'vid'],
 		['/api/', 'video/id'],
-		['/api/video/', 'stats']
+		['/api/video/', 'stats'],
+		['', '/v2/foo'],
+		['/v2/foo/', 'bar']
 	]
 	console.assert(JSON.stringify(dittoSplitPaths(input)) === JSON.stringify(expected))
 }())

package/src/Mockaton.js

@@ -6,9 +6,9 @@ import { dispatchMock } from './MockDispatcher.js'
 import { watchMocksDir } from './Watcher.js'
 import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
-import { dispatchStatic, isStatic } from './StaticDispatcher.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
+import { dispatchStatic, isStatic, initStaticCollection } from './StaticDispatcher.js'
 import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
 
 
@@ -18,6 +18,7 @@ export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
 	watchMocksDir()
+	initStaticCollection()
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {
 		if (error) {

package/src/StaticDispatcher.js

@@ -1,59 +1,83 @@
 import { join } from 'node:path'
-import fs, { readFileSync } from 'node:fs'
+import { readFileSync } from 'node:fs'
 
 import { mimeFor } from './utils/mime.js'
-import { isDirectory, isFile } from './utils/fs.js'
 import { config, isFileAllowed } from './config.js'
-import { sendInternalServerError } from './utils/http-response.js'
+import { sendPartialContent, sendNotFound } from './utils/http-response.js'
+import { isDirectory, isFile, listFilesRecursively } from './utils/fs.js'
 
 
-export function isStatic(req) {
-	if (!config.staticDir)
-		return false
-	const f = resolvePath(req.url)
-	return f && isFileAllowed(f)
-}
+class StaticBroker {
+	constructor(file) {
+		this.file = file
+		this.delayed = false
+		this.should404 = false
+		this.resolvedPath = this.#staticFilePath()
+	}
 
-export async function dispatchStatic(req, response) {
-	const file = resolvePath(req.url)
-	if (req.headers.range)
-		await sendPartialContent(response, req.headers.range, file)
-	else {
-		response.setHeader('Content-Type', mimeFor(file))
-		response.end(readFileSync(file))
+	#staticFilePath() { // url is absolute e.g. /home/../.. => /
+		let candidate = join(config.staticDir, this.file)
+		if (isDirectory(candidate))
+			candidate = join(candidate, 'index.html')
+		if (isFile(candidate))
+			return candidate
+	}
+
+	updateDelayed(value) {
+		this.delayed = value
+	}
+
+	updateNotFound(value) {
+		this.should404 = value
 	}
 }
 
-function resolvePath(url) { // url is absolute e.g. /home/../.. => /
-	let candidate = join(config.staticDir, url)
-	if (isDirectory(candidate))
-		candidate = join(candidate, 'index.html')
-	if (isFile(candidate))
-		return candidate
+let collection = {}
+
+export function initStaticCollection() {
+	collection = {}
+	listFilesRecursively(config.staticDir)
+		.filter(isFileAllowed)
+		.sort()
+		.forEach(f => registerStatic(f))
 }
 
-async function sendPartialContent(response, range, file) {
-	const { size } = await fs.promises.lstat(file)
-	let [start, end] = range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))
-	if (isNaN(end)) end = size - 1
-	if (isNaN(start)) start = size - end
+function registerStatic(file) {
+	file = '/' + file
+	collection[file] = new StaticBroker(file)
+}
 
-	if (start < 0 || start > end || start >= size || end >= size) {
-		response.statusCode = 416 // Range Not Satisfiable
-		response.setHeader('Content-Range', `bytes */${size}`)
-		response.end()
-	}
-	else {
-		response.statusCode = 206 // Partial Content
-		response.setHeader('Accept-Ranges', 'bytes')
-		response.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
-		response.setHeader('Content-Type', mimeFor(file))
-		const reader = fs.createReadStream(file, { start, end })
-		reader.on('open', function () {
-			this.pipe(response)
-		})
-		reader.on('error', function (error) {
-			sendInternalServerError(response, error)
-		})
+export function findStaticBrokerByRoute(route) {
+	return collection[route] || collection[join(route, 'index.html')]
+}
+
+export function getStaticFilesCollection() {
+	return collection
+}
+
+export function isStatic(req) {
+	return req.url in collection || join(req.url, 'index.html') in collection
+}
+
+// TODO improve
+export async function dispatchStatic(req, response) {
+	let broker = collection[join(req.url, 'index.html')]
+	if (!broker && req.url in collection)
+		broker = collection[req.url]
+
+	if (broker?.should404) { // TESTME
+		sendNotFound(response)
+		return
 	}
+
+	const file = broker.resolvedPath
+	setTimeout(async () => {
+		if (req.headers.range)
+			await sendPartialContent(response, req.headers.range, file)
+		else {
+			response.setHeader('Content-Type', mimeFor(file))
+			response.end(readFileSync(file))
+		}
+	}, broker.delayed * config.delay)
 }
+

package/src/utils/fs.js

@@ -7,10 +7,15 @@ export const isDirectory = path => lstatSync(path, { throwIfNoEntry: false })?.i
 
 /** @returns {Array<string>} paths relative to `dir` */
 export const listFilesRecursively = dir => {
-	const files = readdirSync(dir, { recursive: true }).filter(f => isFile(join(dir, f)))
-	return process.platform === 'win32'
-		? files.map(f => f.replaceAll(sep, posix.sep))
-		: files
+	try {
+		const files = readdirSync(dir, { recursive: true }).filter(f => isFile(join(dir, f)))
+		return process.platform === 'win32'
+			? files.map(f => f.replaceAll(sep, posix.sep))
+			: files
+	}
+	catch (err) { // e.g. ENOENT
+		return []
+	}
 }
 
 export const write = (path, body) => {

package/src/utils/http-response.js

@@ -1,4 +1,4 @@
-import { readFileSync } from 'node:fs'
+import fs, { readFileSync } from 'node:fs'
 import { mimeFor } from './mime.js'
 import { HEADER_FOR_502 } from '../ApiConstants.js'
 
@@ -45,3 +45,30 @@ export function sendBadGateway(response, error) {
 	response.setHeader(HEADER_FOR_502, 1)
 	response.end()
 }
+
+
+export async function sendPartialContent(response, range, file) {
+	const { size } = await fs.promises.lstat(file)
+	let [start, end] = range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))
+	if (isNaN(end)) end = size - 1
+	if (isNaN(start)) start = size - end
+
+	if (start < 0 || start > end || start >= size || end >= size) {
+		response.statusCode = 416 // Range Not Satisfiable
+		response.setHeader('Content-Range', `bytes */${size}`)
+		response.end()
+	}
+	else {
+		response.statusCode = 206 // Partial Content
+		response.setHeader('Accept-Ranges', 'bytes')
+		response.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+		response.setHeader('Content-Type', mimeFor(file))
+		const reader = fs.createReadStream(file, { start, end })
+		reader.on('open', function () {
+			this.pipe(response)
+		})
+		reader.on('error', function (error) {
+			sendInternalServerError(response, error)
+		})
+	}
+}