mockaton 7.4.1 → 7.5.1

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.1",
 	"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

@@ -7,10 +7,10 @@
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #1e88e5;
 		--colorBackground: #fff;
+		--colorHeaderBackground: #eee;
 		--colorComboBoxBackground: #fafafa;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorDisabled: #222;
-		--colorHeaderBackground: #fff;
 		--colorHover: #dfefff;
 		--colorLabel: #666;
 		--colorLightRed: #ffe4ee;
@@ -23,11 +23,11 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #1f91ff;
-		--colorBackground: #141414;
+		--colorBackground: #161616;
+		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabled: #aaa;
-		--colorHeaderBackground: #141414;
 		--colorHover: #023661;
 		--colorLabel: #aaa;
 		--colorLightRed: #ffe4ee;
@@ -55,6 +55,7 @@ body {
 }
 
 select {
+	font-size: 100%;
 	background: var(--colorComboBoxBackground);
 	color: var(--colorText);
 	cursor: pointer;
@@ -83,12 +84,14 @@ menu {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 16px 16px;
+	padding: 20px 16px;
 	background: var(--colorHeaderBackground);
+	box-shadow: var(--boxShadow1);
 	gap: 16px;
 
 	img {
 		width: 140px;
+		align-self: center;
 		margin-right: 75px;
 	}
 
@@ -135,7 +138,7 @@ menu {
 main {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 56px;
+	margin-top: 64px;
 
 	> table {
 		border-collapse: collapse;
@@ -155,7 +158,7 @@ main {
 
 .PayloadViewer {
 	position: sticky;
-	top: 80px;
+	top: 72px;
 	width: 50%;
 	margin-left: 20px;
 
@@ -165,16 +168,17 @@ main {
 
 	pre {
 		overflow: auto;
-		max-height: calc(100vh - 160px);
-		padding: 12px;
-		padding-left: 0;
-		margin-top: 6px;
-		border-radius: 4px;
-		white-space: pre;
-		tab-size: 2;
-
-		code * {
+		max-height: calc(100vh - 72px);
+		padding-top: 12px;
+
+		code {
+			white-space: pre;
+			tab-size: 2;
 			font-family: monospace;
+
+			* {
+				font-family: monospace;
+			}
 		}
 	}
 }
@@ -307,6 +311,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