mockaton 11.3.1 → 11.4.0

package/README.md

@@ -50,9 +50,9 @@ curl localhost:2020/api/user
 
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp761x740.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp761x740.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp761x740.dark.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp822x740.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp822x740.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp822x740.dark.gold.png">
 </picture>
 
 On the dashboard you can:

package/index.d.ts

@@ -99,6 +99,7 @@ export interface State {
 	comments: string[]
 
 	delay: number
+	delayJitter: number
 
 	collectProxied: boolean
 	proxyFallback: string

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "11.3.1",
+	"version": "11.4.0",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/ApiCommander.js

@@ -23,6 +23,9 @@ export class Commander {
 
 	/** @returns {Promise<Response>} */
 	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
+	
+	/** @returns {Promise<Response>} */
+	setGlobalDelayJitter = jitterPct => this.#patch(API.globalDelayJitter, jitterPct)
 
 	/** @returns {Promise<Response>} */
 	setCorsAllowed = value => this.#patch(API.cors, value)

package/src/client/ApiConstants.js

@@ -12,6 +12,7 @@ export const API = {
 	delayStatic: MOUNT + '/delay-static',
 	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
+	globalDelayJitter: MOUNT + '/global-delay-jitter',
 	proxied: MOUNT + '/proxied',
 	reset: MOUNT + '/reset',
 	select: MOUNT + '/select',

package/src/client/app-store.js

@@ -16,6 +16,7 @@ export const store = {
 	cookies: [],
 	comments: [],
 	delay: 0,
+	delayJitter: 0,
 
 	collectProxied: false,
 	proxyFallback: '',
@@ -84,6 +85,15 @@ export const store = {
 		}
 		catch (error) { store.onError(error) }
 	},
+	
+	async setGlobalDelayJitter(value) {
+		try {
+			const response = await api.setGlobalDelayJitter(value)
+			if (!response.ok) throw response
+			store.delayJitter = value
+		}
+		catch (error) { store.onError(error) }
+	},
 
 	async selectCookie(name) {
 		try {

package/src/client/app.js

@@ -17,6 +17,8 @@ const CSS = {
 	FallbackBackend: null,
 	Field: null,
 	GlobalDelayField: null,
+	GlobalDelayJitterField: null,
+	GlobalDelayWrap: null,
 	GroupByMethod: null,
 	InternalServerErrorToggler: null,
 	Logo: null,
@@ -118,14 +120,18 @@ function Header() {
 					height: 22
 				})),
 			r('div', null,
-				GlobalDelayField(),
+				r('div', className(CSS.GlobalDelayWrap),
+					GlobalDelayField(),
+					GlobalDelayJitterField()),
 				BulkSelector(),
 				CookieSelector(),
 				ProxyFallbackField(),
 				ResetButton(),
-				SettingsMenuTrigger())))
+				SettingsMenuTrigger()
+			)))
 }
 
