mockaton 13.9.4 → 13.9.6

package/package.json

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

package/src/client/app.css

@@ -23,10 +23,12 @@
 
 	accent-color: var(--colorAccent);
 	--radius: 16px;
+	--subtoolbarHeight: 42px;
 }
 
 html,
 body {
+	overflow: hidden;
 	height: 100%;
 	font-size: 12px;
 }
@@ -341,15 +343,15 @@ main {
 	}
 
 	.leftSide {
-		overflow: hidden;
+		display: grid;
 		width: 50%;
 		border-top: 1px solid var(--colorBorder);
 		border-right: 1px solid var(--colorBorder);
+		grid-template-rows: var(--subtoolbarHeight) 1fr;
 	}
 
 	.rightSide {
 		position: relative;
-		overflow: hidden;
 		min-width: 100px;
 		min-height: 0;
 		flex: 1;
@@ -391,7 +393,6 @@ main {
 
 .SubToolbar {
 	display: flex;
-	height: 42px;
 	align-items: center;
 	justify-content: space-between;
 	padding-right: 14px;
@@ -719,7 +720,9 @@ main {
 
 
 .PayloadViewer {
+	display: grid;
 	height: 100%;
+	grid-template-rows: var(--subtoolbarHeight) 1fr;
 
 	> pre {
 		overflow: auto;

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

@@ -20,19 +20,22 @@ import { config, ConfigValidator } from './config.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 
 
-export const CLIENT_DIR = join(import.meta.dirname, '../client')
+export const CLIENT_ASSETS = join(import.meta.dirname, '../client')
 
 export const apiGetReqs = new Map([
 	[API.dashboard, serveDashboard],
-	...listFilesRecursively(CLIENT_DIR).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') }]
 ])
 
 
@@ -65,8 +68,10 @@ function serveDashboard(_, response) {
 	response.html(IndexHtml(config.hotReload, pkgJSON.version), CSP)
 }
 
-function serveStatic(f) {
-	return (_, response) => { response.file(join(CLIENT_DIR, f)) }
+function serveDashboardAsset(f) {
+	return (_, response) => {
+		response.file(join(CLIENT_ASSETS, f))
+	}
 }
 
 function getState(_, response) {
@@ -181,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()
@@ -190,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}`)
@@ -204,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}`)
@@ -218,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}`)
@@ -234,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}`)
@@ -298,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/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))
+		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')
+	})
+})