mockaton 8.12.9 → 8.13.0

package/README.md

@@ -2,6 +2,8 @@
 
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 ![NPM Version](https://img.shields.io/npm/l/mockaton)
+[![Test](https://github.com/ericfortis/mockaton/actions/workflows/test.yml/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/test.yml)
+[![CodeQL](https://github.com/ericfortis/mockaton/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/github-code-scanning/codeql)
 
 An HTTP mock server for simulating APIs with minimal setup
 — ideal for triggering difficult to reproduce backend states.
@@ -27,9 +29,9 @@ Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander API** section).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp840x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp840x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp840x800.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp840x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp840x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp840x800.light.gold.png">
 </picture>
 
 
@@ -74,12 +76,10 @@ They will be saved in your `config.mocksDir` following the filename convention.
 
 
 ## Basic Usage
-Mockaton is a Node.js program with no build or runtime NPM dependencies.
-
-`tsx` is only needed if you want to write mocks in TypeScript.
+Mockaton is a Node.js program.
 
 ```sh
-npm install mockaton tsx --save-dev
+npm install mockaton --save-dev
 ```
 
 Create a `my-mockaton.js` file
@@ -95,7 +95,7 @@ Mockaton({
 ```
 
 ```sh
-node --import=tsx my-mockaton.js
+node my-mockaton.js
 ```
 
 <br/>
@@ -121,7 +121,7 @@ npm run start # in another terminal
 
 The app looks like this:
 
-<img src="./demo-app-vite/pixaton-tests/pic-for-readme.vp500x800.light.gold.png" alt="Mockaton Demo App Screenshot" width="500" />
+<img src="./demo-app-vite/pixaton-tests/pic-for-readme.vp740x880.light.gold.png" alt="Mockaton Demo App Screenshot" width="740" />
 
 <br/>
 
@@ -366,17 +366,16 @@ or that you manually picked with the ☁️ **Cloud Checkbox**.
 
 ### `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,
+your proxy fallback to `config.mocksDir`. If the URL has v4 UUIDs, 
+the filename will have `[id]` in their place. For example:
 
-```
-/api/user/d14e09c8-d970-4b07-be42-b2f4ee22f0a6/likes =>
-  my-mocks-dir/api/user/[id]/likes.GET.200.json
-```
+<pre>
+<b>/api/user/</b>d14e09c8-d970-4b07-be42-b2f4ee22f0a6<b>/likes</b> =>
+  my-mocks-dir<b>/api/user/</b>[id]<b>/likes</b>.GET.200.json
+</pre>
 
-Your existing mocks won’t be overwritten. That is, the routes you manually
-selected for using your backend with the ☁️ **Cloud Checkbox**, will have
-a unique filename comment.
+Your existing mocks won’t be overwritten. In other words, responses of routes with
+the ☁️ **Cloud Checkbox** selected will be saved with unique filename-comments.
 
 
 <details>
@@ -394,8 +393,8 @@ the predefined list. For that, you can add it to <code>config.extraMimes</code>
 
 
 ### `formatCollectedJSON?: boolean`
-Defaults to `true`. Saves the mock with the formatting output
-of `JSON.stringify(data, null, '  ')` (two spaces indentation).
+Defaults to `true`. Saves the mock with two spaces indentation &mdash; 
+the formatting output of `JSON.stringify(data, null, '  ')`
 
 
 <br/>
@@ -412,14 +411,16 @@ config.cookies = {
   'My JWT': jwtCookie('my-cookie', {
     name: 'John Doe',
     picture: 'https://cdn.auth0.com/avatars/jd.png'
-  })
+  }),
+  'None': ''
 }
 ```
-The selected cookie, which is the first one by default, is sent in every
-response in a `Set-Cookie` header. 
+The selected cookie, which is the first one by default, is sent in every response in a
+`Set-Cookie` header (as long as its value is not an empty string). The object key is just
+a label for UI display purposes, and also for selecting a cookie via the Commander API.
 
-If you need to send more cookies, you can either inject them globally
-in `config.extraHeaders`, or in function `.js` or `.ts` mock.
+If you need to send more than one cookie, you can inject them globally 
+in `config.extraHeaders`, or individually in a function `.js` or `.ts` mock.
 
 By the way, the `jwtCookie` helper has a hardcoded header and signature.
 In other words, it’s useful only if you care about its payload.
@@ -480,8 +481,8 @@ import { jsToJsonPlugin } from 'mockaton'
 
 config.plugins = [
   
-  // Although `jsToJsonPlugin` is set by default, you need to add it to your list if you need it.
-  // In other words, your plugins array overwrites the default list. This way you can remove it.
+  // Although `jsToJsonPlugin` is set by default, you need to include it if you need it.
+  // IOW, your plugins array overwrites the default list. This way you can remove it.
   [/\.(js|ts)$/, jsToJsonPlugin], 
   
   [/\.yml$/, yamlToJsonPlugin],
@@ -508,6 +509,10 @@ function capitalizePlugin(filePath) {
 
 ### `corsAllowed?: boolean`
 Defaults to `true`. When `true`, these are the default options:
+
+<details>
+<summary>CORS Options</summary>
+
 ```js
 config.corsOrigins = ['*']
 config.corsMethods = require('node:http').METHODS
@@ -516,6 +521,7 @@ config.corsCredentials = true
 config.corsMaxAge = 0 // seconds to cache the preflight req
 config.corsExposedHeaders = [] // headers you need to access in client-side JS
 ```
+</details>
 
 <br/>
 
@@ -554,9 +560,9 @@ await mockaton.select('api/foo.200.GET.json')
 ```js
 await mockaton.bulkSelectByComment('(demo-a)')
 ```
-Parentheses are optional, so you can pass a partial match.
-For example, passing `'demo-'` (without the final `a`), selects the
-first mock in alphabetical order that matches.
+Parentheses are optional, so you can pass a partial match. For example,
+passing `'demo-'` (without the final `a`) works too. On routes
+with many partial matches, their first mock in alphabetical order wins.
 
 <br/>
 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.12.9",
+	"version": "8.13.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -19,13 +19,12 @@
 		"test": "node --test \"src/**/*.test.js\"",
 		"coverage": "node --test --test-reporter=lcov --test-reporter-destination=.coverage/lcov.info --experimental-test-coverage \"src/**/*.test.js\"",
 		"start": "node dev-mockaton.js",
-		"start:ts": "node --import=tsx dev-mockaton.js",
 		"pixaton": "node --test --import=./pixaton-tests/_setup.js --experimental-test-isolation=none \"pixaton-tests/**/*.test.js\"",
 		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},
 	"optionalDependencies": {
 		"open": "^10.0.0",
-		"pixaton": ">=1.0.2",
+		"pixaton": ">=1.1.1",
 		"puppeteer": ">=24.1.1"
 	}
 }

package/src/ApiConstants.js

@@ -2,17 +2,17 @@ const MOUNT = '/mockaton'
 export const API = {
 	dashboard: MOUNT,
 	bulkSelect: MOUNT + '/bulk-select-by-comment',
+	collectProxied: MOUNT + '/collect-proxied',
 	comments: MOUNT + '/comments',
-	select: MOUNT + '/select',
+	cookies: MOUNT + '/cookies',
+	cors: MOUNT + '/cors',
 	delay: MOUNT + '/delay',
+	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
 	mocks: MOUNT + '/mocks',
-	reset: MOUNT + '/reset',
-	cookies: MOUNT + '/cookies',
-	fallback: MOUNT + '/fallback',
-	collectProxied: MOUNT + '/collect-proxied',
 	proxied: MOUNT + '/proxied',
-	cors: MOUNT + '/cors',
+	reset: MOUNT + '/reset',
+	select: MOUNT + '/select',
 	static: MOUNT + '/static',
 	syncVersion: MOUNT + '/sync_version'
 }

package/src/Dashboard.css

@@ -288,6 +288,12 @@ select {
 	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
+	word-break: break-word;
+
+	span {
+		opacity: 0.5;
+		filter: saturate(0.5);
+	}
 
 	&:hover {
 		background: var(--colorHover);
@@ -510,6 +516,11 @@ select {
 		&:hover {
 			text-decoration: underline;
 		}
+
+		span {
+			opacity: 0.5;
+			filter: saturate(0.5);
+		}
 	}
 }
 

package/src/Dashboard.js

@@ -253,22 +253,25 @@ function MockList({ brokersByMethod, canProxy }) {
 }
 
 function SectionByMethod({ method, brokers, canProxy }) {
+	const brokersSorted = Object.entries(brokers)
+		.filter(([, broker]) => broker.mocks.length > 1) // >1 because of autogen500
+		.sort((a, b) => a[0].localeCompare(b[0]))
+
+	const urlMasks = brokersSorted.map(([urlMask]) => urlMask)
+	const urlMasksHighlighted = highlightCommonPathPrefixes(urlMasks)
 	return (
 		r('tbody', null,
 			r('th', null, method),
-			Object.entries(brokers)
-				.filter(([, broker]) => broker.mocks.length > 1) // >1 because of autogen500
-				.sort((a, b) => a[0].localeCompare(b[0]))
-				.map(([urlMask, broker]) =>
-					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(InternalServerErrorToggler, { broker })),
-						r('td', null, r(DelayRouteToggler, { broker })),
-						r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
-}
-
-function PreviewLink({ method, urlMask }) {
+			brokersSorted.map(([urlMask, broker], i) =>
+				r('tr', { 'data-method': method, 'data-urlMask': urlMask },
+					r('td', null, r(PreviewLink, { method, urlMask, urlMaskHighlighted: urlMasksHighlighted[i] })),
+					r('td', null, r(MockSelector, { broker })),
+					r('td', null, r(InternalServerErrorToggler, { broker })),
+					r('td', null, r(DelayRouteToggler, { broker })),
+					r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
+}
+
+function PreviewLink({ method, urlMask, urlMaskHighlighted }) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
@@ -284,8 +287,9 @@ function PreviewLink({ method, urlMask }) {
 		r('a', {
 			className: CSS.PreviewLink,
 			href: urlMask,
-			onClick
-		}, urlMask))
+			onClick,
+			innerHTML: urlMaskHighlighted
+		}))
 }
 
 function MockSelector({ broker }) {
@@ -492,15 +496,20 @@ function mockSelectorFor(method, urlMask) {
 function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
+	const highlighted = highlightCommonPathPrefixes(staticFiles)
 	return (
 		r('section', {
 				open: true,
 				className: CSS.StaticFilesList
 			},
 			r('h2', null, Strings.static_get),
-			r('ul', null, staticFiles.map(f =>
+			r('ul', null, staticFiles.map((f, i) =>
 				r('li', null,
-					r('a', { href: f, target: '_blank' }, f))))))
+					r('a', {
+						href: f,
+						target: '_blank',
+						innerHTML: highlighted[i]
+					}))))))
 }
 
 
@@ -607,3 +616,40 @@ function createSvgElement(tagName, props, ...children) {
 function useRef() {
 	return { current: null }
 }
+
+
+
+
+/** This is for styling the repeated paths with a faint style  */
+function highlightCommonPathPrefixes(paths) {
+	const seen = []
+	const result = []
+	for (const path of paths) {
+		let longestPrefixSegments = []
+
+		for (const prev of seen) {
+			const currSegs = path.split('/')
+			const prevSegs = prev.split('/')
+
+			let i = 0
+			while (i < currSegs.length && i < prevSegs.length && currSegs[i] === prevSegs[i])
+				i++
+
+			if (i > longestPrefixSegments.length)
+				longestPrefixSegments = currSegs.slice(0, i)
+		}
+
+		if (longestPrefixSegments.length > 0) {
+			let prefix = longestPrefixSegments.join('/')
+			if (!prefix.endsWith('/'))
+				prefix += '/' // always end with slash for dirs
+			const suffix = path.slice(prefix.length)
+			result.push(`<span>${prefix}</span>${suffix}`)
+		}
+		else
+			result.push(path)
+
+		seen.push(path)
+	}
+	return result
+}

package/src/Watcher.js

@@ -29,7 +29,7 @@ export function watchMocksDir() {
 		if (!file)
 			return
 		if (isFile(join(dir, file))) {
-			if (mockBrokerCollection.registerMock(file, 'isFromWatcher'))
+			if (mockBrokerCollection.registerMock(file, Boolean('isFromWatcher')))
 				uiSyncVersion.increment()
 		}
 		else {

package/src/mockBrokersCollection.js

@@ -36,7 +36,7 @@ export function init() {
 }
 
 /** @returns {boolean} registered */
-export function registerMock(file, isFromWatcher) {
+export function registerMock(file, isFromWatcher = false) {
 	if (findBrokerByFilename(file)?.hasMock(file)
 		|| !isFileAllowed(file)
 		|| !filenameIsValid(file))