mockaton 8.9.0 → 8.10.0

package/README.md

@@ -30,7 +30,7 @@ which is handy for setting up tests  (see **Commander API** below).
 
 
 
-## No Need to Mock Everything
+## Fallback to your Backend
 Mockaton can fallback to your real backend on routes you don’t have mocks
 for. For that, type your backend address in the **Fallback Backend** field.
 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.9.0",
+	"version": "8.10.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -34,6 +34,7 @@ export const apiGetRequests = new Map([
 	[API.fallback, getProxyFallback],
 	[API.arEvents, longPollAR_Events],
 	[API.comments, listComments],
+	[API.globalDelay, getGlobalDelay],
 	[API.collectProxied, getCollectProxied]
 ])
 
@@ -46,6 +47,7 @@ export const apiPatchRequests = new Map([
 	[API.cookies, selectCookie],
 	[API.fallback, updateProxyFallback],
 	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
+	[API.globalDelay, setGlobalDelay],
 	[API.collectProxied, setCollectProxied]
 ])
 
@@ -65,6 +67,7 @@ function serveDashboardAsset(req, response) {
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
+function getGlobalDelay(_, response) { sendJSON(response, config.delay) }
 function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
 function getProxyFallback(_, response) { sendJSON(response, config.proxyFallback) }
 function getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed) }
