mockaton 13.3.4 → 13.4.0

package/README.md

@@ -10,6 +10,26 @@ for testing difficult to reproduce backend states.
 
 ## [Documentation ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog)
 
+## TL;DR
+```shell
+npx mockaton my-mocks-dir
+```
+
+It’s like `servedir`, but supports dynamic segments in filenames. For example:
+
+**Route**: [/api/company/123](#) <br/>
+**File**: my-mocks-dir/api/company/[id].GET.200.json
+
+Statics assets don’t need that extension:
+
+**Route**: [/media/avatar.png](#) <br/>
+**File**: my-mocks-dir/media/avatar.png
+
+
+## Dashboard
+Besides the dashboard, there’s a programmatic [Control API](https://mockaton.com/api).
+Also, there’s a [Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
+
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.light.gold.png">
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
@@ -36,12 +56,8 @@ curl localhost:2020/api/user
 ```
 
 
-## Overview
-With Mockaton, you don’t need to write code for wiring up your
-mocks. Instead, a given directory is scanned for filenames
-following a convention similar to the URLs.
-
-For example, for [/api/company/123](#), the file could be:
+## Examples
+[/api/company/123](#)
 
 <code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.json</code>
 ```json
@@ -50,6 +66,8 @@ For example, for [/api/company/123](#), the file could be:
 }
 ```
 
+<br/>
+
 Or, you can write it in TypeScript (it will be sent as JSON).
 
 <code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.ts</code>
@@ -59,15 +77,17 @@ export default {
 }
 ```
 
+<br/>
+
 Similarly, you can handle logic with [Functional Mocks](https://mockaton.com/functional-mocks):
 
 <code>my_mocks_dir/<b>api/company/[companyId]/user/[userId]</b>.GET.200.ts</code>
 ```ts
 import { IncomingMessage, OutgoingMessage } from 'node:http'
-import { parseSplats } from 'mockaton'
+import { parseSegments } from 'mockaton'
 
 export default async function (req: IncomingMessage, response: OutgoingMessage) {
-  const { companyId, userId } = parseSplats(req.url, import.meta.filename)
+  const { companyId, userId } = parseSegments(req.url, import.meta.filename)
   const foo = await getFoo()
   return JSON.stringify({
     foo,
@@ -77,11 +97,3 @@ export default async function (req: IncomingMessage, response: OutgoingMessage)
   })
 }
 ```
-
-## Browser Extension
-[Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
-
-
-## API
-Programmatic [Control API](https://mockaton.com/api).
-

package/index.d.ts

@@ -62,7 +62,7 @@ export const echoFilePlugin: Plugin
 export function jwtCookie(cookieName: string, payload: any, path?: string): string
 
 export function parseJSON(request: IncomingMessage): Promise<any>
-export function parseSplats(reqUrl: string, filename: string): Record<string, string>
+export function parseSegments(reqUrl: string, filename: string): Record<string, string>
 export function parseQueryParams(reqUrl: string): URLSearchParams
 
 export type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>

package/index.js

@@ -5,6 +5,6 @@ export { Mockaton } from './src/server/Mockaton.js'
 export { jwtCookie } from './src/server/utils/jwt.js'
 export { jsToJsonPlugin, echoFilePlugin } from './src/server/MockDispatcherPlugins.js'
 export { parseJSON, BodyReaderError } from './src/server/utils/HttpIncomingMessage.js'
-export { parseSplats, parseQueryParams } from './src/server/utils/UrlParsers.js'
+export { parseSegments, parseQueryParams, parseSplats } from './src/server/UrlParsers.js'
 
 export const defineConfig = opts => opts

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "13.3.4",
+	"version": "13.4.0",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/ApiCommander.js

@@ -10,7 +10,7 @@ export class Commander {
 	}
 
 	/** @returns {Promise<Response>} */
-	#patch = (api, body) => fetch(this.addr + api, {
+	#patch = (api, body = undefined) => fetch(this.addr + api, {
 		method: 'PATCH',
 		body: JSON.stringify(body)
 	})

package/src/client/ApiConstants.js

@@ -25,9 +25,9 @@ export const API = {
 	deleteMock: MOUNT + '/delete-mock',
 }
 
-export const HEADER_502 = 'Mockaton502'
-
 export const DEFAULT_MOCK_COMMENT = '(default)'
 
 export const EXT_UNKNOWN_MIME = 'unknown'
 export const EXT_EMPTY = 'empty'
+
+export const FILENAME_HEADER = 'Mockaton-File'

package/src/client/IndexHtml.js

@@ -7,24 +7,24 @@ export const CSP = [
 
 // language=html
 export const IndexHtml = (hotReloadEnabled, version) => `
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-	<meta charset="UTF-8">
-	<base href="${API.dashboard}/">
+	<!DOCTYPE html>
+	<html lang="en-US">
+	<head>
+		<meta charset="UTF-8">
+		<base href="${API.dashboard}/">
 
-	<script type="module" src="app.js"></script>
-	<link rel="preload" href="${API.state}" as="fetch" crossorigin>
+		<script type="module" src="app.js"></script>
+		<link rel="preload" href="${API.state}" as="fetch" crossorigin>
 
-	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="HTTP Mock Server">
-	<title>Mockaton v${version}</title>
-</head>
-<body>
-${hotReloadEnabled
-	? '<script type="module" src="watcherDev.js"></script>'
-	: ''}
-</body>
-</html>
+		<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="HTTP Mock Server">
+		<title>Mockaton v${version}</title>
+	</head>
+	<body>
+	${hotReloadEnabled
+		? `<script type="module" src="utils/watcherDev.js?url=${API.watchHotReload}"></script>`
+		: ''}
+	</body>
+	</html>
 `

package/src/client/app-header.js

@@ -1,9 +1,10 @@
-import { createElement as r, t, defineClassNames } from './dom-utils.js'
+import { createElement as r, t } from './utils/dom.js'
 import { Logo, HelpIcon } from './graphics.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-defineClassNames(CSS)
+import { extractClassNames } from './utils/css.js'
+Object.assign(CSS, extractClassNames(CSS))
 
 
 export function Header() {

package/src/client/app-payload-viewer.js

@@ -1,10 +1,10 @@
-import { createElement as r, t, defineClassNames } from './dom-utils.js'
-import { HEADER_502 } from './ApiConstants.js'
+import { createElement as r, t } from './utils/dom.js'
 import { parseFilename } from './Filename.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-defineClassNames(CSS)
+import { extractClassNames } from './utils/css.js'
+Object.assign(CSS, extractClassNames(CSS))
 
 
 const titleRef = {}
@@ -41,12 +41,9 @@ function PayloadViewerTitle(file, statusText) {
 
 function PayloadViewerTitleWhenProxied(response) {
 	const mime = response.headers.get('content-type') || ''
-	const badGateway = response.headers.get(HEADER_502)
 	return (
 		r('span', null,
-			badGateway
-				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
-				: r('span', null, t`Got` + ' '),
+			r('span', null, t`Got` + ' '),
 			r('abbr', { title: response.statusText }, response.status),
 			' ' + mime))
 }

package/src/client/app-store.js

@@ -1,5 +1,8 @@
 import { Commander } from './ApiCommander.js'
+import { groupByFolder } from './dir/groupByFolder.js'
+import { dittoSplitPaths } from './dir/dittoSplitPaths.js'
 import { parseFilename, extractComments } from './Filename.js'
+import { LocalStorageSet, QueryParamBool } from './utils/LocalStorage.js'
 import { EXT_UNKNOWN_MIME, EXT_EMPTY } from './ApiConstants.js'
 
 
@@ -22,25 +25,21 @@ export const store = {
 	collectProxied: false,
 	proxyFallback: '',
 	showProxyField: null,
-	get canProxy() {
-		return Boolean(store.proxyFallback)
-	},
+	get canProxy() { return Boolean(store.proxyFallback) },
 
-	groupByMethod: initPreference('groupByMethod'),
+	_groupByMethod: new QueryParamBool('groupByMethod'),
+	get groupByMethod() { return store._groupByMethod.value },
 	toggleGroupByMethod() {
-		store.groupByMethod = !store.groupByMethod
-		togglePreference('groupByMethod', store.groupByMethod)
+		store._groupByMethod.toggle()
 		store.render()
 	},
 
-	collapsedFolders: new Set(JSON.parse(globalThis.localStorage?.getItem('collapsedFolders') || '[]')),
+	collapsedFolders: new LocalStorageSet('collapsedFolders'),
 	setFolderCollapsed(folder, collapsed) {
 		if (collapsed)
 			store.collapsedFolders.add(folder)
 		else
 			store.collapsedFolders.delete(folder)
-
-		globalThis.localStorage?.setItem('collapsedFolders', JSON.stringify([...store.collapsedFolders]))
 	},
 
 	chosenLink: { method: '', urlMask: '' },
@@ -123,10 +122,6 @@ export const store = {
 
 	_dittoCache: new Map(),
 
-	brokerFor(method, urlMask) {
-		return store.brokersByMethod[method]?.[urlMask]
-	},
-
 	brokerAsRow(method, urlMask) {
 		const b = store.brokerFor(method, urlMask)
 		const r = new BrokerRowModel(b, store.canProxy)
@@ -134,13 +129,15 @@ export const store = {
 		return r
 	},
 
-	_setBroker(broker) {
-		const { method, urlMask } = parseFilename(broker.file)
-		store.brokersByMethod[method] ??= {}
-		store.brokersByMethod[method][urlMask] = broker
+	brokerFor(method, urlMask) {
+		return store.brokersByMethod[method]?.[urlMask]
+	},
+
+	folderGroupsByMethod(method) {
+		return groupByFolder(store._brokersAsRowsByMethod(method))
 	},
 
-	brokersAsRowsByMethod(method) {
+	_brokersAsRowsByMethod(method) {
 		const rows = store._brokersAsArray(method)
 			.map(b => new BrokerRowModel(b, store.canProxy))
 			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
@@ -200,70 +197,15 @@ export const store = {
 		store._request(() => api.setRouteIsDelayed(method, urlMask, checked), async response => {
 			store._setBroker(await response.json())
 		})
-	}
-}
-
-
+	},
 
-// When false, the URL will be updated with param=false
-function initPreference(param) {
-	const qs = new URLSearchParams(globalThis.location?.search)
-	if (!qs.has(param)) {
-		const group = globalThis.localStorage?.getItem(param) !== '0'
-		if (!group) {
-			const url = new URL(globalThis.location?.href)
-			url.searchParams.set(param, '0')
-			history.replaceState(null, '', url)
-		}
-		return group
+	_setBroker(broker) {
+		const { method, urlMask } = parseFilename(broker.file)
+		store.brokersByMethod[method] ??= {}
+		store.brokersByMethod[method][urlMask] = broker
 	}
-	return qs.get(param) !== '0'
-}
-
-// When false, the URL and localStorage will have param='0'
-function togglePreference(param, nextVal) {
-	if (nextVal)
-		globalThis.localStorage?.removeItem(param)
-	else
-		globalThis.localStorage?.setItem(param, nextVal)
-
-	const url = new URL(location.href)
-	if (nextVal)
-		url.searchParams.delete(param)
-	else
-		url.searchParams.set(param, '0')
-	history.replaceState(null, '', url)
 }
 
-
-
-/**
- * Think of this as a way of printing a directory tree in which
- * the repeated folder paths are kept but styled differently.
- * @param {string[]} paths - sorted
- */
-export function dittoSplitPaths(paths) {
-	const pParts = paths.map(p => p.split('/').filter(Boolean))
-	return paths.map((p, i) => {
-		if (i === 0)
-			return ['', p]
-
-		const prev = pParts[i - 1]
-		const curr = pParts[i]
-		const min = Math.min(curr.length, prev.length)
-		let j = 0
-		while (j < min && curr[j] === prev[j])
-			j++
-
-		if (!j) // no common dirs
-			return ['', p]
-
-		const ditto = '/' + curr.slice(0, j).join('/') + '/'
-		return [ditto, p.slice(ditto.length)]
-	})
-}
-
-
 export class BrokerRowModel {
 	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
 	isNew = false

package/src/client/app-store.test.js

@@ -1,31 +1,7 @@
 import { test } from 'node:test'
 import { deepEqual } from 'node:assert/strict'
 
-import { dittoSplitPaths, BrokerRowModel, t } from './app-store.js'
-
-
-test('dittoSplitPaths', () => {
-	const input = [
-		'/api/user',
-		'/api/user/avatar',
-		'/api/user/friends',
-		'/api/vid',
-		'/api/video/id',
-		'/api/video/stats',
-		'/v2/foo',
-		'/v2/foo/bar'
-	]
-	deepEqual(dittoSplitPaths(input), [
-		['', '/api/user'],
-		['/api/user/', 'avatar'],
-		['/api/user/', 'friends'],
-		['/api/', 'vid'],
-		['/api/', 'video/id'],
-		['/api/video/', 'stats'],
-		['', '/v2/foo'],
-		['/v2/foo/', 'bar']
-	])
-})
+import { BrokerRowModel, t } from './app-store.js'
 
 
 test('BrokerRowModel', () => {

package/src/client/app.css

@@ -185,15 +185,19 @@ header {
 	}
 
 	.HelpLink {
-		width: 24px;
-		height: 24px;
+		width: 22px;
+		height: 22px;
 		flex-shrink: 0;
 		align-self: end;
-		margin-bottom: 2px;
+		margin-bottom: 3px;
 		margin-left: auto;
 		border-radius: 50%;
-		fill: white;
-		background: var(--colorAccent);
+		fill: var(--colorBgHeader);
+		background: var(--colorLabel);
+
+		&:hover {
+			background: var(--colorAccent);
+		}
 
 		svg {
 			transform: scale(.7);

package/src/client/app.js

@@ -1,15 +1,15 @@
-import { createElement as r, t, classNames, restoreFocus, Fragment, defineClassNames } from './dom-utils.js'
+import { createElement as r, t, restoreFocus, Fragment } from './utils/dom.js'
 
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
 import { Header } from './app-header.js'
-import { dirStructure } from './dirStructure.js'
 import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
 
 import CSS from './app.css' with { type: 'css' }
+import { extractClassNames, classNames } from './utils/css.js'
 document.adoptedStyleSheets.push(CSS)
-defineClassNames(CSS)
+Object.assign(CSS, extractClassNames(CSS))
 
 
 store.onError = onError
@@ -100,14 +100,14 @@ function MockList() {
 			r('div', {
 				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
 			}, method),
-			FolderGroups(store.brokersAsRowsByMethod(method))))
+			FolderGroups(store.folderGroupsByMethod(method))))
 
-	return FolderGroups(store.brokersAsRowsByMethod('*'))
+	return FolderGroups(store.folderGroupsByMethod('*'))
 }
 
-function FolderGroups(bRows) {
+function FolderGroups(brokersTree) {
 	const res = []
-	for (const b of dirStructure(bRows)) {
+	for (const b of brokersTree) {
 		if (!b.children.length)
 			res.push(Row(b))
 		else

package/src/client/dir/dittoSplitPaths.js

@@ -0,0 +1,25 @@
+/**
+ * Think of this as a way of printing a directory tree in which
+ * the repeated folder paths are kept but styled differently.
+ * @param {string[]} paths - sorted
+ */
+export function dittoSplitPaths(paths) {
+	const pParts = paths.map(p => p.split('/').filter(Boolean))
+	return paths.map((p, i) => {
+		if (i === 0)
+			return ['', p]
+
+		const prev = pParts[i - 1]
+		const curr = pParts[i]
+		const min = Math.min(curr.length, prev.length)
+		let j = 0
+		while (j < min && curr[j] === prev[j])
+			j++
+
+		if (!j) // no common dirs
+			return ['', p]
+
+		const ditto = '/' + curr.slice(0, j).join('/') + '/'
+		return [ditto, p.slice(ditto.length)]
+	})
+}

package/src/client/dir/dittoSplitPaths.test.js

@@ -0,0 +1,28 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { dittoSplitPaths } from './dittoSplitPaths.js'
+
+
+test('dittoSplitPaths', () => {
+	const input = [
+		'/api/user',
+		'/api/user/avatar',
+		'/api/user/friends',
+		'/api/vid',
+		'/api/video/id',
+		'/api/video/stats',
+		'/v2/foo',
+		'/v2/foo/bar'
+	]
+	deepEqual(dittoSplitPaths(input), [
+		['', '/api/user'],
+		['/api/user/', 'avatar'],
+		['/api/user/', 'friends'],
+		['/api/', 'vid'],
+		['/api/', 'video/id'],
+		['/api/video/', 'stats'],
+		['', '/v2/foo'],
+		['/v2/foo/', 'bar']
+	])
+})
+

package/src/client/{dirStructure.js → dir/groupByFolder.js}

@@ -1,13 +1,8 @@
-function TrieNode() {
-	this.brokers = []
-	this.tnChildren = new Map()
-}
-
 /**
  * @param {Partial<BrokerRowModel>[]} brokers
  * @returns {Partial<BrokerRowModel>[]}
  */
-export function dirStructure(brokers) {
+export function groupByFolder(brokers) {
 	return dfs(trie(brokers))
 }
 
@@ -16,8 +11,8 @@ function trie(brokers) {
 	for (const b of brokers) {
 		let node = root
 		for (const seg of b.urlMask.split('/')) { // TODO it should ignore query string
-			const segNode = node.tnChildren.get(seg) || new TrieNode()
-			node.tnChildren.set(seg, segNode)
+			const segNode = node.getChild(seg) || new TrieNode()
+			node.addChild(seg, segNode)
 			node = segNode
 		}
 		node.brokers.push(b)
@@ -25,10 +20,18 @@ function trie(brokers) {
 	return root
 }
 
+class TrieNode {
+	#children = new Map()
+	brokers = []
+	addChild(k, v) { this.#children.set(k, v) }
+	getChild(k) { return this.#children.get(k) }
+	getChildren() { return this.#children.values() }
+}
+
 /** @param {TrieNode} node */
 function dfs(node) {
 	const childBrokers = []
-	for (const tnc of node.tnChildren.values())
+	for (const tnc of node.getChildren())
 		childBrokers.push(...dfs(tnc))
 
 	const brokers = node.brokers.length
@@ -38,10 +41,11 @@ function dfs(node) {
 	if (!brokers.length)
 		return []
 
-	const [head, ...rest] = brokers
-	if (node.brokers.length || !head.children.length) {
-		head.children.push(...rest)
-		return [head]
+	const [b0, ...rest] = brokers
+	if (node.brokers.length || !b0.children.length) {
+		b0.children.push(...rest)
+		return [b0]
 	}
 	return brokers
 }
+

package/src/client/dir/groupByFolder.test.js

@@ -0,0 +1,82 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { groupByFolder } from './groupByFolder.js'
+
+
+test('groupByFolder', () => {
+	const input = [
+		{ children: [], method: 'GET', urlMask: '/api/user' },
+		{ children: [], method: 'GET', urlMask: '/api/user/avatar' },
+		{ children: [], method: 'GET', urlMask: '/api/video/[id]' },
+		{ children: [], method: 'GET', urlMask: '/index.html' },
+		{ children: [], method: 'GET', urlMask: '/media/file-a.txt' },
+		{ children: [], method: 'GET', urlMask: '/media/file-b.txt' },
+		{ children: [], method: 'GET', urlMask: '/media/sub/file-aa.txt' },
+		{ children: [], method: 'GET', urlMask: '/media/sub/file-bb.txt' },
+		{ children: [], method: 'POST', urlMask: '/api/user' },
+		{ children: [], method: 'POST', urlMask: '/api/user/avatar/foo' },
+		{ children: [], method: 'PATCH', urlMask: '/api/user' }
+	]
+
+
+	const expected = [
+		{
+			urlMask: '/api/user',
+			method: 'GET',
+			children: [
+				{
+					urlMask: '/api/user/avatar',
+					method: 'GET',
+					children: [
+						{
+							urlMask: '/api/user/avatar/foo',
+							method: 'POST',
+							children: []
+						}
+					]
+				}, {
+					urlMask: '/api/user',
+					method: 'POST',
+					children: []
+				}, {
+					urlMask: '/api/user',
+					method: 'PATCH',
+					children: []
+				}
+			]
+		},
+		{
+			urlMask: '/api/video/[id]',
+			method: 'GET',
+			children: []
+		},
+		{
+			urlMask: '/index.html',
+			method: 'GET',
+			children: []
+		},
+		{
+			urlMask: '/media/file-a.txt',
+			method: 'GET',
+			children: [
+				{
+					urlMask: '/media/file-b.txt',
+					method: 'GET',
+					children: []
+				}, {
+					urlMask: '/media/sub/file-aa.txt',
+					method: 'GET',
+					children: [
+						{
+							urlMask: '/media/sub/file-bb.txt',
+							method: 'GET',
+							children: []
+						}
+					]
+				}
+			]
+		}
+	]
+
+	deepEqual(groupByFolder(input), expected)
+})