mockaton 8.20.4 → 8.21.1

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.
+- Works around unstable dev backends while 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>
 
 
@@ -58,7 +65,8 @@ for setting up tests (see **Commander&nbsp;API** section below).
 <br/>
 
 ## Multiple Mock Variants
-Each route can have different mocks. There are two options for doing that:
+Each route can have different mocks. There are two
+options for doing that, and they can be combined.
 
 ### Adding comments to the filename
 Comments are anything within parentheses, including them.
@@ -73,9 +81,9 @@ For instance, you can use a `4xx` or `5xx` status code for triggering error
 responses, or a `2xx` such as `204` for testing empty collections.
 
 <pre>
-api/videos(empty list).GET.<b>204</b>.json  # No Content
-api/videos.GET.<b>403</b>.json              # Forbidden
-api/videos.GET.<b>500</b>.txt               # Internal Server Error
+api/videos.GET.<b>204</b>.empty # No Content
+api/videos.GET.<b>403</b>.json  # Forbidden
+api/videos.GET.<b>500</b>.txt   # Internal Server Error
 </pre>
 
 
@@ -84,15 +92,15 @@ api/videos.GET.<b>500</b>.txt               # Internal Server Error
 ## Scraping Mocks from your Backend
 
 ### Option 1: Browser Extension
-This companion [browser-devtools extension](https://github.com/ericfortis/download-http-requests-browser-ext)
-lets you download all the HTTP responses at once, and they
+With the companion [browser-devtools extension](https://github.com/ericfortis/download-http-requests-browser-ext)
+you can download all the HTTP responses at once, and they
 get saved following Mockaton’s filename convention.
 
 ### Option 2: Fallback to Your Backend
 <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 +126,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,12 +184,7 @@ 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
+### Demoing 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
 you want. For example, by adding `(demo-part1)`, `(demo-part2)` to the filenames.
@@ -304,8 +308,10 @@ want a `Content-Type` header in the response.
 <br/>
 
 ### Dynamic parameters
-Anything within square brackets is always matched. For example, for this route:
-<code>/api/company/<b>1234</b>/user/<b>5678</b></code>
+Anything within square brackets is always matched. 
+
+For example, for <a href="#">/api/company/<b>123</b>/user/<b>789</b></a>,
+the filename could be:
 
 <pre><code>api/company/<b>[id]</b>/user/<b>[uid]</b>.GET.200.json</code></pre>
 
@@ -348,7 +354,7 @@ string it’s ignored anyway.
 <br/>
 
 ### Index-like routes
-If you have `api/foo` and `api/foo/bar`, you have two options:
+If you have <a href="#">api/foo</a> and <a href="#">api/foo/bar</a>, you have two options:
 
 **Option A.** Standard naming:
 ```
@@ -376,7 +382,7 @@ as explained above in the _Use Cases_ section.
 
 Files under `config.staticDir` take precedence over corresponding
 `GET` mocks in `config.mocksDir` (regardless of status code).
-For example, if you have two files for `GET /foo/bar.jpg`:
+For example, if you have two files for `GET` <a href="#">/foo/bar.jpg</a> such as:
 <pre>
 my-static-dir<b>/foo/bar.jpg</b> <span style="color:green"> // Wins</span>
  my-mocks-dir<b>/foo/bar.jpg</b>.GET.200.jpg <span style="color:red"> // Unreachable</span>

package/package.json

@@ -2,18 +2,17 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.20.4",
+	"version": "8.21.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
 	"repository": "https://github.com/ericfortis/mockaton",
 	"keywords": [
 		"mock-server",
+		"rest-api",
 		"mock",
 		"api",
-		"testing",
-		"front-end",
-		"back-end"
+		"testing"
 	],
 	"scripts": {
 		"test": "node --test \"src/**/*.test.js\"",
@@ -22,11 +21,11 @@
 		"pixaton": "node --test --import=./pixaton-tests/_setup.js --experimental-test-isolation=none \"pixaton-tests/**/*.test.js\"",
 		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},
-	"optionalDependencies": {
-		"open": "^10"
-	},
 	"devDependencies": {
 		"pixaton": "1.1.2",
 		"puppeteer": "24.18.0"
+	},
+	"optionalDependencies": {
+		"open": "10.2.0"
 	}
 }

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;
 	}
 }