mockaton 13.2.1 → 13.3.0

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "13.2.1",
+	"version": "13.3.0",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/ApiCommander.js

@@ -42,7 +42,7 @@ export class Commander {
 	/** @returns {JsonPromise<ClientMockBroker>} */
 	toggleStatus = (method, urlMask, status) => this.#patch(API.toggleStatus, [method, urlMask, status])
 
-	
+
 	/** @returns {JsonPromise<ClientMockBroker>} */
 	setRouteIsProxied = (method, urlMask, proxied) => this.#patch(API.proxied, [method, urlMask, proxied])
 

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

@@ -132,7 +132,7 @@ async function updatePayloadViewer(proxied, file, response) {
 	else if (['text/xml', 'application/xml'].includes(mime))
 		codeRef.elem.replaceChildren(SyntaxXML(await bodyAsText()))
 
-	else if (mime.startsWith('text/'))
+	else if (mime.startsWith('text/') || mime === 'application/yaml')
 		codeRef.elem.textContent = await bodyAsText()
 
 	else

package/src/client/app-store.js

@@ -33,6 +33,16 @@ export const store = {
 		store.render()
 	},
 
+	collapsedFolders: new Set(JSON.parse(globalThis.localStorage?.getItem('collapsedFolders') || '[]')),
+	setFolderCollapsed(folder, collapsed) {
+		if (collapsed)
+			store.collapsedFolders.add(folder)
+		else
+			store.collapsedFolders.delete(folder)
+
+		globalThis.localStorage?.setItem('collapsedFolders', JSON.stringify([...store.collapsedFolders]))
+	},
+
 	chosenLink: { method: '', urlMask: '' },
 	setChosenLink(method, urlMask) {
 		store.chosenLink = { method, urlMask }
@@ -112,27 +122,40 @@ export const store = {
 	},
 
 
+	_dittoCache: new Map(),
+
 	brokerFor(method, urlMask) {
 		return store.brokersByMethod[method]?.[urlMask]
 	},
 
+	brokerAsRow(method, urlMask) {
+		const b = store.brokerFor(method, urlMask)
+		const r = new BrokerRowModel(b, store.canProxy)
+		r.setUrlMaskDittoed(store._dittoCache.get(r.key))
+		return r
+	},
+
 	_setBroker(broker) {
 		const { method, urlMask } = parseFilename(broker.file)
 		store.brokersByMethod[method] ??= {}
 		store.brokersByMethod[method][urlMask] = broker
 	},
 
-	_dittoCache: new Map(),
-
-	_brokersAsArray(byMethod = '*') {
-		const arr = []
-		for (const [method, brokers] of Object.entries(store.brokersByMethod))
-			if (byMethod === '*' || byMethod === method)
-				arr.push(...Object.values(brokers))
-		return arr
+	folderGroupsByMethod(method) {
+		const groups = []
+		let g = null
+		for (const row of store._brokersAsRowsByMethod(method)) {
+			const folder = row.urlMask.substring(0, row.urlMask.lastIndexOf('/') + 1)
+			if (!g || g.folder !== folder) {
+				g = { folder, children: [] }
+				groups.push(g)
+			}
+			g.children.push(row)
+		}
+		return groups
 	},
 
-	brokersAsRowsByMethod(method) {
+	_brokersAsRowsByMethod(method) {
 		const rows = store._brokersAsArray(method)
 			.map(b => new BrokerRowModel(b, store.canProxy))
 			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
@@ -145,12 +168,14 @@ export const store = {
 		return rows
 	},
 
-	brokerAsRow(method, urlMask) {
-		const b = store.brokerFor(method, urlMask)
-		const r = new BrokerRowModel(b, store.canProxy)
-		r.setUrlMaskDittoed(store._dittoCache.get(r.key))
-		return r
+	_brokersAsArray(byMethod = '*') {
+		const arr = []
+		for (const [method, brokers] of Object.entries(store.brokersByMethod))
+			if (byMethod === '*' || byMethod === method)
+				arr.push(...Object.values(brokers))
+		return arr
 	},
+	
 
 	previewLink(method, urlMask) {
 		store.setChosenLink(method, urlMask)

package/src/client/app.css

@@ -423,7 +423,7 @@ main {
 		padding-bottom: 4px;
 		padding-left: 1px;
 		border-top: 24px solid transparent;
-		margin-left: 71px;
+		margin-left: 94px;
 		font-weight: bold;
 		text-align: left;
 
@@ -438,7 +438,7 @@ main {
 
 	.TableRow {
 		display: flex;
-		align-items: center;
+		margin-left: 24px;
 
 		&.animIn {
 			opacity: 0;
@@ -446,7 +446,79 @@ main {
 			animation: _kfRowIn 180ms ease-in-out forwards;
 		}
 	}
+
+	.FolderGroup {
+		position: relative;
+
+		> summary {
+			left: 0;
+			display: flex;
+			overflow: hidden;
+			align-items: center;
+			padding: 5px 0;
+			font-size: 12px;
+			list-style: none;
+			cursor: pointer;
+			user-select: none;
+			color: var(--colorLabel);
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			border-radius: var(--radius);
+
+
+			&:active {
+				cursor: grabbing;
+			}
+
+			&::-webkit-details-marker {
+				display: none;
+			}
+
+			&:hover {
+				color: var(--colorText);
+			}
+
+			.FolderName {
+				margin-left: 125px;
+				&.groupedByMethod {
+					margin-left: 79px;
+				}
+			}
+
+			.FolderChevron {
+				display: flex;
+				width: 16px;
+				height: 16px;
+				flex-shrink: 0;
+				align-items: center;
+				justify-content: center;
+				opacity: .7;
+				transition: transform cubic-bezier(.2, .7, .8, 1.4) 400ms;
+				transform: rotate(-90deg);
+
+				svg {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		&[open] > summary {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 16px;
+
+			.FolderChevron {
+				transform: rotate(0deg);
+			}
+			.FolderName {
+				display: none;
+			}
+		}
+	}
 }
+
 @keyframes _kfRowIn {
 	to {
 		opacity: 1;
@@ -458,6 +530,7 @@ main {
 	overflow: hidden;
 	min-width: 38px;
 	padding: 4px 0;
+	margin-top: 3px;
 	margin-right: 8px;
 	color: var(--colorLabel);
 	font-size: 11px;
@@ -523,6 +596,7 @@ main {
 
 .Toggler {
 	display: flex;
+	margin-top: 3px;
 
 	input {
 		/* For click drag target */

package/src/client/app.js

@@ -3,8 +3,8 @@ import { createElement as r, t, classNames, restoreFocus, Fragment, defineClassN
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
 import { Header } from './app-header.js'
-import { TimerIcon, CloudIcon } from './graphics.js'
 import { PayloadViewer, previewMock } from './app-payload-viewer.js'
+import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
 
 import CSS from './app.css' with { type: 'css' }
 document.adoptedStyleSheets.push(CSS)
@@ -100,9 +100,30 @@ function MockList() {
 			r('div', {
 				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
 			}, method),
-			store.brokersAsRowsByMethod(method).map(Row)))
+			FolderGroups(store.folderGroupsByMethod(method))))
 
-	return store.brokersAsRowsByMethod('*').map(Row)
+	return FolderGroups(store.folderGroupsByMethod('*'))
+}
+
+function FolderGroups(groups) {
+	return groups.map(({ folder, children }) => {
+		if (children.length === 1)
+			return Row(children[0], 0)
+
+		return r('details', {
+				className: CSS.FolderGroup,
+				open: !store.collapsedFolders.has(folder),
+				onToggle() {
+					// TODO alt+click exclusive open
+					store.setFolderCollapsed(folder, !this.open)
+				}
+			},
+			r('summary', null,
+				r('span', { className: CSS.FolderChevron }, ChevronDownIcon()),
+				r('span', { className: classNames(CSS.FolderName, store.groupByMethod && CSS.groupedByMethod) },
+					folder + '…')),
+			children.map(Row))
+	})
 }
 
 /**

package/src/client/graphics.js

@@ -27,3 +27,9 @@ export function HelpIcon() {
 		s('svg', { viewBox: '0 0 24 24' },
 			s('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25' })))
 }
+
+export function ChevronDownIcon() {
+	return (
+		s('svg', { viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', 'stroke-width': '2' },
+			s('path', { d: 'M6 9l6 6 6-6' })))
+}

package/src/server/Api.js

@@ -113,7 +113,6 @@ async function setGlobalDelay(req, response) {
 		response.unprocessable(`Expected non-negative integer for "delay"`)
 	else {
 		config.delay = delay
-		uiSyncVersion.increment()
 		response.ok()
 		uiSyncVersion.increment()
 	}
@@ -219,7 +218,7 @@ async function setRouteIsDelayed(req, response) {
 	else {
 		broker.setDelayed(delayed)
 		response.json(broker)
-		uiSyncVersion.increment()	
+		uiSyncVersion.increment()
 	}
 }
 

package/src/server/MockDispatcher.js

@@ -53,11 +53,8 @@ export async function dispatchMock(req, response) {
 		response.setHeader('Content-Type', mime)
 		response.setHeader('Content-Length', length(body))
 
-		setTimeout(() =>
-			response.end(isHead
-				? null
-				: body
-			), Number(broker.delayed && calcDelay()))
+		setTimeout(() => response.end(isHead ? null : body),
+			Number(broker.delayed && calcDelay()))
 
 		logger.accessMock(req.url, broker.file)
 	}

package/src/server/Mockaton.js

@@ -5,9 +5,8 @@ import pkgJSON from '../../package.json' with { type: 'json' }
 
 import { logger } from './utils/logger.js'
 import { ServerResponse } from './utils/HttpServerResponse.js'
-import { IncomingMessage } from './utils/HttpIncomingMessage.js'
+import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
-import { BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 
 import { API } from '../client/ApiConstants.js'
 

package/src/server/Mockaton.test.js

@@ -61,29 +61,10 @@ function request(path, options = {}) {
 }
 
 
-class BaseFixture {
-	dir = ''
-	urlMask = ''
-	method = ''
-
+class Fixture {
 	constructor(file, body = '') {
 		this.file = file
 		this.body = body || `Body for ${file}`
-	}
-	write() { return api.writeMock(this.file, this.body) }
-	delete() { return api.deleteMock(this.file) }
-
-	request(options = {}) {
-		options.method ??= this.method
-		return request(this.urlMask, options)
-	}
-}
-
-
-class Fixture extends BaseFixture {
-	constructor(file, body = '') {
-		super(file, body)
-		this.dir = mocksDir
 		const t = parseFilename(file)
 		this.urlMask = t.urlMask
 		this.method = t.method
@@ -93,14 +74,12 @@ class Fixture extends BaseFixture {
 	async fetchBroker() {
 		return (await fetchState()).brokersByMethod?.[this.method]?.[this.urlMask]
 	}
-}
+	write() { return api.writeMock(this.file, this.body) }
+	delete() { return api.deleteMock(this.file) }
 
-class FixtureStatic extends BaseFixture {
-	constructor(file, body = '') {
-		super(file, body)
-		this.dir = mocksDir
-		this.urlMask = '/' + file
-		this.method = 'GET'
+	request(options = {}) {
+		options.method ??= this.method
+		return request(this.urlMask, options)
 	}
 }
 
@@ -614,8 +593,8 @@ describe('Dynamic Function Mocks', () => {
 
 
 describe('Static Files', () => {
-	const fxsIndex = new FixtureStatic('index.html', '<h1>Index</h1>')
-	const fxsAsset = new FixtureStatic('asset-script.js', 'const a = 1')
+	const fxsIndex = new Fixture('index.html', '<h1>Index</h1>')
+	const fxsAsset = new Fixture('asset-script.js', 'const a = 1')
 	before(async () => {
 		await api.reset()
 		await fxsIndex.write()
@@ -724,7 +703,7 @@ describe('Auto Status', () => {
 	})
 
 	test('toggling ON 404 for static routes', async () => {
-		const fx = new FixtureStatic('static-404.txt')
+		const fx = new Fixture('static-404.txt')
 		await fx.write()
 		equal((await fx.request()).status, 200)
 
@@ -1040,10 +1019,6 @@ describe('Watch mocks API toggler', () => {
 describe('Registering Mocks', () => {
 	// simulates user interacting with the file-system directly
 	class FixtureExternal extends Fixture {
-		constructor(props) {
-			super(props)
-		}
-
 		async writeExternally() {
 			const nextVerPromise = resolveOnNextSyncVersion()
 			await sleep(0) // next macro task
@@ -1063,7 +1038,6 @@ describe('Registering Mocks', () => {
 		return new Promise(resolve => setTimeout(resolve, ms))
 	}
 
-
 	const fxA = new FixtureExternal('register(default).GET.200.json')
 	const fxB = new FixtureExternal('register(alt).GET.200.json')
 
@@ -1138,9 +1112,9 @@ describe('Registering Mocks', () => {
 		})
 
 		test('responds when dir is renamed', async () => {
-			const p0 = resolveOnNextSyncVersion(version + 2)
+			const prom = resolveOnNextSyncVersion(version + 2)
 			await renameInMocksDir('reg0', 'reg1')
-			equal(await p0, version + 3)
+			equal(await prom, version + 3)
 
 			const s = await fetchState()
 			equal(s.brokersByMethod.GET['/reg1/runtime0'].file, 'reg1/runtime0.GET.200.txt')

package/src/server/mockBrokersCollection.js

@@ -61,8 +61,8 @@ export function registerMock(file, isFromWatcher = false) {
 
 export function unregisterMock(file) {
 	const broker = brokerByFilename(file)
-	const hasNoMoreMocks = broker?.unregister(file)
-	if (hasNoMoreMocks) {
+	const methodHasNoMoreMocks = broker?.unregister(file) // TODO or it was a directory of many mocks
+	if (methodHasNoMoreMocks) {
 		const { method, urlMask } = parseFilename(file)
 		delete collection[method][urlMask]
 		if (!Object.keys(collection[method]).length)

package/src/server/utils/HttpServerResponse.js

@@ -19,14 +19,14 @@ export class ServerResponse extends http.ServerResponse {
 
 	html(html, csp) {
 		logger.access(this)
-		this.setHeader('Content-Type', mimeFor('html'))
+		this.setHeader('Content-Type', mimeFor('.html'))
 		this.setHeader('Content-Security-Policy', csp)
 		this.end(html)
 	}
 
 	json(payload) {
 		logger.access(this)
-		this.setHeader('Content-Type', mimeFor('json'))
+		this.setHeader('Content-Type', mimeFor('.json'))
 		this.end(JSON.stringify(payload))
 	}
 

package/src/server/utils/fs.js

@@ -40,7 +40,6 @@ export async function resolveIn(baseDir, file) {
 			: null
 	}
 	catch (e) {
-		console.error('DDDDDD', e)
 		return null
 	}
 }

package/www/src/assets/openapi.json

@@ -545,7 +545,7 @@
 			"Filename": {
 				"type": "string",
 				"description": "Mock filename. The convention is UrlMask.Method.StatusCode.Extension",
-				"example": "api/user/avatar.GET.200.svg"
+				"example": "api/user/friends.GET.200.json"
 			},
 			"ClientMockBroker": {
 				"type": "object",