mockaton 8.8.0 → 8.8.2

package/README.md

@@ -15,12 +15,27 @@ For example, for `/api/user/1234` the mock filename would be:
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
+
+## Dashboard
+In the dashboard you can select a mock variant for a particular route, among
+other features such as delaying responses, or triggering an autogenerated
+`500` (Internal Server Error). Nonetheless, there’s a programmatic API,
+which is handy for setting up tests  (see **Commander API** below).
+
+<picture>
+  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp830x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
+</picture>
+
+
+
 ## No Need to Mock Everything
 Mockaton can fallback to your real backend on routes you don’t have mocks
 for. For that, type your backend address in the **Fallback Backend** field.
 
-Similarly, if already have mocks for a route you can check the ☁️ **Cloud
-checkbox** and Mockaton will request it from your backend.
+Similarly, if you already have mocks for a route you can check the
+☁️ **Cloud checkbox** and that route will be requested from your backend.
 
 
 ## Scrapping Mocks from you Backend
@@ -43,19 +58,6 @@ For instance, you can have mocks with a `4xx` or `5xx` status code for triggerin
 error responses. Or with a `204` (No Content) for testing empty collections.
 
 
-## Dashboard
-In the dashboard you can select a mock variant for a particular route, among
-other features such as delaying responses, or triggering an autogenerated
-`500` (Internal Server Error). Nonetheless, there’s a programmatic API,
-which is handy for setting up tests  (see **Commander API** below).
-
-<picture>
-  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp860x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
-</picture>
-
-
 
 ## Basic Usage
 `tsx` is only needed if you want to write mocks in TypeScript.

package/package.json

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

package/src/Dashboard.css

