OpenAPI Resource Mocks

A Chrome DevTools panel for inspecting and controlling Angular mock tokens registered via @constantant/openapi-resource-mocks.

---

Prerequisites

Your Angular app must use @constantant/openapi-resource-mocks:

// app.config.ts
import { provideMockResourceBus } from '@constantant/openapi-resource-mocks';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideMockResourceBus(),   // ← registers the mock bus
  ],
};

// in a component's providers array
import { provideMockResource } from '@constantant/openapi-resource-mocks';

providers: [
  provideMockResource(FIND_PETS_BY_STATUS, 'findPetsByStatus', { loading: true }),
]

---

Installation

Chrome Web Store (recommended)

Search for "OpenAPI Resource Mocks DevTools" in the Chrome Web Store.

Load unpacked (development / local build)

1. Clone the repository and install dependencies:

   git clone https://github.com/constantant/angular-openapi-gen.git
   cd angular-openapi-gen
   npm install
   

2. Build the extension:

   npx nx run openapi-resource-devtools:build
   

3. Open chrome://extensions and enable Developer mode.
4. Click Load unpacked and select dist/tools/openapi-resource-devtools/.

---

Panel overview

Open Chrome DevTools (F12) on any page running provideMockResourceBus(). The API Mocks tab appears in the DevTools tab bar.

Mock table

The left pane lists every registered mock with its current status:

Column	Description
Key	The token key passed to provideMockResource()
Status	idle / loading / resolved / error / local / CAUGHT
Last event	Type and age of the most recent state change
Actions	⏸ Catch · ⏳ Loading · ✗ Fail · ↺ Reset

Click any row to open the Respond and History tabs on the right.

Respond tab

Manually resolve, fail, or control the selected mock:

• Response (JSON) — the value to resolve with; leave empty for undefined
• Response schema — shown when the spec has been imported (see Specs tab); provides:
  • ⚡ Example — generates a valid random payload from the schema via json-schema-faker and fills the JSON field
  • ✓ Validate — validates the current JSON field contents against the schema via ajv
• Delay (ms) — adds a simulated latency before resolving
• Resolve — transitions the resource to resolved with the given value
• Loading — forces the resource back to loading
• Fail — transitions to error with the given value as the error object
• Reset — returns the resource to idle

History tab

Reverse-chronological event log for the selected mock (up to 200 entries). A Clear button wipes the log.

Each row shows the timestamp, event type badge, and a one-line preview. For request and caught events the preview shows the filled URL — e.g. GET /pet/42 — derived from the operation's path template and the actual args the component passed.

Clicking a row expands a structured detail view:

• Filled URL — the path with {param} placeholders substituted by positional args (e.g. GET /pet/{petId} → GET /pet/42)
• Path param rows — one row per {param}, labeled by name from the spec, showing the actual value passed
• Query / Body section — remaining args after path params are labeled Query (GET/HEAD/DELETE) or Body (POST/PUT/PATCH)
• Binary badges — [FormData], [Blob], [ArrayBuffer], and [File: name] are displayed as inline badges instead of quoted strings
• Response / Error sections — shown for resolve and error events

---

Specs tab

The Specs tab (top-right of the panel) stores OpenAPI spec metadata so the panel can display response schemas and enable schema-aware features in the Respond tab.

Importing specs

Two file formats are accepted:

mocks.manifest.json (generated by --includeMocks) — a lightweight list of endpoint metadata with no schemas. Useful when you want the panel to show endpoint info (path, method, tag) without schema validation.

Full OpenAPI spec (.json or .yaml) — includes response schemas. Enables the ⚡ Example and ✓ Validate buttons in the Respond tab.

Import via + File (local file picker) or + URL (fetch by HTTPS URL). When a full spec is detected, the panel shows a confirmation form where you can verify or edit the specId — it must match the --specId value used when generating the mock library (defaults to the base URL token name with _BASE_URL stripped and lowercased, e.g. PETSTORE_BASE_URL → petstore).

How schemas are resolved

