mockaton 8.20.3 → 8.21.0

package/README.md

@@ -19,11 +19,16 @@ With Mockaton, developers can achieve correctness without sacrificing speed.
 - Enables testing of complex scenarios that would otherwise be
   skipped. For example, triggering an error on a third-party API. Or if
   you are a frontend developer, triggering it on your project’s backend.
-- Allows for deterministic, comprehensive, and consistent state.
+- Allows for deterministic, comprehensive, and consistent state, which helps
+  spot inadvertent regressions during development, or for setting up screenshot
+  tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton).
 
 ### Speed
 - Prevents progress from being blocked by waiting for APIs.
 - Avoids spinning up and updating hefty backends when developing UIs.
+- Time travel. If you commit the mocks to your repo, it’s straightforward
+  to check out long-lived branches and bisect bugs, so you don’t
+  have to downgrade backends to old API contracts or databases.
 
 <br/>
 
@@ -44,13 +49,15 @@ For example, for [/api/user/123](#), the filename could be:
 
 On the dashboard you can select a mock variant for a particular route, delaying responses,
 or triggering an autogenerated `500` error, among other features.
+
+
 Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander&nbsp;API** section below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp962x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp962x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp962x800.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp880x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp880x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp880x800.light.gold.png">
 </picture>
 
 
@@ -92,7 +99,7 @@ get saved following Mockaton’s filename convention.
 <details>
 <summary>Details</summary>
 
-This option could be a bit elaborate if your backend uses third-party auth,
+This option could be a bit elaborate if your backend uses third-party authentication,
 because you’d have to manually inject cookies or `sessionStorage` tokens.
 
 On the other hand, proxying to your backend is straightforward if your backend
@@ -118,6 +125,7 @@ Create a `my-mockaton.js` file
 import { resolve } from 'node:path'
 import { Mockaton } from 'mockaton'
 
+
 Mockaton({
   mocksDir: resolve('my-mocks-dir'), // must exist
   port: 2345
@@ -175,11 +183,6 @@ permutations for out-of-stock, new-arrival, and discontinued.
 - Spinners by delaying responses
 - Setting up UI tests
 
-### Time travel
-If you commit the mocks to your repo, it’s straightforward to
-bisect bugs and check out long-lived branches, so you don’t
-have to downgrade backends to old API contracts or databases.
-
 ### Simulating complex backend states
 Sometimes, the ideal flow you need is too difficult to reproduce from the actual backend.
 For this, you can **Bulk Select** mocks by comments to simulate the complete states

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.20.3",
+	"version": "8.21.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -60,7 +60,7 @@ function serveDashboard(_, response) {
 }
 
 function serveDashboardAsset(f) {
-	return (req, response) =>
+	return (_, response) =>
 		sendFile(response, join(import.meta.dirname, f))
 }
 

package/src/Dashboard.css

@@ -125,7 +125,7 @@ header {
 		align-items: flex-end;
 		gap: 16px 10px;
 
-		@media (max-width: 890px) {
+		@media (max-width: 879px) {
 			max-width: 400px;
 		}
 	}
@@ -235,7 +235,7 @@ header {
 
 	.Help {
 		min-width: 24px;
-		align-self: center;
+		align-self: end;
 		margin-left: auto;
 		fill: var(--colorSecondaryAction);
 
@@ -243,7 +243,7 @@ header {
 			fill: var(--colorAccent);
 		}
 
-		@media (max-width: 590px) {
+		@media (max-width: 520px) {
 			display: none;
 		}
 	}
@@ -256,22 +256,19 @@ main {
 	grid-template-columns: minmax(min-content, max-content) 1fr;
 
 	@media (max-width: 1160px) {
-		grid-template-columns: min(620px) 1fr;
+		grid-template-columns: min(580px) 1fr;
 	}
 
-	@media (max-width: 960px) {
+	@media (max-width: 879px) {
 		grid-template-columns: 100%;
 		grid-template-rows: 1fr 1fr;
-
-		.leftSide {
-			box-shadow: var(--boxShadow1);
-		}
 	}
 
 	.leftSide {
 		padding: 16px;
 		padding-bottom: 0;
 		overflow-y: auto;
+		box-shadow: var(--boxShadow1);
 	}
 
 	.rightSide {
@@ -292,6 +289,12 @@ table {
 	tbody {
 		border-bottom: 20px solid transparent;
 	}
+
+	td:nth-child(3),
+	td:nth-child(4),
+	td:nth-child(5) {
+		max-width: 280px;
+	}
 }
 
 .empty {
@@ -323,7 +326,7 @@ table {
 .MockSelector {
 	width: 100%;
 	height: 26px;
-	padding-right: 8px;
+	padding-right: 16px;
 	padding-left: 8px;
 	text-overflow: ellipsis;
 	font-size: 12px;
@@ -343,7 +346,7 @@ table {
 		background: transparent;
 		cursor: default;
 		color: var(--colorDisabledMockSelector);
-		opacity: 1;
+		opacity: 0.8;
 	}
 }
 

package/src/Dashboard.js

@@ -597,8 +597,8 @@ async function previewMock(method, urlMask, href) {
 	previewMock.controller?.abort()
 	previewMock.controller = new AbortController
 
-	renderProgressBar()
 	payloadViewerTitleRef.current.replaceChildren(r('span', null, Strings.fetching))
+	payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
 
 	try {
 		const response = await fetch(href, {
@@ -607,10 +607,9 @@ async function previewMock(method, urlMask, href) {
 		})
 		await updatePayloadViewer(method, urlMask, response)
 	}
-	catch {}
-
-	function renderProgressBar() {
-		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
+	catch (err) {
+		onError(err)
+		payloadViewerRef.current.replaceChildren()
 	}
 }
 
@@ -755,7 +754,9 @@ async function poll() {
 /** # Utils */
 
 function className(...args) {
-	return { className: args.filter(Boolean).join(' ') }
+	return {
+		className: args.filter(Boolean).join(' ')
+	}
 }
 
 

package/src/staticCollection.js

@@ -3,7 +3,7 @@ import { listFilesRecursively } from './utils/fs.js'
 import { config, isFileAllowed } from './config.js'
 
 
-export class StaticBroker {
+class StaticBroker {
 	constructor(route) {
 		this.route = route
 		this.delayed = false