mockaton 8.11.4 → 8.11.5

package/README.md

@@ -3,26 +3,35 @@
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 ![NPM Version](https://img.shields.io/npm/l/mockaton)
 
-HTTP mock server for developing and testing frontends.
-
-## Convention over Code
 
 With Mockaton you don’t need to write code for wiring mocks. Instead, it scans a
-given directory for mock filenames following a convention similar to the URLs.
+given directory for filenames following a convention similar to the URLs.
 
-For example, for <code>/<b>api/user</b>/1234</code> the mock filename would be:
+For example, for <code>/<b>api/user</b>/1234</code> the filename would be:
 <pre>
 <code>my-mocks-dir/<b>api/user</b>/[user-id].GET.200.json</code>
 </pre>
 
-## Multiple Mock Variants
-You can have different mocks for a particular route by adding
-comments and/or using different status codes.
 
+On the dashboard you can select a mock variant for a particular route, delaying responses,
+and triggering an autogenerated `500` (Internal Server Error), among other features.
+
+Nonetheless, there’s a programmatic API, which is handy
+for setting up tests. See **Commander&nbsp;API** section.
+
+<picture>
+  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp840x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp840x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp840x800.light.gold.png">
+</picture>
+
+
+## Multiple Mock Variants
+Each route can have different mocks. There’s two options for doing that:
 
-### Adding comments in filenames
-Comments are anything within parentheses, including them. They
-are ignored for URL purposes, so you can add as many as you want.
+### Adding comments to the filename
+Comments are anything within parentheses,
+including them. A filename can have many comments.
 
 <pre>
 api/login<b>(locked out user)</b>.POST.423.json
@@ -31,18 +40,19 @@ api/login<b>(invalid login attempt)</b>.POST.401.json
 
 ### Different response status code
 For instance, using a `4xx` or `5xx` status code for triggering error
-responses. Or `2xx` such as `204` (No Content) for testing collections without records.
+responses. Or a `2xx` such as `204` (No Content) for testing empty collections.
 
 <pre>
-api/videos.GET.<b>204</b>.json
+api/videos(empty list).GET.<b>204</b>.json
 api/videos.GET.<b>403</b>.json
-api/videos.GET.<b>500</b>.empty
+api/videos.GET.<b>500</b>.txt
 </pre>
 
 
+
 ## Fallback to your Backend
-Mockaton can fallback to your real backend on routes you don’t have
-mocks for, or on routes that have the ☁️ **Cloud Checkbox** checked.
+No need to mock everything. Mockaton can request from your backend the routes
+you don’t have mocks for, or routes that have the ☁️ **Cloud Checkbox** checked.
 
 
 ### Scrapping Mocks from your Backend
@@ -51,23 +61,11 @@ They will be saved on your `config.mocksDir` following the filename convention.
 
 
 
-## Dashboard
-On the dashboard you can select a mock variant for a particular route, delaying responses,
-and triggering an autogenerated `500` (Internal Server Error), among other features.
-
-Nonetheless, there’s a programmatic API see
-**Commander&nbsp;API** below, which is handy setting up tests.
-
-<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>
-
-
-
 ## Basic Usage
+Mockaton is a Node.js program with no build or runtime NPM dependencies.
+
 `tsx` is only needed if you want to write mocks in TypeScript.
+
 ```sh
 npm install mockaton tsx --save-dev
 ```
@@ -91,7 +89,7 @@ node --import=tsx my-mockaton.js
 
 ## Demo App (Vite)
 
-This is a minimal React + Vite + Mockaton app. It’s mainly a list of
+This is a minimal React + Vite + Mockaton app. It’s a list of
 colors, which contains all of their possible states. For example,
 permutations for out-of-stock, new-arrival, and discontinued.
 
@@ -282,7 +280,7 @@ documenting the URL contract.
 api/video<b>?limit=[limit]</b>.GET.200.json
 </pre>
 
-Speaking of which, on Windows filenames containing "?" are [not
+On Windows filenames containing "?" are [not
 permitted](https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file), but since that’s part of the query string it’s ignored anyway.
 
 
@@ -369,10 +367,11 @@ Mockaton’s predefined list. For that, you can add it to <code>config.extraMime
 Files under `config.staticDir` don’t use the filename convention.
 They take precedence over the `GET` mocks in `config.mocksDir`.
 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
-```
+
+<pre>
+my-static-dir<b>/foo/bar.jpg</b>
+ my-mocks-dir<b>/foo/bar.jpg</b>.GET.200.jpg // Unreacheable
+</pre>
 
 
 ### `cookies?: { [label: string]: string }`

package/package.json

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

package/src/Dashboard.css

@@ -1,6 +1,6 @@
 :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: 28px;
+	--radius: 6px;
 	--radiusSmall: 4px;
 }
 
@@ -17,7 +17,7 @@
 		--colorSecondaryAction: #555;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
-		--colorLabel: #555;
+		--colorLabel: #444;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
 		--colorText: #000;
@@ -89,7 +89,7 @@ select {
 	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
 	background-color: var(--colorComboBoxBackground);
 	background-size: 16px;
-	background-position: 98% center;
+	background-position: 100% center;
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
@@ -115,12 +115,12 @@ select {
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
-	gap: 6px;
+	gap: 10px;
 
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 20px;
+		margin-right: 22px;
 	}
 
 	.Field {
@@ -129,7 +129,6 @@ select {
 		span {
 			display: flex;
 			align-items: center;
-			margin-left: 6px;
 			color: var(--colorLabel);
 			font-size: 11px;
 			gap: 4px;
@@ -149,9 +148,9 @@ select {
 		select {
 			width: 100%;
 			height: 28px;
-			padding: 4px 12px;
+			padding: 4px 8px;
 			border-right: 3px solid transparent;
-			margin-top: 3px;
+			margin-top: 4px;
 			color: var(--colorText);
 			font-size: 11px;
 			box-shadow: var(--boxShadow1);
@@ -164,7 +163,7 @@ select {
 		}
 
 		&.GlobalDelayField {
-			width: 88px;
+			width: 84px;
 
 			input[type=number] {
 				padding-right: 0;
@@ -181,7 +180,7 @@ select {
 
 		&.FallbackBackend {
 			position: relative;
-			width: 212px;
+			width: 210px;
 
 			.SaveProxiedCheckbox {
 				position: absolute;
@@ -194,10 +193,6 @@ select {
 				font-size: 11px;
 				gap: 4px;
 
-				span {
-					margin-left: 0;
-				}
-
 				input:disabled + span {
 					opacity: 0.8;
 				}
@@ -243,7 +238,7 @@ select {
 		}
 
 		tr {
-			border-top: 1px solid transparent;
+			border-top: 2px solid transparent;
 		}
 	}
 
@@ -282,10 +277,10 @@ select {
 
 .PreviewLink {
 	position: relative;
-	left: -10px;
+	left: -6px;
 	display: inline-block;
-	width: 282px;
-	padding: 8px 11px;
+	width: 272px;
+	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
@@ -302,14 +297,14 @@ select {
 .MockSelector {
 	width: 260px;
 	height: 30px;
-	padding-right: 11px;
-	padding-left: 17px;
+	padding-right: 5px;
+	padding-left: 16px;
 	border: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	background-position: 5px center;
+	background-position: 2px center;
 
 	&.nonDefault {
 		font-weight: bold;
@@ -319,7 +314,7 @@ select {
 		background: var(--color4xxBackground);
 	}
 	&:disabled {
-		padding-right: 10px;
+		padding-right: 4px;
 		appearance: none;
 		background: transparent;
 		cursor: default;
@@ -368,8 +363,8 @@ select {
 	}
 
 	> svg {
-		width: 20px;
-		height: 20px;
+		width: 18px;
+		height: 18px;
 		stroke-width: 2.5px;
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
@@ -377,7 +372,7 @@ select {
 }
 
 .ProxyToggler {
-	padding: 1px 4px;
+	padding: 1px 3px;
 	background: var(--colorSecondaryButtonBackground);
 	border-radius: var(--radiusSmall);
 
@@ -425,7 +420,7 @@ select {
 
 .InternalServerErrorToggler {
 	display: flex;
-	margin-left: 6px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {
@@ -445,7 +440,7 @@ select {
 	}
 
 	> span {
-		padding: 5px 4px;
+		padding: 4px;
 		font-size: 10px;
 		font-weight: bold;
 		color: var(--colorSecondaryAction);

package/src/ProxyRelay.js

@@ -21,7 +21,7 @@ export async function proxy(req, response, delay) {
 	headers['set-cookie'] = proxyResponse.headers.getSetCookie() // parses multiple into an array
 	response.writeHead(proxyResponse.status, headers)
 	const body = await proxyResponse.text()
-	setTimeout(() => response.end(body), delay) // TESTME
+	setTimeout(() => response.end(body), delay) // TESTME (Note that when the proxy fails e.g. wrong addr it doesn't delay)
 
 	if (config.collectProxied) {
 		const ext = extFor(proxyResponse.headers.get('content-type'))