mockaton 11.0.1 → 11.0.2

package/Makefile

@@ -6,7 +6,7 @@ watch:
 
 
 test:
-	@node --test 'src/**/*.test.js'
+	@MOCKATON_WATCHER_DEBOUNCE_MS=0 node --test 'src/**/*.test.js'
 
 test-docker:
 	@docker run --rm --interactive --tty \
@@ -16,7 +16,7 @@ test-docker:
 		make test
 
 coverage:
-	@node --test --experimental-test-coverage \
+	@MOCKATON_WATCHER_DEBOUNCE_MS=0 node --test --experimental-test-coverage \
 		--test-reporter=spec --test-reporter-destination=stdout \
 		--test-reporter=lcov --test-reporter-destination=lcov.info \
 		'src/**/*.test.js'

package/README.md

@@ -77,7 +77,7 @@ get saved following Mockaton’s filename convention.
 
 ### Option 2: Fallback to Your Backend
 <details>
-<summary>Details</summary>
+<summary>Learn more…</summary>
 
 This option could be a bit elaborate if your backend uses third-party authentication,
 because you’d have to manually inject cookies or `sessionStorage` tokens.
@@ -93,7 +93,12 @@ They will be saved in your `config.mocksDir` following the filename convention.
 
 <br/>
 
+<br/>
+
+
 ## Motivation
+<details>
+<summary>Motivation…</summary>
 
 **No API state should be too hard to test.**
 With Mockaton, developers can achieve correctness and speed.
@@ -116,15 +121,41 @@ With Mockaton, developers can achieve correctness and speed.
   - checking out long-lived branches
   - bisecting bugs
 
