mockaton 8.6.1 → 8.7.1

package/README.md

@@ -17,20 +17,15 @@ For example, for this route `/api/user/1234`, the mock filename would be:
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
-And hey, no need to mock everything. If you don’t have a mock for
-a certain API, Mockaton can fallback to your real backend. Just
-type your backend address in the **Fallback Backend** field.
-
-And there’s one more cool thing—you can collect those responses
-by clicking the **Save Mocks** checkbox. Those mocks will
+And hey, no need to mock everything. Mockaton can fallback to your real
+backend on routes you don’t have mocks for. Just type your backend
+address in the **Fallback Backend** field. Check **Save Mocks** so you
+can collect those responses that hit your fallback server. The mocks will
 be saved to your `config.mocksDir` following the filename convention.
 
 
 ## Multiple Mock Variants
-
-You can have many mocks for any route. For example, you might
-want different mocks with different response status codes
-(like triggering errors). Here are a couple of ways to do it:
+Here’s how you can create multiple mocks for a particular route: 
 
 ### Adding comments in filenames
 Want to mock a locked-out user or an invalid login attempt? You
@@ -101,7 +96,7 @@ By the way, that directory has scripts for opening Mockaton and Vite in one comm
 
 The app looks like this:
 
-<img src="./demo-app-vite/README-screenshot.png" alt="Mockaton Demo App Screenshot" width="580" />
+<img src="./demo-app-vite/pixaton-tests/pic-for-readme.vp500x800.light.gold.png" alt="Mockaton Demo App Screenshot" width="500" />
 
 
 ## Use Cases
@@ -124,7 +119,7 @@ backends to old API contracts or databases.
 Perhaps you need to demo your app, but the ideal flow is too complex to
 simulate from the actual backend. In this case, compile your frontend app and
 put its built assets in `config.staticDir`. Then, on the dashboard
-"Bulk Select" mocks to simulate the complete states you want to demo.
+**Bulk Select** mocks to simulate the complete states you want to demo.
 For bulk-selecting, you just need to add a comment to the mock
 filename, such as `(demo-part1)`, `(demo-part2)`.
 
@@ -219,6 +214,9 @@ 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.
+
 
 ### Dynamic Parameters
 Anything within square brackets is always matched. For example, for this route
@@ -274,7 +272,7 @@ api/foo/bar.GET.200.json
 ---
 ## Config
 ### `mocksDir: string`
-This is the only required field
+This is the only required field. The directory must exist.
 
 
 ### `host?: string`
@@ -290,10 +288,10 @@ Defaults to `/(\.DS_Store|~)$/`
 
 
 ### `delay?: number` 
-Defaults to `config.delay=1200` milliseconds.
+Defaults to `1200` milliseconds.
 
 Although routes can individually be delayed with the 🕓
-checkbox, delay the amount is globally configurable.
+checkbox, the delay amount is globally configurable.
 
 
 ### `proxyFallback?: string`
@@ -303,7 +301,7 @@ For example, `config.proxyFallback = 'http://example.com'`
 ### `collectProxied?: boolean`
 Defaults to `false`. With this flag you can save mocks that hit
 your proxy fallback to `config.mocksDir`. If there are UUIDv4 in the
-URL the filename will have `[id]` in their place. For example,
+URL, the filename will have `[id]` in their place. For example,
 
 ```
 /api/user/d14e09c8-d970-4b07-be42-b2f4ee22f0a6/likes =>
@@ -382,7 +380,7 @@ config.extraMimes = {
   jpe: 'application/jpeg'
 }
 ```
-These media types take precedence over the built-in
+Those extra media types take precedence over the built-in
 [utils/mime.js](src/utils/mime.js), so you can override them.
 
 
@@ -397,8 +395,9 @@ type Plugin = (
   body: string | Uint8Array
 }>
 ```
-Plugins are for processing mocks before sending them. If no regex matches the filename,
-it fallbacks to reading the file from disk and computing the MIME from the extension.
+Plugins are for processing mocks before sending them. If no
+regex matches the filename, the fallback plugin will read
+the file from disk and compute the MIME from the extension.
 
 Note: don’t call `response.end()` on any plugin.
 
@@ -470,7 +469,7 @@ Nonetheless, you can trigger any command besides opening a browser.
 ---
 
 ## Commander API
-`Commander` is a wrapper for the Mockaton HTTP API.
+`Commander` is a client for Mockaton’s HTTP API.
 All of its methods return their `fetch` response promise.
 ```js
 import { Commander } from 'mockaton'

