mockaton 13.9.3 → 13.9.5

package/README.md

@@ -2,7 +2,6 @@
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 [![Test](https://github.com/ericfortis/mockaton/actions/workflows/test.yml/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/test.yml)
 [![codecov](https://codecov.io/github/ericfortis/mockaton/graph/badge.svg?token=90NYLMMG1J)](https://codecov.io/github/ericfortis/mockaton)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## [Docs ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog) | [Skills](skills/mockaton/SKILL.md)
 
@@ -38,9 +37,10 @@ Dashboard: [localhost:2020/mockaton](http://localhost:2020/mockaton)
 npx mockaton --port 2020 my-mocks-dir/
 ```
 
-Mockaton will serve the files on the given directory. It's a file-system
-based router, so filenames can have dynamic parameters and comments.
-Also, each route can have different mock file variants.
+Mockaton will serve the files on the given directory. It's a file-system based router, so filenames can have dynamic
+parameters.
+Also, filenames can have comments, which are anything within parentheses, this way each route can have different mock
+file variants.
 
 
 | Route | Filename | Description |

package/package.json

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

package/src/client/ApiCommander.js

@@ -17,15 +17,10 @@ export class Commander {
 	reset = () => this.#patch(API.reset)
 
 	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
-
 	setGlobalDelayJitter = jitterPct => this.#patch(API.globalDelayJitter, jitterPct)
-
 	setCorsAllowed = value => this.#patch(API.cors, value)
-
 	setWatchMocks = enabled => this.#patch(API.watchMocks, enabled)
-
 	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)
-
 	setCollectProxied = shouldCollect => this.#patch(API.collectProxied, shouldCollect)
 
 	/** @returns {JsonPromise<State.cookies>} */
@@ -50,7 +45,6 @@ export class Commander {
 
 
 	writeMock = (file, content) => this.#patch(API.writeMock, [file, content])
-
 	deleteMock = file => this.#patch(API.deleteMock, file)
 
 

package/src/client/ApiConstants.js

@@ -6,7 +6,6 @@ export const API = {
 	dashboard: MOUNT,
 
 	reset: MOUNT + '/reset',
-
 	select: MOUNT + '/select',
 	bulkSelect: MOUNT + '/bulk-select-by-comment',
 

package/src/client/app.css

@@ -27,7 +27,6 @@
 
 html,
 body {
-	overflow: hidden;
 	height: 100%;
 	font-size: 12px;
 }
@@ -45,7 +44,7 @@ body {
 	border: 0;
 	margin: 0;
 	letter-spacing: -0.374px;
-	line-height: 1.2;
+	line-height: 14px;
 	font-family: inherit;
 	font-size: 100%;
 	scrollbar-width: thin;
@@ -185,13 +184,13 @@ header {
 	}
 
 	.HelpLink {
-		opacity: 0.8;
 		width: 22px;
 		height: 22px;
 		flex-shrink: 0;
 		align-self: end;
 		margin-bottom: 3px;
 		margin-left: auto;
+		opacity: 0.8;
 		border-radius: 50%;
 		fill: var(--colorBgHeader);
 		background: var(--colorLabel);
@@ -342,6 +341,7 @@ main {
 	}
 
 	.leftSide {
+		overflow: hidden;
 		width: 50%;
 		border-top: 1px solid var(--colorBorder);
 		border-right: 1px solid var(--colorBorder);
@@ -349,6 +349,7 @@ main {
 
 	.rightSide {
 		position: relative;
+		overflow: hidden;
 		min-width: 100px;
 		min-height: 0;
 		flex: 1;
@@ -399,8 +400,7 @@ main {
 	background: var(--colorBgHeader);
 }
 
-.GroupByMethod,
-.ViewSourceCheckbox {
+.GroupByMethod {
 	display: flex;
 	align-items: center;
 	gap: 6px;
@@ -426,7 +426,7 @@ main {
 	height: 100%;
 	padding: 16px;
 	padding-bottom: 64px;
-	padding-left: 12px;
+	padding-left: 15px;
 	user-select: none;
 	overflow-y: auto;
 
@@ -482,7 +482,8 @@ main {
 				cursor: grabbing;
 			}
 
-			&::-webkit-details-marker {
+			&::-webkit-details-marker,
+			&::marker {
 				display: none;
 			}
 

package/src/client/dir/groupByFolder.test.js

@@ -11,7 +11,7 @@ test('groupByFolder', () => {
 		PartialBrokerRowModel('GET', '/api/user/avatar'),
 		PartialBrokerRowModel('GET', '/api/video/[id]'),
 		PartialBrokerRowModel('GET', '/index.html'),
-		PartialBrokerRowModel('GET', '/media/file-a.txt'),
+		PartialBrokerRowModel('GET', '/media/file-a'),
 		PartialBrokerRowModel('GET', '/media/file-b.txt'),
 		PartialBrokerRowModel('GET', '/media/sub/file-aa.txt'),
 		PartialBrokerRowModel('GET', '/media/sub/file-bb.txt'),
@@ -28,7 +28,7 @@ test('groupByFolder', () => {
 			PartialBrokerRowModel('PATCH', '/api/user')),
 		PartialBrokerRowModel('GET', '/api/video/[id]'),
 		PartialBrokerRowModel('GET', '/index.html'),
-		PartialBrokerRowModel('GET', '/media/file-a.txt',
+		PartialBrokerRowModel('GET', '/media/file-a',
 			PartialBrokerRowModel('GET', '/media/file-b.txt'),
 			PartialBrokerRowModel('GET', '/media/sub/file-aa.txt',
 				PartialBrokerRowModel('GET', '/media/sub/file-bb.txt')))

package/src/client/utils/css.js

@@ -6,6 +6,7 @@ export function classNames(...args) {
 export function extractClassNames({ cssRules }) {
 	// Class names must begin with _ or a letter, then it can have numbers and hyphens
 	// TODO think about tag.className selectors
+	// TODO think about collisions with props on CSSStyleSheet (e.g. title, type, disabled, href, etc.)
 	const reClassName = /(?:^|[\s,{>])&?\s*\.([a-zA-Z_][\w-]*)/g
 	const cNames = {}
 	let match

package/src/server/Api.js

@@ -4,8 +4,7 @@
  */
 
 import { join } from 'node:path'
-import { readdirSync } from 'node:fs'
-import { write, rm, isFile, resolveIn } from './utils/fs.js'
+import { write, rm, isFile, resolveIn, listFilesRecursively } from './utils/fs.js'
 
 import openapi from '../../www/src/assets/openapi.json' with { type: 'json' }
 import pkgJSON from '../../package.json' with { type: 'json' }
@@ -21,24 +20,25 @@ import { config, ConfigValidator } from './config.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 
 
-export const CLIENT_DIR = join(import.meta.dirname, '../client')
-const DASHBOARD_ASSETS = readdirSync(CLIENT_DIR, { recursive: true })
-
+export const CLIENT_ASSETS = join(import.meta.dirname, '../client')
 
 export const apiGetReqs = new Map([
 	[API.dashboard, serveDashboard],
-	...DASHBOARD_ASSETS.map(f => [API.dashboard + '/' + f, serveStatic(f)]),
+
+	...listFilesRecursively(CLIENT_ASSETS).map(f => [
+		API.dashboard + '/' + f,
+		serveDashboardAsset(f)
+	]),
 
 	[API.state, getState],
 	[API.syncVersion, sseClientSyncVersion],
 
 	[API.watchHotReload, onDevWatch],
-	[API.throws, () => { throw new Error('Test500') }],
-	[API.openAPI, (_, response) => response.json(openapi)]
+	[API.openAPI, (_, response) => response.json(openapi)],
+	[API.throws, () => { throw new Error('Test500') }]
 ])
 
 
-
 export const apiPatchReqs = new Map([
 	[API.cors, setCorsAllowed],
 	[API.reset, reset],
@@ -68,9 +68,9 @@ function serveDashboard(_, response) {
 	response.html(IndexHtml(config.hotReload, pkgJSON.version), CSP)
 }
 
-function serveStatic(f) {
+function serveDashboardAsset(f) {
 	return (_, response) => {
-		response.file(join(CLIENT_DIR, f))
+		response.file(join(CLIENT_ASSETS, f))
 	}
 }
 
@@ -186,7 +186,6 @@ async function setCollectProxied(req, response) {
 
 async function bulkUpdateBrokersByCommentTag(req, response) {
 	const comment = await req.json()
-
 	mockBrokersCollection.setMocksMatchingComment(comment)
 	response.ok()
 	uiSyncVersion.increment()
@@ -195,7 +194,6 @@ async function bulkUpdateBrokersByCommentTag(req, response) {
 
 async function selectMock(req, response) {
 	const file = await req.json()
-
 	const broker = mockBrokersCollection.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
 		response.unprocessable(`Missing Mock: ${file}`)
@@ -209,7 +207,6 @@ async function selectMock(req, response) {
 
 async function toggleRouteStatus(req, response) {
 	const [method, urlMask, status] = await req.json()
-
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
@@ -223,7 +220,6 @@ async function toggleRouteStatus(req, response) {
 
 async function setRouteIsDelayed(req, response) {
 	const [method, urlMask, delayed] = await req.json()
-
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
@@ -239,7 +235,6 @@ async function setRouteIsDelayed(req, response) {
 
 async function setRouteIsProxied(req, response) {
 	const [method, urlMask, proxied] = await req.json()
-
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
@@ -303,7 +298,6 @@ async function deleteMock(req, response) {
 
 async function setWatchMocks(req, response) {
 	const enabled = await req.json()
-
 	if (typeof enabled !== 'boolean')
 		response.unprocessable(`Expected boolean for "watchMocks"`)
 	else {

package/src/server/MockDispatcher.js

@@ -39,7 +39,7 @@ export async function dispatchMock(req, response) {
 
 		if (isStatic && req.headers.range && !broker.autoStatus) {
 			setTimeout(async () => {
-				await response.partialContent(req.headers.range, join(config.mocksDir, broker.file))
+				await response.partialContent(join(config.mocksDir, broker.file))
 			}, Number(broker.delayed && calcDelay()))
 			return
 		}

package/src/server/Mockaton.js

@@ -11,7 +11,7 @@ import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpI
 import { API } from '../client/ApiConstants.js'
 import { cookie } from './cookie.js'
 import { config, setup } from './config.js'
-import { apiPatchReqs, apiGetReqs, CLIENT_DIR } from './Api.js'
+import { apiPatchReqs, apiGetReqs, CLIENT_ASSETS } from './Api.js'
 
 import { dispatchMock } from './MockDispatcher.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
@@ -27,6 +27,7 @@ export function Mockaton(options) {
 		mockBrokerCollection.init()
 
 		register('./resolverResolveExtensionless.js', import.meta.url)
+
 		if (config.bypassImportCache)
 			register('./resolverBypassImportCache.js', import.meta.url)
 
@@ -34,7 +35,7 @@ export function Mockaton(options) {
 			watchMocksDir()
 
 		if (config.hotReload)
-			watchDevSPA(CLIENT_DIR)
+			watchDevSPA(CLIENT_ASSETS)
 
 		const server = createServer({ IncomingMessage, ServerResponse }, onRequest)
 		server.on('error', reject)

package/src/server/Mockaton.test.js

@@ -1047,7 +1047,7 @@ describe('Write and Delete Mock', () => {
 })
 
 
-describe('import resolver', () => {
+describe('import resolvers', () => {
 	test('resolves extensionless ts', async () => {
 		await api.writeMock('_scores.ts', 'export default [1,2,3]')
 		await api.writeMock('user-scores.GET.200.ts',

package/src/server/resolverBypassImportCache.js

@@ -2,7 +2,6 @@ import { resolve as _resolve } from 'node:path'
 
 const mockatonSrcRoot = `file://${_resolve(import.meta.dirname, '..')}`
 
-
 // We register this hook at runtime so it doesn’t interfere with non-dynamic imports. 
 // Cache bust by appending timestamp query param
 export async function resolve(specifier, context, nextResolve) {

package/src/server/resolverResolveExtensionless.js

@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs'
 import { join, dirname } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
+
 export async function resolve(specifier, context, nextResolve) {
 	try {
 		return await nextResolve(specifier, context)

package/src/server/utils/HttpServerResponse.js

@@ -1,5 +1,6 @@
-import http from 'node:http'
 import fs from 'node:fs'
+import http from 'node:http'
+import { pipeline } from 'node:stream/promises'
 
 import { mimeFor } from './mime.js'
 
@@ -27,7 +28,7 @@ export class ServerResponse extends http.ServerResponse {
 
 	async file(file) {
 		this.setHeader('Content-Type', mimeFor(file))
-		this.end(await fs.promises.readFile(file, 'utf8'))
+		await pipeline(fs.createReadStream(file), this)
 	}
 
 	noContent() {
@@ -73,13 +74,18 @@ export class ServerResponse extends http.ServerResponse {
 	}
 
 
-	async partialContent(range, file) {
+	async partialContent(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
+		let [start, end] = this.req.headers.range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))
+
+		if (isNaN(start)) {
+			start = size - end
+			end = size - 1
+		}
+		else if (isNaN(end))
+			end = size - 1
 
-		if (start < 0 || start > end || start >= size || end >= size) {
+		if (start < 0 || end >= size || start > end) {
 			this.statusCode = 416 // Range Not Satisfiable
 			this.setHeader('Content-Range', `bytes */${size}`)
 			this.end()
@@ -89,14 +95,11 @@ export class ServerResponse extends http.ServerResponse {
 		this.statusCode = 206 // Partial Content
 		this.setHeader('Accept-Ranges', 'bytes')
 		this.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+		this.setHeader('Content-Length', (end - start) + 1)
 		this.setHeader('Content-Type', mimeFor(file))
 
-		return new Promise((resolve, reject) => {
-			const reader = fs.createReadStream(file, { start, end })
-			this.on('error', reject)
-			reader.on('error', reject)
-			reader.on('end', resolve)
-			reader.pipe(this)
-		})
+		const stream = fs.createReadStream(file, { start, end })
+		this.on('close', () => stream.destroy())
+		stream.pipe(this)
 	}
 }

package/src/server/utils/HttpServerResponse.test.js

@@ -0,0 +1,84 @@
+import { describe, test, before, after } from 'node:test'
+import { mkdtempSync, writeFileSync } from 'node:fs'
+import http, { createServer } from 'node:http'
+import { join, dirname } from 'node:path'
+import { strictEqual } from 'node:assert'
+import { tmpdir } from 'node:os'
+import { rm } from 'node:fs/promises'
+
+import { ServerResponse } from './HttpServerResponse.js'
+
+describe('ServerResponse.partialContent (real HTTP)', () => {
+	const FILE = '0123456789'
+	const FILE_SIZE = FILE.length
+
+	let tmpFile, server, baseUrl
+
+	before(async () => {
+		const tmpDir = mkdtempSync(join(tmpdir(), 'response-'))
+		tmpFile = join(tmpDir, 'test.txt')
+		writeFileSync(tmpFile, FILE)
+		server = createServer({ ServerResponse }, async (_, response) => {
+			await response.partialContent(tmpFile)
+		})
+		await new Promise(resolve => server.listen(0, () => {
+			const { port } = server.address()
+			baseUrl = `http://127.0.0.1:${port}`
+			resolve()
+		}))
+	})
+
+	after(async () => {
+		server?.close()
+		await rm(dirname(tmpFile), { recursive: true, force: true })
+	})
+
+	function request(range) {
+		return new Promise((resolve, reject) => {
+			const req = http.get(baseUrl, { headers: { range } }, response => {
+				let data = ''
+				response.setEncoding('utf8')
+				response.on('data', chunk => data += chunk)
+				response.on('end', () => resolve({
+					statusCode: response.statusCode,
+					headers: response.headers,
+					data
+				}))
+			})
+			req.on('error', reject)
+		})
+	}
+
+	test('416 - out of bounds', async () => {
+		for (const range of ['bytes=10-12', 'bytes=5-2', 'bytes=12-', 'bytes=-15']) {
+			const { statusCode, headers } = await request(range)
+			strictEqual(statusCode, 416)
+			strictEqual(headers['content-range'], `bytes */${FILE_SIZE}`)
+		}
+	})
+
+	test('206 - normal range', async () => {
+		const { statusCode, headers, data } = await request('bytes=0-4')
+		strictEqual(statusCode, 206)
+		strictEqual(headers['content-range'], `bytes 0-4/${FILE_SIZE}`)
+		strictEqual(headers['content-length'], '5')
+		strictEqual(headers['content-type'], 'text/plain')
+		strictEqual(data, '01234')
+	})
+
+	test('206 - suffix range', async () => {
+		const { statusCode, headers, data } = await request('bytes=-3')
+		strictEqual(statusCode, 206)
+		strictEqual(headers['content-range'], `bytes 7-9/${FILE_SIZE}`)
+		strictEqual(headers['content-length'], '3')
+		strictEqual(data, '789')
+	})
+
+	test('206 - open ended range', async () => {
+		const { statusCode, headers, data } = await request('bytes=5-')
+		strictEqual(statusCode, 206)
+		strictEqual(headers['content-range'], `bytes 5-9/${FILE_SIZE}`)
+		strictEqual(headers['content-length'], '5')
+		strictEqual(data, '56789')
+	})
+})

package/src/server/utils/fs.js

@@ -34,8 +34,8 @@ export async function rm(path) {
 export async function resolveIn(baseDir, file) {
 	try {
 		const parent = await realpath(baseDir)
-		const child = resolve(parent, file)
-		return child.startsWith(parent + sep)
+		const child = resolve(join(parent, file))
+		return child.startsWith(join(parent, sep))
 			? child
 			: null
 	}

package/src/server/utils/fs.test.js

@@ -0,0 +1,31 @@
+import { join } from 'node:path'
+import { equal } from 'node:assert/strict'
+import { tmpdir } from 'node:os'
+import { after, describe, test } from 'node:test'
+import { mkdtempSync, rmSync, realpathSync } from 'node:fs'
+
+import { resolveIn } from './fs.js'
+
+const isNull = v => equal(v, null)
+
+describe('resolveIn', () => {
+	const baseDir = mkdtempSync(join(tmpdir(), '_resolveIn'))
+	const baseParentDir = join(baseDir, '..')
+	after(() => rmSync(baseDir, { recursive: true, force: true }))
+
+	test('null when baseDir does not exist', async () =>
+		isNull(await resolveIn(join(baseParentDir, 'missing'), 'file.json')))
+
+	test('null when relative path escapes baseDir', async () =>
+		isNull(await resolveIn(baseDir, '../outside.json')))
+
+
+	const realBaseDir = realpathSync(baseDir)
+	const onReal = f => join(realBaseDir, f)
+
+	test('resolves a relative file within baseDir', async () =>
+		equal(await resolveIn(baseDir, 'file.json'), onReal('file.json')))
+
+	test('resolves file starting with /', async () =>
+		equal(await resolveIn(baseDir, '/file.json'), onReal('file.json')))
+})