mockaton 8.5.1 → 8.6.1

package/README.md

@@ -5,50 +5,60 @@
 
 ## Mock your APIs, Enhance your Development Workflow
 
-_Mockaton_ is an HTTP mock server built for improving the frontend 
-development and testing experience.
+Welcome to developer experience tooling! Mockaton is here to help
+make your frontend development and testing easier—and a lot more fun.
 
-With Mockaton you don’t need to write code for wiring your mocks. Instead, it
-scans a given directory for filenames following a convention similar to the
-URL paths. For example, the following file will be served on `/api/user/1234`
+With Mockaton you don’t need to write code for wiring your mocks. Instead, just
+place your mocks in a directory and let Mockaton do the rest. It will automatically
+scan the directory for filenames that follow a convention similar to the URL paths.
+
+For example, for this route `/api/user/1234`, the mock filename would be:
 ```
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
-By the way, you don’t need to mock all your APIs. You can request from
-your backend the routes you don’t have mocks for. That’s done with:
+And hey, no need to mock everything. If you don’t have a mock for
+a certain API, Mockaton can fallback to your real backend. Just
+type your backend address in the **Fallback Backend** field.
 
-`config.proxyFallback = 'http://mybackend'`
+And there’s one more cool thing—you can collect those responses
+by clicking the **Save Mocks** checkbox. Those mocks will
+be saved to your `config.mocksDir` following the filename convention.
 
-## Scraping Mocks
-You can save mocks following the filename convention
-for the routes that reached your `proxyFallback` with:
 
-`config.collectProxied = true` 
+## Multiple Mock Variants
 
+You can have many mocks for any route. For example, you might
+want different mocks with different response status codes
+(like triggering errors). Here are a couple of ways to do it:
 
-## Multiple Mock Variants
-Each route can have many mocks, which could either be:
-- Different response __status code__. For example, for triggering errors.
-- __Comment__ on the filename, which is anything within parentheses.
-  - e.g. `api/login(locked out user).POST.423.json`
+### Adding comments in filenames
+Want to mock a locked-out user or an invalid login attempt? You
+can just add a comment to the filename in parentheses. For example:
 
+`api/login(locked out user).POST.423.json`
+
+### Different response status code
+For instance, you can have mocks with a `4xx` or `5xx` status code for triggering
+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 options. In addition, there’s a programmatic API,
+## 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="./README-dashboard-light.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./README-dashboard-dark.png">
-  <img alt="Mockaton Dashboard Demo" src="./README-dashboard-light.png">
+  <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
+`tsx` is only needed if you want to write mocks in TypeScript.
 ```sh
 npm install mockaton tsx --save-dev
 ```
@@ -72,7 +82,12 @@ node --import=tsx my-mockaton.js
 
 ## Running the demo app (Vite)
 
-This is a minimal React + Vite + Mockaton app.
+This is a minimal React + Vite + Mockaton app. It’s mainly a list of
+colors, which contains all of their possible states. For example,
+permutations for out-of-stock, new-arrival, and discontinued.
+
+Also, if you select the **Admin User** from the Mockaton dashboard,
+the color cards will have a Delete button as well.
 
 ```sh  
 git clone https://github.com/ericfortis/mockaton.git