+
 function GlobalDelayField() {
 	function onChange() {
 		store.setGlobalDelay(this.valueAsNumber)
@@ -142,6 +148,7 @@ function GlobalDelayField() {
 		r('label', className(CSS.Field, CSS.GlobalDelayField),
 			r('span', null, t`Delay (ms)`),
 			r('input', {
+				name: 'delay',
 				type: 'number',
 				min: 0,
 				step: 100,
@@ -152,6 +159,38 @@ function GlobalDelayField() {
 			})))
 }
 
+function GlobalDelayJitterField() {
+	function onChange() {
+		this.value = this.valueAsNumber.toFixed(0)
+		this.value = Math.max(0, this.valueAsNumber)
+		this.value = Math.min(300, this.valueAsNumber)
+		store.setGlobalDelayJitter(this.valueAsNumber / 100)
+	}
+	function onWheel(event) {
+		if (event.deltaY > 0)
+			this.stepUp()
+		else
+			this.stepDown()
+		clearTimeout(onWheel.timer)
+		onWheel.timer = setTimeout(onChange.bind(this), 300)
+	}
+	return (
+		r('label', className(CSS.Field, CSS.GlobalDelayJitterField),
+			r('span', null, t`Max Jitter %`),
+			r('input', {
+				name: 'delay-jitter',
+				type: 'number',
+				min: 0,
+				max: 300,
+				step: 10,
+				autocomplete: 'none',
+				value: (store.delayJitter * 100).toFixed(0),
+				onChange,
+				onWheel: [onWheel, { passive: true }]
+			})))
+}
+
+
 function BulkSelector() {
 	const { comments } = store
 	const firstOption = t`Pick Comment…`
@@ -208,6 +247,7 @@ function ProxyFallbackField() {
 			r('label', null,
 				r('span', null, t`Fallback`),
 				r('input', {
+					name: 'fallback',
 					type: 'url',
 					autocomplete: 'none',
 					placeholder: t`Type backend address`,
@@ -221,6 +261,7 @@ function SaveProxiedCheckbox(ref) {
 	return (
 		r('label', className(CSS.SaveProxiedCheckbox),
 			r('input', {
+				name: 'save-proxied',
 				ref,
 				type: 'checkbox',
 				disabled: !store.canProxy,
@@ -268,6 +309,7 @@ function SettingsMenu(id) {
 			r('div', null,
 				r('label', className(CSS.GroupByMethod),
 					r('input', {
+						name: 'group-by-method',
 						ref: firstInputRef,
 						type: 'checkbox',
 						checked: store.groupByMethod,

package/src/client/styles.css

@@ -137,7 +137,7 @@ header {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 3px;
-		
+
 		object {
 			pointer-events: none;
 		}
@@ -151,10 +151,10 @@ header {
 		gap: 16px 8px;
 	}
 
-	@media (max-width: 760px) {
-		> img {
-			width: 100px;
-			align-self: center;
+	@media (max-width: 820px) {
+		.Logo {
+			margin-top: 16px;
+			align-self: start;
 		}
 
 		> div {
@@ -170,6 +170,10 @@ header {
 		}
 	}
 
+	.GlobalDelayWrap {
+		display: flex;
+	}
+
 	.Field {
 		width: 116px;
 
@@ -202,10 +206,13 @@ header {
 		}
 
 		&.GlobalDelayField {
+			position: relative;
 			width: 76px;
 
-			input[type=number] {
+			input {
 				padding-right: 6px;
+				border-bottom-right-radius: 0;
+				border-top-right-radius: 0;
 			}
 
 			svg {
@@ -215,6 +222,25 @@ header {
 				stroke-width: 3px;
 				border-radius: 50%;
 			}
+			
+			&:focus-within {
+				z-index: 100;
+			}
+		}
+		
+		&.GlobalDelayJitterField {
+			width: 70px;
+			span {
+				margin-left: 0;
+			}
+			input {
+				border-left: 2px solid transparent;
+				border-bottom-left-radius: 0;
+				border-top-left-radius: 0;
+			}
+			&:focus-within {
+				z-index: 100;
+			}
 		}
 
 		&.CookieSelector {
@@ -223,7 +249,7 @@ header {
 
 		&.FallbackBackend {
 			position: relative;
-			width: 160px;
+			width: 150px;
 
 			.SaveProxiedCheckbox {
 				position: absolute;

package/src/server/Api.js

@@ -39,6 +39,7 @@ export const apiPatchReqs = new Map([
 	[API.reset, reinitialize],
 	[API.cookies, selectCookie],
 	[API.globalDelay, setGlobalDelay],
+	[API.globalDelayJitter, setGlobalDelayJitter],
 	
 	[API.fallback, setProxyFallback],
 	[API.collectProxied, setCollectProxied],
@@ -117,6 +118,17 @@ async function setGlobalDelay(req, response) {
 	}
 }
 
+async function setGlobalDelayJitter(req, response) {
+	const jitter = await req.json()
+
+	if (!ConfigValidator.delayJitter(jitter))
+		response.unprocessable(`Expected 0 to 3 float for "delayJitter"`)
+	else {
+		config.delayJitter = jitter
+		response.ok()
+	}
+}
+
 
 async function selectCookie(req, response) {
 	const cookieKey = await req.json()

package/src/server/ApiConstants.js

@@ -12,6 +12,7 @@ export const API = {
 	delayStatic: MOUNT + '/delay-static',
 	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
+	globalDelayJitter: MOUNT + '/global-delay-jitter',
 	proxied: MOUNT + '/proxied',
 	reset: MOUNT + '/reset',
 	select: MOUNT + '/select',

package/src/server/Mockaton.test.js

@@ -309,7 +309,7 @@ describe('Cookie', () => {
 
 describe('Delay', () => {
 	describe('Set Global Delay', () => {
-		test('422 for invalid global delay value', async () => {
+		test('422 for invalid value', async () => {
 			const r = await api.setGlobalDelay('not-a-number')
 			equal(r.status, 422)
 			equal(await r.text(), 'Expected non-negative integer for "delay"')
@@ -321,6 +321,19 @@ describe('Delay', () => {
 		})
 	})
 
+	describe('Set Global Delay Jitter', () => {
+		test('422 for invalid value', async () => {
+			const r = await api.setGlobalDelayJitter('not-a-number')
+			equal(r.status, 422)
+			equal(await r.text(), 'Expected 0 to 3 float for "delayJitter"')
+		})
+		test('200 for valid value', async () => {
+			const r = await api.setGlobalDelayJitter(0.1)
+			equal(r.status, 200)
+			equal((await fetchState()).delayJitter, 0.1)
+		})
+	})
+
 	test('updates route delay', async () => {
 		const fx = new Fixture('route-delay.GET.200.json')
 		await fx.sync()