mockaton 8.2.0 → 8.2.1

package/README.md

@@ -127,6 +127,7 @@ database, or pull data from a backend.
 Don’t call `response.end()`, just return a `string | Buffer | Uint8Array`.
 
 ```js
+
 export default function optionalName(request, response) {
   globalThis.myDatabase ??= { count: 0 }
   globalThis.myDatabase.count++
@@ -142,6 +143,19 @@ export default function optionalName(request, response) {
 If you need to serve a static `.js` file, put it in your
 `Config.staticDir` without the mock filename convention.
 
+This example will echo back the request body concatenated with another fixture.
+```js
+// api/color.POST.201.js
+
+import colors from './colors.json' with { type: 'json' }
+import { parseJSON } from 'mockaton' // body-parser alike
+
+export default async function concatColor(request, response) {
+  const newColor = await parseJSON(request)
+  return JSON.stringify(colors.concat(newColor))
+}
+```
+
 ---
 
 ## Mock File Name Convention

package/index.d.ts

@@ -42,8 +42,13 @@ export function Mockaton(options: Config): Server
 
 export const jsToJsonPlugin: Plugin
 
+
+// Utils
+
 export function jwtCookie(cookieName: string, payload: any): string
 
+export function parseJSON(request: IncomingMessage): Promise<any>
+
 
 export class Commander {
 	constructor(addr: string)

package/index.js

@@ -1,4 +1,6 @@
 export { Mockaton } from './src/Mockaton.js'
-export { jwtCookie } from './src/utils/jwt.js'
 export { Commander } from './src/Commander.js'
 export { jsToJsonPlugin } from './src/MockDispatcherPlugins.js'
+
+export { jwtCookie } from './src/utils/jwt.js'
+export { parseJSON } from './src/utils/http-request.js'

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.2.0",
+	"version": "8.2.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -11,10 +11,11 @@
 		"test": "node --test src/**.test.js",
 		"demo": "node _usage_example.js",
 		"demo:ts": "node --import=tsx _usage_example.js",
-		"demo:test-ui": "node --test --import=./ui-tests/_setup.js --experimental-test-isolation=none \"./ui-tests/**/*.test.js\""
+		"demo:test-ui": "node --test --import=./ui-tests/_setup.js --experimental-test-isolation=none \"./ui-tests/**/*.test.js\"",
+		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},
 	"optionalDependencies": {
-		"puppeteer": "23.7.1",
-		"pixaton": "0.1.0"
+		"pixaton": ">=1.0.1",
+		"puppeteer": ">=23.10.1"
 	}
 }

package/src/Dashboard.css

@@ -1,12 +1,12 @@
 :root {
-	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0072d6;
-		--colorAccentAlt: #0e906c;
+		--colorAccent: #0081ef;
+		--colorAccentAlt: #009c71;
 		--colorBackground: #fff;
 		--colorHeaderBackground: #f7f7f7;
 		--colorComboBoxBackground: #fafafa;
@@ -23,8 +23,8 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		--color4xxBackground: #403630;
-		--colorAccent: #1f91ff;
-		--colorAccentAlt: #00E676;
+		--colorAccent: #2495ff;
+		--colorAccentAlt: #00bf64;
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
@@ -62,6 +62,7 @@ select {
 	color: var(--colorText);
 	cursor: pointer;
 	outline: 0;
+	border-radius: 6px;
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
@@ -83,7 +84,7 @@ menu {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 12px 16px;
+	padding: 16px;
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
@@ -111,6 +112,7 @@ menu {
 			margin-top: 2px;
 			font-size: 11px;
 			background: var(--colorComboBoxHeaderBackground);
+			border-radius: 6px;
 		}
 
 		input[type=url] {
@@ -148,7 +150,7 @@ menu {
 main {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 48px;
+	margin-top: 56px;
 
 	> table {
 		border-collapse: collapse;
@@ -199,7 +201,7 @@ main {
 	display: inline-block;
 	width: 280px;
 	padding: 8px 6px;
-	border-radius: 0;
+	border-radius: 6px;
 	color: var(--colorAccent);
 	text-decoration: none;
 
@@ -218,7 +220,6 @@ main {
 	padding: 8px 1px;
 	border: 0;
 	border-left: 3px solid transparent;
-	border-radius: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;

package/src/Dashboard.js

@@ -175,8 +175,7 @@ function ResetButton() {
 					.then(init)
 					.catch(console.error)
 			}
-		}, Strings.reset)
-	)
+		}, Strings.reset))
 }
 
 
@@ -299,7 +298,6 @@ function MockSelector({ broker }) {
 			.catch(console.error)
 	}
 
-
 	function className(defaultIsSelected, status) {
 		return cssClass(
 			CSS.MockSelector,

package/src/mockaton-logo.svg

@@ -2,7 +2,7 @@
 <svg version="1.1" viewBox="0 0 570 100" xmlns="http://www.w3.org/2000/svg">
 	<style>
 		:root { --color: #000000; }
-		@media (prefers-color-scheme: light) { :root { --color: #444 } }
+		@media (prefers-color-scheme: light) { :root { --color: #555 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
 		path { fill: var(--color) }
 	</style>

package/src/utils/http-response.js

@@ -17,12 +17,12 @@ export function sendJSON(response, payload) {
 	response.end(JSON.stringify(payload))
 }
 
-export function sendFile(response, file) {
-	if (!isFile(file))
+export function sendFile(response, filePath) {
+	if (!isFile(filePath))
 		sendNotFound(response)
 	else {
-		response.setHeader('Content-Type', mimeFor(file))
-		response.end(read(file))
+		response.setHeader('Content-Type', mimeFor(filePath))
+		response.end(read(filePath))
 	}
 }
 

package/ui-tests/_setup.js

@@ -26,7 +26,12 @@ after(() => {
 
 export function testPixels(testFileName, options = {}) {
 	options.beforeSuite = async () => await mockaton.reset()
-	options.viewports ??= [{ width: 1024, height: 800 }]
+	options.viewports ??= [{
+		width: 1024,
+		height: 800,
+		deviceScaleFactor: 1.5 // for better screenshots
+	}]
 	options.colorSchemes ??= ['light', 'dark']
+	options.screenshotOptions ??= {}
 	_testPixels(page, testFileName, MOCKATON_ADDR + '/mockaton', 'body', options)
 }