mockaton 8.0.3 → 8.1.0

package/README.md

@@ -15,7 +15,7 @@ can be used for downloading a TAR of your XHR requests following that convention
 
 ## Getting Started Demo
 - Checkout this repo
-- `npm install tsx`
+- `npm install tsx` (optional)
 - `npm run demo:ts`
   which will open the following dashboard
 - Explore the [sample-mocks/](./sample-mocks) directory
@@ -47,7 +47,7 @@ _Reset_ button is for registering newly added, removed, or renamed mocks.
   - Similarly, it allows for checking out long-lived branches that have old API contracts
 
 ## Motivation
-- Avoids having to spin up and maintain hefty or complex backends when developing UIs.
+- Avoids spinning up and maintaining hefty backends when developing UIs.
 - For a deterministic and comprehensive backend state. For example, having all the possible
   state variants of a collection helps for spotting inadvertent bugs.
 
@@ -177,7 +177,7 @@ but since that’s part of the query string, it’s ignored anyway.
 
 
 ### Index-like route
-For instance, let's say you have `api/foo/bar`, and
+For instance, let’s say you have `api/foo/bar`, and
 `api/foo`. For the latter you have two options:
 
 **Option A.** Place it outside the directory:
@@ -207,11 +207,6 @@ Defaults to `0`, which means auto-assigned
 Defaults to `/(\.DS_Store|~)$/`
 
 
-### `proxyFallback?: string`
-Lets you specify a target server for serving routes you don’t have mocks for.
-For example, `Config.proxyFallback = 'http://example.com:8080'`
-
-
 ### `delay?: number` 🕓
 The clock icon next to the mock selector is a checkbox for delaying a
 particular response. They are handy for testing spinners.
@@ -219,6 +214,11 @@ particular response. They are handy for testing spinners.
 The delay is globally configurable via `Config.delay = 1200` (milliseconds).
 
 
+### `proxyFallback?: string`
+Lets you specify a target server for serving routes you don’t have mocks for.
+For example, `Config.proxyFallback = 'http://example.com:8080'`
+
+
 ### `staticDir?: string`
 Files under `Config.staticDir` don’t use the filename convention.
 Also, they take precedence over the `GET` mocks in `Config.mockDir`.
@@ -305,7 +305,7 @@ import { jsToJsonPlugin } from 'mockaton'
 
 Config.plugins = [
   [/\.(js|ts)$/, jsToJsonPlugin], // Default 
-  [/\.yaml$/, yamlToJsonPlugin],
+  [/\.yml$/, yamlToJsonPlugin],
   [/foo\.GET\.200\.txt$/, capitalizePlugin], // e.g. GET /api/foo would be capitalized
 ]
 
@@ -328,7 +328,7 @@ function capitalizePlugin(filePath) {
 ### `corsAllowed?: boolean`
 Defaults to `corsAllowed = false`
 
-When `corsAllowed === true`, these are the default options:
+When `Config.corsAllowed === true`, these are the default options:
 ```js
 Config.corsOrigins = ['*']
 Config.corsMethods = ['GET', 'PUT', 'DELETE', 'POST', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT']

package/package.json

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

package/src/Dashboard.css

@@ -5,7 +5,8 @@
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #1e88e5;
+		--colorAccent: #0072d6;
+		--colorAccentAlt: #01873b;
 		--colorBackground: #fff;
 		--colorHeaderBackground: #f4f4f4;
 		--colorComboBoxBackground: #fafafa;
@@ -23,6 +24,7 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #1f91ff;
+		--colorAccentAlt: #00E676;
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
@@ -286,7 +288,7 @@ main {
 .ProgressBar {
 	position: relative;
 	width: 100%;
-	height: 16px;
+	height: 2px;
 	background: var(--colorComboBoxHeaderBackground);
 
 	div {
@@ -295,7 +297,7 @@ main {
 		left: 0;
 		height: 100%;
 		background: var(--colorAccent);
-		animation: _kfProgress;
+		animation-name: _kfProgress;
 		/*animation-duration: It's in JavaScript */
 	}
 
@@ -328,7 +330,7 @@ main {
 	a {
 		display: inline-block;
 		padding: 6px 0;
-		color: var(--colorAccent);
+		color: var(--colorAccentAlt);
 		text-decoration: none;
 
 		&:hover {

package/src/Dashboard.html

@@ -6,7 +6,7 @@
 	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="description" content="Mock Server for developing UIs">
-	<title>Mock Server</title>
+	<title>Mockaton</title>
 </head>
 <body>
 <script src="/Dashboard.js" type="module"></script>

package/src/Dashboard.js

@@ -6,16 +6,17 @@ import { DEFAULT_500_COMMENT } from '/ApiConstants.js'
 const Strings = {
 	allow_cors: 'Allow CORS',
 	bulk_select_by_comment: 'Bulk Select by Comment',
+	bulk_select_by_comment_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',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	reset: 'Reset',
 	select_one: 'Select One',
-	static: 'Static',
-	title: 'Mockaton'
+	static: 'Static'
 }
 
 const CSS = {
@@ -59,7 +60,6 @@ function App([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
 }
 
 function DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles) {
-	document.title = Strings.title
 	return (
 		r('div', null,
 			r('menu', null,
@@ -79,12 +79,14 @@ function DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles)
 }
 
 function CookieSelector({ list }) {
+	const disabled = list.length <= 1
 	return (
 		r('label', null,
 			r('span', null, Strings.cookie),
 			r('select', {
 				autocomplete: 'off',
-				disabled: list.length <= 1,
+				disabled,
+				title: disabled ? Strings.cookie_disabled_title : '',
 				onChange() {
 					mockaton.selectCookie(this.value)
 						.catch(console.error)
@@ -107,6 +109,7 @@ function BulkSelector({ comments }) {
 			r('select', {
 				autocomplete: 'off',
 				disabled,
+				title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
 				onChange() {
 					mockaton.bulkSelectByComment(this.value)
 						.then(init)
@@ -202,7 +205,10 @@ function PreviewLink({ method, urlMask }) {
 						renderPayloadImage(this.href)
 					else
 						updatePayloadViewer(await res.text() || Strings.empty_response_body, mime)
-					refPayloadFile.current.innerText = this.closest('tr').querySelector('select').value
+					empty(refPayloadFile.current)
+					refPayloadFile.current.append(PayloadViewerTitle({
+						file: this.closest('tr').querySelector('select').value
+					}))
 				}
 				catch (error) {
 					console.error(error)
@@ -211,6 +217,15 @@ function PreviewLink({ method, urlMask }) {
 		}, 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 },
@@ -382,3 +397,91 @@ 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/Filename.js

@@ -39,7 +39,8 @@ export function parseFilename(file) {
 	return {
 		urlMask: '/' + removeTrailingSlash(tokens.slice(0, -3).join('.')),
 		method: tokens.at(-3),
-		status: Number(tokens.at(-2))
+		status: Number(tokens.at(-2)),
+		ext: tokens.at(-1)
 	}
 }