mockaton 8.7.0 → 8.7.2

package/README.md

@@ -5,27 +5,27 @@
 
 ## Mock your APIs, Enhance your Development Workflow
 
-Welcome to developer experience tooling! Mockaton is here to help
-make your frontend development and testing easier—and a lot more fun.
+Mockaton is an HTTP mock server with the goal of making
+your frontend development and testing easier—and a lot more fun.
 
-With Mockaton you don’t need to write code for wiring your mocks. Instead, just
-place your mocks in a directory and let Mockaton do the rest. It will automatically
-scan the directory for filenames that follow a convention similar to the URL paths.
+With Mockaton you don’t need to write code for wiring your mocks.
+Instead, just place your mocks in a directory, and it will scan it
+for filenames that follow a convention similar to the URL paths.
 
 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. 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.
+## Scrapping Mocks from you Backend
+
+Mockaton can fallback to your real backend on routes you don’t have mocks for. That’s
+done by typing your backend address in the **Fallback Backend** field. And if you
+check **Save Mocks**, you can collect those responses that hit your backend.
+Those mocks will be saved to your `config.mocksDir` following the filename convention.
 
 
 ## Multiple Mock Variants
-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
@@ -214,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
@@ -269,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`
@@ -285,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`
@@ -298,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 =>
@@ -377,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.
 
 
@@ -392,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.
 

package/package.json

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

package/src/Dashboard.css

@@ -84,7 +84,7 @@ select {
 	}
 }
 
-menu {
+.Header {
 	position: fixed;
 	z-index: 100;
 	top: 0;
@@ -153,6 +153,11 @@ menu {
 		}
 	}
 
+	.BulkSelector {
+		appearance: none;
+		text-align: center;
+	}
+
 	.ResetButton {
 		padding: 4px 12px;
 		border: 1px solid var(--colorRed);
@@ -171,7 +176,7 @@ menu {
 }
 
 
-main {
+.MockList {
 	display: flex;
 	align-items: flex-start;
 	margin-top: 64px;
@@ -189,6 +194,10 @@ main {
 			border-top: 1px solid transparent;
 		}
 	}
+
+	&.empty {
+		margin-top: 80px;
+	}
 }
 
 

package/src/Dashboard.js

@@ -16,17 +16,20 @@ const Strings = {
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
+	pick: 'Pick…',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	select_one: 'Select One',
 	static: 'Static'
 }
 
 const CSS = {
+	BulkSelector: 'BulkSelector',
 	DelayToggler: 'DelayToggler',
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
+	Header: 'Header',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
+	MockList: 'MockList',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
@@ -36,6 +39,7 @@ const CSS = {
 	StaticFilesList: 'StaticFilesList',
 
 	bold: 'bold',
+	empty: 'empty',
 	chosen: 'chosen',
 	status4xx: 'status4xx'
 }
@@ -55,45 +59,50 @@ 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),
@@ -102,25 +111,29 @@ function CookieSelector({ list }) {
 				disabled,
 				title: disabled ? Strings.cookie_disabled_title : '',
 				onChange
-			}, list.map(([value, selected]) =>
+			}, cookies.map(([value, selected]) =>
 				r('option', { value, selected }, value)))))
 }
 
-
 function BulkSelector({ comments }) {
+	// UX wise this should be a menu instead of this `select`.
+	// But this way is easier to implement, with a few hacks.
 	function onChange() {
-		mockaton.bulkSelectByComment(this.value)
+		const value = this.value
+		this.value = Strings.pick // Hack 
+		mockaton.bulkSelectByComment(value)
 			.then(init)
 			.catch(onError)
 	}
 	const disabled = !comments.length
 	const list = disabled
 		? []
-		: [Strings.select_one].concat(comments)
+		: [Strings.pick].concat(comments)
 	return (
 		r('label', { className: CSS.Field },
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
+				className: CSS.BulkSelector,
 				'data-qaid': 'BulkSelector',
 				autocomplete: 'off',
 				disabled,
@@ -130,7 +143,6 @@ function BulkSelector({ comments }) {
 				r('option', { value }, value)))))
 }
 
-
 function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 	const refSaveProxiedCheckbox = useRef()
 	function onChange(event) {
@@ -139,8 +151,7 @@ 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: cssClass(CSS.Field, CSS.FallbackBackend) },
@@ -160,7 +171,6 @@ function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 			})))
 }
 
-
 function SaveProxiedCheckbox({ ref, disabled, collectProxied }) {
 	function onChange(event) {
 		mockaton.setCollectProxied(event.currentTarget.checked)
@@ -178,7 +188,6 @@ function SaveProxiedCheckbox({ ref, disabled, collectProxied }) {
 			r('span', null, Strings.save_proxied)))
 }
 
-
 function ResetButton() {
 	return (
 		r('button', {
@@ -192,18 +201,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)))
 }
 
 
@@ -227,25 +238,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 })
+
+			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: mockSelectorFor(method, urlMask).value
-			}))
 		}
 		catch (error) {
 			onError(error)
@@ -260,37 +262,14 @@ function PreviewLink({ method, 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, urlMask, method } = parseFilename(this.value)
 		this.style.fontWeight = this.value === this.options[0].value // default is selected
@@ -305,13 +284,6 @@ function MockSelector({ broker }) {
 			.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 =>
@@ -351,13 +323,12 @@ 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' })))
+	}
 }
 
 
@@ -387,6 +358,54 @@ 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}"]`)
 }
@@ -401,6 +420,25 @@ function mockSelectorFor(method, urlMask) {
 }
 
 
+
+// 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')
 		alert('Looks like the Mockaton server is not running')
@@ -408,7 +446,9 @@ function onError(error) {
 }
 
 
-/* === Utils === */
+
+// Utils ============
+
 function cssClass(...args) {
 	return args.filter(a => a).join(' ')
 }