mockaton 2.1.0 → 2.3.0

package/README.md

@@ -28,7 +28,7 @@ The first file in **alphabetical order** becomes the default mock.
 ### Optionally, you can write mocks in JavaScript
 An Object, Array, or String is sent as JSON.
 
-`api/user/likes.GET.200.js`
+`api/foo.GET.200.js`
 ```js
 export default [
   { id: 0 }
@@ -98,27 +98,9 @@ interface Config {
   proxyFallback?: string // e.g. http://localhost:9999 Target for relaying routes without mocks
   allowedExt?: RegExp // /\.(json|txt|md|js)$/ Just for excluding temporary editor files (e.g. JetBrains appends a ~)
   generate500?: boolean // autogenerates an Internal Server Error empty mock for routes that have no 500
+  extraHeaders?: []
 }
 ```
-
-## Cookies
-```js
-import { jwtCookie } from 'mockaton'
-
-Config.cookies = {
-  'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
-  'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
-  'My JWT': jwtCookie('my-cookie', {
-    email: 'john.doe@example.com',
-    picture: 'https://cdn.auth0.com/avatars/jd.png'
-  })
-}
-```
-The key is just a label used for selecting a particular cookie in the dashboard.
-
-`jwtCookie` has a hardcoded header and signature. In other
-words, it’s useful if you only care about its payload.
-
 ---
 
 ## File Name Convention
@@ -143,7 +125,7 @@ Comments are anything within parentheses, including them.
 They are ignored for URL purposes, so they have no effect
 on the URL mask. For example, these two are for `/api/foo`
 <pre>
-api/foo<b>(my comment)</b>.GET.200.json<b>(foo)</b>
+api/foo<b>(my comment)</b>.GET.200.json<b>(bar)</b>
 api/foo.GET.200.json
 </pre>
 
@@ -161,16 +143,49 @@ but since that’s part of the query string, it’s ignored anyway.
 
 
 
-### Default (index-like) file
-For the default route of a directory, omit the name (just use
-the extension). For example, the following files will be routed
-to `api/foo` because comments and the query string are ignored.
+### Default (index-like) route
+For the default route of a directory, omit the mock filename name
+(<b>just use the extension</b>). For example, the following files will be
+routed to `api/foo` because comments and the query string are ignored.
 ```text
 api/foo/.GET.200.json
 api/foo/?bar=[bar].GET.200.json
 api/foo/(my comment).GET.200.json
 ```
 
+
+## `Config.cookies`
+The selected cookie is sent in every response in the `Set-Cookie` header.
+```js
+import { jwtCookie } from 'mockaton'
+
+Config.cookies = {
+  'My Admin User':  'my-cookie=1;Path=/;SameSite=strict',
+  'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
+  'My JWT': jwtCookie('my-cookie', {
+    email: 'john.doe@example.com',
+    picture: 'https://cdn.auth0.com/avatars/jd.png'
+  })
+}
+```
+The key is just a label used for selecting a particular cookie in the dashboard.
+
+`jwtCookie` has a hardcoded header and signature. In other
+words, it’s useful if you only care about its payload.
+
+
+## `Config.extraHeaders`
+They are applied last, right before ending the response. In other words, they
+can overwrite the `Content-Type`. The header name goes in even indices.
+
+```js
+Config.extraHeaders = [
+  'Server', 'Mockaton',
+  'Set-Cookie', 'foo=FOO;Path=/;SameSite=strict',
+  'Set-Cookie', 'bar=BAR;Path=/;SameSite=strict'
+]
+```
+
 ## Documenting Contracts (.md)
 This is handy for documenting request payload parameters. The dashboard will
 print the Markdown document (as plain text) above the actual payload content.
