mockaton 11.2.5 → 11.2.6

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)
-[![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)
 [![codecov](https://codecov.io/github/ericfortis/mockaton/graph/badge.svg?token=90NYLMMG1J)](https://codecov.io/github/ericfortis/mockaton)
 
 An HTTP mock server for simulating APIs with minimal setup — ideal
@@ -46,15 +45,19 @@ curl localhost:2020/api/user
 
 ## Dashboard
 
-On the dashboard you can select a mock variant for a particular route,
-🕓 delaying responses, or triggering an autogenerated `500` error, among
-other features. Nonetheless, there’s a programmatic API, which is
-handy for setting up tests (see **Commander API** section below).
+On the dashboard you can:
+- Select a mock variant for a particular route
+- 🕓 Delay responses
+- Trigger an autogenerated `500` error
+  - …and cycle it off (for testing retries)
+ 
+Nonetheless, there’s a programmatic API, which is handy for
+setting up tests (see **Commander API** section below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/tests/macos/pic-for-readme.vp761x720.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/tests/macos/pic-for-readme.vp761x720.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/tests/macos/pic-for-readme.vp761x720.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/tests/macos/pic-for-readme.vp761x740.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/tests/macos/pic-for-readme.vp761x740.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/tests/macos/pic-for-readme.vp761x740.light.gold.png">
 </picture>
 
 
@@ -76,7 +79,7 @@ api/login<b>(invalid login attempt)</b>.POST.401.json
 You can **Bulk Select** mocks by comments to simulate the complete states
 you want. For example:
 
-<img src="docs/bulk-select.png" width="180px">
+<img src="docs/changelog/bulk-select.png" width="180px">
 
 
 ### Different response status code
@@ -95,10 +98,11 @@ api/videos.GET.<b>500</b>.txt   # Internal Server Error
 ## Scraping Mocks from your Backend
 
 ### Option 1: Browser extension
-The companion Chrome [devtools
-extension](https://github.com/ericfortis/download-http-requests-browser-ext)
+The companion Chrome [devtools extension](https://chromewebstore.google.com/detail/mockaton-downloader/babjpljmacbefcmlomjedmgmkecnmlaa)
 lets you download all the HTTP responses and 
-save them following Mockaton’s filename convention.
+save them in bulk following Mockaton’s filename convention.
+
+![](browser-extension/README-overview.png)
 
 ### Option 2: Fallback to your backend
 <details>
@@ -127,11 +131,10 @@ Sometimes the flow you need to test is
 too difficult to reproduce from the actual backend.
  
 - Demo edge cases to PMs, Design, and clients
-- Set up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton)
-- Spot inadvertent regressions during development. For example, the demo app in
-  this repo has a list of colors containing all of their possible states, such as
-  permutations for out-of-stock, new-arrival, and discontinued. This way you’ll
-  indirectly notice if something else broke.
+- Set up screenshot tests (see [pixaton-tests/](pixaton-tests) in this repo)
+- Spot inadvertent regressions during development. For example, the demo
+  app in this repo has a list of colors containing all of their possible
+  states. This way you’ll indirectly notice if something broke.
 
 <img src="./demo-app-vite/pixaton-tests/pic-for-readme.vp740x880.light.gold.png" alt="Mockaton Demo App Screenshot" width="740" />
 
@@ -154,11 +157,10 @@ make run-standalone-demo
 - Dashboard: http://localhost:4040/mockaton
 
 ### Testing scenarios that would otherwise be skipped
-- Trigger dynamic states on an API. You can do this by using comments on mock filenames, for example, for polled alerts or notifications.
+- Trigger dynamic states on an API. For example, for polled alerts or notifications.
 - Testing retries, you can change an endpoint from a 500 to a 200 on the fly.
-- Simulate errors on third-party APIs, or on your project’s backend (if you are a frontend dev, or unfamiliar with that code)
-- Generating dynamic responses. Mockaton lets you use Node’s HTTP handlers (see function mocks) when using function mocks.
-So you can, e.g.:
+- Simulate errors on third-party APIs, or on your project’s backend.
+- Generate dynamic responses. Use Node’s HTTP handlers (see function mocks below). So you can, e.g.:
   - have an in-memory database
   - read from disk
   - read query string 
@@ -755,6 +757,8 @@ api/foo/bar.GET.200.json
 <br/>
 
 ## Commander API
+[openapi.yaml](docs/openapi.yaml)
+
 `Commander` is a JavaScript client for Mockaton’s HTTP API.
 All of its methods return their `fetch` response promise.
 ```js
@@ -773,8 +777,8 @@ await mockaton.select('api/foo.200.GET.json')
 ```
 
 ### Toggle 500
-Either selects the first found 500, which could be
-the autogenerated one, or selects the default file.
+- Selects the first found 500, which could be the autogenerated one.
+- Or, selects the default file.
 ```js
 await mockaton.toggle500('GET', '/api/foo')
 ```
@@ -848,7 +852,7 @@ await mockaton.setCorsAllowed(true)
 
 ### Reset
 Re-initialize the collection. The selected mocks, cookies, and delays go back to
-default, but the `proxyFallback`, `colledProxied`, and `corsAllowed` are not affected.
+default, but the `proxyFallback`, `collectProxied`, and `corsAllowed` are not affected.
 ```js
 await mockaton.reset()
 ```
@@ -873,15 +877,13 @@ example, if you are polling, and you want to test the state change.
 
 ### Client Side
 In contrast to Mockaton, which is an HTTP Server, these
-programs hijack your browser’s HTTP client (and Node’s).
-
+programs hijack your browser’s HTTP client (or Node’s).
 - [Mock Server Worker (MSW)](https://mswjs.io)
 - [Nock](https://github.com/nock/nock)
 - [Fetch Mock](https://github.com/wheresrhys/fetch-mock)
-- [Mentoss](https://github.com/humanwhocodes/mentoss) Has a server side too
+- [Mentoss](https://github.com/humanwhocodes/mentoss)
 
 ### Server Side
-
 - [Wire Mock](https://github.com/wiremock/wiremock)
 - [Mock](https://github.com/dhuan/mock)
 - [Swagger](https://swagger.io/)

package/package.json

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

package/src/client/ApiCommander.js

@@ -1,4 +1,8 @@
-import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_SYNC_VERSION } from './ApiConstants.js'
+import {
+	API,
+	HEADER_SYNC_VERSION,
+	LONG_POLL_SERVER_TIMEOUT
+} from './ApiConstants.js'
 
 
 /** Client for controlling Mockaton via its HTTP API */
@@ -9,61 +13,72 @@ export class Commander {
 		this.addr = addr
 	}
 
-	/** @returns {JsonPromise<State>} */
-	getState = () =>
-		fetch(this.addr + API.state)
-
-	/**
-	 * @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: currSyncVer !== undefined
-				? { [HEADER_SYNC_VERSION]: currSyncVer }
-				: {}
-		})
-
-
-	#patch(api, body) {
-		return fetch(this.addr + api, {
-			method: 'PATCH',
-			body: JSON.stringify(body)
-		})
-	}
+	#patch = (api, body) => fetch(this.addr + api, {
+		method: 'PATCH',
+		body: JSON.stringify(body)
+	})
 
+	/** @returns {Promise<Response>} */
 	reset = () => this.#patch(API.reset)
 
-	selectCookie = label => this.#patch(API.cookies, label)
+	/** @returns {Promise<Response>} */
 	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
+
+	/** @returns {Promise<Response>} */
 	setCorsAllowed = value => this.#patch(API.cors, value)
+
+	/** @returns {Promise<Response>} */
 	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)
+
+	/** @returns {Promise<Response>} */
 	setCollectProxied = shouldCollect => this.#patch(API.collectProxied, shouldCollect)
 
+	/** @returns {JsonPromise<State.cookies>} */
+	selectCookie = label => this.#patch(API.cookies, label)
+
+
+	/** @returns {Promise<Response>} */
+	bulkSelectByComment = comment => this.#patch(API.bulkSelect, comment)
+
 	/** @returns {JsonPromise<ClientMockBroker>} */
-	select = file => 
-		this.#patch(API.select, file)
+	select = file => this.#patch(API.select, file)
 
-	bulkSelectByComment = comment => 
-		this.#patch(API.bulkSelect, comment)
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
-	toggle500 = (method, urlMask) =>
-		this.#patch(API.toggle500, [method, urlMask])
+	toggle500 = (method, urlMask) => this.#patch(API.toggle500, [method, urlMask])
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
-	setRouteIsProxied = (method, urlMask, proxied) =>
-		this.#patch(API.proxied, [method, urlMask, proxied])
+	setRouteIsProxied = (method, urlMask, proxied) => this.#patch(API.proxied, [method, urlMask, proxied])
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
-	setRouteIsDelayed = (method, urlMask, delayed) =>
-		this.#patch(API.delay, [method, urlMask, delayed])
+	setRouteIsDelayed = (method, urlMask, delayed) => this.#patch(API.delay, [method, urlMask, delayed])
+
 
+	/** @returns {Promise<Response>} */
 	setStaticRouteStatus = (urlMask, status) => this.#patch(API.staticStatus, [urlMask, status])
+
+	/** @returns {Promise<Response>} */
 	setStaticRouteIsDelayed = (urlMask, delayed) => this.#patch(API.delayStatic, [urlMask, delayed])
+
+
+
+	/** @returns {JsonPromise<State>} */
+	getState = () => fetch(this.addr + API.state)
+
+	/**
+	 * This is for listening to real-time updates. It responds when a new mock is added, deleted, or renamed.
+	 * @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: currSyncVer !== undefined
+				? { [HEADER_SYNC_VERSION]: currSyncVer }
+				: {}
+		})
 }

package/src/client/ApiConstants.js

@@ -1,4 +1,4 @@
-// @KeepSync src/server/ApiConstants.js
+/** @KeepSync src/server/ApiConstants.js */
 
 const MOUNT = '/mockaton'
 export const API = {

package/src/client/Filename.js

@@ -2,9 +2,9 @@
 
 const reComments = /\(.*?\)/g // Anything within parentheses
 
-export const extractComments = file =>
-	Array.from(file.matchAll(reComments), ([c]) => c)
-
+export function extractComments(file) {
+	return Array.from(file.matchAll(reComments), ([c]) => c)
+}
 
 export function parseFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')

package/src/client/app.js

@@ -1,7 +1,12 @@
-import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment } from './dom-utils.js'
-import { HEADER_502 } from './ApiConstants.js'
-import { parseFilename } from './Filename.js'
+import {
+	createElement as r,
+	createSvgElement as s,
+	className, restoreFocus, Defer, Fragment
+} from './dom-utils.js'
+
 import { store } from './app-store.js'
+import { parseFilename } from './Filename.js'
+import { HEADER_502 } from './ApiConstants.js'
 
 
 const CSS = {
@@ -27,12 +32,18 @@ const CSS = {
 	Resizer: null,
 	SaveProxiedCheckbox: null,
 	SettingsMenu: null,
+	Table: null,
+	TableHeading: null,
+	TableRow: null,
 
 	animIn: null,
+	canProxy: null,
+	checkboxBody: null,
 	chosen: null,
 	dittoDir: null,
 	leftSide: null,
 	nonDefault: null,
+	nonGroupedByMethod: null,
 	rightSide: null,
 	status4xx: null,
 
@@ -84,7 +95,7 @@ function App() {
 					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
-				r('table', null,
+				r('div', className(CSS.Table),
 					MockList(),
 					StaticFilesList())),
 			r('div', { className: CSS.rightSide },
@@ -212,7 +223,7 @@ function SaveProxiedCheckbox(ref) {
 				checked: store.collectProxied,
 				onChange() { store.setCollectProxied(this.checked) }
 			}),
-			r('span', null, t`Save Mocks`)))
+			r('span', className(CSS.checkboxBody), t`Save Mocks`)))
 }
 
 
@@ -258,7 +269,7 @@ function SettingsMenu(id) {
 						checked: store.groupByMethod,
 						onChange: store.toggleGroupByMethod
 					}),
-					r('span', null, t`Group by Method`)),
+					r('span', className(CSS.checkboxBody), t`Group by Method`)),
 
 				r('a', {
 					href: 'https://github.com/ericfortis/mockaton',
@@ -280,9 +291,8 @@ function MockList() {
 
 	if (store.groupByMethod)
 		return Object.keys(store.brokersByMethod).map(method => Fragment(
-			r('tr', null,
-				r('th', { colspan: 2 + Number(store.canProxy) }),
-				r('th', { colspan: 2 }, method)),
+			r('div', className(CSS.TableHeading, store.canProxy && CSS.canProxy),
+				method),
 			store.brokersAsRowsByMethod(method).map(Row)))
 
 	return store.brokersAsRowsByMethod('*').map(Row)
@@ -293,33 +303,26 @@ function MockList() {
  * @param {number} i
  */
 function Row(row, i) {
-	const { key, method, urlMask } = row
+	const { method, urlMask } = row
 	return (
-		r('tr', {
-				key,
-				...className(render.count > 1 && row.isNew && CSS.animIn)
+		r('div', {
+				key: row.key,
+				...className(CSS.TableRow,
+					render.count > 1 && row.isNew && CSS.animIn)
 			},
-			store.canProxy && r('td', null,
-				ProxyToggler(method, urlMask, row.proxied)),
+			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
-			r('td', null,
-				DelayRouteToggler(method, urlMask, row.delayed)),
+			DelayRouteToggler(method, urlMask, row.delayed),
 
-			r('td', null,
-				InternalServerErrorToggler(
-					method,
-					urlMask,
-					!row.proxied && row.status === 500, // checked
-					row.opts.length === 1 && row.status === 500)), // disabled
+			InternalServerErrorToggler(method, urlMask,
+				!row.proxied && row.status === 500, // checked
+				row.opts.length === 1 && row.status === 500), // disabled
 
-			!store.groupByMethod && r('td', className(CSS.Method),
-				method),
+			!store.groupByMethod && r('span', className(CSS.Method), method),
 
-			r('td', null,
-				PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0)),
+			PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0),
 
-			r('td', null,
-				MockSelector(row))))
+			MockSelector(row)))
 }
 
 function renderRow(method, urlMask) {
@@ -331,10 +334,10 @@ function renderRow(method, urlMask) {
 	})
 
 	function trFor(key) {
-		return leftSideRef.elem.querySelector(`tr[key="${key}"]`)
+		return leftSideRef.elem.querySelector(`.${CSS.TableRow}[key="${key}"]`)
 	}
 	function unChooseOld() {
-		return leftSideRef.elem.querySelector(`td > a.${CSS.chosen}`)
+		return leftSideRef.elem.querySelector(`a.${CSS.chosen}`)
 			?.classList.remove(CSS.chosen)
 	}
 }
@@ -398,7 +401,7 @@ function InternalServerErrorToggler(method, urlMask, checked, disabled) {
 				onChange() { store.toggle500(method, urlMask) },
 				'data-focus-group': FocusGroup.StatusToggler
 			}),
-			r('span', null, t`500`)))
+			r('span', className(CSS.checkboxBody), t`500`)))
 }
 
 function ProxyToggler(method, urlMask, checked) {
@@ -421,49 +424,47 @@ function ProxyToggler(method, urlMask, checked) {
 /** # StaticFilesList */
 
 function StaticFilesList() {
-	const { canProxy, groupByMethod } = store
 	const rows = store.staticBrokersAsRows()
 	return !rows.length
 		? null
 		: Fragment(
-			r('tr', null,
-				r('th', { colspan: (2 + Number(!groupByMethod)) + Number(canProxy) }),
-				r('th', { colspan: 2 }, t`Static GET`)),
+			r('div',
+				className(CSS.TableHeading,
+					store.canProxy && CSS.canProxy,
+					!store.groupByMethod && CSS.nonGroupedByMethod),
+				store.groupByMethod ? t`Static GET` : t`Static`),
 			rows.map(StaticRow))
 }
 
 /** @param {StaticBrokerRowModel} row */
 function StaticRow(row) {
-	const { canProxy, groupByMethod } = store
+	const { groupByMethod } = store
 	const [ditto, tail] = row.urlMaskDittoed
 	return (
-		r('tr', {
+		r('div', {
 				key: row.key,
-				...className(render.count > 1 && row.isNew && CSS.animIn)
+				...className(CSS.TableRow,
+					render.count > 1 && row.isNew && CSS.animIn)
 			},
-			canProxy && r('td'),
-			r('td', null,
-				DelayStaticRouteToggler(row.urlMask, row.delayed)),
+			DelayStaticRouteToggler(row.urlMask, row.delayed),
 
-			r('td', null,
-				NotFoundToggler(row.urlMask, row.status === 404)),
+			NotFoundToggler(row.urlMask, row.status === 404),
 
-			!groupByMethod && r('td', className(CSS.Method),
-				'GET'),
+			!groupByMethod && r('span', className(CSS.Method), 'GET'),
 
-			r('td', { colspan: 2 },
-				r('a', {
-					href: row.urlMask,
-					target: '_blank',
-					className: CSS.PreviewLink,
-					'data-focus-group': FocusGroup.PreviewLink
-				}, ditto
-					? [r('span', className(CSS.dittoDir), ditto), tail]
-					: tail))))
+			r('a', {
+				href: row.urlMask,
+				target: '_blank',
+				className: CSS.PreviewLink,
+				'data-focus-group': FocusGroup.PreviewLink
+			}, ditto
+				? [r('span', className(CSS.dittoDir), ditto), tail]
+				: tail)))
 }
 
 function DelayStaticRouteToggler(route, checked) {
 	return ClickDragToggler({
+		optClassName: store.canProxy && CSS.canProxy,
 		checked,
 		focusGroup: FocusGroup.DelayToggler,
 		commit(checked) {
@@ -486,11 +487,11 @@ function NotFoundToggler(route, checked) {
 					store.setStaticRouteStatus(route, this.checked ? 404 : 200)
 				}
 			}),
-			r('span', null, t`404`)))
+			r('span', className(CSS.checkboxBody), t`404`)))
 }
 
 