package/index.d.ts

@@ -27,12 +27,12 @@ interface Config {
 	plugins?: [filenameTester: RegExp, plugin: Plugin][]
 
 	corsAllowed?: boolean,
-	corsOrigins: string[]
-	corsMethods: string[]
-	corsHeaders: string[]
-	corsExposedHeaders: string[]
-	corsCredentials: boolean
-	corsMaxAge: number
+	corsOrigins?: string[]
+	corsMethods?: string[]
+	corsHeaders?: string[]
+	corsExposedHeaders?: string[]
+	corsCredentials?: boolean
+	corsMaxAge?: number
 
 	onReady?: (address: string) => void
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.6.1",
+	"version": "8.7.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -17,5 +17,8 @@
 	"optionalDependencies": {
 		"pixaton": ">=1.0.2",
 		"puppeteer": ">=24.1.1"
+	},
+	"devDependencies": {
+		"pixaton": "1.0.2"
 	}
 }

package/src/Api.js

@@ -90,7 +90,7 @@ async function selectMock(req, response) {
 	try {
 		const file = await parseJSON(req)
 		const broker = mockBrokersCollection.getBrokerByFilename(file)
-		if (!broker || !broker.mockExists(file))
+		if (!broker || !broker.hasMock(file))
 			throw `Missing Mock: ${file}`
 		broker.updateFile(file)
 		sendOK(response)

package/src/Commander.js

@@ -1,6 +1,7 @@
 import { API, DF } from './ApiConstants.js'
 
 
+// Client for controlling Mockaton via its HTTP API
 export class Commander {
 	#addr = ''
 	constructor(addr) {

package/src/Dashboard.css

@@ -84,7 +84,7 @@ select {
 	}
 }
 
-menu {
+.Header {
 	position: fixed;
 	z-index: 100;
 	top: 0;
@@ -171,7 +171,7 @@ menu {
 }
 
 
-main {
+.MockList {
 	display: flex;
 	align-items: flex-start;
 	margin-top: 64px;
@@ -189,6 +189,10 @@ main {
 			border-top: 1px solid transparent;
 		}
 	}
+
+	&.empty {
+		margin-top: 80px;
+	}
 }
 
 

package/src/Dashboard.js

@@ -26,7 +26,9 @@ const CSS = {
 	DelayToggler: 'DelayToggler',
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
+	Header: 'Header',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
+	MockList: 'MockList',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
@@ -36,6 +38,7 @@ const CSS = {
 	StaticFilesList: 'StaticFilesList',
 
 	bold: 'bold',
+	empty: 'empty',
 	chosen: 'chosen',
 	status4xx: 'status4xx'
 }
@@ -47,7 +50,7 @@ const refPayloadViewerFileTitle = useRef()
 const mockaton = new Commander(window.location.origin)
 
 function init() {
-	Promise.all([
+	return Promise.all([
 		mockaton.listMocks(),
 		mockaton.listCookies(),
 		mockaton.listComments(),
@@ -55,59 +58,62 @@ function init() {
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
-		.then(App)
+		.then(data => {
+			empty(document.body)
+			document.body.append(...App(data))
+		})
 		.catch(onError)
 }
 init()
 
-function App(apiResponses) {
-	empty(document.body)
-	document.body.appendChild(DevPanel(apiResponses))
+function App([brokersByMethod, cookies, comments, collectProxied, fallbackAddress, staticFiles]) {
+	return [
+		r(Header, { cookies, comments, fallbackAddress, collectProxied }),
+		r(MockList, { brokersByMethod }),
+		r(StaticFilesList, { staticFiles })
+	]
 }
 
-function DevPanel([brokersByMethod, cookies, comments, collectProxied, fallbackAddress, staticFiles]) {
-	const isEmpty = Object.keys(brokersByMethod).length === 0
+
+// Header ===============
+
+function Header({ cookies, comments, fallbackAddress, collectProxied }) {
+	return (
+		r('menu', { className: CSS.Header },
+			r(Logo),
+			r(CookieSelector, { cookies }),
+			r(BulkSelector, { comments }),
+			r(ProxyFallbackField, { fallbackAddress, collectProxied }),
+			r(ResetButton)))
+}
+
+function Logo() {
 	return (
-		r('div', null,
-			r('menu', null,
-				r('img', { src: '/mockaton-logo.svg', width: 160, alt: Strings.title }),
-				r(CookieSelector, { list: cookies }),
-				r(BulkSelector, { comments }),
-				r(ProxyFallbackField, { fallbackAddress, collectProxied }),
-				r(ResetButton)),
-			isEmpty
-				? r('main', null, Strings.no_mocks_found)
-				: r('main', null,
-					r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
-						r(SectionByMethod, { method, brokers }))),
-					r('div', { className: CSS.PayloadViewer },
-						r('h2', { ref: refPayloadViewerFileTitle }, Strings.mock),
-						r('pre', null,
-							r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview)))),
-			r(StaticFilesList, { staticFiles })))
-}
-
-
-function CookieSelector({ list }) {
+		r('img', {
+			alt: Strings.title,
+			src: '/mockaton-logo.svg',
+			width: 160
+		}))
+}
+
+function CookieSelector({ cookies }) {
 	function onChange() {
 		mockaton.selectCookie(this.value)
 			.catch(onError)
 	}
-	const disabled = list.length <= 1
+	const disabled = cookies.length <= 1
 	return (
 		r('label', { className: CSS.Field },
 			r('span', null, Strings.cookie),
 			r('select', {
-					autocomplete: 'off',
-					disabled,
-					title: disabled ? Strings.cookie_disabled_title : '',
-					onChange
-				},
-				list.map(([value, selected]) =>
-					r('option', { value, selected }, value)))))
+				autocomplete: 'off',
+				disabled,
+				title: disabled ? Strings.cookie_disabled_title : '',
+				onChange
+			}, cookies.map(([value, selected]) =>
+				r('option', { value, selected }, value)))))
 }
 
-
 function BulkSelector({ comments }) {
 	function onChange() {
 		mockaton.bulkSelectByComment(this.value)
@@ -122,17 +128,15 @@ function BulkSelector({ comments }) {
 		r('label', { className: CSS.Field },
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
-					'data-qaid': 'BulkSelector',
-					autocomplete: 'off',
-					disabled,
-					title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
-					onChange
-				},
-				list.map(value =>
-					r('option', { value }, value)))))
+				'data-qaid': 'BulkSelector',
+				autocomplete: 'off',
+				disabled,
+				title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
+				onChange
+			}, list.map(value =>
+				r('option', { value }, value)))))
 }
 
