Merge pull request #36 from andrewiggins/mock-fetch-ui

Add UI for controlling mock fetch requests

jest-puppeteer.config.js

@@ -0,0 +1,8 @@
+const isDebug = process.env.PPTR_DEBUG === "true";
+
+module.exports = {
+	launch: {
+		headless: !isDebug,
+		devtools: isDebug
+	}
+};

package.json

@@ -10,6 +10,7 @@
     "dev": "node ./scripts/dev.js",
     "serve": "sirv --dev dist",
     "test": "jest",
+    "test:debug": "cross-env PPTR_DEBUG=true jest --runInBand",
     "prepare": "husky install",
     "lint-staged": "lint-staged",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,html,vue}\""
@@ -39,6 +40,7 @@
     "@rollup/plugin-terser": "^0.4.3",
     "@types/jest": "^29.0.0",
     "babel-jest": "^29.6.2",
+    "cross-env": "^7.0.3",
     "html-minifier": "^4.0.0",
     "husky": "^8.0.3",
     "jest": "^29.6.2",

scripts/bundles/controls/jsx.d.ts

@@ -0,0 +1,27 @@
+type Children = undefined | string | JSX.Element | Array<Children>;
+
+interface JSXAttributes {
+	children?: Children;
+
+	// Attributes that this JSX allows
+	class?: string;
+	for?: string;
+	id?: string;
+}
+
+type JSXHTMLElement<T> = Partial<Omit<HTMLElementTagNameMap[T], "children">>;
+
+type HTMLElementsMap = {
+	[K in keyof HTMLElementTagNameMap]: JSXHTMLElement<K> & JSXAttributes;
+};
+
+declare namespace JSX {
+	interface Element extends HTMLElement {}
+	interface ElementChildrenAttribute {
+		children?: Children;
+	}
+	interface IntrinsicElements extends HTMLElementsMap {
+		// Custom elements
+		"draggable-dialog": JSXAttributes;
+	}
+}

scripts/bundles/controls/mockFetch.d.ts

@@ -0,0 +1,51 @@
+interface Timer {
+	expiresAt: number;
+	timeoutId: number;
+}
+
+type RequestId = string;
+
+interface Request {
+	id: RequestId;
+	/** When this request should resolve. If null, request is paused and not scheduled to complete */
+	expiresAt: number | null;
+	/** Total time this request should wait */
+	duration: number;
+	/** Tracks how much time of duration has elapsed when a request is paused/resumed */
+	elapsedTime: number;
+	/** Display name of request */
+	name: string;
+	url: string;
+	options: RequestInit;
+	promise: Promise<void>;
+	resolve: () => void;
+	reject: () => void;
+}
+
+type MockFetchEventType = "update";
+
+interface Config {
+	durationMs: number;
+	areNewRequestsPaused: boolean;
+	mode: "auto" | "manual";
+	timer: Timer | null;
+	requests: Map<string, Request>;
+	newId(): string;
+	pause(id: RequestId): void;
+	resume(id: RequestId): void;
+	on(type: MockFetchEventType, handler: () => void): void;
+	off(type: MockFetchEventType, handler: () => void): void;
+	log(...msg: any[]): void;
+	_emit(type: MockFetchEventType): void;
+}
+
+declare class MockFetchDebugger extends HTMLElement {
+	config: Config;
+	show: boolean;
+	dialog: boolean;
+}
+
+export function createMockFetchConfig(): Config;
+export function createMockFetch(
+	config: Config
+): (url: string, options?: RequestInit) => Promise<void>;