-function ClickDragToggler({ checked, commit, focusGroup }) {
+function ClickDragToggler({ checked, commit, focusGroup, optClassName }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
 			onPointerDown.call(this)
@@ -509,7 +510,7 @@ function ClickDragToggler({ checked, commit, focusGroup }) {
 	}
 	return (
 		r('label', {
-				className: CSS.DelayToggler,
+				...className(CSS.DelayToggler, optClassName),
 				title: t`Delay`
 			},
 			r('input', {
@@ -542,7 +543,7 @@ function Resizer(ref) {
 	}
 
 	function onMove(event) {
-		const MIN_LEFT_WIDTH = 380
+		const MIN_LEFT_WIDTH = 340
 		raf = raf || requestAnimationFrame(() => {
 			ref.width = Math.max(initialWidth - (initialX - event.clientX), MIN_LEFT_WIDTH) + 'px'
 			ref.elem.style.width = ref.width
@@ -804,7 +805,7 @@ function initKeyboardNavigation() {
 	}
 
 	function rowFocusable(el, step) {
-		const row = el.closest('tr')
+		const row = el.closest(`.${CSS.TableRow}`)
 		if (row) {
 			const focusables = Array.from(row.querySelectorAll('a, input, select:not(:disabled)'))
 			return circularAdjacent(step, focusables, el)
@@ -813,7 +814,7 @@ function initKeyboardNavigation() {
 
 	function allInFocusGroup(focusGroup) {
 		return Array.from(leftSideRef.elem.querySelectorAll(
-			`tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
+			`.${CSS.TableRow} [data-focus-group="${focusGroup}"]:is(input, a)`))
 	}
 
 	function circularAdjacent(step = 1, arr, pivot) {

package/src/client/dom-utils.js

@@ -1,5 +1,7 @@
 export function className(...args) {
-	return { className: args.filter(Boolean).join(' ') }
+	return {
+		className: args.filter(Boolean).join(' ')
+	}
 }
 
 export function createElement(tag, props, ...children) {
@@ -14,8 +16,8 @@ export function createElement(tag, props, ...children) {
 	return elem
 }
 
-export function createSvgElement(tagName, props, ...children) {
-	const elem = document.createElementNS('http://www.w3.org/2000/svg', tagName)
+export function createSvgElement(tag, props, ...children) {
+	const elem = document.createElementNS('http://www.w3.org/2000/svg', tag)
 	for (const [k, v] of Object.entries(props))
 		elem.setAttribute(k, v)
 	elem.append(...children.flat().filter(Boolean))