mockaton 8.1.1 → 8.1.3

package/README.md

@@ -226,7 +226,7 @@ Also, they take precedence over the `GET` mocks in `Config.mockDir`.
 For example, if you have two files for `GET /foo/bar.jpg`
 ```
 my-static-dir/foo/bar.jpg
- my-mocks-dir/foo/bar.jpg.GET.200.jpg // Unreacheable
+my-mocks-dir/foo/bar.jpg.GET.200.jpg // Unreacheable
 ```
 
 Use Case 1: If you have a bunch of static assets you don’t want to add `.GET.200.ext`
@@ -347,17 +347,7 @@ If you don’t want to open a browser, pass a noop, such as
 Config.onReady = () => {}
 ```
 
-On Linux, you could pass:
-```js
-import { exec } from 'node:child_process'
-
-
-Config.onReady = function openInBrowser(address) {
-  exec(`xdg-open ${address}`)
-}
-```
-
-Or, for more cross-platform utility, you could `npm install open` and pass it.
+For a more cross-platform utility, you could `npm install open` and pass it.
 ```js
 import open from 'open'
 
@@ -420,5 +410,3 @@ await mockaton.reset()
 
 ## TODO
 - Refactor Tests
-- Dashboard. Indicate if some file on `staticDir` is overriding a mock.
-- jsonc, json5?

package/package.json

@@ -2,14 +2,19 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.1.1",
+	"version": "8.1.3",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
 	"repository": "https://github.com/ericfortis/mockaton",
 	"scripts": {
-		"test": "node --test",
+		"test": "node --test src/**.test.js",
 		"demo": "node _usage_example.js",
-		"demo:ts": "node --import=tsx _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\""
+	},
+	"optionalDependencies": {
+		"puppeteer": "23.7.1",
+		"pixaton": "0.1.0"
 	}
 }

package/src/Dashboard.js

@@ -53,13 +53,13 @@ function init() {
 }
 init()
 
-function App([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
+function App(apiResponses) {
 	empty(document.body)
-	createRoot(document.body).render(
-		DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles))
+	createRoot(document.body)
+		.render(DevPanel(apiResponses))
 }
 
-function DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles) {
+function DevPanel([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
 	return (
 		r('div', null,
 			r('menu', null,
@@ -78,27 +78,33 @@ function DevPanel(brokersByMethod, cookies, comments, corsAllowed, staticFiles)
 			r(StaticFilesList, { staticFiles })))
 }
 
+
 function CookieSelector({ list }) {
+	function onChange() {
+		mockaton.selectCookie(this.value)
+			.catch(console.error)
+	}
 	const disabled = list.length <= 1
 	return (
 		r('label', null,
 			r('span', null, Strings.cookie),
 			r('select', {
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? Strings.cookie_disabled_title : '',
-				onChange() {
-					mockaton.selectCookie(this.value)
-						.catch(console.error)
-				}
-			}, list.map(([key, selected]) =>
-				r('option', {
-					value: key,
-					selected
-				}, key)))))
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? Strings.cookie_disabled_title : '',
+					onChange
+				},
+				list.map(([value, selected]) =>
+					r('option', { value, selected }, value)))))
 }
 
+
 function BulkSelector({ comments }) {
+	function onChange() {
+		mockaton.bulkSelectByComment(this.value)
+			.then(init)
+			.catch(console.error)
+	}
 	const disabled = !comments.length
 	const list = disabled
 		? []
@@ -107,34 +113,33 @@ function BulkSelector({ comments }) {
 		r('label', null,
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
-				onChange() {
-					mockaton.bulkSelectByComment(this.value)
-						.then(init)
-						.catch(console.error)
-				}
-			}, list.map(item =>
-				r('option', {
-					value: item
-				}, item)))))
+					'data-qaid': 'BulkSelector',
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
+					onChange
+				},
+				list.map(value =>
+					r('option', { value }, value)))))
 }
 
+
 function CorsCheckbox({ corsAllowed }) {
+	function onChange(event) {
+		mockaton.setCorsAllowed(event.currentTarget.checked)
+			.catch(console.error)
+	}
 	return (
 		r('label', { className: CSS.CorsCheckbox },
 			r('input', {
 				type: 'checkbox',
 				checked: corsAllowed,
-				onChange(event) {
-					mockaton.setCorsAllowed(event.currentTarget.checked)
-						.catch(console.error)
-				}
+				onChange
 			}),
 			Strings.allow_cors))
 }
 
+
 function ResetButton() {
 	return (
 		r('button', {
@@ -147,6 +152,7 @@ function ResetButton() {
 	)
 }
 
+
 function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
@@ -177,48 +183,50 @@ function SectionByMethod({ method, brokers }) {
 						r('td', null, r(PreviewLink, { method, urlMask })),
 						r('td', null, r(MockSelector, { broker })),
 						r('td', null, r(DelayRouteToggler, { broker })),
-						r('td', null, r(InternalServerErrorToggler, { broker }))
-					))))
+						r('td', null, r(InternalServerErrorToggler, { broker }))))))
 }
 