Each generated .mock.ts embeds a MockResourceMeta object with specId and operationId. When a mock is selected in the panel, its metadata is used to look up the matching response schema in the Specs store. If found, the schema toolbar appears in the Respond tab.

Specs are stored in chrome.storage.local and persist across DevTools sessions. Remove a spec with its Remove button.

---

Catch mode

Catch mode intercepts requests before they resolve, holding the resource in loading until you explicitly release it. This is useful for:

• Testing loading states without hardcoding delays
• Inspecting what params/args the component sent
• Deciding the response on a per-request basis

Enable per mock

Click the ⏸ button in the row's Actions column. The row gains an amber left-border and the status cell shows CAUGHT.

Enable for all mocks

Click ⏸ Catch All in the toolbar. All currently registered mocks are intercepted at once.

Responding to a caught request

When a mock is caught, the Respond tab shows a Caught request args section with the params the component passed to the token factory. Fill in a response JSON and click Release → Resolve or Release → Fail.

After each release, if catch mode is still on, the resource is immediately re-intercepted when the next request fires or when Reset is called.

---

Toolbar actions

Button	Action
↺ Refresh	Re-queries all mock states from the page
⏸ Catch All	Toggles catch mode on every registered mock
Clear	Removes all mocks from the panel (does not affect the page)
Reset All	Calls reset() on every mock, returning them to idle
Scenarios	Opens the Scenarios dialog — save named snapshots of the full mock table state, load / delete them, or export / import as JSON for cross-machine sharing
Filter…	Filters the mock table by key name

---

Local (unregistered) mocks

The ＋ New mock button in the mock table toolbar lets you create a panel-managed mock before provideMockResource() exists in the Angular app. Use this to pre-configure a mock response while you're still writing the component code:

1. Click ＋ New mock — the Create mock dialog opens.
2. Pick a spec from the Specs tab (the spec must already be imported), then select an operation.
3. The key is auto-generated from the operationId (e.g. findPetsByStatus → FIND_PETS_BY_STATUS). Edit it if needed.
4. Click Create — the new entry appears in the mock table with status local.

Local mock entries support all panel controls: catch mode, the Respond tab (including ⚡ Example and ✓ Validate when a spec is imported), and the History tab. Control messages to the page are silently ignored until the matching key is registered by the app.

When the app registers provideMockResource(..., 'FIND_PETS_BY_STATUS', ...), the local entry is promoted in-place — its status transitions to idle, catch mode is preserved, and any pending catch-mode control is re-sent to the now-live bus.

Local mock entries are persisted across DevTools sessions in chrome.storage.local.

---

Local development

# Build and watch (manual rebuild — no watch mode yet)
npx nx run openapi-resource-devtools:build

# After each build, reload the extension in Chrome:
# chrome://extensions → click the ↺ reload icon

The Angular panel lives in apps/devtools-panel/. The extension shell (manifest, content script, service worker, devtools page) lives in tools/openapi-resource-devtools/src/. See ARCHITECTURE.md for the message-flow diagram.

---

Releasing

Releases are created via the Release Extension GitHub Actions workflow (workflow_dispatch). It:

1. Bumps manifest.json version (auto-detected from conventional commits, or explicit patch/minor/major)
2. Prepends a changelog entry to CHANGELOG.md
3. Builds the extension and packages it as a .zip
4. Creates a GitHub Release with the zip attached
5. Uploads to the Chrome Web Store if the CWS secrets are configured

Required GitHub secrets:

Secret	Description
GH_PAT	Admin PAT — bypasses branch protection for the version-bump push
CHROME_EXTENSION_ID	CWS extension ID
CHROME_PUBLISHER_ID	Publisher account ID — from the CWS developer console URL (chrome.google.com/webstore/devconsole/<id>)
CHROME_CLIENT_ID	OAuth2 client ID
CHROME_CLIENT_SECRET	OAuth2 client secret
CHROME_REFRESH_TOKEN	OAuth2 refresh token — obtain with npx chrome-webstore-upload-cli@4 fetch-token

See .github/workflows/release-extension.yml.

---

License

MIT — see LICENSE.