mockaton 8.1.0 → 8.1.2

package/README.md

@@ -226,7 +226,7 @@ Also, they take precedence over the `GET` mocks in `Config.mockDir`.
 For example, if you have two files for `GET /foo/bar.jpg`
 ```
 my-static-dir/foo/bar.jpg
- my-mocks-dir/foo/bar.jpg.GET.200.jpg // Unreacheable
+my-mocks-dir/foo/bar.jpg.GET.200.jpg // Unreacheable
 ```
 
 Use Case 1: If you have a bunch of static assets you don’t want to add `.GET.200.ext`
@@ -347,17 +347,7 @@ If you don’t want to open a browser, pass a noop, such as
 Config.onReady = () => {}
 ```
 
-On Linux, you could pass:
-```js
-import { exec } from 'node:child_process'
-
-
-Config.onReady = function openInBrowser(address) {
-  exec(`xdg-open ${address}`)
-}
-```
-
-Or, for more cross-platform utility, you could `npm install open` and pass it.
+For a more cross-platform utility, you could `npm install open` and pass it.
 ```js
 import open from 'open'
 
@@ -420,5 +410,3 @@ await mockaton.reset()
 
 ## TODO
 - Refactor Tests
-- Dashboard. Indicate if some file on `staticDir` is overriding a mock.
-- jsonc, json5?

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.1.0",
+	"version": "8.1.2",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Dashboard.js

@@ -36,7 +36,7 @@ const CSS = {
 
 const r = createElement
 const refPayloadViewer = useRef()
-const refPayloadFile = useRef()
+const refPayloadViewerFileTitle = useRef()
 
 const mockaton = new Commander(window.location.origin)
 
@@ -53,13 +53,13 @@ function init() {
 }
 init()
 
-function App([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
+function App(apiResponses) {
 	empty(document.body)
-	createRoot(document.body).render(
-		DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles))
+	createRoot(document.body)
+		.render(DevPanel(apiResponses))
 }
 
-function DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles) {
+function DevPanel([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
 	return (
 		r('div', null,
 			r('menu', null,
@@ -72,33 +72,39 @@ function DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles)
 				r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
 					r(SectionByMethod, { method, brokers }))),
 				r('div', { className: CSS.PayloadViewer },
-					r('h2', { ref: refPayloadFile }, Strings.mock),
+					r('h2', { ref: refPayloadViewerFileTitle }, Strings.mock),
 					r('pre', null,
 						r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview)))),
 			r(StaticFilesList, { staticFiles })))
 }
 
+
 function CookieSelector({ list }) {
+	function onChange() {
+		mockaton.selectCookie(this.value)
+			.catch(console.error)
+	}
 	const disabled = list.length <= 1
 	return (
 		r('label', null,
 			r('span', null, Strings.cookie),
 			r('select', {
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? Strings.cookie_disabled_title : '',
-				onChange() {
-					mockaton.selectCookie(this.value)
-						.catch(console.error)
-				}
-			}, list.map(([key, selected]) =>
-				r('option', {
-					value: key,
-					selected
-				}, key)))))
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? Strings.cookie_disabled_title : '',
+					onChange
+				},
+				list.map(([key, selected]) =>
+					r('option', { value: key, selected }, key)))))
 }
 
+
 function BulkSelector({ comments }) {
+	function onChange() {
+		mockaton.bulkSelectByComment(this.value)
+			.then(init)
+			.catch(console.error)
+	}
 	const disabled = !comments.length
 	const list = disabled
 		? []
@@ -107,34 +113,32 @@ function BulkSelector({ comments }) {
 		r('label', null,
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
-				onChange() {
-					mockaton.bulkSelectByComment(this.value)
-						.then(init)
-						.catch(console.error)
-				}
-			}, list.map(item =>
-				r('option', {
-					value: item
-				}, item)))))
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
+					onChange
+				},
+				list.map(value =>
+					r('option', { value }, value)))))
 }
 
+
 function CorsCheckbox({ corsAllowed }) {
+	function onChange(event) {
+		mockaton.setCorsAllowed(event.currentTarget.checked)
+			.catch(console.error)
+	}
 	return (
 		r('label', { className: CSS.CorsCheckbox },
 			r('input', {
 				type: 'checkbox',
 				checked: corsAllowed,
-				onChange(event) {
-					mockaton.setCorsAllowed(event.currentTarget.checked)
-						.catch(console.error)
-				}
+				onChange
 			}),
 			Strings.allow_cors))
 }
 
+
 function ResetButton() {
 	return (
 		r('button', {
@@ -147,6 +151,7 @@ function ResetButton() {
 	)
 }
 
+
 function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
@@ -177,46 +182,50 @@ function SectionByMethod({ method, brokers }) {
 						r('td', null, r(PreviewLink, { method, urlMask })),
 						r('td', null, r(MockSelector, { broker })),
 						r('td', null, r(DelayRouteToggler, { broker })),
-						r('td', null, r(InternalServerErrorToggler, { broker }))
-					))))
+						r('td', null, r(InternalServerErrorToggler, { broker }))))))
 }
 