@@ -82,7 +97,11 @@ npm run mockaton
 npm run start
 ```
 
-By the way, that directory has a script for opening Mockaton and Vite in one command.
+By the way, that directory has scripts for opening Mockaton and Vite in one command.
+
+The app looks like this:
+
+<img src="./demo-app-vite/README-screenshot.png" alt="Mockaton Demo App Screenshot" width="580" />
 
 
 ## Use Cases

package/TODO.md

@@ -1,5 +1,4 @@
 # TODO
 
 - Refactor tests
-- Add Collect Proxied checkbox to the dashboard (remove Allow CORS)
-- Dashboard refresh (long polling ?)
+- Dashboard refresh (long polling?)

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.5.1",
+	"version": "8.6.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -11,11 +11,11 @@
 		"test": "node --test src/**.test.js",
 		"start": "node dev-mockaton.js",
 		"start:ts": "node --import=tsx dev-mockaton.js",
-		"test-ui": "node --test --import=./ui-tests/_setup.js --experimental-test-isolation=none \"./ui-tests/**/*.test.js\"",
+		"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": {
-		"pixaton": ">=1.0.1",
-		"puppeteer": ">=23.10.1"
+		"pixaton": ">=1.0.2",
+		"puppeteer": ">=24.1.1"
 	}
 }

package/src/Api.js

@@ -26,6 +26,7 @@ export const apiGetRequests = new Map([
 	[API.comments, listComments],
 	[API.fallback, getProxyFallback],
 	[API.cors, getIsCorsAllowed],
+	[API.collectProxied, getCollectProxied],
 	[API.static, listStaticFiles]
 ])
 
@@ -50,6 +51,7 @@ function listComments(_, response) { sendJSON(response, mockBrokersCollection.ex
 function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
 function getProxyFallback(_, response) { sendJSON(response, config.proxyFallback) }
 function getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed) }
+function getCollectProxied(_, response) { sendJSON(response, config.collectProxied) }
 
 function listStaticFiles(req, response) {
 	try {

package/src/Commander.js

@@ -54,14 +54,13 @@ export class Commander {
 		return this.#patch(API.fallback, proxyAddr)
 	}
 
+	getCollectProxied() {
+		return this.#get(API.collectProxied)
+	}
 	setCollectProxied(shouldCollect) {
 		return this.#patch(API.collectProxied, shouldCollect)
 	}
 
-	reset() {
-		return this.#patch(API.reset)
-	}
-
 	getCorsAllowed() {
 		return this.#get(API.cors)
 	}
@@ -72,4 +71,8 @@ export class Commander {
 	listStaticFiles() {
 		return this.#get(API.static)
 	}
+
+	reset() {
+		return this.#patch(API.reset)
+	}
 }

package/src/Dashboard.css

@@ -9,14 +9,14 @@
 		--colorAccentAlt: #009c71;
 		--colorBackground: #fff;
 		--colorHeaderBackground: #f7f7f7;
-		--colorComboBoxBackground: #fafafa;
+		--colorComboBoxBackground: #f7f7f7;
+		--colorSecondaryButtonBackground: #f5f5f5;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorDisabled: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #444;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
-		--colorSecondaryButtonBackground: #fafafa;
 		--colorText: #000;
 	}
 }
@@ -28,13 +28,13 @@
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
+		--colorSecondaryButtonBackground: #444;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabled: #bbb;
 		--colorHover: #023661;
 		--colorLabel: #aaa;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #f41606;
-		--colorSecondaryButtonBackground: #444;
 		--colorText: #fff;
 	}
 }
@@ -49,12 +49,13 @@ body {
 	color: var(--colorText);
 }
 * {
+	box-sizing: border-box;
 	padding: 0;
 	border: 0;
 	margin: 0;
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
-	outline: 0
+	outline: 0;
 }
 
 select, a, input, button, summary {
@@ -91,7 +92,7 @@ menu {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 16px;
+	padding: 15px 16px;
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
@@ -103,7 +104,9 @@ menu {
 		margin-right: 18px;
 	}
 
-	label {
+	.Field {
+		min-width: 150px;
+
 		span {
 			display: block;
 			color: var(--colorLabel);
@@ -112,27 +115,48 @@ menu {
 
 		input[type=url],
 		select {
+			width: 100%;
 			height: 28px;
-			width: 150px;
 			padding: 4px 2px;
 			border-right: 3px solid transparent;
-			margin-top: 2px;
+			margin-top: 4px;
 			font-size: 11px;
 			background: var(--colorComboBoxHeaderBackground);
 			border-radius: 6px;
 		}
 
-		input[type=url] {
-			padding: 0 6px;
-			box-shadow: var(--boxShadow1);
-			color: var(--colorText);
+		&.FallbackBackend {
+			position: relative;
+			width: 194px;
+
+			input[type=url] {
+				padding: 0 6px;
+				box-shadow: var(--boxShadow1);
+				color: var(--colorText);
+			}
+
+			.SaveProxiedCheckbox {
+				position: absolute;
+				top: 0;
+				right: 0;
+				display: flex;
+				width: auto;
+				min-width: unset;
+				align-items: center;
+				font-size: 11px;
+				gap: 4px;
+
+				input:disabled + span {
+					opacity: 0.7;
+				}
+			}
 		}
 	}
 
 	.ResetButton {
 		padding: 4px 12px;
-		margin-bottom: 4px;
 		border: 1px solid var(--colorRed);
+		margin-bottom: 4px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
@@ -144,13 +168,6 @@ menu {
 			box-shadow: var(--boxShadow1);
 		}
 	}
-
-	.CorsCheckbox {
-		display: flex;
-		align-items: center;
-		margin-bottom: 8px;
-		gap: 4px;
-	}
 }
 
 
@@ -368,8 +385,8 @@ main {
 
 	a {
 		display: inline-block;
-		border-radius: 6px;
 		padding: 6px;
+		border-radius: 6px;
 		color: var(--colorAccentAlt);
 		text-decoration: none;
 

package/src/Dashboard.js

@@ -4,7 +4,6 @@ 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',
@@ -18,19 +17,22 @@ const Strings = {
 	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
 	reset: 'Reset',
+	save_proxied: 'Save Mocks',
 	select_one: 'Select One',
 	static: 'Static'
 }
 
 const CSS = {
-	ResetButton: 'ResetButton',
-	CorsCheckbox: 'CorsCheckbox',
 	DelayToggler: 'DelayToggler',
+	FallbackBackend: 'FallbackBackend',
+	Field: 'Field',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
 	ProgressBar: 'ProgressBar',
+	ResetButton: 'ResetButton',
+	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
 
 	bold: 'bold',
@@ -49,7 +51,7 @@ function init() {
 		mockaton.listMocks(),
 		mockaton.listCookies(),
 		mockaton.listComments(),
-		mockaton.getCorsAllowed(),
+		mockaton.getCollectProxied(),
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
@@ -63,7 +65,7 @@ function App(apiResponses) {
 	document.body.appendChild(DevPanel(apiResponses))
 }
 
-function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddress, staticFiles]) {
+function DevPanel([brokersByMethod, cookies, comments, collectProxied, fallbackAddress, staticFiles]) {
 	const isEmpty = Object.keys(brokersByMethod).length === 0
 	return (
 		r('div', null,
@@ -71,8 +73,7 @@ function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddr
 				r('img', { src: '/mockaton-logo.svg', width: 160, alt: Strings.title }),
 				r(CookieSelector, { list: cookies }),
 				r(BulkSelector, { comments }),
-				r(ProxyFallbackField, { fallbackAddress }),
-				r(CorsCheckbox, { corsAllowed }),
+				r(ProxyFallbackField, { fallbackAddress, collectProxied }),
 				r(ResetButton)),
 			isEmpty
 				? r('main', null, Strings.no_mocks_found)
@@ -94,7 +95,7 @@ function CookieSelector({ list }) {
 	}
 	const disabled = list.length <= 1
 	return (
-		r('label', null,
+		r('label', { className: CSS.Field },
 			r('span', null, Strings.cookie),
 			r('select', {
 					autocomplete: 'off',
@@ -118,7 +119,7 @@ function BulkSelector({ comments }) {
 		? []
 		: [Strings.select_one].concat(comments)
 	return (
-		r('label', null,
+		r('label', { className: CSS.Field },
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
 					'data-qaid': 'BulkSelector',
@@ -132,41 +133,51 @@ function BulkSelector({ comments }) {
 }
 
 
-function ProxyFallbackField({ fallbackAddress = '' }) {
+function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
+	const refSaveProxiedCheckbox = useRef()
 	function onChange(event) {
 		const input = event.currentTarget
+		refSaveProxiedCheckbox.current.disabled = !input.validity.valid || !input.value.trim()
 		if (!input.validity.valid)
 			input.reportValidity()
 		else
-			mockaton.setProxyFallback(input.value)
+			mockaton.setProxyFallback(input.value.trim())
 				.catch(onError)
 	}
 	return (
-		r('label', null,
-			r('span', null, Strings.fallback_server),
-			r('input', {
-				type: 'url',
-				autocomplete: 'none',
-				placeholder: Strings.fallback_server_placeholder,
-				value: fallbackAddress,
-				onChange
+		r('div', { className: CSS.Field + ' ' + CSS.FallbackBackend },
+			r('label', null,
+				r('span', null, Strings.fallback_server),
+				r('input', {
+					type: 'url',
+					autocomplete: 'none',
+					placeholder: Strings.fallback_server_placeholder,
+					value: fallbackAddress,
+					onChange
+				})),
+			r(SaveProxiedCheckbox, {
+				collectProxied,
+				disabled: !fallbackAddress,
+				ref: refSaveProxiedCheckbox
 			})))
 }
 
 
-function CorsCheckbox({ corsAllowed }) {
+function SaveProxiedCheckbox({ ref, disabled, collectProxied }) {
 	function onChange(event) {
-		mockaton.setCorsAllowed(event.currentTarget.checked)
+		mockaton.setCollectProxied(event.currentTarget.checked)
 			.catch(onError)
 	}
 	return (
-		r('label', { className: CSS.CorsCheckbox },
+		r('label', { className: CSS.SaveProxiedCheckbox },
 			r('input', {
+				ref,
 				type: 'checkbox',
-				checked: corsAllowed,
+				disabled,
+				checked: collectProxied,
 				onChange
 			}),
-			Strings.allow_cors))
+			r('span', null, Strings.save_proxied)))
 }