-
 function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 	const refSaveProxiedCheckbox = useRef()
 	function onChange(event) {
@@ -141,11 +145,10 @@ function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 		if (!input.validity.valid)
 			input.reportValidity()
 		else
-			mockaton.setProxyFallback(input.value.trim())
-				.catch(onError)
+			mockaton.setProxyFallback(input.value.trim()).catch(onError)
 	}
 	return (
-		r('div', { className: CSS.Field + ' ' + CSS.FallbackBackend },
+		r('div', { className: cssClass(CSS.Field, CSS.FallbackBackend) },
 			r('label', null,
 				r('span', null, Strings.fallback_server),
 				r('input', {
@@ -162,7 +165,6 @@ function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 			})))
 }
 
-
 function SaveProxiedCheckbox({ ref, disabled, collectProxied }) {
 	function onChange(event) {
 		mockaton.setCollectProxied(event.currentTarget.checked)
@@ -180,7 +182,6 @@ function SaveProxiedCheckbox({ ref, disabled, collectProxied }) {
 			r('span', null, Strings.save_proxied)))
 }
 
-
 function ResetButton() {
 	return (
 		r('button', {
@@ -194,22 +195,20 @@ function ResetButton() {
 }
 
 
-function StaticFilesList({ staticFiles }) {
-	if (!staticFiles.length)
-		return null
+
+// MockList ===============
+
+function MockList({ brokersByMethod }) {
+	const hasMocks = Object.keys(brokersByMethod).length
+	if (!hasMocks)
+		return (
+			r('main', { className: cssClass(CSS.MockList, CSS.empty) },
+				Strings.no_mocks_found))
 	return (
-		r('details', {
-				open: true,
-				className: CSS.StaticFilesList
-			},
-			r('summary', null, Strings.static),
-			r('ul', null,
-				staticFiles.map(f =>
-					r('li', null,
-						r('a', {
-							href: f,
-							target: '_blank'
-						}, f))))))
+		r('main', { className: CSS.MockList },
+			r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
+				r(SectionByMethod, { method, brokers }))),
+			r(PayloadViewer)))
 }
 
 
@@ -221,7 +220,7 @@ function SectionByMethod({ method, brokers }) {
 				.filter(([, broker]) => broker.mocks.length > 1) // >1 because of autogen500
 				.sort((a, b) => a[0].localeCompare(b[0]))
 				.map(([urlMask, broker]) =>
-					r('tr', null,
+					r('tr', { 'data-method': method, 'data-urlMask': urlMask },
 						r('td', null, r(PreviewLink, { method, urlMask })),
 						r('td', null, r(MockSelector, { broker })),
 						r('td', null, r(DelayRouteToggler, { broker })),
@@ -233,27 +232,16 @@ function PreviewLink({ method, urlMask }) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
-			const spinner = setTimeout(() => {
+			const preloader = setTimeout(() => {
 				empty(refPayloadViewer.current)
-				refPayloadViewer.current.append(ProgressBar())
+				refPayloadViewer.current.append(PayloadViewerProgressBar())
 			}, 180)
-			const res = await fetch(this.href, {
-				method: this.getAttribute('data-method')
-			})
+
+			const response = await fetch(this.href, { method })
+			clearTimeout(preloader)
+			await updatePayloadViewer(method, urlMask, this.href, response)
 			document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
 			this.classList.add(CSS.chosen)
-			clearTimeout(spinner)
-
-			const mime = res.headers.get('content-type') || ''
-			if (mime.startsWith('image/')) // naively assumes GET.200
-				renderPayloadImage(this.href)
-			else
-				updatePayloadViewer(await res.text() || Strings.empty_response_body, mime)
-
-			empty(refPayloadViewerFileTitle.current)
-			refPayloadViewerFileTitle.current.append(PayloadViewerTitle({
-				file: this.closest('tr').querySelector('select').value
-			}))
 		}
 		catch (error) {
 			onError(error)
@@ -263,64 +251,33 @@ function PreviewLink({ method, urlMask }) {
 		r('a', {
 			className: CSS.PreviewLink,
 			href: urlMask,
-			'data-method': method,
 			onClick
 		}, urlMask))
 }
 
 
-function PayloadViewerTitle({ file }) {
-	const { urlMask, method, status, ext } = parseFilename(file)
-	return (
-		r('span', null,
-			urlMask + '.' + method + '.',
-			r('abbr', { title: HttpStatus[status] }, status),
-			'.' + ext))
-}
-
-
-function ProgressBar() {
-	return (
-		r('div', { className: CSS.ProgressBar },
-			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
-}
-
-
-function renderPayloadImage(href) {
-	empty(refPayloadViewer.current)
-	refPayloadViewer.current.append(r('img', { src: href }))
-}
-
-function updatePayloadViewer(body, mime) {
-	if (mime === 'application/json' && window?.Prism.languages)
-		refPayloadViewer.current.innerHTML = window.Prism.highlight(body, window.Prism.languages.json, 'json')
-	else
-		refPayloadViewer.current.innerText = body
-}
-
-
 function MockSelector({ broker }) {
+	function className(defaultIsSelected, status) {
+		return cssClass(
+			CSS.MockSelector,
+			!defaultIsSelected && CSS.bold,
+			status >= 400 && status < 500 && CSS.status4xx)
+	}
+
 	function onChange() {
-		const { status } = parseFilename(this.value)
+		const { status, urlMask, method } = parseFilename(this.value)
 		this.style.fontWeight = this.value === this.options[0].value // default is selected
 			? 'normal'
 			: 'bold'
 		mockaton.select(this.value)
 			.then(() => {
-				this.closest('tr').querySelector('a').click()
-				this.closest('tr').querySelector(`.${CSS.InternalServerErrorToggler}>[type=checkbox]`).checked = status === 500
+				linkFor(method, urlMask)?.click()
+				checkbox500For(method, urlMask).checked = status === 500
 				this.className = className(this.value === this.options[0].value, status)
 			})
 			.catch(onError)
 	}
 
-	function className(defaultIsSelected, status) {
-		return cssClass(
-			CSS.MockSelector,
-			!defaultIsSelected && CSS.bold,
-			status >= 400 && status < 500 && CSS.status4xx)
-	}
-
 	const selected = broker.currentMock.file
 	const { status, urlMask } = parseFilename(selected)
 	const files = broker.mocks.filter(item =>
@@ -329,17 +286,16 @@ function MockSelector({ broker }) {
 
 	return (
 		r('select', {
-				'data-qaid': urlMask,
-				autocomplete: 'off',
-				className: className(selected === files[0], status),
-				disabled: files.length <= 1,
-				onChange
-			},
-			files.map(file =>
-				r('option', {
-					value: file,
-					selected: file === selected
-				}, file))))
+			'data-qaid': urlMask,
+			autocomplete: 'off',
+			className: className(selected === files[0], status),
+			disabled: files.length <= 1,
+			onChange
+		}, files.map(file =>
+			r('option', {
+				value: file,
+				selected: file === selected
+			}, file))))
 }
 
 
@@ -361,22 +317,23 @@ function DelayRouteToggler({ broker }) {
 				onChange
 			}),
 			TimerIcon()))
-}
-
 
-function TimerIcon() {
-	return (
-		r('svg', { viewBox: '0 0 24 24' },
-			r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
+	function TimerIcon() {
+		return (
+			r('svg', { viewBox: '0 0 24 24' },
+				r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
+	}
 }
 
 
 function InternalServerErrorToggler({ broker }) {
 	function onChange(event) {
+		const { urlMask, method } = parseFilename(broker.mocks[0])
 		mockaton.select(event.currentTarget.checked
 			? broker.mocks.find(f => parseFilename(f).status === 500)
 			: broker.mocks[0])
 			.then(init)
+			.then(() => linkFor(method, urlMask)?.click())
 			.catch(onError)
 	}
 	return (
@@ -395,6 +352,86 @@ function InternalServerErrorToggler({ broker }) {
 	)
 }
 
+function PayloadViewerProgressBar() {
+	return (
+		r('div', { className: CSS.ProgressBar },
+			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
+}
+
+function PayloadViewer() {
+	return (
+		r('div', { className: CSS.PayloadViewer },
+			r('h2', { ref: refPayloadViewerFileTitle }, Strings.mock),
+			r('pre', null,
+				r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview))))
+}
+
+function PayloadViewerTitle({ file }) {
+	const { urlMask, method, status, ext } = parseFilename(file)
+	return (
+		r('span', null,
+			urlMask + '.' + method + '.',
+			r('abbr', { title: HttpStatus[status] }, status),
+			'.' + ext))
+}
+
+async function updatePayloadViewer(method, urlMask, imgSrc, response) {
+	empty(refPayloadViewerFileTitle.current)
+	refPayloadViewerFileTitle.current.append(PayloadViewerTitle({
+		file: mockSelectorFor(method, urlMask).value
+	}))
+
+	const mime = response.headers.get('content-type') || ''
+	if (mime.startsWith('image/')) // naively assumes GET.200
+		renderPayloadImage(imgSrc) // TESTME in pixaton
+	else
+		renderPayloadBody(await response.text() || Strings.empty_response_body, mime)
+
+	function renderPayloadImage(src) {
+		empty(refPayloadViewer.current)
+		refPayloadViewer.current.append(r('img', { src }))
+	}
+	function renderPayloadBody(body, mime) {
+		if (mime === 'application/json' && window.Prism?.highlight && window.Prism?.languages)
+			refPayloadViewer.current.innerHTML = window.Prism.highlight(body, window.Prism.languages.json, 'json')
+		else
+			refPayloadViewer.current.innerText = body
+	}
+}
+
+
+function trFor(method, urlMask) {
+	return document.querySelector(`tr[data-method="${method}"][data-urlMask="${urlMask}"]`)
+}
+function linkFor(method, urlMask) {
+	return trFor(method, urlMask)?.querySelector(`a.${CSS.PreviewLink}`)
+}
+function checkbox500For(method, urlMask) {
+	return trFor(method, urlMask)?.querySelector(`.${CSS.InternalServerErrorToggler} > input`)
+}
+function mockSelectorFor(method, urlMask) {
+	return trFor(method, urlMask)?.querySelector(`select.${CSS.MockSelector}`)
+}
+
+
+
+// StaticFilesList ===============
+
+function StaticFilesList({ staticFiles }) {
+	if (!staticFiles.length)
+		return null
+	return (
+		r('details', {
+				open: true,
+				className: CSS.StaticFilesList
+			},
+			r('summary', null, Strings.static),
+			r('ul', null, staticFiles.map(f =>
+				r('li', null,
+					r('a', { href: f, target: '_blank' }, f))))))
+}
+
+
 
 function onError(error) {
 	if (error?.message === 'Failed to fetch')
@@ -403,7 +440,9 @@ function onError(error) {
 }
 
 
-/* === Utils === */
+
+// Utils ============
+
 function cssClass(...args) {
 	return args.filter(a => a).join(' ')
 }

package/src/MockBroker.js

@@ -19,10 +19,7 @@ export class MockBroker {
 	}
 
 	register(file) {
-		if (this.mockExists(file))
-			return
-		const { status } = parseFilename(file)
-		if (status === 500) {
+		if (parseFilename(file).status === 500) {
 			this.#deleteTemp500()
 			if (this.temp500IsSelected)
 				this.updateFile(file)
@@ -84,7 +81,7 @@ export class MockBroker {
 		this.updateFile(this.mocks[0])
 	}
 
-	mockExists(file) { return this.mocks.includes(file) }
+	hasMock(file) { return this.mocks.includes(file) }
 	updateFile(filename) { this.currentMock.file = filename }
 	updateDelay(delayed) { this.currentMock.delay = Number(delayed) * config.delay }
 

package/src/Mockaton.js

@@ -17,13 +17,13 @@ export function Mockaton(options) {
 	mockBrokerCollection.init()
 
 	watch(config.mocksDir, { recursive: true, persistent: false },
-		function handleAddedOrDeletedMocks(_, filename) {
-			if (!filename)
+		function handleAddedOrDeletedMocks(_, file) {
+			if (!file)
 				return
-			if (existsSync(join(config.mocksDir, filename)))
-				mockBrokerCollection.registerMock(filename, 'ensureItHas500')
+			if (existsSync(join(config.mocksDir, file)))
+				mockBrokerCollection.registerMock(file, 'ensureItHas500')
 			else
-				mockBrokerCollection.unregisterMock(filename)
+				mockBrokerCollection.unregisterMock(file)
 		})
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {

package/src/config.js

@@ -5,6 +5,7 @@ import { StandardMethods } from './utils/http-request.js'
 import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/http-cors.js'
 
 
+/** @type {Config} */
 export const config = Object.seal({
 	mocksDir: '',
 	staticDir: '',

package/src/mockBrokersCollection.js

@@ -6,11 +6,15 @@ import { parseFilename, filenameIsValid } from './Filename.js'
 
 
 /**
+ * @type {{
+ * [method: string]:
+ *   { [route: string]: MockBroker }
+ * }}
  * @example
  * {
  *   GET: {
- *     /api/route-a: <MockBroker>
- *     /api/route-b: <MockBroker>
+ *     '/api/route-a': mockBrokerA,
+ *     '/api/route-b': mockBrokerB
  *   },
  *   POST: {…}
  * }
@@ -32,7 +36,9 @@ export function init() {
 }
 
 export function registerMock(file, shouldEnsure500) {
-	if (config.ignore.test(file) || !filenameIsValid(file))
+	if (getBrokerByFilename(file)?.hasMock(file)
+		|| config.ignore.test(file)
+		|| !filenameIsValid(file))
 		return
 
 	const { method, urlMask } = parseFilename(file)