mockaton 8.19.0 → 8.20.0

package/README.md

@@ -26,7 +26,7 @@ For example, for [/api/user/123](#), the mock 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 API** section).
+for setting up tests (see **Commander API** section below).
 
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp962x800.light.gold.png">
@@ -65,17 +65,18 @@ api/videos.GET.<b>500</b>.txt               # Internal Server Error
 ## Scraping mocks from your Backend
 
 ### Option 1: Browser Extension
-This [browser extension](https://github.com/ericfortis/download-http-requests-browser-ext) 
-lets you download all the HTTP responses following the filename convention.
+This [browser extension](https://github.com/ericfortis/download-http-requests-browser-ext)
+lets you download all the HTTP responses, and they
+get saved following Mockaton’s filename convention.
 
 ### Option 2: Fallback to Your Backend
 This option could be a bit elaborate if your backend uses third-party auth, 
-because you’d have to inject the cookies or tokens in `sessionStorage` manually.
+because you’d have to manually inject cookies or `sessionStorage` tokens.
 
-On the other hand, if you backend handles the session cookie, or if you can 
-develop without auth, proxying to your backend is straightforward to set up. 
+On the other hand, proxying to your backend is straightforward if your backend
+handles the session cookie, or if you can develop without auth. 
 
-In a nutshell, you can forward requests to your backend for routes you don’t have
+Either way you can forward requests to your backend for routes you don’t have
 mocks for, or routes that have the ☁️ **Cloud Checkbox** checked. In addition, by
 checking ✅ **Save Mocks**, you can collect the responses that hit your backend.
 They will be saved in your `config.mocksDir` following the filename convention.
@@ -115,11 +116,7 @@ node --import=tsx my-mockaton.js
 
 <br/>
 
-## Demo App (Vite)
-
-This is a minimal React + Vite + Mockaton app. It’s a list of
-colors containing all of their possible states. For example,
-permutations for out-of-stock, new-arrival, and discontinued.
+## Demo App (Vite + React)
 
 ```sh  
 git clone https://github.com/ericfortis/mockaton.git
@@ -128,37 +125,36 @@ npm install
 
 npm run mockaton
 npm run start # in another terminal
-
-# BTW, that directory has scripts for running both 
-# servers with one command in two terminals.
 ```
 
-
-The app looks like this:
+The demo app has a list of colors containing all of their possible states. For example,
+permutations for out-of-stock, new-arrival, and discontinued. It looks like this:
 
 <img src="./demo-app-vite/pixaton-tests/pic-for-readme.vp740x880.light.gold.png" alt="Mockaton Demo App Screenshot" width="740" />
 
 <br/>
 
 ## Use Cases
-### Testing
+### Testing Backend or Frontend
 - Empty responses
-- Spinners by delaying responses
 - Errors such as _Bad Request_ and _Internal Server Error_
-- Setting up UI tests
 - Mocking third-party APIs
 - Polled resources (for triggering their different states)
   - alerts
   - notifications
   - slow to build resources
 
+### Testing Frontend
+- 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 your actual backend.
+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.
 
@@ -197,8 +193,8 @@ export default (request, response) =>
   JSON.stringify({ foo: 'bar' })
 ```
 
-Think of these functions as HTTP handlers that allow you to
-intercept requests. For example, for writing to a database.
+Think of these functions as HTTP handlers. For example,
+you can intercept requests to write to a database.
 
 <details>
 <summary><b>See Intercepting Requests Examples</b></summary>
@@ -325,7 +321,7 @@ documenting the URL contract.
 api/video<b>?limit=[limit]</b>.GET.200.json
 </pre>
 
-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.
 
 <br/>
@@ -352,7 +348,7 @@ api/foo/bar.GET.200.json
 This is the only required field. The directory must exist.
 
 ### `staticDir?: string`
-**This option is not needed** besides serving partial content (e.g., videos). But
+This option is not needed besides serving partial content (e.g., videos). But
 it’s convenient for serving 200 GET requests without having to add the filename
 extension convention. For example, for using Mockaton as a standalone demo server,
 as explained above in the _Use Cases_ section.

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.19.0",
+	"version": "8.20.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -25,11 +25,6 @@
 	"optionalDependencies": {
 		"open": "^10.0.0"
 	},
-	"dependencies": {
-		"@vitejs/plugin-react": "5.0.1",
-		"mockaton": "8.18.0",
-		"vite": "7.1.3"
-	},
 	"devDependencies": {
 		"pixaton": "1.1.2",
 		"puppeteer": "24.17.0"

package/src/Dashboard.css

@@ -274,8 +274,7 @@ main {
 	}
 
 	.rightSide {
-		padding-top: 16px;
-		padding-left: 16px;
+		padding: 16px;
 		overflow-y: auto;
 	}
 }
@@ -518,28 +517,28 @@ table {
 	}
 }
 
-.SpinnerClock {
-	display: flex;
-	width: 64px;
-	margin: auto;
-	margin-top: 64px;
-	fill: none;
-	stroke: var(--colorSecondaryAction);
-	stroke-width: 1px;
-
-	.HourHand,
-	.MinuteHand {
-		stroke-linecap: round;
-		transform-origin: center;
-		animation: _kfRotate 9s linear infinite
-	}
-	.MinuteHand {
-		animation-duration: 1s;
+.ProgressBar {
+	position: relative;
+	width: 100%;
+	height: 2px;
+	background: var(--colorComboBoxHeaderBackground);
+
+	div {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 0;
+		height: 100%;
+		background: var(--colorAccent);
+		animation-name: _kfProgress;
+		animation-timing-function: linear;
+		animation-delay: 80ms;
+		/*animation-duration: It's in JavaScript */
 	}
 }
-@keyframes _kfRotate {
-	100% {
-		transform: rotate(360deg)
+@keyframes _kfProgress {
+	to {
+		width: 100%;
 	}
 }
 

package/src/Dashboard.js

@@ -53,12 +53,10 @@ const CSS = {
 	NotFoundToggler: 'NotFoundToggler',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
+	ProgressBar: 'ProgressBar',
 	ProxyToggler: 'ProxyToggler',
 	ResetButton: 'ResetButton',
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
-	SpinnerClock: 'SpinnerClock',
-	SpinnerClockHourHand: 'HourHand',
-	SpinnerClockMinuteHand: 'MinuteHand',
 	StaticFilesList: 'StaticFilesList',
 
 	chosen: 'chosen',
@@ -296,9 +294,9 @@ function PreviewLink({ method, urlMask, urlMaskDittoed }) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
-			await previewMock(method, urlMask, this.href)
 			document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
 			this.classList.add(CSS.chosen)
+			await previewMock(method, urlMask, this.href)
 		}
 		catch (error) {
 			onError(error)
@@ -397,7 +395,7 @@ function InternalServerErrorToggler({ broker }) {
 			r('span', null, '500')))
 }
 
-/** @param {{ broker: MockBroker, disabled: boolean }} props */
+/** @param {{ broker: MockBroker }} props */
 function ProxyToggler({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
@@ -515,13 +513,11 @@ function PayloadViewer() {
 				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
 }
 
-function PayloadViewerSpinner() {
+
+function PayloadViewerProgressBar() {
 	return (
-		s('svg', { viewBox: '0 0 24 24', class: CSS.SpinnerClock },
-			s('circle', { cx: 12, cy: 12, r: 10 }),
-			s('line', { class: CSS.SpinnerClockHourHand, x1: 12, y1: 12, x2: 12, y2: 8 }),
-			s('line', { class: CSS.SpinnerClockMinuteHand, x1: 12, y1: 12, x2: 12, y2: 5 })
-		))
+		r('div', { className: CSS.ProgressBar },
+			r('div', { style: { animationDuration: globalDelay + 'ms' } })))
 }
 
 function PayloadViewerTitle({ file, status, statusText }) {
@@ -543,14 +539,23 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 }
 
 async function previewMock(method, urlMask, href) {
-	const timer = setTimeout(renderSpinner, 80)
+	previewMock.controller?.abort()
+	previewMock.controller = new AbortController
+
+	renderProgressBar()
 	payloadViewerTitleRef.current.replaceChildren(r('span', null, Strings.fetching))
-	const response = await fetch(href, { method })
-	clearTimeout(timer)
-	await updatePayloadViewer(method, urlMask, response)
 
-	function renderSpinner() {
-		payloadViewerRef.current.replaceChildren(PayloadViewerSpinner())
+	try {
+		const response = await fetch(href, {
+			method,
+			signal: previewMock.controller.signal
+		})
+		await updatePayloadViewer(method, urlMask, response)
+	}
+	catch {}
+
+	function renderProgressBar() {
+		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
 	}
 }
 

package/dev-config.js

@@ -1,18 +0,0 @@
-import { join } from 'node:path'
-import { jwtCookie } from './index.js'
-
-
-export const devConfig = {
-	port: 2345,
-	mocksDir: join(import.meta.dirname, 'fixtures-mocks'),
-	staticDir: join(import.meta.dirname, 'fixtures-static-mocks'),
-	cookies: {
-		'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
-		'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
-		'My JWT': jwtCookie('my-cookie', {
-			email: 'john.doe@example.com',
-			picture: 'https://cdn.auth0.com/avatars/jd.png'
-		}),
-		'None': ''
-	}
-}