+
 function PreviewLink({ method, urlMask }) {
+	async function onClick(event) {
+		event.preventDefault()
+		try {
+			const spinner = setTimeout(() => {
+				empty(refPayloadViewer.current)
+				refPayloadViewer.current.append(ProgressBar())
+			}, 180)
+			const res = await fetch(this.href, {
+				method: this.getAttribute('data-method')
+			})
+			document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
+			this.classList.add(CSS.chosen)
+			clearTimeout(spinner)
+
+			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)
+
+			empty(refPayloadViewerFileTitle.current)
+			refPayloadViewerFileTitle.current.append(PayloadViewerTitle({
+				file: this.closest('tr').querySelector('select').value
+			}))
+		}
+		catch (error) {
+			console.error(error)
+		}
+	}
 	return (
 		r('a', {
 			className: CSS.PreviewLink,
 			href: urlMask,
 			'data-method': method,
-			async onClick(event) {
-				event.preventDefault()
-				try {
-					const spinner = setTimeout(() => {
-						empty(refPayloadViewer.current)
-						refPayloadViewer.current.append(ProgressBar())
-					}, 180)
-					const res = await fetch(this.href, {
-						method: this.getAttribute('data-method')
-					})
-					document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
-					this.classList.add(CSS.chosen)
-					clearTimeout(spinner)
-
-					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)
-
-					empty(refPayloadViewerFileTitle.current)
-					refPayloadViewerFileTitle.current.append(PayloadViewerTitle({
-						file: this.closest('tr').querySelector('select').value
-					}))
-				}
-				catch (error) {
-					console.error(error)
-				}
-			}
+			onClick
 		}, urlMask))
 }
 
+
 function PayloadViewerTitle({ file }) {
 	const { urlMask, method, status, ext } = parseFilename(file)
 	return (
@@ -228,12 +236,14 @@ function PayloadViewerTitle({ file }) {
 			'.' + ext))
 }
 
