mockaton 8.4.1 → 8.5.1

package/README.md

@@ -49,8 +49,8 @@ which is handy for setting up tests  (see **Commander API** below).
 
 ## Basic Usage
 `tsx` is only needed if you want to write mocks in TypeScript
-```
-npm install mockaton tsx
+```sh
+npm install mockaton tsx --save-dev
 ```
 
 Create a `my-mockaton.js` file
@@ -70,23 +70,19 @@ node --import=tsx my-mockaton.js
 ```
 
 
-## Running the Built-in Demo
-This demo uses the [sample-mocks/](./sample-mocks) of this repository.
+## Running the demo app (Vite)
+
+This is a minimal React + Vite + Mockaton app.
 
 ```sh  
 git clone https://github.com/ericfortis/mockaton.git
-cd mockaton
-npm install tsx
-npm run demo:ts
+cd mockaton/demo-app-vite
+npm install 
+npm run mockaton
+npm run start
 ```
 
-Experiment with the Dashboard:
-
-- Pick a mock variant from the _Mock dropdown_ 
-- Toggle the 🕓 _Delay Responses_ button, (e.g. for testing spinners)
-- Toggle the _500_ button, which sends and _Internal Server Error_ on that endpoint
-
-Finally, edit a mock file in your IDE. You don’t need to restart Mockaton.
+By the way, that directory has a script for opening Mockaton and Vite in one command.
 
 
 ## Use Cases
@@ -175,7 +171,7 @@ export default async function insertColor(request, response) {
 }
 ```
 
-`api/colors.GET.200.js`
+`api/colors(assorted)(default).GET.200.ts`
 ```js
 import colorsFixture from './colors.json' with { type: 'json' }
 
@@ -334,14 +330,16 @@ 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',
+    name: 'John Doe',
     picture: 'https://cdn.auth0.com/avatars/jd.png'
   })
 }
 ```
 The selected cookie, which is the first one by default, is sent in every
-response in a `Set-Cookie` header. If you need to send more
-cookies, inject them globally in `config.extraHeaders`.
+response in a `Set-Cookie` header. 
+
+If you need to send more cookies, you can either inject them globally
+in `config.extraHeaders`, or in function `.js` or `.ts` mock.
 
 By the way, the `jwtCookie` helper has a hardcoded header and signature.
 In other words, it’s useful only if you care about its payload.
@@ -436,8 +434,8 @@ config.corsExposedHeaders = [] // headers you need to access in client-side JS
 
 
 ### `onReady?: (dashboardUrl: string) => void`
-This defaults to trying to open the dashboard in your default browser on macOS and
-Windows. For a more cross-platform utility, you could `npm install open` and pass it.
+By default, it will open the dashboard in your default browser on macOS and
+Windows. But for a more cross-platform utility, you could `npm install open` and pass it.
 ```js
 import open from 'open'
 config.onReady = open
@@ -448,6 +446,7 @@ If you don’t want to open a browser, pass a noop:
 config.onReady = () => {}
 ```
 
+Nonetheless, you can trigger any command besides opening a browser.
 
 ---
 
@@ -498,6 +497,6 @@ await mockaton.reset()
 ```
 
 <div style="display: flex; align-items: center; gap: 20px">
-  <img src="./sample-mocks/api/user/avatar.GET.200.png" width="170"/>
+  <img src="fixtures-mocks/api/user/avatar.GET.200.png" width="170"/>
   <p style="font-size: 18px">“Use Mockaton”</p>
 </div>

package/TODO.md

@@ -1,5 +1,5 @@
 # TODO
 
 - Refactor tests
-- Add Collect Proxied checkbox to the dashboard
-- Dashboard refresh (poll?)
+- Add Collect Proxied checkbox to the dashboard (remove Allow CORS)
+- Dashboard refresh (long polling ?)

package/{_usage_example.js → dev-mockaton.js}

@@ -1,10 +1,11 @@
 import { join } from 'node:path'