@@ -1,13 +1,14 @@
 :root {
 	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-	--radius: 6px
+	--radius: 4px;
+	--radiusSmall: 2px;
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0075db;
-		--colorAccentAlt: #068564;
+		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #f7f7f7;
@@ -183,13 +184,14 @@ select {
 	}
 
 	.ResetButton {
-		padding: 4px 12px;
+		padding: 6px 12px;
 		border: 1px solid var(--colorRed);
-		margin-bottom: 4px;
+		margin-left: 4px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
 
+
 		&:hover {
 			background: var(--colorRed);
 			color: white;
@@ -255,7 +257,7 @@ select {
 	position: relative;
 	left: -6px;
 	display: inline-block;
-	width: 300px;
+	width: 278px;
 	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
@@ -280,6 +282,10 @@ select {
 	text-overflow: ellipsis;
 	font-size: 12px;
 
+	&.nonDefault {
+		font-weight: bold;
+		font-size: 0.92rem;
+	}
 	&.status4xx {
 		background: var(--color4xxBackground);
 	}
@@ -315,32 +321,37 @@ select {
 		}
 
 		&:checked ~ svg {
+			border-color: transparent;
 			background: var(--colorAccent);
 			fill: white;
+			box-shadow: var(--boxShadow1);
 		}
 
 		&:disabled ~ svg {
 			opacity: .5;
 			cursor: not-allowed;
+			box-shadow: none;
 		}
 	}
 
 	> svg {
-		width: 20px;
-		height: 20px;
+		width: 18px;
+		height: 18px;
+		border: 1px solid var(--colorSecondaryAction);
 		vertical-align: bottom;
 		fill: var(--colorSecondaryAction);
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
 	}
 }
 
 .ProxyToggler {
+	margin-left: 4px;
 	> svg {
-		width: 24px;
-		padding: 3px;
-		border-radius: 4px;
+		width: 22px;
+		padding: 1px;
+		border-color: transparent;
+		border-radius: var(--radiusSmall);
 	}
 }
 
@@ -362,18 +373,19 @@ select {
 		&:checked ~ span {
 			color: white;
 			background: var(--colorRed);
+			box-shadow: var(--boxShadow1);
 		}
 	}
 
 	> span {
 		padding: 5px 4px;
-		box-shadow: var(--boxShadow1);
 		font-size: 10px;
 		color: var(--colorSecondaryAction);
-		border-radius: 4px;
+		border-radius: var(--radiusSmall);
 		background: var(--colorSecondaryButtonBackground);
 
 		&:hover {
+			box-shadow: var(--boxShadow1);
 			background: var(--colorLightRed);
 			color: var(--colorRed);
 		}
@@ -406,10 +418,6 @@ select {
 	}
 }
 
-.bold {
-	font-weight: bold;
-}
-
 .StaticFilesList {
 	margin-top: 20px;
 

package/src/Dashboard.js

@@ -16,11 +16,12 @@ const Strings = {
 	bulk_select_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
 	click_link_to_preview: 'Click a link to preview it',
 	cookie: 'Cookie',
-	cookie_disabled_title: 'No cookies specified in Config.cookies',
+	cookie_disabled_title: 'No cookies specified in config.cookies',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback Backend',
 	fallback_server_placeholder: 'Type Server Address',
+	got: 'Got',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
@@ -49,10 +50,10 @@ const CSS = {
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
 
-	bold: 'bold',
 	empty: 'empty',
 	chosen: 'chosen',
-	status4xx: 'status4xx'
+	status4xx: 'status4xx',
+	nonDefault: 'nonDefault'
 }
 
 const r = createElement
@@ -105,8 +106,7 @@ function Logo() {
 
 function CookieSelector({ cookies }) {
 	function onChange() {
-		mockaton.selectCookie(this.value)
-			.catch(onError)
+		mockaton.selectCookie(this.value).catch(onError)
 	}
 	const disabled = cookies.length <= 1
 	return (
@@ -165,9 +165,7 @@ function ProxyFallbackField({ fallbackAddress, collectProxied }) {
 	return (
 		r('div', { className: cssClass(CSS.Field, CSS.FallbackBackend) },
 			r('label', null,
-				r('span', null,
-					r(CloudIcon),
-					Strings.fallback_server),
+				r('span', null, r(CloudIcon), Strings.fallback_server),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
@@ -267,9 +265,6 @@ function PreviewLink({ method, urlMask }) {
 function MockSelector({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(this.value)
-		this.style.fontWeight = this.value === this.options[0].value // default is selected
-			? 'normal'
-			: 'bold'
 		mockaton.select(this.value)
 			.then(init)
 			.then(() => linkFor(method, urlMask)?.click())
@@ -288,14 +283,14 @@ function MockSelector({ broker }) {
 
 	return (
 		r('select', {
-			'data-qaid': urlMask,
+			onChange,
 			autocomplete: 'off',
+			'data-qaid': urlMask,
+			disabled: files.length <= 1,
 			className: cssClass(
 				CSS.MockSelector,
-				selected !== files[0] && CSS.bold,
-				status >= 400 && status < 500 && CSS.status4xx),
-			disabled: files.length <= 1,
-			onChange
+				selected !== files[0] && CSS.nonDefault,
+				status >= 400 && status < 500 && CSS.status4xx)
 		}, files.map(file =>
 			r('option', {
 				value: file,
@@ -303,12 +298,10 @@ function MockSelector({ broker }) {
 			}, file))))
 }
 
-
 function DelayRouteToggler({ broker }) {
 	function onChange() {
-		const { method, urlMask } = parseFilename(this.name)
-		mockaton.setRouteIsDelayed(method, urlMask, this.checked)
-			.catch(onError)
+		const { method, urlMask } = parseFilename(broker.mocks[0])
+		mockaton.setRouteIsDelayed(method, urlMask, this.checked).catch(onError)
 	}
 	return (
 		r('label', {
@@ -317,7 +310,6 @@ function DelayRouteToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				name: broker.currentMock.file,
 				checked: Boolean(broker.currentMock.delay),
 				onChange
 			}),
@@ -347,14 +339,13 @@ function InternalServerErrorToggler({ broker }) {
 				checked: parseFilename(broker.currentMock.file).status === 500,
 				onChange
 			}),
-			r('span', null, '500')
-		)
-	)
+			r('span', null, '500')))
 }
 
+
 function ProxyToggler({ broker, disabled }) {
 	function onChange() {
-		const { urlMask, method } = parseFilename(this.name)
+		const { urlMask, method } = parseFilename(broker.mocks[0])
 		mockaton.setRouteIsProxied(method, urlMask, this.checked)
 			.then(init)
 			.then(() => linkFor(method, urlMask)?.click())
@@ -368,7 +359,6 @@ function ProxyToggler({ broker, disabled }) {
 			r('input', {
 				type: 'checkbox',
 				disabled,
-				name: broker.currentMock.file,
 				checked: !broker.currentMock.file,
 				onChange
 			}),
@@ -396,14 +386,21 @@ function PayloadViewerProgressBar() {
 			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
 }
 
-function PayloadViewerTitle({ file }) {
-	const { urlMask, method, status, ext } = parseFilename(file)
+function PayloadViewerTitle({ file, status, statusText }) {
+	const { urlMask, method, ext } = parseFilename(file)
 	return (
 		r('span', null,
 			urlMask + '.' + method + '.',
-			r('abbr', { title: HttpStatus[status] }, status),
+			r('abbr', { title: statusText }, status),
 			'.' + ext))
 }
+function PayloadViewerTitleWhenProxied({ mime, status, statusText }) {
+	return (
+		r('span', null,
+			Strings.got + ' ',
+			r('abbr', { title: statusText }, status),
+			' ' + mime))
+}
 
 async function previewMock(method, urlMask, href) {
 	const timer = setTimeout(renderProgressBar, 180)
@@ -417,10 +414,22 @@ async function previewMock(method, urlMask, href) {
 }
 
 async function updatePayloadViewer(method, urlMask, response) {
-	payloadViewerTitleRef.current.replaceChildren(
-		PayloadViewerTitle({ file: mockSelectorFor(method, urlMask).value }))
-
 	const mime = response.headers.get('content-type') || ''
+
+	const file = mockSelectorFor(method, urlMask).value
+	if (file === Strings.proxied)
+		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
+			status: response.status,
+			statusText: response.statusText,
+			mime
+		}))
+	else
+		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitle({
+			status: response.status,
+			statusText: response.statusText,
+			file
+		}))
+
 	if (mime.startsWith('image/')) { // Naively assumes GET.200
 		payloadViewerRef.current.replaceChildren(
 			r('img', {
@@ -447,9 +456,6 @@ function trFor(method, urlMask) {
 function linkFor(method, urlMask) {
 	return trFor(method, urlMask)?.querySelector(`a.${CSS.PreviewLink}`)
 }
-function checkbox500For(method, urlMask) {
-	return trFor(method, urlMask)?.querySelector(`.${CSS.InternalServerErrorToggler} > input`)
-}
 function mockSelectorFor(method, urlMask) {
 	return trFor(method, urlMask)?.querySelector(`select.${CSS.MockSelector}`)
 }
@@ -473,6 +479,7 @@ function StaticFilesList({ staticFiles }) {
 }
 
 
+// Misc ===============
 
 function onError(error) {
 	if (error?.message === 'Failed to fetch')
@@ -480,7 +487,6 @@ function onError(error) {
 	console.error(error)
 }
 
-
 function TimerIcon() {
 	return (
 		r('svg', { viewBox: '0 0 24 24' },
@@ -540,91 +546,3 @@ function createSvgElement(tagName, props, ...children) {
 function useRef() {
 	return { current: null }
 }
-
-const HttpStatus = {
-	100: 'Continue',
-	101: 'Switching Protocols',
-	102: 'Processing',
-	103: 'Early Hints',
-	200: 'OK',
-	201: 'Created',
-	202: 'Accepted',
-	203: 'Non-Authoritative Information',
-	204: 'No Content',
-	205: 'Reset Content',
-	206: 'Partial Content',
-	207: 'Multi-Status',
-	208: 'Already Reported',
-	218: 'This is fine (Apache Web Server)',
-	226: 'IM Used',
-	300: 'Multiple Choices',
-	301: 'Moved Permanently',
-	302: 'Found',
-	303: 'See Other',
-	304: 'Not Modified',
-	306: 'Switch Proxy',
-	307: 'Temporary Redirect',
-	308: 'Resume Incomplete',
-	400: 'Bad Request',
-	401: 'Unauthorized',
-	402: 'Payment Required',
-	403: 'Forbidden',
-	404: 'Not Found',
-	405: 'Method Not Allowed',
-	406: 'Not Acceptable',
-	407: 'Proxy Authentication Required',
-	408: 'Request Timeout',
-	409: 'Conflict',
-	410: 'Gone',
-	411: 'Length Required',
-	412: 'Precondition Failed',
-	413: 'Request Entity Too Large',
-	414: 'Request-URI Too Long',
-	415: 'Unsupported Media Type',
-	416: 'Requested Range Not Satisfiable',
-	417: 'Expectation Failed',
-	418: 'I’m a teapot',
-	419: 'Page Expired (Laravel Framework)',
-	420: 'Method Failure (Spring Framework)',
-	421: 'Misdirected Request',
-	422: 'Unprocessable Entity',
-	423: 'Locked',
-	424: 'Failed Dependency',
-	426: 'Upgrade Required',
-	428: 'Precondition Required',
-	429: 'Too Many Requests',
-	431: 'Request Header Fields Too Large',
-	440: 'Login Time-out',
-	444: 'Connection Closed Without Response',
-	449: 'Retry With',
-	450: 'Blocked by Windows Parental Controls',
-	451: 'Unavailable For Legal Reasons',
-	494: 'Request Header Too Large',
-	495: 'SSL Certificate Error',
-	496: 'SSL Certificate Required',
-	497: 'HTTP Request Sent to HTTPS Port',
-	498: 'Invalid Token (Esri)',
-	499: 'Client Closed Request',
-	500: 'Internal Server Error',
-	501: 'Not Implemented',
-	502: 'Bad Gateway',
-	503: 'Service Unavailable',
-	504: 'Gateway Timeout',
-	505: 'HTTP Version Not Supported',
-	506: 'Variant Also Negotiates',
-	507: 'Insufficient Storage',
-	508: 'Loop Detected',
-	509: 'Bandwidth Limit Exceeded',
-	510: 'Not Extended',
-	511: 'Network Authentication Required',
-	520: 'Unknown Error',
-	521: 'Web Server Is Down',
-	522: 'Connection Timed Out',
-	523: 'Origin Is Unreachable',
-	524: 'A Timeout Occurred',
-	525: 'SSL Handshake Failed',
-	526: 'Invalid SSL Certificate',
-	527: 'Railgun Listener to Origin Error',
-	530: 'Origin DNS Error',
-	598: 'Network Read Timeout Error'
-}

package/src/mockaton-logo.svg

@@ -2,7 +2,7 @@
 <svg version="1.1" viewBox="0 0 570 100" xmlns="http://www.w3.org/2000/svg">
 	<style>
 		:root { --color: #000000; }
-		@media (prefers-color-scheme: light) { :root { --color: #555 } }
+		@media (prefers-color-scheme: light) { :root { --color: #444 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
 		path { fill: var(--color) }
 	</style>