+
 function ProgressBar() {
 	return (
 		r('div', { className: CSS.ProgressBar },
 			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
 }
 
+
 function renderPayloadImage(href) {
 	empty(refPayloadViewer.current)
 	refPayloadViewer.current.append(r('img', { src: href }))
@@ -248,46 +258,56 @@ function updatePayloadViewer(body, mime) {
 
 
 function MockSelector({ broker }) {
-	const className = (defaultIsSelected, status) => cssClass(
-		CSS.MockSelector,
-		!defaultIsSelected && CSS.bold,
-		status >= 400 && status < 500 && CSS.status4xx)
+	function onChange() {
+		const { status } = parseFilename(this.value)
+		this.style.fontWeight = this.value === this.options[0].value // default is selected
+			? 'normal'
+			: 'bold'
+		mockaton.select(this.value)
+			.then(() => {
+				this.closest('tr').querySelector('a').click()
+				this.closest('tr').querySelector(`.${CSS.InternalServerErrorToggler}>[type=checkbox]`).checked = status === 500
+				this.className = className(this.value === this.options[0].value, status)
+			})
+			.catch(console.error)
+	}
 
-	const items = broker.mocks
-	const selected = broker.currentMock.file
 
-	const { status } = parseFilename(selected)
-	const files = items.filter(item =>
+	function className(defaultIsSelected, status) {
+		return cssClass(
+			CSS.MockSelector,
+			!defaultIsSelected && CSS.bold,
+			status >= 400 && status < 500 && CSS.status4xx)
+	}
+
+	const selected = broker.currentMock.file
+	const { status, urlMask } = parseFilename(selected)
+	const files = broker.mocks.filter(item =>
 		status === 500 ||
 		!item.includes(DEFAULT_500_COMMENT))
 
 	return (
 		r('select', {
-			className: className(selected === files[0], status),
-			autocomplete: 'off',
-			disabled: files.length <= 1,
-			onChange() {
-				const { status } = parseFilename(this.value)
-				this.style.fontWeight = this.value === this.options[0].value // default is selected
-					? 'normal'
-					: 'bold'
-				mockaton.select(this.value)
-					.then(() => {
-						this.closest('tr').querySelector('a').click()
-						this.closest('tr').querySelector(`.${CSS.InternalServerErrorToggler}>[type=checkbox]`).checked = status === 500
-						this.className = className(this.value === this.options[0].value, status)
-					})
-					.catch(console.error)
-			}
-		}, files.map(file => r('option', {
-			value: file,
-			selected: file === selected
-		}, file))))
+				'data-qaid': urlMask,
+				autocomplete: 'off',
+				className: className(selected === files[0], status),
+				disabled: files.length <= 1,
+				onChange
+			},
+			files.map(file =>
+				r('option', {
+					value: file,
+					selected: file === selected
+				}, file))))
 }
 
+
 function DelayRouteToggler({ broker }) {
-	const name = broker.currentMock.file
-	const checked = Boolean(broker.currentMock.delay)
+	function onChange(event) {
+		const { method, urlMask } = parseFilename(this.name)
+		mockaton.setRouteIsDelayed(method, urlMask, event.currentTarget.checked)
+			.catch(console.error)
+	}
 	return (
 		r('label', {
 				className: CSS.DelayToggler,
@@ -295,28 +315,29 @@ function DelayRouteToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				autocomplete: 'off',
-				name,
-				checked,
-				onChange(event) {
-					const { method, urlMask } = parseFilename(this.name)
-					mockaton.setRouteIsDelayed(method, urlMask, event.currentTarget.checked)
-						.catch(console.error)
-				}
+				name: broker.currentMock.file,
+				checked: Boolean(broker.currentMock.delay),
+				onChange
 			}),
 			TimerIcon()))
 }
 
+
 function TimerIcon() {
 	return (
 		r('svg', { viewBox: '0 0 24 24' },
 			r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
 }
 
+
 function InternalServerErrorToggler({ broker }) {
-	const items = broker.mocks
-	const name = broker.currentMock.file
-	const checked = parseFilename(broker.currentMock.file).status === 500
+	function onChange(event) {
+		mockaton.select(event.currentTarget.checked
+			? broker.mocks.find(f => parseFilename(f).status === 500)
+			: broker.mocks[0])
+			.then(init)
+			.catch(console.error)
+	}
 	return (
 		r('label', {
 				className: CSS.InternalServerErrorToggler,
@@ -324,16 +345,9 @@ function InternalServerErrorToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				autocomplete: 'off',
-				name,
-				checked,
-				onChange(event) {
-					mockaton.select(event.currentTarget.checked
-						? items.find(f => parseFilename(f).status === 500)
-						: items[0])
-						.then(init)
-						.catch(console.error)
-				}
+				name: broker.currentMock.file,
+				checked: parseFilename(broker.currentMock.file).status === 500,
+				onChange
 			}),
 			r('span', null, '500')
 		)

package/ui-tests/_setup.js

@@ -0,0 +1,32 @@
+import { after } from 'node:test'
+import { launch } from 'puppeteer'
+import {
+	removeDiffsAndCandidates,
+	testPixels as _testPixels,
+	diffServer
+} from 'pixaton'
+import { Commander } from '../index.js'
+
+// Before running these tests you need to spin up the demo:
+//   npm run demo
+
+const MOCKATON_ADDR = 'http://localhost:2345'
+const mockaton = new Commander(MOCKATON_ADDR)
+
+const testsDir = import.meta.dirname
+
+removeDiffsAndCandidates(testsDir)
+const browser = await launch({ headless: true })
+const page = await browser.newPage()
+
+after(() => {
+	browser?.close()
+	diffServer(testsDir)
+})
+
+export function testPixels(testFileName, options = {}) {
+	options.beforeSuite = async () => await mockaton.reset()
+	options.viewports ??= [{ width: 1024, height: 800 }]
+	options.colorSchemes ??= ['light', 'dark']
+	_testPixels(page, testFileName, MOCKATON_ADDR + '/mockaton', 'body', options)
+}

package/ui-tests/bulk-select.test.js

@@ -0,0 +1,10 @@
+import { testPixels } from './_setup.js'
+
+
+testPixels(import.meta.filename, {
+	async setup(page) {
+		const qaId = 'BulkSelector'
+		const target = '(Mockaton 500)'
+		await page.select(`select[data-qaid="${qaId}"]`, target)
+	}
+})

package/ui-tests/initial-dashboard-state.test.js

@@ -0,0 +1,4 @@
+import { testPixels } from './_setup.js'
+
+
+testPixels(import.meta.filename)

package/ui-tests/payload-viewer-formats-json.test.js

@@ -0,0 +1,9 @@
+import { testPixels } from './_setup.js'
+
+
+testPixels(import.meta.filename, {
+	async setup(page) {
+		const linkText = '/api/user'
+		await page.locator(`a ::-p-text(${linkText})`).click()
+	}
+})

package/ui-tests/payload-viewer-renders-images.test.js

@@ -0,0 +1,9 @@
+import { testPixels } from './_setup.js'
+
+
+testPixels(import.meta.filename, {
+	async setup(page) {
+		const linkText = '/api/user/avatar'
+		await page.locator(`a ::-p-text(${linkText})`).click()
+	}
+})

package/ui-tests/select-mock-variant.test.js

@@ -0,0 +1,10 @@
+import { testPixels } from './_setup.js'
+
+
+testPixels(import.meta.filename, {
+	async setup(page) {
+		const qaId = '/api/user/friends'
+		const target = 'api/user/friends.GET.204.json'
+		await page.select(`select[data-qaid="${qaId}"]`, target)
+	}
+})