@@ -207,7 +222,7 @@ fetch(addr + '/mockaton/bulk-select-by-comment', {
 ### Reset
 Re-Initialize the collection and its states (selected mocks and cookies, delays, etc.).
 ```js
-fetch(add + '/mockaton/reset', {
+fetch(addr + '/mockaton/reset', {
   method: 'PATCH'
 })
 ```

package/Tests.js

@@ -111,7 +111,8 @@ const server = Mockaton({
 		userA: 'CookieA',
 		userB: 'CookieB'
 	},
-	generate500: true
+	generate500: true,
+	extraHeaders: ['Server', 'MockatonTester']
 })
 server.on('listening', runTests)
 
@@ -158,7 +159,7 @@ async function runTests() {
 	await reset()
 	for (const [url, file, body] of fixtures)
 		await testMockDispatching(url, file, body)
-	
+
 	await testMockDispatching('/api/object', 'api/object.GET.200.js', { JSON_FROM_JS: true }, mimeFor('.json'))
 	await testJsFunctionMocks()
 
@@ -205,6 +206,7 @@ async function testMockDispatching(url, file, expectedBody, forcedMime = void 0)
 		it('status: ' + status, () => equal(res.status, status))
 		it('cookie: ' + mime, () => equal(res.headers.get('set-cookie'), 'CookieA'))
 		it('delay is under 1 sec', () => equal((new Date()).getTime() - now.getTime() < 1000, true))
+		it('extra header', () => equal(res.headers.get('server'), 'MockatonTester'))
 	})
 }
 

package/index.d.ts

@@ -10,7 +10,8 @@ interface Config {
 	skipOpen?: boolean
 	proxyFallback?: string
 	allowedExt?: RegExp
-	generate500?: boolean
+	generate500?: boolean,
+	extraHeaders?: [string, string][] 
 }
 
 export function Mockaton(options: Config): Server

package/package.json

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

package/sample-mocks/api/user/likes.GET.200.js

@@ -1,7 +1,9 @@
-// You can write JSON responses in JavaScript.
+// You can write JSON responses in JavaScript. 
+// You can export an: Object, Array, or String
 
 export default [
 	{ id: 0 },
 	{ id: 1 },
 	{ id: 2 },
 ]
+

package/sample-mocks/api/user/links.GET.200.js

@@ -0,0 +1,9 @@
+// You can write JSON responses in JavaScript as a function.
+// Must return a String and they should NOT call `response.end()`
+
+export default function (req, response) {
+	return JSON.stringify([
+		'http://example.com/foo',
+		'http://example.com/bar',
+	])
+}

package/src/Config.js

@@ -12,7 +12,8 @@ export const Config = {
 	skipOpen: false,
 	proxyFallback: '', // e.g. http://localhost:9999
 	allowedExt: /\.(json|txt|md|js)$/, // Just for excluding temporary editor files (e.g. JetBrains appends a ~)
-	generate500: false
+	generate500: false,
+	extraHeaders: []
 }
 
 export function setup(options) {
@@ -27,7 +28,8 @@ export function setup(options) {
 		skipOpen: is(Boolean),
 		proxyFallback: is(String),
 		allowedExt: is(RegExp),
-		generate500: is(Boolean)
+		generate500: is(Boolean),
+		extraHeaders: Array.isArray
 	})
 }
 

package/src/Dashboard.css

@@ -14,23 +14,13 @@ body {
 	padding: 16px;
 }
 * {
+	padding: 0;
 	border: 0;
 	margin: 0;
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 }
 
-h1 {
-	padding: 12px 0;
-	margin: 0;
-	font-size: 2rem;
-}
-
-
-select {
-	padding: 3px 0;
-	border: 1px solid #444;
-}
 
 fieldset {
 	width: 120px;
@@ -47,15 +37,6 @@ fieldset {
 	}
 }
 
-.CookieSelector {
-	display: flex;
-	align-items: center;
-	margin-left: 20px;
-
-	select {
-		margin-left: 5px;
-	}
-}
 
 main {
 	display: flex;
@@ -72,14 +53,39 @@ main {
 	}
 }
 