+
 function PreviewLink({ method, urlMask }) {
+	async function onClick(event) {
+		event.preventDefault()
+		try {
+			const spinner = setTimeout(() => {
+				empty(refPayloadViewer.current)
+				refPayloadViewer.current.append(ProgressBar())
+			}, 180)
+			const res = await fetch(this.href, {
+				method: this.getAttribute('data-method')
+			})
+			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) {
+			console.error(error)
+		}
+	}
 	return (
 		r('a', {
 			className: CSS.PreviewLink,
 			href: urlMask,
 			'data-method': method,
-			async onClick(event) {
-				event.preventDefault()
-				try {
-					const spinner = setTimeout(() => {
-						empty(refPayloadViewer.current)
-						refPayloadViewer.current.append(ProgressBar())
-					}, 180)
-					const res = await fetch(this.href, {
-						method: this.getAttribute('data-method')
-					})
-					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(refPayloadFile.current)
-					refPayloadFile.current.append(PayloadViewerTitle({
-						file: this.closest('tr').querySelector('select').value
-					}))
-				}
-				catch (error) {
-					console.error(error)
-				}
-			}
+			onClick
 		}, urlMask))
 }
 
+
 function PayloadViewerTitle({ file }) {
 	const { urlMask, method, status, ext } = parseFilename(file)
 	return (
@@ -226,12 +235,14 @@ function PayloadViewerTitle({ file }) {
 			'.' + 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 }))
@@ -246,46 +257,55 @@ function updatePayloadViewer(body, mime) {
 
 
 function MockSelector({ broker }) {
-	const className = (defaultIsSelected, status) => cssClass(
-		CSS.MockSelector,
-		!defaultIsSelected && CSS.bold,
-		status >= 400 && status < 500 && CSS.status4xx)
+	function onChange() {
+		const { status } = 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
+				this.className = className(this.value === this.options[0].value, status)
+			})
+			.catch(console.error)
+	}
 
-	const items = broker.mocks
-	const selected = broker.currentMock.file
 
+	function className(defaultIsSelected, status) {
+		return cssClass(
+			CSS.MockSelector,
+			!defaultIsSelected && CSS.bold,
+			status >= 400 && status < 500 && CSS.status4xx)
+	}
+
+	const selected = broker.currentMock.file
 	const { status } = parseFilename(selected)
-	const files = items.filter(item =>
+	const files = broker.mocks.filter(item =>
 		status === 500 ||
 		!item.includes(DEFAULT_500_COMMENT))
 
 	return (
 		r('select', {
-			className: className(selected === files[0], status),
-			autocomplete: 'off',
-			disabled: files.length <= 1,
-			onChange() {
-				const { status } = 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
-						this.className = className(this.value === this.options[0].value, status)
-					})
-					.catch(console.error)
-			}
-		}, files.map(file => r('option', {
-			value: file,
-			selected: file === selected
-		}, file))))
+				autocomplete: 'off',
+				className: className(selected === files[0], status),
+				disabled: files.length <= 1,
+				onChange
+			},
+			files.map(file =>
+				r('option', {
+					value: file,
+					selected: file === selected
+				}, file))))
 }
 
+
 function DelayRouteToggler({ broker }) {
-	const name = broker.currentMock.file
-	const checked = Boolean(broker.currentMock.delay)
+	function onChange(event) {
+		const { method, urlMask } = parseFilename(this.name)
+		mockaton.setRouteIsDelayed(method, urlMask, event.currentTarget.checked)
+			.catch(console.error)
+	}
 	return (
 		r('label', {
 				className: CSS.DelayToggler,
@@ -293,28 +313,29 @@ function DelayRouteToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				autocomplete: 'off',
-				name,
-				checked,
-				onChange(event) {
-					const { method, urlMask } = parseFilename(this.name)
-					mockaton.setRouteIsDelayed(method, urlMask, event.currentTarget.checked)
-						.catch(console.error)
-				}
+				name: broker.currentMock.file,
+				checked: Boolean(broker.currentMock.delay),
+				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 InternalServerErrorToggler({ broker }) {
-	const items = broker.mocks
-	const name = broker.currentMock.file
-	const checked = parseFilename(broker.currentMock.file).status === 500
+	function onChange(event) {
+		mockaton.select(event.currentTarget.checked
+			? broker.mocks.find(f => parseFilename(f).status === 500)
+			: broker.mocks[0])
+			.then(init)
+			.catch(console.error)
+	}
 	return (
 		r('label', {
 				className: CSS.InternalServerErrorToggler,
@@ -322,16 +343,9 @@ function InternalServerErrorToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				autocomplete: 'off',
-				name,
-				checked,
-				onChange(event) {
-					mockaton.select(event.currentTarget.checked
-						? items.find(f => parseFilename(f).status === 500)
-						: items[0])
-						.then(init)
-						.catch(console.error)
-				}
+				name: broker.currentMock.file,
+				checked: parseFilename(broker.currentMock.file).status === 500,
+				onChange
 			}),
 			r('span', null, '500')
 		)

package/src/Mockaton.js

@@ -38,7 +38,7 @@ async function onRequest(req, response) {
 			methods: Config.corsMethods,
 			maxAge: Config.corsMaxAge,
 			credentials: Config.corsCredentials,
-			exposedHeaders: Config.extraHeaders
+			exposedHeaders: Config.corsExposedHeaders
 		})
 
 	const { url, method } = req

package/src/utils/http-cors.js

@@ -62,6 +62,7 @@ function setPreflightSpecificHeaders(req, response, methods, headers, maxAge) {
 }
 
 
+// TESTME
 function setActualRequestHeaders(response, exposedHeaders) {
 	// Exposed means the client-side JavaScript can read them
 	if (exposedHeaders.length)