mockaton 7.4.1 → 7.5.0

package/README.md

@@ -360,4 +360,3 @@ await mockaton.reset()
 ## TODO
 - Refactor Tests
 - Dashboard. List `staticDir` and indicate if it’s overriding some mock.
-- Dashboard. Handle non-json Mock Preview (such as images)

package/package.json

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

package/sample-mocks/api/user/friends.GET.200.json

@@ -1 +1,3 @@
-"This is an exact path (i.e. /api/user/friends)"
+{
+	"_": "This is an exact path (i.e. /api/user/friends)"
+}

package/sample-mocks/api/user.GET.200.json

@@ -1 +1,4 @@
-"This mock is for /api/user"
+{
+	"_": "This mock is for /api/user",
+	"name": "John"
+}

package/sample-mocks/api/video/stat/[stat-id]/[video-id].GET.200.json

@@ -1 +1,3 @@
-"Two Dynamic Params. i.e. /api/video/stat/VIEWS/123"
+{
+	"_": "Two Dynamic Params. i.e. /api/video/stat/VIEWS/123"
+}

package/src/Dashboard.css

@@ -23,7 +23,7 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #1f91ff;
-		--colorBackground: #141414;
+		--colorBackground: #161616;
 		--colorComboBoxBackground: #252525;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabled: #aaa;
@@ -155,7 +155,7 @@ main {
 
 .PayloadViewer {
 	position: sticky;
-	top: 80px;
+	top: 60px;
 	width: 50%;
 	margin-left: 20px;
 
@@ -168,13 +168,15 @@ main {
 		max-height: calc(100vh - 160px);
 		padding: 12px;
 		padding-left: 0;
-		margin-top: 6px;
-		border-radius: 4px;
-		white-space: pre;
-		tab-size: 2;
 
-		code * {
+		code {
+			white-space: pre;
+			tab-size: 2;
 			font-family: monospace;
+
+			* {
+				font-family: monospace;
+			}
 		}
 	}
 }
@@ -307,6 +309,7 @@ main {
  * Prism 
  */
 
+
 @media (prefers-color-scheme: dark) {
 	.token.cdata, .token.comment, .token.doctype, .token.prolog {
 		color: #8292a2

package/src/Dashboard.js

@@ -172,9 +172,11 @@ function PreviewLink({ method, urlMask }) {
 					document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
 					this.classList.add(CSS.chosen)
 					clearTimeout(spinner)
-					updatePayloadViewer(
-						await res.text() || Strings.empty_response_body,
-						res.headers.get('content-type'))
+					const mime = res.headers.get('content-type')
+					if (mime.startsWith('image/')) // naively assumes GET.200
+						renderPayloadImage(this.href)
+					else
+						updatePayloadViewer(await res.text() || Strings.empty_response_body, mime)
 					refPayloadFile.current.innerText = this.closest('tr').querySelector('select').value
 				}
 				catch (error) {
@@ -190,8 +192,13 @@ function ProgressBar() {
 			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
 }
 
+function renderPayloadImage(href) {
+	empty(refPayloadViewer.current)
+	refPayloadViewer.current.append(r('img', { src: href }))
+}
+
 function updatePayloadViewer(body, mime) {
-	if (mime === 'application/json' && window.Prism)
+	if (mime === 'application/json' && window?.Prism.languages)
 		refPayloadViewer.current.innerHTML = window.Prism.highlight(body, window.Prism.languages.json, 'json')
 	else
 		refPayloadViewer.current.innerText = body