@@ -78,6 +81,13 @@ function listStaticFiles(req, response) {
 }
 
 function longPollAR_Events(req, response) {
+	// e.g. tab was hidden while new mocks were added or removed
+	const clientIsOutOfSync = parseInt(req.headers[DF.lastReceived_nAR], 10) !== countAR_Events()
+	if (clientIsOutOfSync) {
+		sendJSON(response, countAR_Events())
+		return
+	}
+
 	function onAddOrRemoveMock() {
 		unsubscribeAR_EventListener(onAddOrRemoveMock)
 		sendJSON(response, countAR_Events())
@@ -130,7 +140,7 @@ async function setRouteIsDelayed(req, response) {
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
 	else {
-		broker.updateDelay(body[DF.delayed])
+		broker.updateDelayed(body[DF.delayed])
 		sendOK(response)
 	}
 }
@@ -181,3 +191,7 @@ async function setCorsAllowed(req, response) {
 	sendOK(response)
 }
 
+async function setGlobalDelay(req, response) { // TESTME
+	config.delay = parseInt(await parseJSON(req), 10)
+	sendOK(response)
+}

package/src/ApiConstants.js

@@ -5,6 +5,7 @@ export const API = {
 	comments: MOUNT + '/comments',
 	select: MOUNT + '/select',
 	delay: MOUNT + '/delay',
+	globalDelay: MOUNT + '/global-delay',
 	mocks: MOUNT + '/mocks',
 	reset: MOUNT + '/reset',
 	cookies: MOUNT + '/cookies',
@@ -20,7 +21,8 @@ export const DF = { // Dashboard Fields (XHR)
 	routeMethod: 'route_method',
 	routeUrlMask: 'route_url_mask',
 	delayed: 'delayed',
-	proxied: 'proxied'
+	proxied: 'proxied',
+	lastReceived_nAR: 'last_received_n_ar'
 }
 
 export const DEFAULT_500_COMMENT = '(Mockaton 500)'

package/src/Commander.js

@@ -77,6 +77,13 @@ export class Commander {
 		return this.#patch(API.cors, value)
 	}
 
+	getGlobalDelay() {
+		return this.#get(API.globalDelay)
+	}
+	setGlobalDelay(delay) {
+		return this.#patch(API.globalDelay, delay)
+	}
+
 	listStaticFiles() {
 		return this.#get(API.static)
 	}
@@ -85,9 +92,12 @@ export class Commander {
 		return this.#patch(API.reset)
 	}
 
-	getAR_EventsCount() {
+	getAR_EventsCount(nAR_EventReceived) {
 		return fetch(API.arEvents, {
-			signal: AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
+			signal: AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000),
+			headers: {
+				[DF.lastReceived_nAR]: nAR_EventReceived
+			}
 		})
 	}
 }

package/src/Dashboard.css

@@ -112,7 +112,7 @@ select {
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
-	gap: 8px;
+	gap: 10px;
 
 	img {
 		width: 130px;
@@ -129,16 +129,26 @@ select {
 			color: var(--colorLabel);
 			font-size: 11px;
 			gap: 4px;
+
+			svg {
+				width: 14px;
+				height: 14px;
+				fill: var(--colorLabel);
+				opacity: 0.6;
+			}
 		}
 
 		input[type=url],
+		input[type=number],
 		select {
 			width: 100%;
 			height: 28px;
 			padding: 4px 8px;
 			border-right: 3px solid transparent;
 			margin-top: 4px;
+			color: var(--colorText);
 			font-size: 11px;
+			box-shadow: var(--boxShadow1);
 			background-color: var(--colorComboBoxHeaderBackground);
 			border-radius: var(--radius);
 		}
@@ -147,21 +157,26 @@ select {
 			background: var(--colorHover);
 		}
 
-		&.FallbackBackend {
-			position: relative;
-			width: 210px;
+		&.GlobalDelayField {
+			width: 82px;
+
+			input[type=number] {
+				padding-right: 0;
+			}
 
 			svg {
-				width: 14px;
-				height: 14px;
-				fill: var(--colorLabel);
-				opacity: 0.6;
+				border: 1px solid var(--colorLabel);
+				border-radius: 50%;
+				transform: scale(.85);
 			}
+		}
+
+		&.FallbackBackend {
+			position: relative;
+			width: 210px;
 
 			input[type=url] {
 				padding: 0 6px;
-				box-shadow: var(--boxShadow1);
-				color: var(--colorText);
 			}
 
 			.SaveProxiedCheckbox {
@@ -279,8 +294,8 @@ select {
 .MockSelector {
 	width: 260px;
 	height: 30px;
-	border: 0;
 	padding-right: 5px;
+	border: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
@@ -333,7 +348,7 @@ select {
 		}
 
 		&:disabled ~ svg {
-			opacity: .5;
+			fill-opacity: 0.4;
 			cursor: not-allowed;
 			box-shadow: none;
 		}
@@ -350,10 +365,9 @@ select {
 }
 
 .ProxyToggler {
-	margin-left: 4px;
 	> svg {
-		width: 22px;
-		padding: 1px;
+		width: 20px;
+		padding: 3px;
 		border-color: transparent;
 		border-radius: var(--radiusSmall);
 	}

package/src/Dashboard.js

@@ -17,6 +17,7 @@ const Strings = {
 	cookie: 'Cookie',
 	cookie_disabled_title: 'No cookies specified in config.cookies',
 	delay: 'Delay',
+	delay_ms: 'Delay (ms)',
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback Backend',
 	fallback_server_placeholder: 'Type Server Address',
@@ -46,6 +47,7 @@ const CSS = {
 	ProgressBar: 'ProgressBar',
 	ProxyToggler: 'ProxyToggler',
 	ResetButton: 'ResetButton',
+	GlobalDelayField: 'GlobalDelayField',
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
 
@@ -58,6 +60,10 @@ const CSS = {
 const r = createElement
 const mockaton = new Commander(window.location.origin)
 
+const PROGRESS_BAR_DELAY = 180
+let globalDelay = 1200
+
+
 init()
 pollAR_Events() // Add or Remove Mocks from File System
 document.addEventListener('visibilitychange', () => {
@@ -70,6 +76,7 @@ function init() {
 		mockaton.listMocks(),
 		mockaton.listCookies(),
 		mockaton.listComments(),
+		mockaton.getGlobalDelay(),
 		mockaton.getCollectProxied(),
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
@@ -78,22 +85,24 @@ function init() {
 		.catch(onError)
 }
 
-function App([brokersByMethod, cookies, comments, collectProxied, fallbackAddress, staticFiles]) {
+function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbackAddress, staticFiles]) {
+	globalDelay = delay
 	return (
 		r('div', null,
-			r(Header, { cookies, comments, fallbackAddress, collectProxied }),
+			r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
 			r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
 			r(StaticFilesList, { staticFiles })))
 }
 
 // Header ===============
 
-function Header({ cookies, comments, fallbackAddress, collectProxied }) {
+function Header({ cookies, comments, delay, fallbackAddress, collectProxied }) {
 	return (
 		r('menu', { className: CSS.Header },
 			r(Logo),
 			r(CookieSelector, { cookies }),
 			r(BulkSelector, { comments }),
+			r(GlobalDelayField, { delay }),
 			r(ProxyFallbackField, { fallbackAddress, collectProxied }),
 			r(ResetButton)))
 }
@@ -153,6 +162,24 @@ function BulkSelector({ comments }) {
 				r('option', { value }, value)))))
 }
 
+function GlobalDelayField({ delay }) {
+	function onChange() {
+		globalDelay = this.valueAsNumber
+		mockaton.setGlobalDelay(globalDelay).catch(onError)
+	}
+	return (
+		r('label', { className: cssClass(CSS.Field, CSS.GlobalDelayField) },
+			r('span', null, r(TimerIcon), Strings.delay_ms),
+			r('input', {
+				type: 'number',
+				min: 0,
+				step: 100,
+				autocomplete: 'none',
+				value: delay,
+				onChange
+			})))
+}
+
 function ProxyFallbackField({ fallbackAddress, collectProxied }) {
 	function onChange() {
 		const saveCheckbox = this.closest(`.${CSS.FallbackBackend}`).querySelector('[type=checkbox]')
@@ -238,8 +265,8 @@ function SectionByMethod({ method, brokers, canProxy }) {
 					r('tr', { 'data-method': method, 'data-urlMask': urlMask },
 						r('td', null, r(PreviewLink, { method, urlMask })),
 						r('td', null, r(MockSelector, { broker })),
-						r('td', null, r(DelayRouteToggler, { broker })),
 						r('td', null, r(InternalServerErrorToggler, { broker })),
+						r('td', null, r(DelayRouteToggler, { broker })),
 						r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
 }
 
@@ -313,7 +340,7 @@ function DelayRouteToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				checked: Boolean(broker.currentMock.delay),
+				checked: broker.currentMock.delayed,
 				onChange
 			}),
 			TimerIcon()))
@@ -386,7 +413,7 @@ function PayloadViewer() {
 function PayloadViewerProgressBar() {
 	return (
 		r('div', { className: CSS.ProgressBar },
-			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
+			r('div', { style: { animationDuration: globalDelay - PROGRESS_BAR_DELAY + 'ms' } })))
 }
 
 function PayloadViewerTitle({ file, status, statusText }) {
@@ -406,7 +433,7 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText }) {
 }
 
 async function previewMock(method, urlMask, href) {
-	const timer = setTimeout(renderProgressBar, 180)
+	const timer = setTimeout(renderProgressBar, PROGRESS_BAR_DELAY)
 	const response = await fetch(href, { method })
 	clearTimeout(timer)
 	await updatePayloadViewer(method, urlMask, response)
@@ -512,7 +539,7 @@ async function pollAR_Events() {
 		return
 	try {
 		pollAR_Events.isPolling = true
-		const response = await mockaton.getAR_EventsCount()
+		const response = await mockaton.getAR_EventsCount(pollAR_Events.oldAR_EventsCount)
 		if (response.ok) {
 			const nAR_Events = await response.json()
 			if (pollAR_Events.oldAR_EventsCount !== nAR_Events) { // because it could be < or >

package/src/MockBroker.js

@@ -1,4 +1,3 @@
-import { config } from './config.js'
 import { includesComment, extractComments, parseFilename } from './Filename.js'
 import { DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
@@ -13,7 +12,7 @@ export class MockBroker {
 		this.mocks = []
 		this.currentMock = {
 			file: '',
-			delay: 0
+			delayed: false
 		}
 		this.register(file)
 	}
@@ -59,7 +58,7 @@ export class MockBroker {
 	}
 
 	get file() { return this.currentMock.file }
-	get delay() { return this.currentMock.delay }
+	get delayed() { return this.currentMock.delayed }
 	get proxied() { return !this.currentMock.file }
 	get status() { return parseFilename(this.file).status }
 	get temp500IsSelected() { return this.#isTemp500(this.file) }
@@ -83,7 +82,7 @@ export class MockBroker {
 
 	hasMock(file) { return this.mocks.includes(file) }
 	updateFile(filename) { this.currentMock.file = filename }
-	updateDelay(delayed) { this.currentMock.delay = Number(delayed) * config.delay }
+	updateDelayed(delayed) { this.currentMock.delayed = delayed }
 
 	updateProxied(proxied) {
 		if (proxied)

package/src/MockDispatcher.js

@@ -14,7 +14,7 @@ export async function dispatchMock(req, response) {
 		const broker = mockBrokerCollection.getBrokerForUrl(req.method, req.url)
 		if (!broker || broker.proxied) {
 			if (config.proxyFallback)
-				await proxy(req, response)
+				await proxy(req, response, Number(Boolean(broker?.delayed)) * config.delay)
 			else
 				sendNotFound(response)
 			return
@@ -34,7 +34,7 @@ export async function dispatchMock(req, response) {
 			: await applyPlugins(join(config.mocksDir, broker.file), req, response)
 
 		response.setHeader('Content-Type', mime)
-		setTimeout(() => response.end(body), broker.delay)
+		setTimeout(() => response.end(body), Number(broker.delayed) * config.delay)
 	}
 	catch (error) {
 		if (error instanceof BodyReaderError)

package/src/Mockaton.test.js

@@ -352,7 +352,7 @@ async function testRegistering() {
 			])
 			deepEqual(currentMock, {
 				file: fixtureForRegisteringPutA[1],
-				delay: 0
+				delayed: false
 			})
 		})
 		await it('unregisters selected', async () => {
@@ -367,7 +367,7 @@ async function testRegistering() {
 			])
 			deepEqual(currentMock, {
 				file: fixtureForRegisteringPutB[1],
-				delay: 0
+				delayed: false
 			})
 		})
 		await it('unregistering the last mock removes broker', async () => {

package/src/ProxyRelay.js

@@ -1,14 +1,14 @@
 import { join } from 'node:path'
-import { existsSync } from 'node:fs'
 import { randomUUID } from 'node:crypto'
-import { write } from './utils/fs.js'
+
 import { config } from './config.js'
 import { extFor } from './utils/mime.js'
 import { readBody } from './utils/http-request.js'
+import { write, isFile } from './utils/fs.js'
 import { makeMockFilename } from './Filename.js'
 
 
-export async function proxy(req, response) {
+export async function proxy(req, response, delay) {
 	const proxyResponse = await fetch(config.proxyFallback + req.url, {
 		method: req.method,
 		headers: req.headers,
@@ -21,12 +21,12 @@ export async function proxy(req, response) {
 	headers['set-cookie'] = proxyResponse.headers.getSetCookie() // parses multiple into an array
 	response.writeHead(proxyResponse.status, headers)
 	const body = await proxyResponse.text()
-	response.end(body)
+	setTimeout(() => response.end(body), delay) // TESTME
 
 	if (config.collectProxied) {
 		const ext = extFor(proxyResponse.headers.get('content-type'))
 		let filename = makeMockFilename(req.url, req.method, proxyResponse.status, ext)
-		if (existsSync(join(config.mocksDir, filename))) // TESTME
+		if (isFile(join(config.mocksDir, filename))) // TESTME
 			filename = makeMockFilename(req.url + `(${randomUUID()})`, req.method, proxyResponse.status, ext)
 		write(join(config.mocksDir, filename), body)
 	}