+</details>
+
+
+
+## Use Cases
+<details>
+<summary>Use Cases…</summary>
+
+### Testing Backend or Frontend
+- Empty responses
+- Errors such as _Bad Request_ and _Internal Server Error_
+- Mocking third-party APIs
+- Polled resources (for triggering their different states)
+  - alerts
+  - notifications
+  - slow to build resources
+
+### Testing Frontend
+- Spinners by delaying responses
+- Setting up UI tests
+
+### Demoing complex backend states
+Sometimes, the ideal flow you need is too difficult to reproduce from the actual backend.
+For this, you can **Bulk Select** mocks by comments to simulate the complete states
+you want. For example, by adding `(demo-part1)`, `(demo-part2)` to the filenames.
+
+Similarly, you can deploy a **Standalone Demo Server** by compiling the frontend app and
+putting its built assets in `config.staticDir`. And simulate the flow by Bulk Selecting mocks.
+The [aot-fetch-demo repo](https://github.com/ericfortis/aot-fetch-demo) has a working example.
+
+</details>
 
 <br/>
 
-## Privacy and Security
-- Zero dependencies (no runtime and no build packages).
-- Does not write to disk. Except when you select ✅ **Save Mocks** for scraping mocks from a backend.
-- Does not initiate network connections (no logs, no telemetry).
-- Does not hijack your HTTP client.
-- Auditable. Organized and small &mdash; under 4 KLoC (half is UI and tests).
+
 
 <br/>
 
@@ -147,6 +178,16 @@ npx mockaton --port 2345
 curl localhost:2345/api/foo 
 ```
 
+5. Optionally, use a `mockaton.config.js`
+```js
+import { defineConfig } from 'mockaton'
+
+export default defineConfig({
+  port: 2345,
+})
+```
+
+
 ### Alternative Installations
 <details>
 <summary>With NPM (package.json)…</summary>
@@ -185,6 +226,9 @@ ln -s `realpath mockaton/src/cli.js` ~/bin/mockaton # some dir in your $PATH
 ## CLI Options
 The CLI options override their counterparts in `mockaton.config.js`
 
+<details>
+<summary>CLI Options…</summary>
+
 ```txt
 -c, --config <file>    (default: ./mockaton.config.js)
 
@@ -200,10 +244,17 @@ The CLI options override their counterparts in `mockaton.config.js`
 -h, --help             Show this help
 -v, --version          Show version
 ```
+</details>
 
 
 ## mockaton.config.js (Optional)
+Mockaton looks for a file `mockaton.config.js` in its current working directory.
+
+<details>
+<summary>Defaults Overview… </summary>
+
 As an overview, these are the defaults:
+
 ```js
 import {
   defineConfig,
@@ -250,8 +301,10 @@ export default defineConfig({
 })
 ```
 
+</details>
+
 <details>
-<summary><b>Config Documentation</b></summary>
+<summary>Config Documentation…</summary>
 
 ### `mocksDir?: string`
 Defaults to `'mockaton-mocks'`. 
@@ -499,7 +552,7 @@ Defaults to `'normal'`.
 
 
 <details>
-<summary>Programmatic Launch (Optional)</summary>
+<summary>Programmatic Launch (Optional)…</summary>
 
 
 ```js
@@ -536,32 +589,6 @@ permutations for out-of-stock, new-arrival, and discontinued.
 <br/>
 
 
-## Use Cases
-### Testing Backend or Frontend
-- Empty responses
-- Errors such as _Bad Request_ and _Internal Server Error_
-- Mocking third-party APIs
-- Polled resources (for triggering their different states)
-  - alerts
-  - notifications
-  - slow to build resources
-
-### Testing Frontend
-- Spinners by delaying responses
-- Setting up UI tests
-
-### Demoing complex backend states
-Sometimes, the ideal flow you need is too difficult to reproduce from the actual backend.
-For this, you can **Bulk Select** mocks by comments to simulate the complete states
-you want. For example, by adding `(demo-part1)`, `(demo-part2)` to the filenames.
-
-Similarly, you can deploy a **Standalone Demo Server** by compiling the frontend app and
-putting its built assets in `config.staticDir`. And simulate the flow by Bulk Selecting mocks.
-The [aot-fetch-demo repo](https://github.com/ericfortis/aot-fetch-demo) has a working example.
-
-
-<br/>
-
 
 ## You can write JSON mocks in JavaScript or TypeScript
 For example, `api/foo.GET.200.js`
@@ -841,6 +868,16 @@ await mockaton.reset()
 </details>
 
 
+<br/>
+
+## Privacy and Security
+- Zero dependencies (no runtime and no build packages).
+- Does not write to disk. Except when you select ✅ **Save Mocks** for scraping mocks from a backend.
+- Does not initiate network connections (no logs, no telemetry).
+- Does not hijack your HTTP client.
+- Auditable. Organized and small &mdash; under 4 KLoC (half is UI and tests).
+
+
 <br/>
 
 ## Alternatives worth learning as well
@@ -862,6 +899,12 @@ hijack the HTTP client in Node.js and browsers.
 - [Fetch Mock](https://github.com/wheresrhys/fetch-mock)
 - [Mentoss](https://github.com/humanwhocodes/mentoss) Has a server side too
 
+### Server Side
+
+- [Wire Mock](https://github.com/wiremock/wiremock)
+- [Mock](https://github.com/dhuan/mock)
+- [Swagger](https://swagger.io/)
+
 <br/>
 
 ---

package/package.json

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

package/src/Api.js

@@ -81,7 +81,8 @@ function getState(_, response) {
 
 
 function longPollClientSyncVersion(req, response) {
-	if (uiSyncVersion.version !== Number(req.headers[HEADER_SYNC_VERSION])) {
+	const clientVersion = req.headers[HEADER_SYNC_VERSION]
+	if (clientVersion !== undefined && uiSyncVersion.version !== Number(clientVersion)) {
 		// e.g., tab was hidden while new mocks were added or removed
 		sendJSON(response, uiSyncVersion.version)
 		return

package/src/ApiCommander.js

@@ -9,80 +9,49 @@ export class Commander {
 		this.#addr = addr
 	}
 
-	#patch = (api, body) =>
-		fetch(this.#addr + api, {
-			method: 'PATCH',
-			body: JSON.stringify(body)
-		})
-
 	/** @returns {JsonPromise<State>} */
 	getState = () =>
 		fetch(this.#addr + API.state)
 
-	/** @returns {JsonPromise<number>} */
-	getSyncVersion = (currSyncVer, abortSignal = undefined) =>
+	/** 
+	 * @param {number?} currSyncVer - On mismatch, it responds immediately. Otherwise, long polls.
+	 * @param {AbortSignal} abortSignal
+	 * @returns {JsonPromise<number>}
+	 */
+	getSyncVersion = (currSyncVer = undefined, abortSignal = undefined) =>
 		fetch(this.#addr + API.syncVersion, {
 			signal: AbortSignal.any([
 				abortSignal,
 				AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
 			].filter(Boolean)),
-			headers: {
-				[HEADER_SYNC_VERSION]: currSyncVer
-			}
+			headers: currSyncVer !== undefined 
+				? { [HEADER_SYNC_VERSION]: currSyncVer } 
+				: {}
 		})
 
 
-	reset() {
-		return this.#patch(API.reset)
-	}
-
-	setGlobalDelay(delay) {
-		return this.#patch(API.globalDelay, delay)
-	}
-
-	bulkSelectByComment(comment) {
-		return this.#patch(API.bulkSelect, comment)
-	}
-
-	selectCookie(cookieKey) {
-		return this.#patch(API.cookies, cookieKey)
-	}
-
-	setProxyFallback(proxyAddr) {
-		return this.#patch(API.fallback, proxyAddr)
-	}
-
-	setCollectProxied(shouldCollect) {
-		return this.#patch(API.collectProxied, shouldCollect)
-	}
-
-	setCorsAllowed(value) {
-		return this.#patch(API.cors, value)
-	}
-
-	
-	select(file) {
-		return this.#patch(API.select, file)
+	#patch(api, body) {
+		return fetch(this.#addr + api, {
+			method: 'PATCH',
+			body: JSON.stringify(body)
+		})
 	}
 
-	toggle500(method, urlMask) {
-		return this.#patch(API.toggle500, [method, urlMask])
-	}
+	reset = () => this.#patch(API.reset)
 
-	setRouteIsDelayed(method, urlMask, delayed) {
-		return this.#patch(API.delay, [method, urlMask, delayed])
-	}
+	selectCookie = label => this.#patch(API.cookies, label)
+	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
+	setCorsAllowed = value => this.#patch(API.cors, value)
+	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)
+	setCollectProxied = shouldCollect => this.#patch(API.collectProxied, shouldCollect)
 
-	setRouteIsProxied(method, urlMask, proxied) {
-		return this.#patch(API.proxied, [method, urlMask, proxied])
-	}
-	
+	select = file => this.#patch(API.select, file)
+	bulkSelectByComment = comment => this.#patch(API.bulkSelect, comment)
 
-	setStaticRouteIsDelayed(urlMask, delayed) {
-		return this.#patch(API.delayStatic, [urlMask, delayed])
-	}
+	toggle500 = (method, urlMask) => this.#patch(API.toggle500, [method, urlMask])
+	setRouteIsProxied = (method, urlMask, proxied) => this.#patch(API.proxied, [method, urlMask, proxied])
+	setRouteIsDelayed = (method, urlMask, delayed) => this.#patch(API.delay, [method, urlMask, delayed])
 
-	setStaticRouteStatus(urlMask, status) {
-		return this.#patch(API.staticStatus, [urlMask, status])
-	}
+	setStaticRouteStatus = (urlMask, status) => this.#patch(API.staticStatus, [urlMask, status])
+	setStaticRouteIsDelayed = (urlMask, delayed) => this.#patch(API.delayStatic, [urlMask, delayed])
 }

package/src/Dashboard.js

@@ -734,7 +734,7 @@ function SettingsIcon() {
  * The version increments when a mock file is added, removed, or renamed.
  */
 function initRealTimeUpdates() {
-	let oldVersion = -1
+	let oldVersion = undefined
 	let controller = new AbortController()
 
 	longPoll()
@@ -755,11 +755,9 @@ function initRealTimeUpdates() {
 					ErrorToast.close()
 
 				const version = await response.json()
-				const skipUpdate = oldVersion === -1
 				if (oldVersion !== version) { // because it could be < or >
 					oldVersion = version
-					if (!skipUpdate)
-						store.fetchState()
+					store.fetchState()
 				}
 				longPoll()
 			}

package/src/MockBroker.js

@@ -114,7 +114,7 @@ class UrlMatcher {
 	}
 
 	#disregardVariables(str) { // Stars out all parts that are in square brackets
-		return str.replace(/\[.*?]/g, '[^/]*')
+		return str.replace(/\[.*?]/g, '[^/]+')
 	}
 
 	// Appending a '/' so URLs ending with variables don't match

package/src/Watcher.js

@@ -15,6 +15,7 @@ import * as mockBrokerCollection from './mockBrokersCollection.js'
  * and also renames, which are two events (delete + add).
  */
 export const uiSyncVersion = new class extends EventEmitter {
+	delay = Number(process.env.MOCKATON_WATCHER_DEBOUNCE_MS ?? 80)
 	version = 0
 
 	increment = this.#debounce(() => {
@@ -33,7 +34,7 @@ export const uiSyncVersion = new class extends EventEmitter {
 		let timer
 		return () => {
 			clearTimeout(timer)
-			timer = setTimeout(fn, 80)
+			timer = setTimeout(fn, this.delay)
 		}
 	}
 }
@@ -64,7 +65,7 @@ export function watchStaticDir() {
 	const dir = config.staticDir
 	if (!dir)
 		return
-	
+
 	watch(dir, { recursive: true, persistent: false }, (_, file) => {
 		if (!file)
 			return