mockaton 8.1.2 → 8.1.4

package/README.md

@@ -2,35 +2,65 @@
 
 _Mockaton_ is a mock server for developing and testing frontends.
 
-It scans a given directory for files following a specific
-file name convention, which is similar to the URL paths. For
-example, the following file will be served for `/api/user/1234`
+The mock filename convention is similar to the URL paths. For
+example, the following file will be served on `/api/user/1234`
 ```
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
-[This browser extension](https://github.com/ericfortis/devtools-ext-tar-http-requests)
-can be used for downloading a TAR of your XHR requests following that convention.
+By the way, [this browser
+extension](https://github.com/ericfortis/devtools-ext-tar-http-requests)
+can create a TAR of your XHR requests following that convention.
 
 
-## Getting Started Demo
-- Checkout this repo
-- `npm install tsx` (optional)
-- `npm run demo:ts`
-  which will open the following dashboard
-- Explore the [sample-mocks/](./sample-mocks) directory
-
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="./README-dashboard-light.png">
   <source media="(prefers-color-scheme: dark)" srcset="./README-dashboard-dark.png">
   <img alt="Mockaton Dashboard Demo" src="./README-dashboard-light.png" style="max-width: 860px">
 </picture>
 
-Then, pick a mock variant from the Mock dropdown (we’ll discuss
-them later). At its right, note the _Delay_ toggler, and the button
-for sending _500 - Internal Server Error_ on that endpoint.
 
-Then edit a mock file. You don’t need to restart Mockaton for that, the
+## Basic Usage
+`tsx` is only needed if you want to write mocks in TypeScript
+```
+npm install mockaton tsx
+```
+
+Create a `my-mockaton.js` file
+```js
+import { resolve } from 'node:path'
+import { Mockaton } from 'mockaton'
+
+
+// The Config options are explained in a section below
+Mockaton({
+  mocksDir: resolve('my-mocks-dir'),
+  port: 2345
+})
+```
+
+```sh
+node --import=tsx my-mockaton.js
+```
+
+
+## Running the Example Demo
+This demo uses the [sample-mocks/](./sample-mocks) directory of this repository.
+
+- Checkout this repo
+  - `git clone https://github.com/ericfortis/mockaton.git`
+  - `cd mockaton`
+- `npm install tsx` (optional)
+- `npm run demo:ts` it will open a dashboard
+
+Experiment with the Dashboard:
+
+- Pick a mock variant from the Mock dropdown (we’ll discuss
+  them later)
+- Toggle the clock icon, which _Delays_ responses (e.g. for testing spinners)
+- Toggle _500_ button, which sends and _Internal Server Error_ on that endpoint
+
+Finally, edit a mock file. You don’t need to restart Mockaton for that. The
 _Reset_ button is for registering newly added, removed, or renamed mocks.
 
 
@@ -56,29 +86,6 @@ _Reset_ button is for registering newly added, removed, or renamed mocks.
 - Reverse Proxies such as [Burp](https://portswigger.net/burp) are also handy for overriding responses.
 - [Mock Server Worker](https://mswjs.io)
 
-
-## Basic Usage
-`tsx` is only needed if you want to write mocks in TypeScript
-```
-npm install mockaton tsx
-```
-Create a `my-mockaton.js` file
-```js
-import { resolve } from 'node:path'
-import { Mockaton } from 'mockaton'
-
-
-// The Config options are explained in a section below
-Mockaton({
-  mocksDir: resolve('my-mocks-dir'),
-  port: 2345
-})
-```
-
-```sh
-node --import=tsx my-mockaton.js
-```
-
 ---
 
 ## Mock Variants

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.2",
+	"version": "8.1.4",
 	"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

@@ -94,8 +94,8 @@ function CookieSelector({ list }) {
 					title: disabled ? Strings.cookie_disabled_title : '',
 					onChange
 				},
-				list.map(([key, selected]) =>
-					r('option', { value: key, selected }, key)))))
+				list.map(([value, selected]) =>
+					r('option', { value, selected }, value)))))
 }
 
 
@@ -113,6 +113,7 @@ function BulkSelector({ comments }) {
 		r('label', null,
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
+					'data-qaid': 'BulkSelector',
 					autocomplete: 'off',
 					disabled,
 					title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
@@ -280,13 +281,14 @@ function MockSelector({ broker }) {
 	}
 
 	const selected = broker.currentMock.file
-	const { status } = parseFilename(selected)
+	const { status, urlMask } = parseFilename(selected)
 	const files = broker.mocks.filter(item =>
 		status === 500 ||
 		!item.includes(DEFAULT_500_COMMENT))
 
 	return (
 		r('select', {
+				'data-qaid': urlMask,
 				autocomplete: 'off',
 				className: className(selected === files[0], status),
 				disabled: files.length <= 1,

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)
+	}
+})