mockaton 8.7.4 → 8.7.6

package/README.md

@@ -9,27 +9,27 @@ Mockaton is an HTTP mock server with the goal of making
 your frontend development and testing easier—and a lot more fun.
 
 With Mockaton you don’t need to write code for wiring your mocks.
-Instead, just place your mocks in a directory, and it will scan it
-for filenames that follow a convention similar to the URL paths.
+Instead, just place your mocks in a directory and it will be scanned
+for filenames following a convention similar to the URLs.
 
-For example, for this route `/api/user/1234`, the mock filename would be:
+For example, for `/api/user/1234` the mock filename would be:
 ```
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
 ## Scrapping Mocks from you Backend
 
-Mockaton can fallback to your real backend on routes you don’t have mocks for. That’s
-done by typing your backend address in the **Fallback Backend** field. And if you
-check **Save Mocks**, you can collect those responses that hit your backend.
+Mockaton can fallback to your real backend on routes you don’t have mocks for. For that,
+type your backend address in the **Fallback Backend** field. And if you
+check **Save Mocks**, it will collect those responses that hit your backend.
 Those mocks will be saved to your `config.mocksDir` following the filename convention.
 
 
 ## Multiple Mock Variants
 
 ### Adding comments in filenames
-Want to mock a locked-out user or an invalid login attempt? You
-can just add a comment to the filename in parentheses. For example:
+Want to mock a locked-out user or an invalid login attempt? 
+Add a comment to the filename in parentheses. For example:
 
 `api/login(locked out user).POST.423.json`
 
@@ -214,8 +214,8 @@ Response Status Code, and File Extension.
 api/user.GET.200.json
 ```
 
-You can also use `.empty` if you don’t want the response to have a 
-`Content-Type` header.
+You can also use `.empty` or `.unknown` if you don’t
+want a `Content-Type` header in the response.
 
 
 ### Dynamic Parameters
@@ -305,10 +305,10 @@ URL, the filename will have `[id]` in their place. For example,
 
 ```
 /api/user/d14e09c8-d970-4b07-be42-b2f4ee22f0a6/likes =>
-my-mocks-dir/api/user/[id]/likes.GET.200.json
+  my-mocks-dir/api/user/[id]/likes.GET.200.json
 ```
 
-Your existing mocks won’t be overwritten (they don’t hit the fallback server).
+Your existing mocks won’t be overwritten (because they don’t hit the fallback server).
 
 <details>
   <summary>Extension Details</summary>
@@ -464,7 +464,7 @@ If you don’t want to open a browser, pass a noop:
 config.onReady = () => {}
 ```
 
-Nonetheless, you can trigger any command besides opening a browser.
+At any rate, you can trigger any command besides opening a browser.
 
 ---
 
@@ -507,9 +507,14 @@ await mockaton.setProxyFallback('http://example.com')
 ```
 Pass an empty string to disable it.
 
+### Set Save Proxied Mocks
+```js
+await mockaton.setCollectProxied(true)
+```
+
 ### Reset
 Re-initialize the collection. The selected mocks, cookies, and delays go back to
-default, but `config.proxyFallback` and `config.corsAllowed` are not affected.
+default, but the `proxyFallback`, `colledProxied`, and `corsAllowed` are not affected.
 ```js
 await mockaton.reset()
 ```

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.7.4",
+	"version": "8.7.6",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -10,17 +10,22 @@ 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, sendUnprocessableContent } from './utils/http-response.js'
+import { sendOK, sendBadRequest, sendJSON, sendUnprocessableContent, sendDashboardFile, sendForbidden } from './utils/http-response.js'
 
 
+const dashboardAssets = [
+	'/ApiConstants.js',
+	'/Commander.js',
+	'/Dashboard.css',
+	'/Dashboard.js',
+	'/Filename.js',
+	'/mockaton-logo.svg'
+]
+
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
-	[API.dashboard + '/ApiConstants.js', serveDashboardAsset],
-	[API.dashboard + '/Commander.js', serveDashboardAsset],
-	[API.dashboard + '/Dashboard.css', serveDashboardAsset],
-	[API.dashboard + '/Dashboard.js', serveDashboardAsset],
-	[API.dashboard + '/Filename.js', serveDashboardAsset],
-	[API.dashboard + '/mockaton-logo.svg', serveDashboardAsset],
+	...dashboardAssets.map(f =>
+		[API.dashboard + f, serveDashboardAsset]),
 	[API.mocks, listMockBrokers],
 	[API.cookies, listCookies],
 	[API.comments, listComments],
