mockaton 8.1.2 → 8.1.3

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.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

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