mockaton 7.4.0 → 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.0",
+	"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

@@ -10,11 +10,10 @@
 		--colorComboBoxBackground: #fafafa;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorDisabled: #222;
-		--colorHeaderBackground: #f7f7f7;
+		--colorHeaderBackground: #fff;
 		--colorHover: #dfefff;
 		--colorLabel: #666;
 		--colorLightRed: #ffe4ee;
-		--colorMockBodyBackground: #fafafa;
 		--colorRed: #da0f00;
 		--colorSecondaryButtonBackground: #fafafa;
 		--colorText: #000;
@@ -24,15 +23,14 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #1f91ff;
-		--colorBackground: #141414;
+		--colorBackground: #161616;
 		--colorComboBoxBackground: #252525;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabled: #aaa;
-		--colorHeaderBackground: #0b0b0b;
+		--colorHeaderBackground: #141414;
 		--colorHover: #023661;
 		--colorLabel: #aaa;
 		--colorLightRed: #ffe4ee;
-		--colorMockBodyBackground: #333;
 		--colorRed: #f41606;
 		--colorSecondaryButtonBackground: #444;
 		--colorText: #fff;
@@ -85,15 +83,13 @@ menu {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 20px 16px;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	padding: 16px 16px;
 	background: var(--colorHeaderBackground);
 	gap: 16px;
 
 	img {
 		width: 140px;
-		margin-right: 76px;
-		margin-left: -1px;
+		margin-right: 75px;
 	}
 
 	label {
@@ -139,7 +135,7 @@ menu {
 main {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 64px;
+	margin-top: 56px;
 
 	> table {
 		border-collapse: collapse;
@@ -159,9 +155,9 @@ main {
 
 .PayloadViewer {
 	position: sticky;
-	top: 80px;
+	top: 60px;
 	width: 50%;
-	margin-left: 16px;
+	margin-left: 20px;
 
 	h2 {
 		padding-top: 20px;
@@ -171,15 +167,16 @@ main {
 		overflow: auto;
 		max-height: calc(100vh - 160px);
 		padding: 12px;
-		margin-top: 6px;
-		box-shadow: var(--boxShadow1);
-		border-radius: 4px;
-		background: var(--colorMockBodyBackground);
-		white-space: pre;
-		tab-size: 2;
+		padding-left: 0;
 
-		code * {
+		code {
+			white-space: pre;
+			tab-size: 2;
 			font-family: monospace;
+
+			* {
+				font-family: monospace;
+			}
 		}
 	}
 }
@@ -312,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