-import { Mockaton, jwtCookie } from './index.js' // from 'mockaton'
+import { Mockaton, jwtCookie } from './index.js'
+
 
 Mockaton({
 	port: 2345,
-	mocksDir: join(import.meta.dirname, 'sample-mocks'),
-	staticDir: join(import.meta.dirname, 'sample-static'),
+	mocksDir: join(import.meta.dirname, 'fixtures-mocks'),
+	staticDir: join(import.meta.dirname, 'fixtures-static-mocks'),
 	cookies: {
 		'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
 		'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',

package/package.json

@@ -2,16 +2,16 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.4.1",
+	"version": "8.5.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
 	"repository": "https://github.com/ericfortis/mockaton",
 	"scripts": {
 		"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\"",
+		"start": "node dev-mockaton.js",
+		"start:ts": "node --import=tsx dev-mockaton.js",
+		"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": {

package/src/Dashboard.js

@@ -16,6 +16,7 @@ const Strings = {
 	fallback_server_placeholder: 'Type Server Address',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
+	no_mocks_found: 'No mocks found',
 	reset: 'Reset',
 	select_one: 'Select One',
 	static: 'Static'
@@ -43,7 +44,6 @@ const refPayloadViewerFileTitle = useRef()
 
 const mockaton = new Commander(window.location.origin)
 
-window.onfocus = init
 function init() {
 	Promise.all([
 		mockaton.listMocks(),
@@ -64,6 +64,7 @@ function App(apiResponses) {
 }
 
 function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddress, staticFiles]) {
+	const isEmpty = Object.keys(brokersByMethod).length === 0
 	return (
 		r('div', null,
 			r('menu', null,
@@ -73,13 +74,15 @@ function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddr
 				r(ProxyFallbackField, { fallbackAddress }),
 				r(CorsCheckbox, { corsAllowed }),
 				r(ResetButton)),
-			r('main', null,
-				r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
-					r(SectionByMethod, { method, brokers }))),
-				r('div', { className: CSS.PayloadViewer },
-					r('h2', { ref: refPayloadViewerFileTitle }, Strings.mock),
-					r('pre', null,
-						r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview)))),
+			isEmpty
+				? r('main', null, Strings.no_mocks_found)
+				: r('main', null,
+					r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
+						r(SectionByMethod, { method, brokers }))),
+					r('div', { className: CSS.PayloadViewer },
+						r('h2', { ref: refPayloadViewerFileTitle }, Strings.mock),
+						r('pre', null,
+							r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview)))),
 			r(StaticFilesList, { staticFiles })))
 }
 

package/src/MockBroker.js

@@ -28,7 +28,7 @@ export class MockBroker {
 				this.updateFile(file)
 		}
 		this.mocks.push(file)
-		this.sortMocks()
+		this.#sortMocks()
 	}
 
 	#deleteTemp500() {
@@ -68,7 +68,7 @@ export class MockBroker {
 
 	#isTemp500(file) { return includesComment(file, DEFAULT_500_COMMENT) }
 
-	sortMocks() {
+	#sortMocks() {
 		this.mocks.sort()
 		const defaults = this.mocks.filter(file => includesComment(file, DEFAULT_MOCK_COMMENT))
 		const temp500 = this.mocks.filter(file => includesComment(file, DEFAULT_500_COMMENT))

package/src/Mockaton.js

@@ -16,12 +16,15 @@ export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
 
-	watch(config.mocksDir, { recursive: true, persistent: false }, (_, filename) => {
-		if (existsSync(join(config.mocksDir, filename)))
-			mockBrokerCollection.registerMock(filename, 'ensureItHas500')
-		else
-			mockBrokerCollection.unregisterMock(filename)
-	})
+	watch(config.mocksDir, { recursive: true, persistent: false },
+		function handleAddedOrDeletedMocks(_, filename) {
+			if (!filename)
+				return
+			if (existsSync(join(config.mocksDir, filename)))
+				mockBrokerCollection.registerMock(filename, 'ensureItHas500')
+			else
+				mockBrokerCollection.unregisterMock(filename)
+		})
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {
 		const { address, port } = this.address()

package/src/Mockaton.test.js

@@ -18,8 +18,8 @@ import { listFilesRecursively, read } from './utils/fs.js'
 import { API, DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
 
-const tmpDir = mkdtempSync(tmpdir()) + '/'
-const staticTmpDir = mkdtempSync(tmpdir()) + '/'
+const tmpDir = mkdtempSync(tmpdir() + '/mocks') + '/'
+const staticTmpDir = mkdtempSync(tmpdir() + '/static') + '/'
 
 const fixtureCustomMime = [
 	'/api/custom-mime',