mockaton 8.16.3 → 8.16.5

package/README.md

@@ -29,9 +29,9 @@ Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander API** section).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp840x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp840x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp840x800.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp962x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp962x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp962x800.light.gold.png">
 </picture>
 
 
@@ -62,14 +62,20 @@ api/videos.GET.<b>500</b>.txt               # Internal Server Error
 
 <br/>
 
-## Fallback to Your Backend
-No need to mock everything. You can forward requests to your backend for routes
-you don’t have mocks for, or routes that have the ☁️ **Cloud Checkbox** checked.
+## Scraping mocks from your Backend
 
+### Option 1: Browser Extension
+This [devtools extension](https://github.com/ericfortis/devtools-ext-zip-http-requests) 
+lets you download a ZIP with all the responses following the filename convention.
 
-### Scraping mocks from your backend
-By checking ✅ **Save Mocks**, you can collect the responses that hit your backend.
-They will be saved in your `config.mocksDir` following the filename convention.
+### Option 2: Fallback to Your Backend
+This option could be a bit elaborate if your backend uses third-party auth, 
+because in that case you’d have to inject the cookies manually.
+
+At any rate, you can forward requests to your backend for routes you don’t have
+mocks for, or routes that have the ☁️ **Cloud Checkbox** checked. By checking
+✅ **Save Mocks**, you can collect the responses that hit your backend. They
+will be saved in your `config.mocksDir` following the filename convention.
 
 
 <br/>

package/dev-config.js

@@ -0,0 +1,18 @@
+import { join } from 'node:path'
+import { jwtCookie } from './index.js'
+
+
+export const devConfig = {
+	port: 2345,
+	mocksDir: join(import.meta.dirname, 'fixtures-mocks'),
+	staticDir: join(import.meta.dirname, 'fixtures-static-mocks'),
+	cookies: {
+		'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
+		'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
+		'My JWT': jwtCookie('my-cookie', {
+			email: 'john.doe@example.com',
+			picture: 'https://cdn.auth0.com/avatars/jd.png'
+		}),
+		'None': ''
+	}
+}

package/index.js

@@ -1,6 +1,6 @@
 export { Mockaton } from './src/Mockaton.js'
 export { Commander } from './src/Commander.js'
-export { jsToJsonPlugin } from './src/MockDispatcherPlugins.js'
 
 export { jwtCookie } from './src/utils/jwt.js'
 export { parseJSON } from './src/utils/http-request.js'
+export { jsToJsonPlugin } from './src/MockDispatcher.js'

package/package.json

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

package/src/Api.js

@@ -7,11 +7,11 @@ import { join } from 'node:path'
 import { cookie } from './cookie.js'
 import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
+import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile } from './utils/http-response.js'
-import { getStaticFilesCollection, findStaticBrokerByRoute, initStaticCollection } from './StaticDispatcher.js'
 
 
 const dashboardAssets = [
@@ -25,9 +25,7 @@ const dashboardAssets = [
 
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
-	...dashboardAssets.map(f => [
-		API.dashboard + f, serveDashboardAsset(f)
-	]),
+	...dashboardAssets.map(f => [API.dashboard + f, serveDashboardAsset(f)]),
 	[API.cors, getIsCorsAllowed],
 	[API.static, listStaticFiles],
 	[API.mocks, listMockBrokers],
@@ -68,12 +66,14 @@ function serveDashboardAsset(f) {
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
-function listStaticFiles(_, response) { sendJSON(response, getStaticFilesCollection()) }
+
+function listStaticFiles(_, response) { sendJSON(response, staticCollection.all()) }
+function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.all()) }
+
 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 getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed) }
 
 function longPollClientSyncVersion(req, response) {
 	if (uiSyncVersion.version !== Number(req.headers[DF.syncVersion])) {
@@ -101,7 +101,7 @@ function longPollClientSyncVersion(req, response) {
 
 function reinitialize(_, response) {
 	mockBrokersCollection.init()
-	initStaticCollection() // TESTME
+	staticCollection.init() // TESTME
 	sendOK(response)
 }
 
@@ -115,7 +115,7 @@ async function selectCookie(req, response) {
 
 async function selectMock(req, response) {
 	const file = await parseJSON(req)
-	const broker = mockBrokersCollection.findBrokerByFilename(file)
+	const broker = mockBrokersCollection.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
 	else {
@@ -127,7 +127,7 @@ async function selectMock(req, response) {
 async function setRouteIsDelayed(req, response) {
 	const body = await parseJSON(req)
 	const delayed = body[DF.delayed]
-	const broker = mockBrokersCollection.findBrokerByRoute(
+	const broker = mockBrokersCollection.brokerByRoute(
 		body[DF.routeMethod],
 		body[DF.routeUrlMask])
 
@@ -144,7 +144,7 @@ async function setRouteIsDelayed(req, response) {
 async function setRouteIsProxied(req, response) { // TESTME
 	const body = await parseJSON(req)
 	const proxied = body[DF.proxied]
-	const broker = mockBrokersCollection.findBrokerByRoute(
+	const broker = mockBrokersCollection.brokerByRoute(
 		body[DF.routeMethod],
 		body[DF.routeUrlMask])
 
@@ -201,7 +201,7 @@ async function setGlobalDelay(req, response) { // TESTME
 async function setStaticRouteStatusCode(req, response) {
 	const body = await parseJSON(req)
 	const status = Number(body[DF.statusCode])
-	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
+	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)
@@ -217,7 +217,7 @@ async function setStaticRouteStatusCode(req, response) {
 async function setStaticRouteIsDelayed(req, response) {
 	const body = await parseJSON(req)
 	const delayed = body[DF.delayed]
-	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
+	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)

package/src/ApiConstants.js

@@ -31,7 +31,7 @@ export const DF = { // Dashboard Fields (XHR)
 export const DEFAULT_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

@@ -1,6 +1,6 @@
 :root {
-	--boxShadow1: 0 3px 1px -1px rgba(0, 0, 0, 0.04), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 	--radius: 4px;
+	--boxShadow1: 0 3px 1px -1px rgba(0, 0, 0, 0.04), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 }
 
 @media (prefers-color-scheme: light) {
@@ -27,7 +27,7 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #2495ff;
-		--colorBackground: #161616;
+		--colorBackground: #181818;
 		--colorHeaderBackground: #111;
 		--colorComboBoxBackground: #2a2a2a;
 		--colorSecondaryButtonBackground: #2a2a2a;
@@ -113,10 +113,6 @@ select {
 	}
 }
 
-.red {
-	color: var(--colorRed);
-}
-
 header {
 	display: flex;
 	width: 100%;
@@ -129,8 +125,13 @@ header {
 		flex-wrap: wrap;
 		align-items: flex-end;
 		gap: 10px;
+
+		@media (max-width: 860px) {
+			max-width: 500px;
+		}
 	}
 
+
 	img {
 		width: 130px;
 		align-self: center;
@@ -227,7 +228,6 @@ header {
 		color: var(--colorRed);
 		border-radius: 50px;
 
-
 		&:hover {
 			background: var(--colorRed);
 			color: white;
@@ -239,12 +239,19 @@ header {
 main {
 	display: grid;
 	min-height: 0;
-	grid-template-columns: 50% 50%;
+	grid-template-columns: min(820px) 1fr;
+
+	@media (max-width: 1160px) {
+		grid-template-columns: min(620px) 1fr;
+	}
 
 	@media (max-width: 960px) {
 		grid-template-columns: 100%;
-		grid-template-rows: 50% 50%;
-		gap: 32px;
+		grid-template-rows: 1fr 1fr;
+
+		.leftSide {
+			box-shadow: var(--boxShadow1);
+		}
 	}
 
 	.leftSide {
@@ -279,32 +286,11 @@ table {
 }
 
 
-.PayloadViewer {
-	/*h2 {*/
-	/*	top: 0;*/
-	/*	position: sticky;*/
-	/*	background: var(--colorBackground);*/
-	/*}*/
-	pre {
-		padding-top: 12px;
-
-		code {
-			white-space: pre;
-			tab-size: 2;
-			font-family: monospace;
-
-			* {
-				font-family: monospace;
-			}
-		}
-	}
-}
-
 .PreviewLink {
 	position: relative;
 	left: -8px;
 	display: inline-block;
-	width: 240px;
+	width: 100%;
 	padding: 8px;
 	margin-left: 4px;
 	border-radius: var(--radius);
@@ -486,6 +472,38 @@ table {
 	}
 }
 
+
+.StaticFilesList {
+	a {
+		display: inline-block;
+		padding: 6px 0;
+		border-radius: var(--radius);
+		color: var(--colorAccent);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+
+.PayloadViewer {
+	pre {
+		padding-top: 12px;
+
+		code {
+			white-space: pre;
+			tab-size: 2;
+			font-family: monospace;
+
+			* {
+				font-family: monospace;
+			}
+		}
+	}
+}
+
 .SpinnerClock {
 	display: flex;
 	width: 36px;
@@ -512,20 +530,8 @@ table {
 	}
 }
 
-
-.StaticFilesList {
-
-	a {
-		display: inline-block;
-		padding: 6px 0;
-		border-radius: var(--radius);
-		color: var(--colorAccent);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
+.red {
+	color: var(--colorRed);
 }
 
 .dittoDir {
@@ -538,7 +544,6 @@ table {
  * Prism 
  */
 
-
 @media (prefers-color-scheme: dark) {
 	.token.cdata, .token.comment, .token.doctype, .token.prolog {
 		color: #8292a2

package/src/MockDispatcher.js

@@ -1,8 +1,10 @@
 import { join } from 'node:path'
+import { readFileSync } from 'node:fs'
+import { pathToFileURL } from 'node:url'
 
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
-import { applyPlugins } from './MockDispatcherPlugins.js'
+import { mimeFor } from './utils/mime.js'
 import { config, calcDelay } from './config.js'
 import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
@@ -11,7 +13,7 @@ import { sendInternalServerError, sendNotFound, sendUnprocessableContent } from
 
 export async function dispatchMock(req, response) {
 	try {
-		const broker = mockBrokerCollection.findBrokerByRoute(req.method, req.url)
+		const broker = mockBrokerCollection.brokerByRoute(req.method, req.url)
 		if (!broker || broker.proxied) {
 			if (config.proxyFallback)
 				await proxy(req, response, Number(broker?.delayed && calcDelay()))
@@ -50,3 +52,26 @@ export async function dispatchMock(req, response) {
 			sendInternalServerError(response, error)
 	}
 }
+
+
+async function applyPlugins(filePath, req, response) {
+	for (const [regex, plugin] of config.plugins)
+		if (regex.test(filePath))
+			return await plugin(filePath, req, response)
+	return {
+		mime: mimeFor(filePath),
+		body: readFileSync(filePath)
+	}
+}
+
+
+export async function jsToJsonPlugin(filePath, req, response) {
+	const jsExport = (await import(pathToFileURL(filePath) + '?' + Date.now())).default // date for cache busting
+	const body = typeof jsExport === 'function'
+		? await jsExport(req, response)
+		: JSON.stringify(jsExport, null, 2)
+	return {
+		mime: response.getHeader('Content-Type') || mimeFor('.json'), // jsFunc are allowed to set it
+		body
+	}
+}

package/src/Mockaton.js

@@ -3,12 +3,13 @@ import { createServer } from 'node:http'
 import { API } from './ApiConstants.js'
 import { config, setup } from './config.js'
 import { dispatchMock } from './MockDispatcher.js'
+import { dispatchStatic } from './StaticDispatcher.js'
+import * as staticCollection from './staticCollection.js'
 import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
+import { watchMocksDir, watchStaticDir } from './Watcher.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
-import { watchMocksDir, watchStaticMocksDir } from './Watcher.js'
-import { dispatchStatic, initStaticCollection, findStaticBrokerByRoute } from './StaticDispatcher.js'
 import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
 
 
@@ -17,9 +18,9 @@ process.on('unhandledRejection', error => { throw error })
 export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
-	initStaticCollection()
+	staticCollection.init()
 	watchMocksDir()
-	watchStaticMocksDir()
+	watchStaticDir()
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {
 		if (error) {
@@ -54,7 +55,7 @@ async function onRequest(req, response) {
 		else if (method === 'GET' && apiGetRequests.has(url))
 			apiGetRequests.get(url)(req, response)
 
-		else if (method === 'GET' && findStaticBrokerByRoute(url))
+		else if (method === 'GET' && staticCollection.brokerByRoute(url))
 			await dispatchStatic(req, response)
 
 		else

package/src/StaticDispatcher.js

@@ -1,65 +1,14 @@
+import { join } from 'node:path'
 import { readFileSync } from 'node:fs'
-import { join, basename } from 'node:path'
 
 import { mimeFor } from './utils/mime.js'
-import { listFilesRecursively } from './utils/fs.js'
-import { config, isFileAllowed, calcDelay } from './config.js'
-import { sendPartialContent, sendNotFound } from './utils/http-response.js'
-
-
-class StaticBroker {
-	constructor(route) {
-		this.route = route
-		this.delayed = false
-		this.status = 200 // 200 or 404
-	}
-
-	setDelayed(value) { this.delayed = value }
-	setStatus(value) { this.status = value }
-}
-
-/** @type {{ [route: string]: StaticBroker }} */
-let collection = {}
-
-export function initStaticCollection() {
-	collection = {}
-	listFilesRecursively(config.staticDir)
-		.sort()
-		.forEach(registerStaticMock)
-}
-
-
-/** @returns {boolean} registered */
-export function registerStaticMock(relativeFile) {
-	if (!isFileAllowed(basename(relativeFile)))
-		return false
-
-	const route = '/' + relativeFile
-	if (findStaticBrokerByRoute(route))
-		return false
-
-	collection[route] = new StaticBroker(route)
-	return true
-}
-
-
-export function unregisterStaticMock(relativeFile) {
-	delete collection['/' + relativeFile]
-}
-
-
-/** @returns {StaticBroker | undefined} */
-export function findStaticBrokerByRoute(route) {
-	return collection[route] || collection[join(route, 'index.html')]
-}
-
-export function getStaticFilesCollection() {
-	return collection
-}
+import { brokerByRoute } from './staticCollection.js'
+import { config, calcDelay } from './config.js'
+import { sendNotFound, sendPartialContent } from './utils/http-response.js'
 
 
 export async function dispatchStatic(req, response) {
-	const broker = findStaticBrokerByRoute(req.url)
+	const broker = brokerByRoute(req.url)
 
 	setTimeout(async () => {
 		if (!broker || broker.status === 404) { // TESTME
@@ -75,4 +24,3 @@ export async function dispatchStatic(req, response) {
 		}
 	}, Number(broker.delayed && calcDelay()))
 }
-

package/src/Watcher.js

@@ -5,7 +5,7 @@ import { EventEmitter } from 'node:events'
 import { config } from './config.js'
 import { isFile } from './utils/fs.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
-import { registerStaticMock, unregisterStaticMock } from './StaticDispatcher.js'
+import { registerStaticMock, unregisterStaticMock } from './staticCollection.js'
 
 
 /** # AR = Add or Remove Mock Event */
@@ -40,7 +40,7 @@ export function watchMocksDir() {
 	})
 }
 
-export function watchStaticMocksDir() {
+export function watchStaticDir() {
 	const dir = config.staticDir
 	if (!dir)
 		return

package/src/config.js

@@ -1,7 +1,7 @@
 import { realpathSync } from 'node:fs'
 import { isDirectory } from './utils/fs.js'
 import { openInBrowser } from './utils/openInBrowser.js'
-import { jsToJsonPlugin } from './MockDispatcherPlugins.js'
+import { jsToJsonPlugin } from './MockDispatcher.js'
 import { optional, is, validate } from './utils/validate.js'
 import { SUPPORTED_METHODS } from './utils/http-request.js'
 import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/http-cors.js'

package/src/mockBrokersCollection.js

@@ -23,6 +23,8 @@ import { parseFilename, filenameIsValid } from './Filename.js'
  */
 let collection = {}
 
+export const all = () => collection
+
 export function init() {
 	collection = {}
 	cookie.init(config.cookies)
@@ -39,7 +41,7 @@ export function init() {
 
 /** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher = false) {
-	if (findBrokerByFilename(file)?.hasMock(file)
+	if (brokerByFilename(file)?.hasMock(file)
 		|| !isFileAllowed(basename(file)) // TESTME
 		|| !filenameIsValid(file))
 		return false
@@ -62,7 +64,7 @@ export function registerMock(file, isFromWatcher = false) {
 }
 
 export function unregisterMock(file) {
-	const broker = findBrokerByFilename(file)
+	const broker = brokerByFilename(file)
 	if (!broker)
 		return
 	const isEmpty = broker.unregister(file)
@@ -74,11 +76,9 @@ export function unregisterMock(file) {
 	}
 }
 
-export const getAll = () => collection
-
 
 /** @returns {MockBroker | undefined} */
-export function findBrokerByFilename(file) {
+export function brokerByFilename(file) {
 	const { method, urlMask } = parseFilename(file)
 	if (collection[method])
 		return collection[method][urlMask]
@@ -91,7 +91,7 @@ export function findBrokerByFilename(file) {
  * BTW, `urlMasks` always start with "/", so there’s no need to
  * worry about the primacy of array-like keys when iterating.
  @returns {MockBroker | undefined} */
-export function findBrokerByRoute(method, url) {
+export function brokerByRoute(method, url) {
 	if (!collection[method])
 		return
 	const brokers = Object.values(collection[method])

package/src/staticCollection.js

@@ -0,0 +1,56 @@
+import { join, basename } from 'node:path'
+import { listFilesRecursively } from './utils/fs.js'
+import { config, isFileAllowed } from './config.js'
+
+
+class StaticBroker {
+	constructor(route) {
+		this.route = route
+		this.delayed = false
+		this.status = 200 // 200 or 404
+	}
+
+	setDelayed(value) { this.delayed = value }
+	setStatus(value) { this.status = value }
+}
+
+/** @type {{ [route: string]: StaticBroker }} */
+let collection = {}
+
+export const all = () => collection
+
+export function init() {
+	collection = {}
+	listFilesRecursively(config.staticDir)
+		.sort()
+		.forEach(registerStaticMock)
+}
+
+
+/** @returns {boolean} registered */
+export function registerStaticMock(relativeFile) {
+	if (!isFileAllowed(basename(relativeFile)))
+		return false
+
+	const route = '/' + relativeFile
+	if (brokerByRoute(route))
+		return false
+
+	collection[route] = new StaticBroker(route)
+	return true
+}
+
+
+export function unregisterStaticMock(relativeFile) {
+	delete collection['/' + relativeFile]
+}
+
+
+/** @returns {StaticBroker | undefined} */
+export function brokerByRoute(route) {
+	return collection[route] || collection[join(route, 'index.html')]
+}
+
+
+
+

package/src/MockDispatcherPlugins.js

@@ -1,25 +0,0 @@
-import { readFileSync as read } from 'node:fs'
-import { mimeFor } from './utils/mime.js'
-import { config } from './config.js'
-
-
-export async function applyPlugins(filePath, req, response) {
-	for (const [regex, plugin] of config.plugins)
-		if (regex.test(filePath))
-			return await plugin(filePath, req, response)
-	return {
-		mime: mimeFor(filePath),
-		body: read(filePath)
-	}
-}
-
-export async function jsToJsonPlugin(filePath, req, response) {
-	const jsExport = (await import(filePath + '?' + Date.now())).default // date for cache busting
-	const body = typeof jsExport === 'function'
-		? await jsExport(req, response)
-		: JSON.stringify(jsExport, null, 2)
-	return {
-		mime: response.getHeader('Content-Type') || mimeFor('.json'), // jsFunc are allowed to set it
-		body
-	}
-}