@@ -44,10 +49,14 @@ export const apiPatchRequests = new Map([
 /* === GET === */
 
 function serveDashboard(_, response) {
-	sendFile(response, join(import.meta.dirname, 'Dashboard.html'))
+	sendDashboardFile(response, join(import.meta.dirname, 'Dashboard.html'))
 }
 function serveDashboardAsset(req, response) {
-	sendFile(response, join(import.meta.dirname, req.url.replace(API.dashboard, '')))
+	const f = req.url.replace(API.dashboard, '')
+	if (dashboardAssets.includes(f))
+		sendDashboardFile(response, join(import.meta.dirname, f))
+	else
+		sendForbidden(response)
 }
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
@@ -95,9 +104,11 @@ async function selectMock(req, response) {
 		const file = await parseJSON(req)
 		const broker = mockBrokersCollection.getBrokerByFilename(file)
 		if (!broker || !broker.hasMock(file))
-			throw `Missing Mock: ${file}`
-		broker.updateFile(file)
-		sendOK(response)
+			sendUnprocessableContent(response, `Missing Mock: ${file}`)
+		else {
+			broker.updateFile(file)
+			sendOK(response)
+		}
 	}
 	catch (error) {
 		sendBadRequest(response, error)

package/src/Dashboard.css

@@ -1,17 +1,18 @@
 :root {
 	--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);
+	--radius: 6px
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0078e1;
-		--colorAccentAlt: #009c71;
+		--colorAccent: #0075db;
+		--colorAccentAlt: #008664;
 		--colorBackground: #fff;
-		--colorHeaderBackground: #f7f7f7;
-		--colorComboBoxBackground: #f7f7f7;
-		--colorSecondaryButtonBackground: #f5f5f5;
 		--colorComboBoxHeaderBackground: #fff;
+		--colorComboBoxBackground: #f7f7f7;
+		--colorHeaderBackground: #f3f3f3;
+		--colorSecondaryButtonBackground: #f3f3f3;
 		--colorDisabled: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #444;
@@ -64,13 +65,21 @@ select, a, input, button, summary {
 	}
 }
 
+a, button, input[type=checkbox] {
+	cursor: pointer;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
 select {
 	font-size: 100%;
 	background: var(--colorComboBoxBackground);
 	color: var(--colorText);
 	cursor: pointer;
 	outline: 0;
-	border-radius: 6px;
+	border-radius: var(--radius);
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
@@ -122,7 +131,11 @@ select {
 			margin-top: 4px;
 			font-size: 11px;
 			background: var(--colorComboBoxHeaderBackground);
-			border-radius: 6px;
+			border-radius: var(--radius);
+		}
+
+		select:enabled:hover {
+			background: var(--colorHover);
 		}
 
 		&.FallbackBackend {
@@ -165,7 +178,6 @@ select {
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
-		cursor: pointer;
 
 		&:hover {
 			background: var(--colorRed);
@@ -234,7 +246,7 @@ select {
 	display: inline-block;
 	width: 280px;
 	padding: 8px 6px;
-	border-radius: 6px;
+	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
 
@@ -292,8 +304,8 @@ select {
 	}
 
 	> svg {
-		width: 16px;
-		height: 16px;
+		width: 20px;
+		height: 20px;
 		vertical-align: bottom;
 		fill: var(--colorText);
 		border-radius: 50%;
@@ -329,7 +341,7 @@ select {
 	}
 
 	> span {
-		padding: 4px;
+		padding: 5px 4px;
 		box-shadow: var(--boxShadow1);
 		font-size: 10px;
 		color: var(--colorText);
@@ -374,13 +386,10 @@ select {
 }
 
 .StaticFilesList {
-	margin-top: 40px;
+	margin-top: 20px;
 
-	summary {
-		width: max-content;
+	h2 {
 		margin-bottom: 8px;
-		cursor: pointer;
-		font-weight: bold;
 	}
 
 	ul {
@@ -395,7 +404,7 @@ select {
 	a {
 		display: inline-block;
 		padding: 6px;
-		border-radius: 6px;
+		border-radius: var(--radius);
 		color: var(--colorAccentAlt);
 		text-decoration: none;
 

package/src/Dashboard.js

@@ -3,6 +3,14 @@ import { Commander } from './Commander.js'
 import { DEFAULT_500_COMMENT } from './ApiConstants.js'
 
 
+function syntaxHighlightJson(textBody) {
+	const prism = window.Prism
+	return prism?.highlight && prism?.languages?.json
+		? prism.highlight(textBody, prism.languages.json, 'json')
+		: false
+}
+
+
 const Strings = {
 	bulk_select_by_comment: 'Bulk Select by Comment',
 	bulk_select_by_comment_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
@@ -19,7 +27,7 @@ const Strings = {
 	pick: 'Pick…',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	static: 'Static'
+	static_get: 'Static GET'
 }
 
 const CSS = {
@@ -397,12 +405,15 @@ async function updatePayloadViewer(method, urlMask, response) {
 			}))
 	}
 	else {
-		const prism = window.Prism
 		const body = await response.text() || Strings.empty_response_body
-		if (mime === 'application/json' && prism?.highlight && prism?.languages)
-			payloadViewerRef.current.innerHTML = prism.highlight(body, prism.languages.json, 'json')
-		else
-			payloadViewerRef.current.innerText = body
+		if (mime === 'application/json') {
+			const hBody = syntaxHighlightJson(body)
+			if (hBody) {
+				payloadViewerRef.current.innerHTML = hBody
+				return
+			}
+		}
+		payloadViewerRef.current.innerText = body
 	}
 }
 
@@ -428,11 +439,11 @@ function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
 	return (
-		r('details', {
+		r('section', {
 				open: true,
 				className: CSS.StaticFilesList
 			},
-			r('summary', null, Strings.static),
+			r('h2', null, Strings.static_get),
 			r('ul', null, staticFiles.map(f =>
 				r('li', null,
 					r('a', { href: f, target: '_blank' }, f))))))

package/src/Filename.js

@@ -20,6 +20,7 @@ export function filenameIsValid(file) {
 	return !error
 }
 
+// TODO ThinkAbout 206 (reject, handle, or send in full?)
 function validateFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
 	if (tokens.length < 4)

package/src/MockDispatcher.js

@@ -20,7 +20,7 @@ export async function dispatchMock(req, response) {
 			return
 		}
 
-		console.log(decodeURIComponent(req.url), ' → ', broker.file)
+		console.log('%s → %s', decodeURIComponent(req.url), broker.file)
 		response.statusCode = broker.status
 
 		if (cookie.getCurrent())

package/src/Mockaton.js

@@ -12,6 +12,8 @@ import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
 
 
+process.on('unhandledRejection', error => { throw error })
+
 export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
@@ -21,7 +23,7 @@ export function Mockaton(options) {
 			if (!file)
 				return
 			if (existsSync(join(config.mocksDir, file)))
-				mockBrokerCollection.registerMock(file, 'ensureItHas500')
+				mockBrokerCollection.registerMock(file, 'isFromWatcher')
 			else
 				mockBrokerCollection.unregisterMock(file)
 		})
@@ -39,6 +41,8 @@ export function Mockaton(options) {
 }
 
 async function onRequest(req, response) {
+	req.on('error', console.error)
+	response.on('error', console.error)
 	response.setHeader('Server', 'Mockaton')
 
 	if (config.corsAllowed)

package/src/Mockaton.test.js

@@ -5,7 +5,7 @@ import { createServer } from 'node:http'
 import { dirname, join } from 'node:path'
 import { randomUUID } from 'node:crypto'
 import { equal, deepEqual, match } from 'node:assert/strict'
-import { writeFileSync, mkdtempSync, mkdirSync, unlinkSync } from 'node:fs'
+import { writeFileSync, mkdtempSync, mkdirSync, unlinkSync, readFileSync } from 'node:fs'
 
 import { config } from './config.js'
 import { mimeFor } from './utils/mime.js'
@@ -14,7 +14,7 @@ import { readBody } from './utils/http-request.js'
 import { Commander } from './Commander.js'
 import { CorsHeader } from './utils/http-cors.js'
 import { parseFilename } from './Filename.js'
-import { listFilesRecursively, read } from './utils/fs.js'
+import { listFilesRecursively } from './utils/fs.js'
 import { API, DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
 
@@ -351,7 +351,7 @@ async function testRegistering() {
 				fixtureForRegisteringPutA500[1]
 			])
 			deepEqual(currentMock, {
-				file: fixtureForRegisteringPutA500[1],
+				file: fixtureForRegisteringPutA[1],
 				delay: 0
 			})
 		})
@@ -409,6 +409,7 @@ async function testItUpdatesRouteDelay(url, file, expectedBody) {
 	await describe('url: ' + url, () => {
 		it('body is: ' + expectedBody, () => equal(body, JSON.stringify(expectedBody)))
 		it('delay', () => equal((new Date()).getTime() - now.getTime() > config.delay, true))
+		// TODO flaky test ^
 	})
 }
 
@@ -416,7 +417,7 @@ async function testBadRequestWhenUpdatingNonExistingMockAlternative() {
 	await it('There are mocks for /api/the-route but not this one', async () => {
 		const missingFile = 'api/the-route(non-existing-variant).GET.200.json'
 		const res = await commander.select(missingFile)
-		equal(res.status, 400)
+		equal(res.status, 422)
 		equal(await res.text(), `Missing Mock: ${missingFile}`)
 	})
 }
@@ -499,6 +500,11 @@ export default function (req, response) {
 
 async function testStaticFileServing() {
 	await describe('Static File Serving', () => {
+		it('404 path traversal', async () => {
+			const res = await request('/../../../etc/passwd')
+			equal(res.status, 404)
+		})
+
 		it('Defaults to index.html', async () => {
 			const res = await request('/')
 			const body = await res.text()
@@ -549,7 +555,7 @@ async function testEnableFallbackSoRoutesWithoutMocksGetRelayed() {
 		const fallbackServer = createServer(async (req, response) => {
 			response.writeHead(423, {
 				'custom_header': 'my_custom_header',
-				'content-type': mimeFor('txt'),
+				'content-type': mimeFor('.txt'),
 				'set-cookie': [
 					'cookieA=A',
 					'cookieB=B'
@@ -573,7 +579,7 @@ async function testEnableFallbackSoRoutesWithoutMocksGetRelayed() {
 			equal(res.headers.get('set-cookie'), ['cookieA=A', 'cookieB=B'].join(', '))
 			equal(await res.text(), reqBodyPayload)
 
-			const savedBody = read(join(tmpDir, 'api/non-existing-mock/[id].POST.423.txt'))
+			const savedBody = readFileSync(join(tmpDir, 'api/non-existing-mock/[id].POST.423.txt'), 'utf8')
 			equal(savedBody, reqBodyPayload)
 
 			fallbackServer.close()

package/src/StaticDispatcher.js

@@ -1,14 +1,22 @@
-import { join } from 'node:path'
+import { join, resolve } from 'node:path'
+import fs, { readFileSync } from 'node:fs'
+
 import { config } from './config.js'
+import { mimeFor } from './utils/mime.js'
 import { isDirectory, isFile } from './utils/fs.js'
-import { sendFile, sendPartialContent, sendNotFound } from './utils/http-response.js'
+import { sendNotFound, sendInternalServerError } from './utils/http-response.js'
 
 
 export function isStatic(req) {
-	if (!config.staticDir)
+	if (!config.staticDir || !isWithinStaticDir(req.url))
 		return false
 	const f = resolvePath(req.url)
-	return !config.ignore.test(f) && Boolean(f)
+	return f && !config.ignore.test(f)
+}
+
+function isWithinStaticDir(url) {
+	const candidate = resolve(join(config.staticDir, url))
+	return candidate.startsWith(config.staticDir)
 }
 
 export async function dispatchStatic(req, response) {
@@ -24,9 +32,46 @@ export async function dispatchStatic(req, response) {
 function resolvePath(url) {
 	let candidate = join(config.staticDir, url)
 	if (isDirectory(candidate))
-		candidate += '/index.html'
+		candidate = join(candidate, 'index.html')
 	if (isFile(candidate))
 		return candidate
 }
 
+function sendFile(response, file) {
+	if (!isFile(file))
+		sendNotFound(response)
+	else {
+		response.setHeader('Content-Type', mimeFor(file))
+		response.end(readFileSync(file, 'utf8'))
+	}
+}
+
+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)
+		})
+	}
+}
+
+
+
 

package/src/config.js

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 import { isDirectory } from './utils/fs.js'
 import { openInBrowser } from './utils/openInBrowser.js'
 import { jsToJsonPlugin } from './MockDispatcherPlugins.js'
@@ -66,6 +67,9 @@ export function setup(options) {
 
 		onReady: is(Function)
 	})
+
+	config.mocksDir = resolve(config.mocksDir)
+	config.staticDir = resolve(config.staticDir)
 }
 
 

package/src/mockBrokersCollection.js

@@ -35,7 +35,7 @@ export function init() {
 	})
 }
 
-export function registerMock(file, shouldEnsure500) {
+export function registerMock(file, isFromWatcher) {
 	if (getBrokerByFilename(file)?.hasMock(file)
 		|| config.ignore.test(file)
 		|| !filenameIsValid(file))
@@ -48,8 +48,11 @@ export function registerMock(file, shouldEnsure500) {
 	else
 		collection[method][urlMask].register(file)
 
-	if (shouldEnsure500)
+	if (isFromWatcher) {
+		if (!this.file)
+			collection[method][urlMask].selectDefaultFile()
 		collection[method][urlMask].ensureItHas500()
+	}
 }
 
 export function unregisterMock(file) {

package/src/utils/fs.js

@@ -1,12 +1,10 @@
 import { join, dirname, sep, posix } from 'node:path'
-import { lstatSync, readFileSync, readdirSync, writeFileSync, mkdirSync } from 'node:fs'
+import { lstatSync, readdirSync, writeFileSync, mkdirSync } from 'node:fs'
 
 
 export const isFile = path => lstatSync(path, { throwIfNoEntry: false })?.isFile()
 export const isDirectory = path => lstatSync(path, { throwIfNoEntry: false })?.isDirectory()
 
-export const read = path => readFileSync(path, 'utf8')
-
 /** @returns {Array<string>} paths relative to `dir` */
 export const listFilesRecursively = dir => {
 	const files = readdirSync(dir, { recursive: true }).filter(f => isFile(join(dir, f)))

package/src/utils/http-response.js

@@ -1,6 +1,5 @@
-import fs from 'node:fs'
+import { readFileSync } from 'node:fs'
 import { mimeFor } from './mime.js'
-import { isFile, read } from './fs.js'
 
 
 export function sendOK(response) {
@@ -17,46 +16,20 @@ export function sendJSON(response, payload) {
 	response.end(JSON.stringify(payload))
 }
 
-export function sendFile(response, filePath) {
-	if (!isFile(filePath))
-		sendNotFound(response)
-	else {
-		response.setHeader('Content-Type', mimeFor(filePath))
-		response.end(read(filePath))
-	}
+export function sendForbidden(response) {
+	response.statusCode = 403
+	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)
-		})
-	}
+export function sendDashboardFile(response, file) {
+	response.setHeader('Content-Type', mimeFor(file))
+	response.end(readFileSync(file, 'utf8'))
 }
 
-
 export function sendBadRequest(response, error) {
 	console.error(error)
 	response.statusCode = 400
-	response.end(error)
+	response.end()
 }
 
 export function sendNotFound(response) {
@@ -73,5 +46,5 @@ export function sendUnprocessableContent(response, error) {
 export function sendInternalServerError(response, error) {
 	console.error(error)
 	response.statusCode = 500
-	response.end(error?.code || '')
+	response.end()
 }

package/src/utils/mime.js

@@ -88,16 +88,22 @@ const mimes = {
 }
 
 export function mimeFor(filename) {
-	const ext = filename.replace(/.*\./, '').toLowerCase()
+	const ext = extname(filename).toLowerCase()
 	return config.extraMimes[ext] || mimes[ext] || ''
 }
+function extname(filename) {
+	const i = filename.lastIndexOf('.')
+	return i >= 0
+		? filename.substring(i + 1)
+		: ''
+}
+
 
 export function extFor(mime) {
 	return mime
 		? findExt(mime)
 		: 'empty'
 }
-
 function findExt(targetMime) {
 	for (const [ext, mime] of Object.entries(config.extraMimes))
 		if (targetMime === mime)