-.TitleWrap {
+menu {
 	display: flex;
-	align-items: center;
+	margin-bottom: 12px;
+	gap: 14px;
+	align-items: flex-end;
+
+	h1 {
+		margin: 0;
+		margin-right: 14px;
+		font-size: 2rem;
+	}
+
+	label {
+		span {
+			display: block;
+			color: #555;
+			font-size: .85rem;
+		}
+
+		select {
+			width: 143px;
+			padding: 3px 0;
+			border: 1px solid #bbb;
+			margin-top: 1px;
+			cursor: pointer;
+			border-radius: 4px;
+			font-size: 0.9rem;
+		}
+	}
 
 	button {
-		padding: 3px 12px;
+		padding: 4px 12px;
 		border: 1px solid var(--colorRed);
-		margin-left: 20px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
@@ -132,18 +138,11 @@ main {
 	}
 }
 
-.BulkSelectSection {
-	margin: 20px 0;
-}
-
-.BulkSelectSection select {
-	margin-top: 5px;
-}
-
 .MockSelector {
 	width: 300px;
 	padding: 8px 1px;
 	border: 0;
+	border-radius: 4px;
 	background: #eee;
 	text-align: right;
 	direction: rtl;

package/src/Dashboard.js

@@ -16,14 +16,11 @@ const Strings = {
 }
 
 const CSS = {
-	BulkSelectSection: 'BulkSelectSection',
-	CookieSelector: 'CookieSelector',
 	DelayCheckbox: 'DelayCheckbox',
 	Documentation: 'Documentation',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
-	TitleWrap: 'TitleWrap',
 
 	bold: 'bold',
 	chosen: 'chosen',
@@ -57,13 +54,11 @@ function DevPanel(brokersByMethod, cookies, comments) {
 	document.title = Strings.title
 	return (
 		r('div', null,
-			r('div', { className: CSS.TitleWrap },
+			r('menu', null,
 				r('h1', null, Strings.title),
-				r(ResetButton),
-				r(CookieSelector, { list: cookies })),
-			r('div', { className: CSS.BulkSelectSection },
-				r('h2', null, Strings.bulk_select_by_comment),
-				r(BulkSelector, { comments })),
+				r(CookieSelector, { list: cookies }),
+				r(BulkSelector, { comments }),
+				r(ResetButton)),
 			r('main', null,
 				r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
 					r(SectionByMethod, { method, brokers }))),
@@ -88,8 +83,8 @@ function ResetButton() {
 
 function CookieSelector({ list }) {
 	return (
-		r('label', { className: CSS.CookieSelector },
-			Strings.cookie,
+		r('label', null,
+			r('span', null, Strings.cookie),
 			r('select', {
 				autocomplete: 'off',
 				disabled: list.length <= 1,
@@ -111,21 +106,23 @@ function CookieSelector({ list }) {
 
 function BulkSelector({ comments }) {
 	return (
-		r('select', {
-			autocomplete: 'off',
-			disabled: comments.length <= 1,
-			onChange() {
-				fetch(API.bulkSelect, {
-					method: 'PATCH',
-					body: JSON.stringify(this.value)
-				})
-					.then(init)
-					.catch(console.error)
-			}
-		}, [Strings.select_one].concat(comments).map(item =>
-			r('option', {
-				value: item
-			}, item))))
+		r('label', null,
+			r('span', null, Strings.bulk_select_by_comment),
+			r('select', {
+				autocomplete: 'off',
+				disabled: comments.length <= 1,
+				onChange() {
+					fetch(API.bulkSelect, {
+						method: 'PATCH',
+						body: JSON.stringify(this.value)
+					})
+						.then(init)
+						.catch(console.error)
+				}
+			}, [Strings.select_one].concat(comments).map(item =>
+				r('option', {
+					value: item
+				}, item)))))
 }
 
 

package/src/MockDispatcher.js

@@ -31,22 +31,23 @@ export async function dispatchMock(req, response) {
 		const { file, status, delay } = broker
 		console.log('\n', req.url, '→\n ', file)
 
-		response.statusCode = status
-		if (cookie.getCurrent())
-			response.setHeader('set-cookie', cookie.getCurrent())
-
 		let mockText
 		if (file.endsWith('.js')) {
 			response.setHeader('content-type', mimeFor('.json'))
 			const jsExport = await importDefault(file)
 			mockText = typeof jsExport === 'function'
-				? jsExport(req, response)
-				: JSON.stringify(jsExport)
+				? await jsExport(req, response)
+				: JSON.stringify(jsExport, null, 2)
 		}
 		else {
 			response.setHeader('content-type', mimeFor(file))
 			mockText = readMock(file)
 		}
+		
+		if (cookie.getCurrent())
+			response.setHeader('set-cookie', cookie.getCurrent())
+		
+		response.writeHead(status, Config.extraHeaders)
 		setTimeout(() => response.end(mockText), delay)
 	}
 	catch (error) {

package/src/Mockaton.js

@@ -14,6 +14,8 @@ export function Mockaton(options) {
 	mockBrokerCollection.init()
 
 	return createServer(async (req, response) => {
+		response.setHeader('Server', 'Mockaton')
+
 		const { url, method } = req
 		if (method === 'GET' && apiGetRequests.has(url))
 			apiGetRequests.get(url)(req, response)

package/sample-mocks/api/user/loves.GET.200.js

@@ -1,7 +0,0 @@
-// You can write JSON responses in JavaScript.
-
-export default function (req, response) {
-	return JSON.stringify([
-		{ id: 0 }
-	])
-}